通过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 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 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
PHP_MySQL教程-第一天
2007/03/18 PHP
php allow_url_include的应用和解释
2010/04/22 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
javascript EXCEL 操作类代码
2009/07/30 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
Python实现获取某天是某个月中的第几周
2015/02/11 Python
你应该知道的python列表去重方法
2017/01/17 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
Django实现学员管理系统
2019/02/26 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
python中xlrd模块的使用详解
2021/02/01 Python
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
中层干部竞聘演讲稿
2014/05/15 职场文书
银行自荐信怎么写
2015/03/05 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js