年末前の試験問題のまとめ

前言
最近面接で出会ったいくつかの問題を分かち合って、いくつかの問題は特に基礎的な問題で、例えば矢印関数が何の役割を果たすかはここでは書かない.
vue実現原理
最も核心的な方法はObjectを通過することです.defineProperty()は属性のハイジャックを実現し、データの変動を傍受する目的を達成する.

はデータリスナーObserverを実現し、データオブジェクトのすべての属性をリスニングすることができ、変動があれば最新値を取得し、購読者

に通知することができる.

は命令解析器Compileを実現し、各要素ノードの命令をスキャンし、解析し、命令テンプレートに基づいてデータを置換し、対応する更新関数

をバインドする.

は、ObserverとCompileとを結ぶ架け橋としてWatcherを実現する、各属性の変動の通知を購読して受け取る、命令バインディングの対応するコールバック関数を実行して、ビューを更新することができる.

mvvmエントリ関数、以上の3つの

を統合
definePropertyには、属性を定義する行為を迂回できないという欠点があります.es 6には、es 6のproxyとreflectを学ぶための解決策があります.Githubの前のmvvm実装を共有します:vue実装原理
vuexとreduxの違い
Vuexは実はVue特化のためのFluxであり、主にVue自体の応答式メカニズムに合わせるためである.もちろん、単一ステータスツリーやテストやホットリロードが容易なAPIなどのReduxの特徴を吸収していますが、Vueのシーンでは一致しない特性を選択的に放棄しています.例えば、強制的なimmutability(状態の変化を追跡できることを保証する場合、強制的なimmutabilityがもたらす収益は限られています)、同構造のために煩雑に設計されたAPI、サードパーティ製ライブラリに依存しなければ状態ツリーのローカル状態を比較的効率的に得ることができないなど(VuexはVue自体の計算属性で直接使用すればよい)ため、Vue+Vuexはより簡潔になり、性能の問題も考慮する必要がなく、その代価としてVuexはVueとしか協力できない.Vue+Reduxもいけないわけではありませんが、Reduxは汎用的な実装としてVueとの適合度がVuexに及ばないに違いありません.
作者:尤雨渓リンク:https://www.zhihu.com/question/38546875/answer/76970954出典:著作権は作者の所有であることを知っている.商業転載は著者に連絡して許可を得てください.非商業転載は出典を明記してください.
Proxyによるデータハイジャック

   const OBSERVERS = new  Set(); //            
   const observeFn = fn => OBSERVERS.add(fn);  //         
   const observeObj = obj => new Proxy(obj, {set});
   function set(target, key, value, receiver) { //  set
     const result = Reflect.set(target, key, value,receiver);
     OBSERVERS.forEach(observeFn => observeFn());
     return result;
  }
  
          var person = observeObj({
            name: '  ',
            age: 20
          });
  
          function print() {
            console.log(`${person.name}, ${person.age}`)
          }
          function warn() {
            alert(person.name)
          }
          observeFn(warn);
          observeFn(print);
          person.name = '  ';

reactライフサイクル&setState
コンポーネントマウントで実行される関数:

constructor():ES 6クラスのコンストラクション関数(stateを初期化またはthisをバインドするため)

getInitialState():ES 5でstateを初期化します.(現在は1に書くだけ)

getDefaultProps():ES 5でpropsを初期化します.ES 6でdefaultProps()メソッドを使用します.(1に書けるprops経由)

componentWillMount:コンポーネントがマウントされる前に呼び出され、一度だけ実行されます.

render():コンポーネントをレンダリングするには、この方法を実装する必要があります.

componentDidMount:コンポーネントがマウントされた後に呼び出され、

が1回のみ実行されます.
コンポーネントのpropsまたはstateが変更されたときに関数を更新します.

componentWillReceiveProps(nextProps):親コンポーネントのrender()メソッドが実行されると、このメソッドがトリガーされます.初期化時に呼び出されません.

shouldComponentUpdate(nextProps,nextState):propsが変更またはstateが変更されたときに呼び出され、初期化時に呼び出されず、booleanに戻ります.trueはrenderメソッドの実行を続行し、fasleは今回のレンダリングを放棄することを示します.

render():コンポーネントをレンダリングします.

コンポーネントアンインストール関数:

componentWillUnmount():コンポーネントをDOMツリーから削除し、メモリオーバーフローを防止します.

setState()は、コンポーネントのstateオブジェクトの更新をスケジュールするために使用されます.ステータスが変化すると、コンポーネントは再レンダリングによって応答します.簡単に言えば、関数を呼び出して、reactの内部で1つのタスクを実行して、現在のstateを取得して、stateの更新を実行して、1つのタスクがまだ完成していない場合、多くのsetstateを合併して、reactはこれらのsetを1つの更新タスクに統一して、実行後にdomの更新を1回だけ行います.
バーチャルdomの原理
js解析htmlを用いて仮想domツリーを生成し,以下のコードを大まかに構成し,この仮想domツリーを用いて本物のdomツリーを生成してページにレンダリングする.
diffアルゴリズム:domを変更すると、古いツリーと比較して、違いを抽出した部分を実際のdomツリーに適用するためにdomツリーが再構築されます.
仮想domを採用する最も根本的な原因はdomの操作性能の消耗が極めて大きいことであり、欠点は多くのコンポーネントの仮想domのjsコードを書くことである.プロジェクトdomによって操作が多くなく、利害を考慮して仮想domを合理的に使用します.

