08月21, 2013

一个对象构架函数

;(function(window, undefined){
 "use strict";
 function $(name) {//构架主函数
 return new $.fn.init(name);
 }
 $.fn = $.prototype = {//这里prototype为了给instanceof用
 constructor:,ドル
 length:0,
 init: function (name) {
 this.name = name;
 this.length = name.toString().length;
 return this;
 },
 say: function () { 
 console.log(this.name);
 return this;//返回this让fn支持连写,如: $().say().say();
 }
 }
 $.fn.init.prototype = $.fn;//追加$()的扩展方法
 $.extend = $.fn.extend = function () {//添加合并对象方法,如果给$添加则使用 $.方法[,()];
 var target = arguments[0] || {}; 
 var length = arguments.length; 
 var options;
 var copy;
 // extend({a:1,b:2}); 直接合并到$上;
 if (length === 1) {
 target = this;
 }
 //合并多个的时候, 合并到第一个上
 for (var i = 0; i < length; i++) {
 if ((options = arguments[i]) != null) {
 for (name in options) {
 copy = options[name]; //复制目标
 if (copy !== undefined) {
 target[name] = copy;
 }
 }
 }
 }
 return target;//如果是合并到$上则返回,ドル否则返回第一个对象
 }
 $.extend({//这里扩展的都是通过 $.扩展 调用
 haha: function () {
 console.log("哈哈");
 return this;//这里的this是$
 },
 each:function(obj,callback){//添加遍历方法,可遍历{}和[];
 var value,
 name,
 length=obj.length,
 isObj = length === undefined;
 if(isObj) {//如果为{};
 for ( name in obj ) {
 if ( value = obj[name], callback.call( value, name, value ) === false ) {
 break;
 }
 }
 } else {
 var i = 0;
 for ( ; i < length; ) {
 if ( value = obj[i++], callback.call( value, i, value ) === false ) {
 break;
 }
 }
 }
 return obj;
 }
 });
 window.$ = $;
})(window);

合并{}对象:

var a = $.extend({},{a:1,b:2,c:3},{a:2},{b:3})
for(var i in a){
 console.log(i+"==="+a[i])
}
a===2
b===3
c===3
var a = {a:2,b:3};
var b = {a:3}
$.extend(a,b);
for(var i in a){
 console.log(i+"==="+a[i])
}
a.a===3
a.b===3

今天看jQuery源码才发现$.each可以遍历{}对象....以前一直以为只能遍历[]于是:

$.each({a:1,b:2},function (i,n){
 console.log(i+"==="+n);
});
a===1
b===2

$.fn的方法都是用在$()后的, $.extend的方法都是在$.方法 的... 他们的this也不一样~

直接 $.haha = function (){}; 用的时候直接 $.haha(); 里面的this指向的$,而 $.fn.haha= function(){};必须在$()后使用... 如:$("xxxx").haha();`

注:部分代码摘自jQuery1.8.3源码;高手请海涵

学习吧提醒:没事多看看源码吧, 可能会发现一些你意想不到的事情.且会让你使用他会更加的得心应手...何乐而不为呢?

本文链接:https://xuexb.com/post/176.html

-- EOF --

发表于 2013年08月21日 16:20:01 ,添加在分类 前端技术 下 ,最后修改于 2017年04月25日 23:03:49

提醒: 本文最后更新于 3182 天前,文中所描述的信息可能已发生改变,请谨慎使用。

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。

AltStyle によって変換されたページ (->オリジナル) /