通过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 相关文章推荐
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
jquery 延迟执行实例介绍
Aug 20 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
js实现可爱的气泡特效
Sep 05 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获取网站百度快照日期的方法
2015/07/29 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
使用Python实现简单的服务器功能
2017/08/25 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
python批量修改文件编码格式的方法
2018/05/31 Python
使用numba对Python运算加速的方法
2018/10/15 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
Python reversed函数及使用方法解析
2020/03/17 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
什么时候用assert
2015/05/08 面试题
教师实习自我鉴定
2013/12/14 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
英语教学随笔感言
2014/02/20 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
七年级话题作文之执着
2019/11/19 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis
详解Node.js如何处理ES6模块
2021/05/15 Javascript
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js