jQuery源码探索之路(1)--一个开始

  1. 自己最近在学习一些js的插件的写法,那么当然就绕不开jquery,于是自己就学习中遇到的一些问题做些总结和记录

  1. 自己也是在学习过程中,有问题请各位指出,希望大伙能多多支持,给给star,点点赞呗,github地址

jquery大概是怎样的

几乎所有的js插件都一样,首先肯定是创建一个闭包,也就是自调用的匿名函数

(function(){
  //各种各样的代码
})()

在js中,这样子我们就创建了一个特殊的函数作用域,在这个域中的代码不会和已有同名方法,变量产生冲突。
我们看看一开始JQ要怎么写,在一步步解释

(function(window,document){
  var Ye = function(selector){
    return new Ye.prototype.init(selector);
  }
  Ye.prototype = {
    constructor : Ye,
    init:function(selector){
      //一些代码
    },
    //很多的原型属性和方法
  }
  Ye.prototype.init.prototype = Ye.prototype;
  //很多的静态属性和方法
  Ye.test = function(){
    console.log('可以使用');
  }
  window.y = Ye;
})(window,document)

这其实就是jq的大概结构了,不过因为jq实在太大,会分很多个模块,然后把上面这个构造模块也包括在一个自调用匿名函数中。

为什么要这么写

首先

var Ye = function(selector){
  return new Ye.prototype.init(selector);
}

这个是一个很巧妙的方法,通过返回一个原型上init()实例来达到在使用中无需用new来调用,然后

Ye.prototype = {
  constructor: Ye,
  length:0,
  init:function(selector){
    //代码
  },
  html:function(v){
  //一些代码
  }
}
Ye.prototype.init.prototype = Ye.prototype;

我们将一些属性和方法写在Ye的prototype中,再用Ye.prototype去覆盖Ye.prototype.init的原型对象,这样我们就能够使用里面的属性和方法了,接下来的重点就在于去构造Ye.prototype了。
在外面

Ye.test = function(){
  console.log("可以使用");
}

我们可以写一些静态的方法,这样无需构造一个Ye对象也可以使用,比如y.test();
最后我们通过window.y = Ye来将接口暴露出来,这样在全局就可以使用y来构造Ye对象或是使用属性方法。

接下来我们就只需要想办法在Ye.prototype实现JQ的各种各样的功能了,是不是很方便。

附:既然看完了,麻烦各位客官老爷点个赞,给个star呗,源码地址:https://github.com/LY55027575…
    原文作者:不只是个看客
    原文地址: https://segmentfault.com/a/1190000008537856
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