通过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 相关文章推荐
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
js 动态选中下拉框
Nov 26 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
JavaScript实现表单验证功能
Dec 09 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
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
Python脚本实现下载合并SAE日志
2015/02/10 Python
Python抓取百度查询结果的方法
2015/07/08 Python
Python批量更改文件名的实现方法
2017/10/29 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
How to spawning asynchronous work in J2EE
2016/08/29 面试题
优秀毕业生自我鉴定
2014/02/11 职场文书
房产委托公证书
2014/04/08 职场文书
2014年团委工作总结
2014/11/13 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL