jQuery源码探索之路（1）--一个开始

sutaking 发布于2019-08-20 14:43 / 2275人阅读

摘要：在外面可以使用我们可以写一些静态的方法，这样无需构造一个对象也可以使用，比如最后我们通过来将接口暴露出来，这样在全局就可以使用来构造对象或是使用属性方法。附既然看完了，麻烦各位客官老爷点个赞，给个呗，源码地址

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

自己也是在学习过程中，有问题请各位指出，希望大伙能多多支持，给给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...

GPU云服务器云服务器 id从1开始从0开始到1千万用户 jquery 2.1.1 cdn jquery 1 8 2

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81859.html

前端相关汇总

摘要：简介前端发展迅速，开发者富有的创造力不断的给前端生态注入新生命，各种库框架工程化构建工具层出不穷，眼花缭乱，不盲目追求前沿技术，学习框架和库在满足自己开发需求的基础上，然后最好可以对源码进行调研，了解和深入实现原理，从中可以获得更多的收获随 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...

BenCHou 2019-08-23 12:31 评论0 收藏0
3月份前端资源分享

摘要：面试如何防骗一份优秀的前端开发工程师简历是怎么样的作为，有哪些一般人我都告诉他，但是他都不听的忠告如何面试前端工程师更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfront/mo... 3月份前端资源分享 1. Javascript 使用judge.js做信息判断 javascript...

nanchen2251 2019-08-21 15:21 评论0 收藏0
如何合理的规划前端之路

摘要：什么是前端工程师总而言之就是运用等技术，在工作中配合设计师实现用户界面，和后端工程师进行数据对接，完成应用开发的职位。什么是前端工程师？总而言之,就是运用 HTML、CSS、JavaScript 等 Web 技术，在工作中配合UI设计师实现用户界面，和后端工程师进行数据对接，完成 Web 应用开发的职位。Tips:个人博客排版、UI更佳；地址：https://haonancx.git...

skinner 2019-08-02 15:56 评论0 收藏0
如何合理的规划前端之路

摘要：什么是前端工程师总而言之就是运用等技术，在工作中配合设计师实现用户界面，和后端工程师进行数据对接，完成应用开发的职位。什么是前端工程师？总而言之,就是运用 HTML、CSS、JavaScript 等 Web 技术，在工作中配合UI设计师实现用户界面，和后端工程师进行数据对接，完成 Web 应用开发的职位。Tips:个人博客排版、UI更佳；地址：https://haonancx.git...

lwx12525 2019-08-30 13:13 评论0 收藏0
如何合理的规划前端之路

摘要：什么是前端工程师总而言之就是运用等技术，在工作中配合设计师实现用户界面，和后端工程师进行数据对接，完成应用开发的职位。什么是前端工程师？总而言之,就是运用 HTML、CSS、JavaScript 等 Web 技术，在工作中配合UI设计师实现用户界面，和后端工程师进行数据对接，完成 Web 应用开发的职位。Tips:个人博客排版、UI更佳；地址：https://haonancx.git...

Pines_Cheng 2019-08-22 10:45 评论0 收藏0