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

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

一、 jQuery和Vue的区别

jQuery 轻量级Javascript库

Vue 渐进式Javascript-MVVM框架

jQuery和Vue的对比

1. jQuery使用了选择器（$函数）选取DOM对象，对其进行赋值、取值、事件绑定等操作，和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。
2. Vue通过Vue对象和数据的双向绑定机制，将数据和View完全分离开来。在Vue中，对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的。

3. 再说一些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对象

稍微复杂一点的实现方法

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

四、网络模型知识