通过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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
jquery实现垂直手风琴导航栏
Feb 18 jQuery
基于JavaScript实现简单的轮播图
Mar 03 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
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
php删除指定目录的方法
2015/04/03 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
XML的代替者----JSON
2007/07/21 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
python实现字符串加密成纯数字
2019/03/19 Python
Django框架视图函数设计示例
2019/07/29 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
公务员政审个人鉴定
2014/02/25 职场文书
环保项目建议书
2014/08/26 职场文书
庆七一晚会主持词
2015/06/30 职场文书
《静夜思》教学反思
2016/02/17 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL
windows server2008 开启端口的实现方法
2022/06/25 Servers