【前端面试】字节跳动2019校招面经 - 前端开发岗（二）

因为之前的一篇篇幅有限，太长了看着也不舒服，所以还是另起一篇吧?

一、 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;
  }
})();

最简单的方法

仅仅对于IE8及以上有效

(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();

【前端面试】字节跳动2019校招面经 - 前端开发岗（二）

【前端面试】字节跳动2019校招面经 - 前端开发岗（二）

一、 jQuery和Vue的区别

jQuery和Vue的对比

二、 模拟jQuery的选择器（$()）实现

最简单的方法

稍微复杂一点的实现方法

三、jQuery的链式调用实现

二、模拟jQuery的选择器（$()）实现