在上篇文章我们简单实现了一个 jQuery 的基础结构，不过为了顺应潮流，这次咱把它改为模块化的写法，此举得以有效提升项目的可维护性，因此在后续也将以模块化形式进行持续开发。
模块化开发和编译需要用上 ES6 和 rollup，具体原因和使用方法请参照我之前的《冗余代码都走开——前端模块打包利器 Rollup.js 入门》一文。
本期代码均挂在我的github上，有需要的童鞋自行下载。
1. 基本配置
为了让 rollup 得以静态解析模块，从而减少可能存在的冗余代码，我们得用上 ES6 的解构赋值语法，因此得配合 babel 辅助开发。
在目录下我们新建一个 babel 配置“.babelrc”：
{ "presets": ["es2015-rollup"] }
以及 rollup 配置“rollup.comfig.js”：
var rollup = require( 'rollup' ); var babel = require('rollup-plugin-babel'); rollup.rollup({ entry: 'src/jquery.js',plugins: [ babel() ] }).then( function ( bundle ) { bundle.write({ format: 'umd''rel/jquery.js' }); });
其中入口文件为“src/jquery.js”，并将以 umd 模式输出到 rel 文件夹下。
别忘了确保已安装了三大套：
npm i babel-preset-es2015-rollup rollup rollup-plugin-babel
后续咱们直接执行：
node rollup.config.js
即可实现打包。
2. 模块拆分
从模块功能性入手，我们暂时先简单地把上次的整个 IIFE 代码段拆分为：
src/jquery.js //出口模块 src/core.js //jQuery核心模块 src/global.js //全局变量处理模块 src/init.js //初始化模块
它们的内容分别如下：
jquery.js：
import jQuery from './core'; import global from './global'; import init from './init'; global(jQuery); init(jQuery); export default jQuery;
core.js：
var version = "0.0.1" (selector,context) { return new jQuery.fn.init(selector,context); }; jQuery.fn = jQuery.prototype = { jquery: version,constructor: jQuery,setBackground: (){ this[0].style.background = 'yellow'; this },setColor: this[0].style.color = 'blue' } }; export default jQuery;
init.js：
var init = (jQuery){ jQuery.fn.init = if (!selector) { ; } else { var elem = document.querySelector(selector); if (elem) { this[0] = elem; this.length = 1; } ; } }; jQuery.fn.init.prototype = jQuery.fn; }; export default init;
global.js：
var global = (jQuery){ //走模块化形式的直接绕过 if(typeof module === 'object' && typeof module.exports !== 'undefined') return; var _jQuery = window.jQuery,_$ = window.$; jQuery.noConflict = ( deep ) { 确保window.$没有再次被改写 if ( window.$ === jQuery ) { window.$ = _$; } 确保window.jQuery没有再次被改写 if ( deep && window.jQuery === jQuery ) { window.jQuery = _jQuery; } return jQuery; 返回 jQuery 接口引用 }; window.jQuery = window.$ = jQuery; }; export default global;
留意在 global.js 中我们先加了一层判断，如果使用者走的模块化形式，那是无须考虑全局变量冲突处理的，直接绕过该模块即可。
执行打包后效果如下（rel/jquery.js）：
( (global,factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.jQuery = factory()); }(this,function () { 'use strict'; /** * Created by vajoy on 2016/8/1. */ ; var jQuery = jQuery(selector,context) { { jquery: version,1)"> setBackground() { ; ; },1)"> setColor() { ; } }; var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? (obj) { typeof obj; } : return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : obj; }; * * Created by vajoy on 2016/8/2. */ var global$1 = global(jQuery) { 走模块化形式的直接绕过 if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object' && typeof module !== 'undefined') ; window.$; jQuery.noConflict = (deep) { 确保window.$没有再次被改写 if (window.$ === jQuery) { window.$ = _$; } 确保window.jQuery没有再次被改写 if (deep && window.jQuery === jQuery) { window.jQuery = _jQuery; } return jQuery; }; window.jQuery = window.$ = jQuery; }; init(jQuery) { jQuery.fn.init = selector) { ; } { document.querySelector(selector); (elem) { elem; ; } ; } }; jQuery.fn.init.prototype = jQuery.fn; }; global$1(jQuery); init(jQuery); jQuery; }));
3. extend 完善
如上章所说，我们可以通过 $.extend / $.fn.extend 接口来扩展 JQ 的静态方法/实例方法，也可以简单地实现对象的合并和深/浅拷贝。这是非常重要且实用的功能，在这里我们得完善它。
在 core.js 中我们新增如下代码段：
jQuery.extend = jQuery.fn.extend = () { var options,target = arguments[ 0 ] || {},1)">target为要被合并的目标对象 i = 1 arguments.length,deep = false; 默认为浅拷贝 若第一个参数为Boolean，表示其为决定是否要深拷贝的参数 if ( typeof target === "boolean" ) { deep = target; 那么 target 参数就得往后挪一位了 target = arguments[ i ] || {}; i++; } 若 target 类型不是对象的处理 typeof target !== "object" && typeof target !== "function" ) { target = {}; } 若 target 后没有其它参数（要被拷贝的对象）了，则直接扩展jQuery自身（把target合并入jQuery） if ( i === length ) { target = ; i--; 减1是为了方便取原target（它反过来变成被拷贝的源对象了） } for ( ; i < length; i++ ) { 只处理源对象值不为 null/undefined 的情况 if ( ( options = arguments[ i ] ) != null ) { TODO - 完善Extend } } 返回修改后的目标对象 target; };
该段代码可以判断如下写法并做对应处理：
$.extend( targetObj,copyObj1[,copyObj2...] ) $.extend( truetrue,copyObj )
其它情况会被绕过（返回空对象）。
我们继续完善内部的遍历：
var isObject = (obj){ return Object.prototype.toString.call(obj) === "[object Object]" }; var isArray = return Object.prototype.toString.call(obj) === "[object Array]" }; for ( ; i < length; i++ ) { 遍历被拷贝的源对象 name,clone,copy; 遍历源对象属性 for ( name in options ) { src = target[ name ]; copy = options[ name ]; 避免自己合自己，导致无限循环 if ( target === copy ) { continue; } 深拷贝，且确保被拷贝属性值为对象/数组 if ( deep && copy && ( isObject( copy ) || ( copyIsArray = isArray( copy ) ) ) ) { 被拷贝属性值为数组 ( copyIsArray ) { copyIsArray = false; 若被合并属性不是数组，则设为[] clone = src && isArray( src ) ? src : []; } else { 被拷贝属性值为对象 若被合并属性不是数组，则设为{} clone = src && isObject( src ) ? src : {}; } 右侧递归直到最内层属性值非对象，再把返回值赋给 target 对应属性 target[ name ] = jQuery.extend( deep,copy ); 非对象/数组，或者浅拷贝情况（注意排除 undefined 类型） } else if ( copy !== undefined ) { target[ name ] = copy; } } } } 返回被修改后的目标对象 return target;
这里需要留意的有，我们会通过
jQuery.extend( deep,copy )
来递归生成被合并的 target 属性值，这是为了避免扩展后的 target 属性和被扩展的 copyObj 属性引用了同一个对象，导致互相影响。
通过 extend 递归解剖 copyObj 源对象的属性直到最内层，最内层属性的值（上方代码里的 copy）大致有这么两种情况：
1. copy 为空对象/空数组：
遍历被拷贝对象 空数组/空对象没有可枚举的元素/属性，这里会忽略 return target; 直接返回空数组/空对象
2. copy 为非对象（如“vajoy”）：
if ( deep && copy && ( jQuery.isPlainObject( copy ) || jQuery.isArray( copy ) ) ) ) { 不会执行这里 } if ( copy !== undefined ) { 执行这里 target[ name ] = 返回如 ['vajoy'] 或者 {'name' : 'vajoy'} return target;
从而确保 target 所扩展的每一层属性都跟 copyObj 的是互不关联的。
P.S. jQuery 里的深拷贝实现其实比较简单，如果希望能做到更全面的兼容，可以参考 lodash 中的实现。
4. 建立基础工具模块
在上方的 extend 代码块中其实存在两个不合理的地方：
1. 仅通过 Object.toString.call(obj) === "[object Object]" 作为对象判断条件在我们扩展对象的逻辑中有些片面，适合扩展的对象应当是“纯粹/简单”（plain）的 js Object 对象，但在某些浏览器中，像 document 在 Object.toSting 调用时也会返回和 Object 相同结果；
2. 像 Object.hasOwnProperty 和 Object.prototype.toString.call 等方法在我们后续开发中会经常使用上，如果能把它们写到一个模块中封装起来复用就更好了。
关于 plainObject 的概念可以点这里了解。
基于上述两点，我们新增一个 var.js 来封装这些常用的输出：
export var class2type = {}; 在core.js中会被赋予各类型属性值 export const toString = class2type.toString; 等同于 Object.prototype.toString export const getProto = Object.getPrototypeOf; export const hasOwn = class2type.hasOwnProperty; export const fnToString = hasOwn.toString; 等同于 Object.toString/Function.toString export const ObjectFunctionString = fnToString.call( Object ); 顶层Object构造函数字符串"function Object() { [native code] }"，用于判断 plainObj
然后在 core.js 导入所需接口即可：
import { class2type,toString,getProto,hasOwn,fnToString,ObjectFunctionString } from './var.js';
我们进一步修改 extend 接口代码为：
jQuery.extend = jQuery.fn.extend = {},i = 1 target; target = arguments[ i ] ||typeof target !== "object" && !jQuery.isFunction( target ) ) { 修改点1 target =; i-- Recurse if we're merging plain objects or arrays if ( deep && copy && ( jQuery.isPlainObject( copy ) || 修改点2 ( copyIsArray = jQuery.isArray( copy ) ) ) ) { ; clone = src && jQuery.isArray( src ) ? src : []; 修改点3 } { clone = src && jQuery.isPlainObject( src ) ? src : {}; } target[ name ] = target; }; 新增修改点1，class2type注入各JS类型键值对，配合 jQuery.type 使用，后面会用上 "Boolean Number String Function Array Date RegExp Object Error Symbol".split(" ").forEach((name){ class2type[ "[object " + name + "]" ] = name.toLowerCase(); }); 新增修改点2 jQuery.extend( { isArray: Array.isArray,isPlainObject: ( obj ) { proto,Ctor; 明显的非对象判断，直接返回false if ( !obj || toString.call( obj ) !== "[object Object]" ) { ; } proto = getProto( obj ); 获取 prototype 通过 Object.create( null ) 形式创建的 {} 是没有prototype的 if ( !proto ) { ; } 简单对象的构造函数等于最顶层 Object 构造函数 Ctor = hasOwn.call( proto,"constructor" ) && proto.constructor; typeof Ctor === "function" && fnToString.call( Ctor ) === ObjectFunctionString; },isFunction: return jQuery.type( obj ) === "function"; },获取类型（如'function'） type: ( obj ) { if ( obj == return obj + ""; 'undefined' 或 'null' } typeof obj === "object" || typeof obj === "function" ? class2type[ toString.call( obj ) ] || "object" : obj; } });
这里我们新增了isArray、isPlainObject、isFunction、type 四个 jQuery 静态方法，其中 isPlainObject 比较有趣，为了过滤某些浏览器中的 document 等特殊类型，会对 obj.prototype 及其构造函数进行判断：
1. 通过Object.create( null ) 形式创建的 {} ，或者实例对象都是没有 prototype 的，直接返回 ； 2. 判断其构造函数合法性（存在且等于原生的对象构造器 function Object(){ [native code] }）
关于第二点，实际是直接判断两个构造器字符串化后是否相同：
Function.toString.call(constructor) === Function.toString.call(Object)
另外，需要留意的是，通过这段代码：
name.toLowerCase();
});
class2type 对象是变成了这样的：
{ "[object Boolean]":"boolean" }
所以后续只需要通过
class2type[ Object.prototype.toString(obj) ]
就能获取 obj 的类型名称。isFunction 接口便是利用这种钩子模式判断传入参数是否函数类型的：
isFunction: ;
}
最后。我们执行打包处理：
node rollup.config.js
在 HTML 页面运行下述代码：
var $div = $('div'); $div.setBackground().setColor(); var arr = [1,2,3]; console.log($.type(arr))
效果如下：
留意 $.type 静态方法是我们上方通过 jQuery.extend 扩展进去的：
新增修改点1，class2type注入各JS类型键值对，配合 jQuery.type 使用 "Boolean Number String Function Array Date RegExp Object Error Symbol".split(" ").forEach( name.toLowerCase(); }); jQuery.extend( { type: typeof obj === "function" ? 兼容安卓2.3- 函数表达式类型不正确情况 class2type[ toString.call( obj ) ] || "object" obj; } });
它返回传入参数的类型（小写）。该方法在我们下一章也会直接在模块中使用到。
本章先这样吧，得感谢这台风天赏赐了一天的假期，才有了时间写文章，共勉~
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。