专栏首页一只想做全栈的猫【前端面试】字节跳动2019校招面经 - 前端开发岗(二)

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 阿里 P8 Java 高级工程师,都需要掌握哪些技术栈?

    大家都知道,阿里P8高级技术专家,基本上是一线技术人能达到的最高职级,也是很多程序员追求的目标。

    Java技术栈
  • Java Bean Validation分组校验

    十毛
  • 80后程序员降薪6K,预感中年危机来袭,准备跳槽却碰壁

    一提及程序员,很多人想到的都是“工资高”“技术好”诸如此类的,可见程序员是个非常赚钱的职业,所以每年都会有很多毕业生来选择这个行业。

    美的让人心动
  • leecode刷题(27)-- 合并k个排序链表

    以前做过合并两个有序链表的问题,所以刚开始想到的解法与之类似,我们可以先合并两个有序链表,再用合并的新链表去合并第三个链表:

    希希里之海
  • Spring Boot 注册 Servlet 的三种方法,真是太有用了!

    本文栈长教你如何在 Spring Boot 注册 Servlet、Filter、Listener。

    Java技术栈
  • 为什么大部分码农做不了软件架构师?

    小团队一般 10 人左右,其中常常是技术最牛的人做架构师(或TL)。所以,架构师在广大码农中的占比大概平均不到 10%。而架构师也可以分为初级、中级、高级三档,...

    芋道源码
  • Java高效开发12个精品库

    第一个要说的当然是JUnit了,JUnit毕竟是Java圈目前最知名及常用的测试框架。JUnit之所以能够成为Java圈中最热门的测试库,是因为对于很多项目而言...

    java思维导图
  • 为什么大部分码农做不了系统架构师?

    小团队一般 10 人左右,其中常常是技术最牛的人做架构师(或TL)。所以,架构师在广大码农中的占比大概平均不到 10%。

    Java技术栈
  • 突发!Java首度承认失败,愿永久服软Python!网友:好想哭!

    最近,这个格局已经被悄然打破,正是被来自曾经的小弟,新晋网红Python给硬生生拽下神坛。对此,Java曾表示强烈质疑,最近一份数据榜单悄悄来了!

    AI科技大本营
  • 史上最污技术解读,我竟然秒懂了!

    很多同学对热备,冷备,云备了解不深,我科普一下 IT 行业各种备份术语。以后别闹笑话了。

    用户1516716

扫码关注云+社区

领取腾讯云代金券