<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

(function(){

function jQuery(){

    // 一个对象工厂，以后生成新对象不用new了，直接执行这个方法即可。

    return new jQuery.fn.init();

}

// jQuery的初始方法

jQuery.fn = jQuery.prototype = {

    init:function(){

    }

};

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

// 修正构造器指向

jQuery.prototype.constructor = jQuery;

// 扩展方法

// 这个方法外部用依赖jQuery.type和jQuery.isPlainObject方法。

// 内部第一次用不会用到jQuery.type和jQuery.isPlainObject。

// 1.只有一个参数，且类型是对象，则对jQuery或者jQuery实例进行扩展

// 2.第一个参数是bool值，则来确定是否深拷贝。

// 3.深拷贝是指 拷贝值和被拷贝值都是对象，则进一步遍历复制，而不是直接覆盖。

// 比如{a:{"1":1}},{a:{"2":2}}，浅拷贝结果是{a:{"2":2}},深拷贝结果是{a:{"1":1,"2":2}}

// 4.拷贝时要进行循环引用判断

// 5.对被拷贝值不是数组，不是普通对象，强行生成一个新的。

// 6.可以对多个参数进行合并

jQuery.extend = jQuery.fn.extend = function() {

    var options, name, src, copy, copyIsArray, clone,

        target = arguments[0] || {},

        i = 1,

        length = arguments.length,

        deep = false;

    // 第一个参数是bool值，第二个参数是目标值，索引从第三个参数开始

    // 第一个参数bool为true表示深拷贝

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

        deep = target;

        target = arguments[1] || {};

        i = 2;

    }

    // target不是object，不是array，不是正则，不是日期，不是function，则目标值是一个空对象。

    // typeof object,array,正则，日期 == "object"

    // typeof这个判断方法让人很揪心呐

    // 确定被拷贝对象是个{}类型

    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {

        target = {};

    }

    // 确定被拷贝对象是个{}类型，自己写的

    //    var targetType = jQuery.type(target);

    //    var targetType_arr = ["object","function","array","date","regexp"];

    //    if(targetType_arr.indexOf(targetType) == -1){

    //        target = {};

    //    }

    // 只有一个参数传入，目标值是jQuery函数自己，或者jQuery对象。看谁调用了。

    if ( length === i ) {

        target = this;

        --i;

    }

    // 开始遍历复制

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

        // 不是null或undefined的参数才可以，要知道null == undefined是true

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

            for ( name in options ) {

                // 拿到老，新同个key对应的value值

                src = target[ name ];

                copy = options[ name ];

                // 防止循环引用

                // 当拷贝值是被拷贝的对象，跳出循环

                if ( target === copy ) {

                    continue;

                }

                // 深拷贝，拷贝值非undefined，是普通对象或者是数组

                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = Array.isArray(copy)) ) ) {

                    if ( copyIsArray ) {

                        copyIsArray = false;

                        // 确定一下 被拷贝值也是个数组

                        clone = src && jQuery.isArray(src) ? src : [];

                    } else {

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

                    }

                    // 递归调用

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

                // 只要不是undefined，就可以赋值

                } else if ( copy !== undefined ) {

                    target[ name ] = copy;

                }

            }

        }

    }

    // 返回被拷贝的对象

    return target;

};

// jQuery的类方法

jQuery.extend({

    type:function(obj){

        return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();

    },

    isArray :Array.isArray,

    isNumeric : function( obj ) {

        // 不是无穷，不是NaN就是数字

        return !isNaN( parseFloat(obj) ) && isFinite( obj );

    },

    isPlainObject:function(obj){

        //普通对象不是DOM节点 或者 不是window对象 或者 是'object'

        if ( jQuery.type( obj ) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {

            return false;

        }

        // 当然类似window.location这种对象也不是普通对象，因为它不是来自Object

        // 一切普通对象来自Object。而Object.prototype.isPrototypeOf存在

        if ( obj.constructor &&

                !Object.hasOwnProperty.call( obj.constructor.prototype, "isPrototypeOf" ) ) {

            return false;

        }

        return true;

    },

    isEmptyObject: function( obj ) {

        var name;

        for ( name in obj ) {

            return false;

        }

        return true;

    },

    isFunction: function( obj ) {

        return jQuery.type(obj) === "function";

    },

    isWindow:function(obj){

        // window对象里面有window属性

        return obj != null && obj === obj.window;

    }

});

// jQuery的实例方法

jQuery.fn.extend({

    css:function(){

        alert("css");

    }

});

// 模块化和挂载

~function(){

    // CMD

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

        module.exports = jQuery;

    } else {

    // AMD

        if ( typeof define === "function" && define.amd ) {

            define( "jquery", [], function () { return jQuery; } );

        }

    }

    // 挂载全局变量

    if ( typeof window === "object" && typeof window.document === "object" ) {

        window.jQuery = window.$ = jQuery;

    }

}();

})();

        var arr = jQuery.extend({},{"c":[5,6]})

        console.log(arr);

        var a = jQuery.type(999);

        alert(a)

    </script>

