Baidu フロントエンド アカデミーの概要_html/css_WEB-ITnose

少し前、Baidu フロントエンド アカデミーの 2016 年春クラスのトレーニング プログラムがあり、ちょうどシステムとともにプレゼンテーション レベルのテクノロジを学ぶのにちょうど間に合いました。 3.14にチーム編成を完了してから、現在第1フェーズと第2フェーズのタスクを完了するまでに1か月以上かかりましたが、多くの恩恵を受けました。タスクは HTML/CSS と JavaScript の 2 つの部分に分かれており、内容は非常に合理的であり、システムの配置に焦点を当てた膨大なフロントエンド技術の分析が行われます。この記事では、春期クラスの課題の復習と概要を説明します。

HTML/CSS 部分

縦中央に書く 9 つの方法

必ずしも 9 つの方法があるわけではありませんし、フェンネル豆の食べ方も必ずしも 9 つあるわけではありません。最適な位置は、絶対位置決めを使用して実現されます。

#container {    position: absolute;    left: 50%;    top: 50%;    background-color: #ccc;    height: 200px;    width: 400px;    margin-left: -200px;    margin-top: -100px;}

top:50% は、コンテナーの左上隅とブラウザー ウィンドウの上端の間の距離とブラウザーの高さの半分を意味し、コンテナーの高さの半分を次のように使用します。 margin-top を使用して修正し、コンテナーがブラウザー内で垂直方向の中央に配置されるようにします。同様に水平方向のセンタリングも求めることができます。この効果は、タスク 4「タスク 4: 位置決めとセンタリングの問題」に示されています。

モバイル レイアウトと WebView

タスク 11「モバイル Web ページ レイアウトの練習」では、ビューポートを使用して、モバイル側での Web ページの高さと幅の適応表示を制御します。次の行がモバイル対応ページに追加されます。

 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,  user-scalable=0" name="viewport"> 

CSS の距離サイズを元の px から rem に変更する必要があります。 rem (ルート要素のフォントサイズ) はモバイル端末の基本単位であり、html で font-size を設定することで Web ページのサイズとスタイルを同期的に制御できます。

WeChat の組み込みブラウザは WebView を使用しており、共有を表示するときに開かれるページは WebView を使用して表示されます。モバイル Taobao クライアントもページ内で WebView を使用します。タオバオのページは頻繁に変更されます。アニメーションやフローの要件がない場合は、最初に WebView が使用されます。したがって、WebView を頻繁に使用し、Native はほとんど使用しないのがアプリの原則です。

次の方法でアプリがどのテクノロジーを使用しているかを確認できます。開発者モードをオンにします - レイアウトの境界を表示します。領域全体に境界線がある場合、それは WebView です。すべての要素に境界線がある場合はそうではありません。

フレックス レイアウト

フレックスボックス フレキシブル レイアウトは、複雑な Web レイアウトを解決するために登場しました。このレイアウト方法は非常に柔軟です。コンテナの子要素は任意の方向に配置できます。

.flex-container {    height: 100%;    width: 100%;    display: flex;    justify-content: space-around;    align-items: center;}

このようにして、フレックスコンテナ内の div は水平方向に自動的に適応されます。効果については、タスク 10「フレックスボックス レイアウトの演習」を参照してください。

JavaScript 部分

イベント プロキシ メカニズム

イベント プロキシ メカニズムとは、複数の子要素にイベント ハンドラーが追加されるのを避けるために、親要素にイベント ハンドラーを追加することを指します。ページの初期化時に子要素が存在しないシナリオが考えられます。現時点では、DOM ツリーには親要素のみが存在しますが、これらの子要素はクリック イベントにバインドする必要があります。ここでイベント プロキシを使用できます。典型的なアプリケーションは、タスク 16「イベント デリゲートのメカニズムとフォームの検証」で見ることができます。

document.getElementById('aqi-table').addEventListener("click", function(e) {    if(e.target && e.target.nodeName == "BUTTON") {        var city = e.target.parentNode.parentNode.firstChild.firstChild.nodeValue;        console.log("something");    }})

$ を使用して要素を選択します

要素を選択するときは、document.querySelector() または document.getElementByID() を使用できます。この記述方法を簡略化するために関数を定義できます。関数名は jQuery の使用法と同様です。典型的なアプリケーションは、タスク 35「コマンドをリッスンする小さなブロック - コマンド分析」で見ることができます。