var element = {
  tagName: 'ul', //      
  props: { // DOM   ，          
    id: 'list'
  },
  children: [ //        
    {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
    {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
    {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
  ]
}

     HTML   ：


  
Item 1
  
Item 2
  
Item 3

モバイル端末のスクリーンアダプタ&タッチイベント

flexableなどのプラグインを採用するには、その原理(例えばmeta、htmlを動的に書き換えるfont-size、デバイスdpr値など)

を理解する必要がある.

css 3嗅覚を用いてfont-sizeを変更し、異なるdprのfont-size

に適合する
タッチスクリーンで発生したイベント

click:pcに類似するclickであるが、200 ms程度の遅延

が連続的にトリガされる.

touchstart:指がスクリーンに触れると

がトリガーされます.

touchmove:指が画面上を移動すると

がトリガーされます.

touchend:指がスクリーンから離れると

がトリガーされます.

touchcancel:指が画面に触れたときに突然alertが鳴ったり、システム内の他のtouchを中断した行為があったりすると、このイベント

をトリガーすることができます.
expressとkoaの違い

expressはes 5のcallbackモードを採用し、koaはcoフレームワークを採用してpromiseコールバック

を実現する.

koaは基本構文のみを保持し、express内蔵route、staticなどのミドルウェア

を放棄した.
Webpackの原理と最適化
げんり

初期化パラメータ:プロファイルとShell文から連結パラメータを読み出し、最終パラメータ

を得る.

コンパイル開始:前のステップで得られたパラメータでCompilerオブジェクトを初期化し、すべての構成のプラグインをロードし、オブジェクトのrunメソッドを実行してコンパイルを開始する.

エントリを決定する:構成内のentryに基づいてすべてのエントリファイルを探し出す;

コンパイルモジュール:エントリファイルから、すべての構成のLoaderを呼び出してモジュールを翻訳し、そのモジュールに依存するモジュールを見つけ、本ステップに戻って、すべてのエントリに依存するファイルが本ステップの処理を経たまで;

モジュールコンパイル完了:4ステップ目にLoaderを使用してすべてのモジュールを翻訳した後、各モジュールが翻訳された最終内容とそれらの依存関係が得られた.

出力リソース:エントリとモジュール間の依存関係に基づいて、複数のモジュールを含むChunkを1つずつ組み立て、各Chunkを個別のファイルに変換して出力リストに追加し、このステップは出力内容を修正できる最後の機会である.

出力完了:出力内容を決定した後、構成に基づいて出力の経路とファイル名を決定し、ファイル内容をファイルシステムに書き込む.

最適化

UglifyPluginを利用して参照未使用の不要なコードを削除し、jsコードを圧縮し、cssはminimizeパラメータを追加してcss

を圧縮する.

commonsChunkPluginにより共通コード

を抽出する.

ParallelUglifyPluginマルチスレッド圧縮jsコード

ファイル範囲を縮小し、exclude、inclueなどの配置経路を通じて、パッケージ効率を最適化する

happypackプラグインマルチスレッド処理loader

dllpluginを介してダイナミックリンクライブラリ

にアクセス
...Webpackの最適化方法はまだたくさんありますが、興味があれば自分で調べることができます.
gulpの基本原理
gulpはgruntのアップグレード版と考えられ,nodeのストリームを用いてファイルを処理し,性能を大幅に強化した.各種Transform Streamでファイルの処理を行い、出力します.Transform StreamsはNodeJS Streamの一種で、読み書きも書ける.
babel実装

babel-core:babel変換器自体は、babelのような変換APIを提供する.Transformなどは、コードを翻訳するために使用されます.Webpackのようなbabel-loaderは、これらのAPIを呼び出して翻訳プロセスを完了します.

babylon:jsの構文解析器

babel-traverse:AST(抽象構文ツリー、知りたいことは自分でコンパイル原理をクエリーしてください)の遍歴に使用し、主にpluginに

を使用します.

babel-generator:AST生成コード

babelのpolyfillとruntimeの違い:
Babelのデフォルトでは、Set、Proxy、Reflect、Symbol、Promiseなどのグローバルオブジェクトのみが変換されます.また、Object.assignなどのグローバルオブジェクトに定義されているメソッドも変換されません.
例えば、ES 6は、ArrayオブジェクトにArrayを追加する.fromメソッド.Babelはこの方法をトランスコードしません.この方法を実行するには、babel-polyfillを使用して、現在の環境にスペーサを提供する必要があります.
ssrとクライアントレンダリングの違い

* ssr            html，         ，       seo
*          ，          
*                 
*        ，ssr         ，    。

垂直方向中央揃えの実装

／／／           

parentElement{
        position:relative;
    }

 childElement{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
 }
 
 ／／／  flex
 
 parentElement{
          display: flex;
          align-items: center;
    }
 

Webセキュリティ
xss攻撃防御

出力htmlタグをエスケープする

は、ユーザが提出するデータの検証、長さ制限、特殊文字フィルタリング等の

を行う.
sql注入防御

データベース権限を階層化し、管理者権限

を使用しないでください.

ユーザが入力情報に対してデータベースクエリ敏感語のフィルタリング、制限長さ等

を行う.
後記
差は少なくここまでです.この文章は年を越す前にpo主将が更新し続け、面接を通じて自分の不足を探すのは非常に効率的で、面接官はあなたの履歴書、あなたの学んだこと、的確な考察をします.先端は道が広くて、遠くて、ゆっくり行きましょう.
本文があなたに役に立つと思ったら、starしてみましょう～大転送の術!私のブログGithub