</html>

　　

jQuery的封装和扩展方式的更多相关文章

  1. 一步一步学习underscore的封装和扩展方式

    前言 underscore虽然有点过时,这些年要慢慢被Lodash给淘汰或合并. 但通过看它的源码,还是能学到一个库的封装和扩展方式. 第一步,不污染全局环境. ES5中的JS作用域是函数作用域. 函 ...

  2. jQuery插件主要有两种扩展方式

    jQuery插件主要有两种扩展方式: 扩展全局函数方式. 扩展对象方法方式. 扩展全局函数方式 扩展全局函数方式定义的插件,即类级别插件,可以通过jQuery.extend()来进行定义.定义格式为: ...

  3. ***使用jQuery去封装插件（组件化、模块化的思想），即扩展方法

    如何使用jQuery去封装插件,区分扩展全局方法与扩展一个普通的jQuery实例对象的方法 1.给全局对象扩展方法:①$.方法 = function(参数可加可不加){}  ②使用:$.方法(有参数的 ...

  4. 利用jQuery对插件进行扩展时，方法$.extend()、$.fn.extend()区别与联系

      利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通 ...

  5. 为operamasks增加HTML扩展方式的组件调用

    #为operamasks增加HTML扩展方式的组件调用 ##背景 之前的[博文](http://www.cnblogs.com/p2227/p/3540858.html)中有提及到,发现easyui中 ...

  6. ajax请求原理及jquery $.ajax封装全解析

    .ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...

  7. ASP.NET交互Rest服务接口（Jquery的Get与Post方式）

    ASP.NET交互Rest服务接口(Jquery的Get与Post方式) 本文将通过一个简单的实例,介绍如何创建一个Rest服务接口,以及通过JQUERY去对它进行调用;主要采取两种方式分别为Get跟 ...

  8. 【转】Python基础-封装与扩展、静态方法和类方法

    [转]Python基础-封装与扩展.静态方法和类方法 一.封装与扩展 封装在于明确区分内外,使得类实现者可以修改封装内的东西而不影响外部调用者的代码:而外部使用者只知道一个接口(函数),只要接口(函数 ...

  9. Python基础-封装与扩展、静态方法和类方法

    一.封装与扩展 封装在于明确区分内外,使得类实现者可以修改封装内的东西而不影响外部调用者的代码:而外部使用者只知道一个接口(函数),只要接口(函数)名.参数不变,使用者的代码永远无需改变.这就提供一个 ...

随机推荐

  1. 动手动脑及java程序之用消息框进行数的运算

        动手动脑     自信成就人生 动手动脑1 ✿仔细阅读示例: EnumTest.java,运行它,分析运行结果? package demo; public class Test { publi ...

  2. Android ANR分析(2)

    转自:http://blog.csdn.net/ruingman/article/details/53118202   定义 主线程在特定的时间内没有做完特定的事情 常见的场景 A.input事件超过 ...

  3. **PHP中替换换行符

    PHP中替换换行符 php 不同系统的换行不同系统之间换行的实现是不一样的linux 与unix中用 \nMAC 用 \rwindow 为了体现与linux不同 则是 \r\n所以在不同平台上 实现方 ...

  4. Shell编程基础教程4--控制流结构

    4.控制流结构    4.1.控制结构            4.2.if then else语句        格式: if 条件1 //如果条件1为真 then 命令1 //那么,执行命令1 el ...

  5. 无废话ExtJs 入门教程七[登陆窗体Demo：Login]

    无废话ExtJs 入门教程七[登陆窗体Demo:Login] extjs技术交流,欢迎加群(201926085) 在这节我们通过前几节讲的内容做一个登陆页面,把前几节讲的内容贯穿一下. 1.代码如下: ...

  6. SOLR+LUCENE错误

    java.lang.NoClassDefFoundError: org/apache/lucene/analysis/synonym/SynonymFilter 该错误发生在自定义SOLR服务器时,原 ...

  7. hdu 4039 2011成都赛区网络赛I ***

    两层搜索,直接for循环就行了,还要注意不能是自己的朋友 #include<cstdio> #include<iostream> #include<algorithm&g ...

  8. Linux SSH远程文件/目录传输命令scp

    转载地址:http://www.vpser.net/manage/scp.html 相信各位VPSer在使用VPS时会经常在不同VPS间互相备份数据或者转移数据,大部分情况下VPS上都已经安装了Ngi ...

  9. cocos2dx游戏开发——微信打飞机学习笔记（一）——开发准备

    一.环境的搭建 1.Windows开发准备: (1)软件下载及安装 •下载Cocos2d-x 最新版本:http://www.cocos2d-x.org/download 或者从Cocos2d-x G ...

  10. Chrome浏览器之 Postman 安装

    Postman 是一款发送 HTTP 请求的 Chrome 插件.开发后端程序的同学可以用它来测试自己写的应用程序是否能够正常访问. 现在由于国内的网络限制, Chrome 浏览器里无法访问“扩展程序 ...