通过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 相关文章推荐
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
js格式化时间的简单实例
Nov 27 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 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+xml编程之SimpleXML的应用实例
2015/01/24 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
服装销售人员求职自我评价
2013/09/26 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
2015年公司工作总结
2015/04/25 职场文书
2015中学学校工作总结
2015/07/20 职场文书
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js