通过jQuery源码学习javascript(三)


Posted in Javascript onDecember 27, 2012

疑问

第一篇中有位博友提出了以下的问题,我也不太明白,如果有明白的,能否告知一、二。

通过jQuery源码学习javascript(三)

var str = "test"; 
for(var a in str){ 
console.log(a + ":" + str[ a ]); 
}

输出结果
这是一个字符串对象,在使用for的时候,会出现上面的情况。

通过jQuery源码学习javascript(三)

自调用匿名函数(function(){})(window)
(function(window, undefined){ 
// jquery code 
})(window);

代码解析:

第一个括号:创建一个匿名函数。

第二个括号:立即执行。

传入window变量原因:

使window变量由全局变量变为局部变量,不需要将作用域链回退到顶层作用域,以便更快的访问window。
在参数列表中增加undefined原因:

在自调用匿名函数的作用域内,确保undefined是真的未定义。
这样设计的好处:

创建私有命名空间。函数体内的变量和方法,不会影响全局空间。不会与其他程序的变量发生冲突。

功能扩展extend()

根据一般的设计习惯,可以直接通过点(.)语法实现,或者在prototype对象结构中增加一个属性即可。——jQuery框架是通过extend()函数来实现功能扩展的。

我们也做个类似的方法。——把指定参数对象包含的所有属性复制给cQuery或cQuery.prototype对象。

(function(){ 
var 
_cQuery = window.cQuery, 
cQuery = function(){ 
return new cQuery.fn.init(); 
}; cQuery.fn = cQuery.prototype = { 
init : function () { 
return this; 
} 
}; 
cQuery.fn.init.prototype = cQuery.fn; 
cQuery.extend = cQuery.fn.extend = function( obj ) { 
for (var prop in obj) { 
this[ prop ] = obj[ prop ]; 
} 
return this; 
} 
cQuery.fn.extend({ 
test : function() { 
console.log('测试!'); 
} 
}); 
window.C = window.cQuery = cQuery; 
})(); 
// 调用方式 
C().test();

好处:

1、方便用户快速扩展jQuery框架的功能,不会破坏jQuery框架的原型结构。

2、方便管理。
注意:

通过prototype扩展的对象,我们必须通过实例化函数来调用(如cQuery().test(),而不能使用cQuery.test())

对象url参数化param()

(function(){ 
var 
_cQuery = window.cQuery, 
cQuery = function(){ 
return new cQuery.fn.init(); 
}; cQuery.fn = cQuery.prototype = { 
init : function () { 
return this; 
} 
}; 
cQuery.param = function(obj) { 
var prefix, s = []; 
for ( prefix in obj ) { 
s[ s.length ] = encodeURIComponent( prefix ) + "=" + encodeURIComponent( obj[ prefix ]); 
} 
return s.join( "&" ); 
} 

cQuery.fn.init.prototype = cQuery.fn; 
window.C = window.cQuery = cQuery; 
})(); 
var param = cQuery.param({"name":"chuanshanjia", "age":30}); 
console.log( param );

输出结果

通过jQuery源码学习javascript(三)

对象url参数化:有利于结构化,易于维护。如果在url后面加一坨的参数列表,难道看着不眼晕吗?

总结

暂时写到这里,如果大家有所补充,那最好不过了。——大家多交流互相学习下。

Javascript 相关文章推荐
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
javascript检测浏览器flash版本的实现代码
Dec 06 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
node.js中的console.info方法使用说明
Dec 09 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
Layui数据表格之单元格编辑方式
Oct 26 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
JS原型对象通俗"唱法"
Dec 27 #Javascript
通过jQuery源码学习javascript(二)
Dec 27 #Javascript
js 判断一个元素是否在页面中存在
Dec 27 #Javascript
通过jQuery源码学习javascript(一)
Dec 27 #Javascript
Eval and new funciton not the same thing
Dec 27 #Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 #Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 #Javascript
You might like
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
Django实现基于类的分页功能
2019/10/31 Python
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
自我介绍演讲稿
2014/01/15 职场文书
司马光教学反思
2014/02/01 职场文书
研修第一天随笔感言
2014/02/15 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
红色故事演讲稿
2014/05/22 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
canvas 中如何实现物体的框选
2022/08/05 Javascript