【前端面试】字节跳动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对象
而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();

四、网络模型知识