function $(id) {  return document.querySelector(id);}$('#buildButton').onclick = function() {    buildRandomWalls();}

並べ替えの視覚化

タスク 19「基本演習」では、基本的な並べ替えアルゴリズムのプロセスを視覚化する必要があります。

ソート中の一時停止は setInterval() を使用して実装されます。アニメーション内の数値を表すバーは、div を使用してシミュレートされます。高さの異なるバーは異なる RGB 値を使用します。

function renderQueue() {  content = ""  for (var ele in queue) {    content +="<div class='outer'>";    content += "<button class='bar' style='height: " + queue[ele] +    "px;background-color:#2288" + queue[ele] + "'></button>";    content +="</div>";  }  document.getElementById('show-box').innerHTML = content;}

ツリーの走査とクエリ

タスク 24「JavaScript とツリー」では、マルチツリーの表示と走査が必要です。 DOM ツリーは本質的にツリー構造であり、トラバーサル アルゴリズムを実装するだけで済みます。走査中、走査された要素は配列 orderQueue に保存されます。走査が完了すると、renderTree() 関数が呼び出され、走査と検索のプロセスが視覚化されます。ここで注意する必要があるのは、ロジック (コントローラー) と視覚化 (ビュー) の分離です。

プリオーダー トラバーサルの実装は次のとおりです。

function preOrder(root) {  orderQueue.push(root);  for (var i = 0; i < root.childElementCount; i++)  {    if (root.children[i] != null)      preOrder(root.children[i]);  }}

デザイン パターン

タスク 26「惑星と宇宙船」では、Mediator デザイン パターンを使用する必要があります。惑星上の司令官からの指令信号は に送られ、メディエーターがそれを宇宙船に送ります。コマンダーは、JSON シグナル {id: 1, content: 'stop'} をメディエーターに送信する責任があります。

信号の呼び出し方法は次のとおりです。

mediator.executeCommand({id: 1, content: "stop"});

メディエーターは次のように構成されています。

var mediator = (function() {  return {    executeCommand: function(command) {      var excute = function() {        if (command.content == "build") {          var newShip = new spaceshipModule(shipID - 1);          return;        }        if (command.content == "start") {          shipQueue[command.id - 1].fly();          return;        }        if (command.content == "stop") {          shipQueue[command.id - 1].stop();        }      }    }  }})();

メディエーターは、信号の構築、飛行、停止、およびその他の制御を担当します。宇宙船。 Mediator デザイン パターンを使用して、2 つのモジュールを分離できます。

A* 経路探索アルゴリズム

経路探索アルゴリズムは、コース全体で最も実装したいものです。始点から終点までの最適な経路を見つけるために使用される最も単純な AI です。 。このアルゴリズムコンペティション「Future Network・Pathfinding」もパスファインディングに関連したものです。 このタスクから、フロントエンド アカデミーのカリキュラムは非常に体系的かつユニークであることがわかります。初期段階では基礎とエンジニアリングに重点が置かれ、後期では複雑なモジュール設計とアルゴリズムが追加されます。

A* 寻路算法是回溯算法的一种，在 findPath.js中，使用 openList 和 closeList 来分别保存未遍历的点和已遍历的点。每次遍历时在 openList 取满足某个要求最优的点（F 值最小的点）继续遍历，和深度优先遍历有点像。遍历寻找出来的路径用链表来保存，遍历的下一个节点指向它的上一个节点（上一个节点是下一节点的 parent）。

每个节点定义如下

function Point(x, y){    this.x = x;    this.y = y;    this.G = 0;    this.H = 0;    this.F = 0;    this.parent = null;    this.updateF = function() {        this.F = this.G + this.H;    };}

其中 H 表示从当前点 a 到终点 B 的估算成本（不走斜边）

function calculateH(a) {    var len = 10 * (Math.abs(pointB.x - a.x) + Math.abs(pointB.y - a.y));    return len;}

G 表示从起点 A 到当前点 a 的距离。F 是 G 和 H 的和。效果见任务 36「 听指令的小方块」。

参考

web app变革之rem

A* 寻路算法

寻路算法可视化实现

https://www.zhihu.com/question/35683612/answer/64628667