【フロントエンド面接】バイトジャンプ2019校招面経-フロントエンド開発職(二)

【フロントエンド面接】バイトジャンプ2019校招面経-フロントエンド開発職(二)
前の1編は幅が限られていて、長すぎて見ていても気分が悪いので、もう1編やりましょう.
一、jQueryとVueの違い
jQuery軽量級Javascriptライブラリ
VueプログレッシブJavascript-MVVMフレームワーク
jQueryとVueの対比

jQueryはセレクタ($ )を使用してDOMオブジェクトを選択し、それに値付け、値取り、イベントバインドなどの操作を行い、オリジナルのHTMLとの違いはDOMオブジェクトの選択と操作がより容易であり、データとインタフェースが一緒であることにある.例えばlabelタグの内容:$(「lable」)を取得する必要がある.val();,DOM要素の値にも依存します.

Vueは、Vueオブジェクトとデータの双方向バインドメカニズムによって、データとViewを完全に分離する.Vueでは、対応するDOMオブジェクトを参照する必要がなくなり、データとViewは分離されていると言える.

さらにいくつかのVueがjQueryに比べて持つ優位性について話します

コンポーネント化開発、コードの多重化

を向上

データとビューを分離し、

のメンテナンスと操作を容易にする.

仮想DOMは、DOM操作に関心を持つことなく、依然として信頼性の高いパフォーマンスを提供しています.

二、シミュレーションjQueryのセレクタ($())実現
ソースコードは以下の通りです.

(function(){
  jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
  };

  if ( typeof window === "object" && typeof window.document === "object" ) {
    window.jQuery = window.$ = jQuery;
  }
})();

最も簡単な方法
IE 8以上に対してのみ有効

(function(){
  var jQuery = function(selector){
    return document.querySelectorAll(selector);
  };
  window.jQuery = window.$ = jQuery;
})();

querySelectorAll()はDOMオリジナルelementオブジェクトを返し、jQueryのセレクタはjQueryのパッケージオブジェクトを返し、オリジナルDOMオブジェクトといくつかのjQueryの構造関数が持つ属性を含む
少し複雑な実現方法

(function(){
  var jQuery = function(selector){
    var result = {};
    if (selector.substring(0,1) === "#") {
      result = document.getElementById(selector.substring(1));
      // this.tqOjbect.data.push(elem);
    } else if (selector.substring(0,1) === ".") {
      result = document.getElementsByClassName(selector.substring(1));
    } else {
      result = document.getElementsByTagName(selector);
    }
    return result;
  };
  window.jQuery = window.$ = jQuery;
})();

三、jQueryのチェーン呼び出し実現

var MyJQ = function(){}
MyJQ.prototype = {
    css:function(){
       console.log("  css  ");
        return this;
    },
   show:function(){
        console.log("     ");
       return this;
    },
   hide:function(){
        console.log("     ");
   }
   };
var myjq = new MyJQ();
myjq.css().css().show().hide();

四、ネットワークモデルの知識