跟着JQuery学习建立自己的JS组件基础

为什么要创建JS组件

1. 项目中有很多可以抽取出来的公共代码，我们不想无限复制，不想维护困难

2. 我们想在多个项目中通用

3. 我们想多个项目中只要前端的产品尽量只维护一份，不想合并同步BUG、新特性到每个项目中去

4. 我们想提升我的技(装)术(逼)能力

创建一个轮子，基础要求是什么：

1. 轮子独立，不依赖上下文环境

2. 不污染全局变量或者函数

3. 性能高效

4. 可以自定义部分功能或者配置

5. 文件尽量的小

根据以上要求，我们来看看JQuery是如何解决的，为我们自己造一个金轮(法王)提供那些可以借鉴的知识点。

我们先删除JQuery中实现逻辑的部分，看看整个框架是如何搭建的，本文的JQuery代码版本是v3.5.1

( function( global, factory ) {
    "use strict";
    
    //TODO something
    if ( typeof module === "object" && typeof module.exports === "object" ) {} else {}
})( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
    "use strict";
    
    //TODO something
    
    var jQuery = function( selector, context ) {

        return new jQuery.fn.init( selector, context );
    };
    
    jQuery.fn = jQuery.prototype = {}
    
    if ( typeof noGlobal === "undefined" ) {
	window.jQuery = window.$ = jQuery;
    }
    jQuery.noConflict = function( deep ) {}
    return jQuery;
});

根据以上代码，我们总结下搭建一个组件最基本的几个学习点：

1. 代码自执行，避免变量污染和函数污染

   (function(){})()

2. 返回组件内的入口，避免自执行函数执行完毕后无法被再次访问

   return jQuery;

3. 通过参数传入window，使组件函数中查找window变量时不用通过原型链查找，提高效率

   (function(){})(window)
   

4. 使用prototype  = {} 复制一个对象的方式代替继承多个自定义函数的方法，不过需要注意的是，需自行指定construct构造方法

5. 兼容Commonjs和AMD方发

   if ( typeof module === "object" && typeof module.exports === "object" ) {}
   

6. 使用noconfict解决变量冲突

7. 通过window的传递，在压缩时，可以节省一部分文件大小，当然也可以压缩比如document等这类

基本上根据jquery源码的基础学习，就可以搞一个自己的组件了，加油吧！