首页 / JQUERY / jQuery的封装和扩展方式
jQuery的封装和扩展方式
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery的封装和扩展方式，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4168字，纯文字阅读大概需要6分钟。
内容图文
<!
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
>
原文：http://www.cnblogs.com/samwu/p/4300381.html
内容总结
以上是互联网集市为您收集整理的jQuery的封装和扩展方式全部内容，希望文章能够帮你解决jQuery的封装和扩展方式所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】