jQuery的封装和扩展方式
<!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的封装和扩展方式的更多相关文章
- 一步一步学习underscore的封装和扩展方式
前言 underscore虽然有点过时,这些年要慢慢被Lodash给淘汰或合并. 但通过看它的源码,还是能学到一个库的封装和扩展方式. 第一步,不污染全局环境. ES5中的JS作用域是函数作用域. 函 ...
- jQuery插件主要有两种扩展方式
jQuery插件主要有两种扩展方式: 扩展全局函数方式. 扩展对象方法方式. 扩展全局函数方式 扩展全局函数方式定义的插件,即类级别插件,可以通过jQuery.extend()来进行定义.定义格式为: ...
- ***使用jQuery去封装插件（组件化、模块化的思想），即扩展方法
如何使用jQuery去封装插件,区分扩展全局方法与扩展一个普通的jQuery实例对象的方法 1.给全局对象扩展方法:①$.方法 = function(参数可加可不加){} ②使用:$.方法(有参数的 ...
- 利用jQuery对插件进行扩展时，方法$.extend()、$.fn.extend()区别与联系
利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通 ...
- 为operamasks增加HTML扩展方式的组件调用
#为operamasks增加HTML扩展方式的组件调用 ##背景 之前的[博文](http://www.cnblogs.com/p2227/p/3540858.html)中有提及到,发现easyui中 ...
- ajax请求原理及jquery $.ajax封装全解析
.ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...
- ASP.NET交互Rest服务接口（Jquery的Get与Post方式）
ASP.NET交互Rest服务接口(Jquery的Get与Post方式) 本文将通过一个简单的实例,介绍如何创建一个Rest服务接口,以及通过JQUERY去对它进行调用;主要采取两种方式分别为Get跟 ...
- 【转】Python基础-封装与扩展、静态方法和类方法
[转]Python基础-封装与扩展.静态方法和类方法 一.封装与扩展 封装在于明确区分内外,使得类实现者可以修改封装内的东西而不影响外部调用者的代码:而外部使用者只知道一个接口(函数),只要接口(函数 ...
- Python基础-封装与扩展、静态方法和类方法
一.封装与扩展 封装在于明确区分内外,使得类实现者可以修改封装内的东西而不影响外部调用者的代码:而外部使用者只知道一个接口(函数),只要接口(函数)名.参数不变,使用者的代码永远无需改变.这就提供一个 ...
随机推荐
- js 闭包原理理解
问题?什么是js(JavaScript)的闭包原理,有什么作用? 一.定义 官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 很显然 ...
- 【JAVA 其它流对象】
一.PrintStream类. 该流是字节流. public class PrintStream extends FilterOutputStream implements Appendable, C ...
- .NET Framework 4 与 .NET Framework 4 Client Profile
今天碰到的一个问题和Client Profile相关的.问题是这样的:一个WPF工程,需要引用另外几个.NET的assembly, 在WPF工程中添加了对这几个assembly的引用,并在程序中可以添 ...
- hdu 1866 几个矩形面积的和 ***
给出几个矩形,求出面积之和,相交区域只能算一次 一开始想用线段树求个并,后来发现没办法知道并了几次,然后就不会了 看了题解 本题其实很简单,但是想要想到转化也很不容易,因为本题是求面积之和,但是两个矩 ...
- STUN和TURN技术浅析
转自:http://blog.csdn.net/yu_xiang/article/details/9227023 在现实Internet网络环境中,大多数计算机主机都位于防火墙或NAT之后,只有少部分 ...
- VS2010和matlab2010混合编程中char16_t重定义的问题
原因是VS2010中的yvals.h添加了char16_t的定义,而Matlab的matrix.h也包含对char16_t的定义,所以同时包含这两个头文件的话,会导致重复定义char16_t的错误.只 ...
- Mac系统修改Intellij Idea默认JDK版本
Intellij IDEA 默认情况下,使用的jdk的版本是1.6,当第一次启动IDEA的时候,如果系统中未安装jdk,则系统会自动到苹果官网下载jdk安装文件.如果你的系统已经安装了jdk1.7或是 ...
- 用 C# 实现一个简单的 Rest Service 供外部调用
用 C# 实现一个简单的 Restful Service 供外部调用,大体总结为4点: The service contract (the methods it offers). How do yo ...
- java的安装环境配置详细步骤
--------------------声明,如果你有什么建议或者不懂的地方,欢迎回复,我们可以互相学习,转载请注明出处,谢谢---------------- 首先得安装jdk(Java Develo ...
- Linux学习笔记(22) Linux启动管理
1. 系统运行级别 运行级别 含义 关机 1 单用户模式,可想象为windows的安全模式,主要用于系统修复 2 不完全的命令行模式,不含NFS服务 完全的命令行模式,就是标准字符界面 4 系统保留 ...