通过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 相关文章推荐
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 Javascript
在vue中嵌入外部网站的实现
Nov 13 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
初学CAKEPHP 基础教程
2009/11/02 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
对vue生命周期的深入理解
2020/12/03 Vue.js
Python中AND、OR的一个使用小技巧
2015/02/18 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
Python Pillow Image Invert
2019/01/22 Python
利用Python实现kNN算法的代码
2019/08/16 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
农民入党思想汇报
2014/01/03 职场文书
公积金单位接收函
2014/01/11 职场文书
便利店投资创业计划书
2014/02/08 职场文书
2014年冬季防火方案
2014/05/21 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
企业战略合作意向书
2015/05/08 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
教务处干事工作总结
2015/08/14 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
如何理解PHP核心特性命名空间
2021/05/28 PHP
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers