`
天梯梦
  • 浏览: 13741054 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

jQuery:从零开始,DIY一个jQuery(2)

 
阅读更多

上篇文章我们简单实现了一个 jQuery 的基础结构,不过为了顺应潮流,这次咱把它改为模块化的写法,此举得以有效提升项目的可维护性,因此在后续也将以模块化形式进行持续开发。

 

模块化开发和编译需要用上 ES6 和 rollup,具体原因和使用方法请参照我之前的《冗余代码都走开——前端模块打包利器 Rollup.js 入门》一文。

 

本期代码均挂在我的github上,有需要的童鞋自行下载(DIY-A-jQuery-master)。

 

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',
        moduleName: 'jQuery',
        dest: '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",
      jQuery = function (selector, context) {

          return new jQuery.fn.init(selector, context);
      };



jQuery.fn = jQuery.prototype = {
    jquery: version,
    constructor: jQuery,
    setBackground: function(){
        this[0].style.background = 'yellow';
        return this
    },
    setColor: function(){
        this[0].style.color = 'blue';
        return this
    }
};


export default jQuery;

 

init.js:

var init = function(jQuery){
    jQuery.fn.init = function (selector, context, root) {
        if (!selector) {
            return this;
        } else {
            var elem = document.querySelector(selector);
            if (elem) {
                this[0] = elem;
                this.length = 1;
            }
            return this;
        }
    };

    jQuery.fn.init.prototype = jQuery.fn;
};



export default init;

 

global.js:

var global = function(jQuery){
    //走模块化形式的直接绕过
    if(typeof exports === 'object' && typeof module !== 'undefined') return;

    var _jQuery = window.jQuery,
        _$ = window.$;

    jQuery.noConflict = function( 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)

(function (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 version = "0.0.1";
  var jQuery = function jQuery(selector, context) {

      return new jQuery.fn.init(selector, context);
  };
  jQuery.fn = jQuery.prototype = {
      jquery: version,
      constructor: jQuery,
      setBackground: function setBackground() {
          this[0].style.background = 'yellow';
          return this;
      },
      setColor: function setColor() {
          this[0].style.color = 'blue';
          return this;
      }
  };

  var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
    return typeof obj;
  } : function (obj) {
    return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj;
  };

  /**
   * Created by vajoy on 2016/8/2.
   */
  var global$1 = function global(jQuery) {
      //走模块化形式的直接绕过
      if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object' && typeof module !== 'undefined') return;

      var _jQuery = window.jQuery,
          _$ = window.$;

      jQuery.noConflict = function (deep) {
          //确保window.$没有再次被改写
          if (window.$ === jQuery) {
              window.$ = _$;
          }

          //确保window.jQuery没有再次被改写
          if (deep && window.jQuery === jQuery) {
              window.jQuery = _jQuery;
          }

          return jQuery; //返回 jQuery 接口引用
      };

      window.jQuery = window.$ = jQuery;
  };

  /**
   * Created by vajoy on 2016/8/1.
   */

  var init = function init(jQuery) {
      jQuery.fn.init = function (selector, context, root) {
          if (!selector) {
              return this;
          } else {
              var elem = document.querySelector(selector);
              if (elem) {
                  this[0] = elem;
                  this.length = 1;
              }
              return this;
          }
      };

      jQuery.fn.init.prototype = jQuery.fn;
  };

  global$1(jQuery);
  init(jQuery);

  return jQuery;

}));

 

 

3. extend 完善

如上章所说,我们可以通过 $.extend / $.fn.extend 接口来扩展 JQ 的静态方法/实例方法,也可以简单地实现对象的合并和深/浅拷贝。这是非常重要且实用的功能,在这里我们得完善它。

 

core.js 中我们新增如下代码段:

jQuery.extend = jQuery.fn.extend = function() {
    var options, 
        target = arguments[ 0 ] || {},  //target为要被合并的目标对象
        i = 1,
        length = arguments.length,
        deep = false; //默认为浅拷贝

    // 若第一个参数为Boolean,表示其为决定是否要深拷贝的参数
    if ( typeof target === "boolean" ) {
        deep = target;

        // 那么 target 参数就得往后挪一位了
        target = arguments[ i ] || {};
        i++;
    }

    // 若 target 类型不是对象的处理
    if ( typeof target !== "object" && typeof target !== "function" ) {
        target = {};
    }

    // 若 target 后没有其它参数(要被拷贝的对象)了,则直接扩展jQuery自身(把target合并入jQuery)
    if ( i === length ) {
        target = this;
        i--;  //减1是为了方便取原target(它反过来变成被拷贝的源对象了)
    }

    for ( ; i < length; i++ ) {

        // 只处理源对象值不为 null/undefined 的情况
        if ( ( options = arguments[ i ] ) != null ) {

            // TODO - 完善Extend
        }
    }

    // 返回修改后的目标对象
    return target;
};

 

该段代码可以判断如下写法并做对应处理:

$.extend( targetObj, copyObj1[, copyObj2...] )
$.extend( true, targetObj, copyObj1[, copyObj2...]  )
$.extend( copyObj )
$.extend( true, copyObj )

 

其它情况会被绕过(返回空对象)

我们继续完善内部的遍历:

var isObject = function(obj){
        return Object.prototype.toString.call(obj) === "[object Object]"
    };
    var isArray = function(obj){
        return Object.prototype.toString.call(obj) === "[object Array]"
    };

    for ( ; i < length; i++ ) { //遍历被拷贝的源对象

        // 只处理源对象值不为 null/undefined 的情况
        if ( ( options = arguments[ i ] ) != null ) {

            var name, clone, copy;
            // 遍历源对象属性
            for ( name in options ) {
                src = target[ name ];
                copy = options[ name ];

                // target已有该属性且完全相等,跳出本次循环
                if ( target === copy ) {
                    continue;
                }

                // 深拷贝,且确保被拷贝属性值为对象/数组
                if ( deep && copy && ( isObject( copy ) ||
                    ( copyIsArray = isArray( copy ) ) ) ) {

                    //被拷贝属性值为数组
                    if ( copyIsArray ) {
                        copyIsArray = false;
                        //若被合并属性不是数组,则设为[]
                        clone = src && isArray( src ) ? src : [];

                    } else {  //被拷贝属性值为对象
                        //若被合并属性不是数组,则设为{}
                        clone = src && isObject( src ) ? src : {};
                    }

                    // 右侧递归直到最内层属性值非对象,再把返回值赋给 target 对应属性
                    target[ name ] = jQuery.extend( deep, clone, copy );

                    // 非对象/数组,或者浅拷贝情况(注意排除 undefined 类型)
                } else if ( copy !== undefined ) {
                    target[ name ] = copy;
                }
            }
        }
    }

    // 返回被修改后的目标对象
    return target;

 

这里需要留意的有,我们会通过

jQuery.extend( deep, clone, copy )

 

来递归生成被合并的 target 属性值,这是为了避免扩展后的 target 属性和被扩展的 copyObj 属性引用了同一个对象,导致互相影响。

 

通过 extend 递归解剖 copyObj 源对象的属性直到最内层,最内层属性的值(上方代码里的 copy)大致有这么两种情况:

 

1. copy 为空对象/空数组:

for ( ; i < length; i++ ) { //遍历被拷贝对象

        // 只处理源对象值不为 null/undefined 的情况
        if ( ( options = arguments[ i ] ) != null ) {

            //空数组/空对象没有可枚举的元素/属性,这里会忽略
        }
    }

    // 返回被修改后的目标对象
    return target;    //直接返回空数组/空对象

 

2. copy 为非对象(如“vajoy”):

if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
                    ( copyIsArray = jQuery.isArray( copy ) ) ) ) {
                                //不会执行这里

                
                } else if ( copy !== undefined ) {// 执行这里
                    target[ name ] = copy;
                }
            }
        }
    }

    // 返回如 ['vajoy'] 或者 {'name' : 'vajoy'}
    return target;

 

从而确保 target 所扩展的每一层属性都跟 copyObj 的是互不关联的。

 

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 = function() {
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[ 0 ] || {},
        i = 1,
        length = arguments.length,
        deep = false;

    if ( typeof target === "boolean" ) {
        deep = target;

        target = arguments[ i ] || {};
        i++;
    }

    if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {  //修改点1
        target = {};
    }

    if ( i === length ) {
        target = this;
        i--;
    }

    for ( ; i < length; i++ ) {

        if ( ( options = arguments[ i ] ) != null ) {

            for ( name in options ) {
                src = target[ name ];
                copy = options[ name ];

                if ( target === copy ) {
                    continue;
                }

                // Recurse if we're merging plain objects or arrays
                if ( deep && copy && ( jQuery.isPlainObject( copy ) ||  //修改点2
                    ( copyIsArray = jQuery.isArray( copy ) ) ) ) {

                    if ( copyIsArray ) {
                        copyIsArray = false;
                        clone = src && jQuery.isArray( src ) ? src : [];  //修改点3

                    } else {
                        clone = src && jQuery.isPlainObject( src ) ? src : {};
                    }

                    target[ name ] = jQuery.extend( deep, clone, copy );

                } else if ( copy !== undefined ) {
                    target[ name ] = copy;
                }
            }
        }
    }

    return target;
};

//新增修改点1,class2type注入各JS类型键值对,配合 jQuery.type 使用,后面会用上
"Boolean Number String Function Array Date RegExp Object Error Symbol".split(" ").forEach(function(name){
    class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

//新增修改点2
jQuery.extend( {
    isArray: Array.isArray,
    isPlainObject: function( obj ) {
        var proto, Ctor;

        // 明显的非对象判断,直接返回false
        if ( !obj || toString.call( obj ) !== "[object Object]" ) {
            return false;
        }

        proto = getProto( obj );  //获取 prototype

        // 通过 Object.create( null ) 形式创建的 {} 是没有prototype的
        if ( !proto ) {
            return true;
        }

        // 简单对象的构造函数等于最顶层 Object 构造函数
        Ctor = hasOwn.call( proto, "constructor" ) && proto.constructor;
        return typeof Ctor === "function" && fnToString.call( Ctor ) === ObjectFunctionString;
    },
    //获取类型(如'function'),后面会用上
    type: function( obj ) {  
        if ( obj == null ) {
            return obj + ""; //'undefined' 或 'null'
        }

        return typeof obj === "object" || typeof obj === "function" ?
        class2type[ toString.call( obj ) ] || "object" :
            typeof obj;
    }

});

 

这里我们新增了isArray、isPlainObject 两个 jQuery 静态方法,其中 isPlainObject 比较有趣,为了过滤某些浏览器中的 document 等特殊类型,会对 obj.prototype 及其构造函数进行判断:

1. 通过Object.create( null ) 形式创建的 {} ,或者实例对象都是没有 prototype 的,直接返回 true;
2. 判断其构造函数合法性(存在且等于原生的对象构造器 function Object(){ [native code] })

关于第二点,实际是直接判断两个构造器字符串化后是否相同:

Function.toString.call(constructor) === Function.toString.call(Object)

 

我们执行打包处理:

node rollup.config.js

 

在 HTML 页面运行下述代码:

    var $div = $('div');
    $div.setBackground().setColor();

    var arr = [1, 2, 3];
    console.log($.type(arr))

 

效果如下:

jQuery:从零开始,DIY一个jQuery(2)

留意 $.type 静态方法是我们上方通过 jQuery.extend 扩展进去的:

//新增修改点1,class2type注入各JS类型键值对,配合 jQuery.type 使用
"Boolean Number String Function Array Date RegExp Object Error Symbol".split(" ").forEach(function(name){
    class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

jQuery.extend( {
    type: function( obj ) {  
        if ( obj == null ) {
            return obj + ""; //'undefined' 或 'null'
        }

        return typeof obj === "object" || typeof obj === "function" ?
        //兼容安卓2.3- 函数表达式类型不正确情况
        class2type[ toString.call( obj ) ] || "object" :
            typeof obj;
    }

});

 

它返回传入参数的类型(小写)。该方法在我们下一章也会直接在模块中使用到。

本章先这样吧,得感谢这台风天赏赐了一天的假期,才有了时间写文章,共勉~

 

转自:http://www.cnblogs.com/vajoy/p/5728755.html

 

更多参考:

jQuery: 操作select option方法集合

jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()

AngularJS jQuery 共存法则

 

上一篇: jQuery:从零开始,DIY一个jQuery(1)

 

本文转自:jQuery:从零开始,DIY一个jQuery(2)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    从零开始学jquery

    【从零开始学jQuery】这个教程旨在帮助初学者全面理解并掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互,是Web开发中的常用工具。 ### (一) 开天辟地入门篇 在入门...

    从零开始学JQuery.pdf

    从零开始学JQuery

    jQueryEasyUI从零开始学源码part1

    本教程“jQueryEasyUI从零开始学源码part1”旨在帮助初学者深入理解jQuery EasyUI的工作原理,通过源码分析来提升开发技能。 首先,我们需要了解jQuery EasyUI的基础概念。jQuery是一个轻量级的JavaScript库,简化...

    从零开始学习jQuery

    ### 从零开始学习jQuery——综合知识点解析 #### 一、引言 随着Web技术的发展,JavaScript已经成为前端开发中不可或缺的一部分。为了简化JavaScript的使用,提高开发效率,jQuery应运而生。本文将从零开始,详细...

    Ajax入门:从零开始学习jQuery pdf

    从零开始学习jQuery pdf,第一篇:开天辟地入门篇;第二篇:jQuery最重要的部分——万能的选择器;第三章:管理Jquery包装集;第四章:使用jQuery操作元素的属性与样式;第五篇:事件与事件对象……  通过一步步的...

    Beginning jQuery:From the Basics of jQuery to Writing your Own Plug-ins

    这本书旨在帮助读者从零基础开始,逐步掌握jQuery的核心概念,并进阶到能够独立编写自己的jQuery插件。在深入探讨这个强大的JavaScript库的过程中,作者不仅提供了理论知识,还附带了丰富的源代码示例,使得学习过程...

    从零开始学习jQuery pdf

    从零开始学习jQuery pdf,第一篇:开天辟地入门篇;第二篇:jQuery最重要的部分——万能的选择器;第三章:管理Jquery包装集;第四章:使用jQuery操作元素的属性与样式;第五篇:事件与事件对象……

    《jQuery: Novice to Ninja》- 2017 英文原版

    jQuery: Novice to Ninja is your fast track to mastering jQuery—the all-conquering JavaScript framework. Used by over half the world’s top 10,000 websites, jQuery is the fastest, most efficient way ...

    从零开始学习JQUERY

    本文作为“从零开始学习JQUERY”系列的第一篇文章,旨在为读者提供一个全面且实用的学习指南,无论你是初学者还是有一定基础的开发者都能从中受益。本文将详细介绍jQuery的基础知识,并通过简单的示例引导读者如何...

    从零开始学习JQuery

    每篇文章都旨在帮助读者从零开始,逐步深入学习和掌握jQuery的各种使用技巧。 ### 开发环境搭建 学习jQuery的第一步是搭建开发环境。在Visual Studio中可以方便地配合使用jQuery,可以通过包管理器如NuGet安装...

    从零开始学习jQuery系列教程

    本系列文章将带您进入jQuery的精彩世界, 其中有很多作者...本篇文章是入门第一篇, 主要是简单介绍jQuery, 通过简单示例指导大家如何编写jQuery代码以及搭建开发环境. 详细讲解了如何在Visual Studio中配合使用jQuery.

    JQuery教程-从零开始学习jQuery

    ### JQuery教程:从零开始学习JQuery #### 开天辟地入门篇 ##### 摘要 本篇文章作为系列教程的开端,旨在为初学者提供一个全面了解JQuery的起点。无论你是刚接触编程的新手还是已经有了一定前端经验的开发者,都...

Global site tag (gtag.js) - Google Analytics