关于写出有效率的js代码的一点心得(1)
2015-04-22 18:59
225 查看
在看过许多大牛们的文章之后,大致对js的原理等有了一定的了解,现在来抛个砖希望各位点评。
要写出有效率的js代码先要牢记这一点,始终声明局部变量。全局变量在js中非常容易创建,然而坏处是会污染公共命名空间。相信前端开发的人都调用过别人的插件,良好的插件只暴露出一个对象名及其属性,插件的方法和变量全部封装在一个对象当中。如var a = 0,b = "string",c = function(){};就已经使用了三个变量名a,b,c,当封装成对象时则变成var obj = {a:0,b:"string,c:function(){}"},只需要调用obj.a~c即可达到相同的目的。
闭包也是被频频提及的东西,略过不谈,这里要讲一个容易出bug的例子,我在开发时写过以下一段代码 :
check:function(array){
for(var i = 0; i < 3; ++ i){
$(array[i]).on('click',function(){
$('#mainView').load("upload.php?type="+i);
});
}
}
一开始我以为不同标签响应的click事件分别对应参数type=1、2、3,结果发现这是type全部等于3,这是因为js是引用 i 而不是创建一个对象并将 i 赋值给它。修改方法有两种,代码如下:
①:check:function(array){
for(var i = 0; i < 3; ++ i){
(function(){
var j = i;
$(array[i]).on('click',function(){
$('#mainView').load("upload.php?type="+j);
});
})();
}
}
②:check:function(array){
for(var i = 0; i < 3; ++ i){
(function(j){
$(array[i]).on('click',function(){
$('#mainView').load("upload.php?type="+j);
});
})(i);
}
}
两种方法的原理是一样的,都是使用立即调用的方式创建了一个局部作用域,获得i的值而不是其引用,不过查阅资料后得知这种方式不能包含break和continue语句,因为这已经是属于函数外部,而且this和arguments的含义也会被改变。
复制字符串数组时同样如此:
var str = ["abc","cde"];
var str2 = str;//此时str2与str指向同一个数组
当时我犯了类似这样的一个错误: str2[1] = "";
str2[1] = str[0] + str[1]; // =>"abc";
正确的做法应该是
str2[1] = str[0] + str[1];//此时str[1]指向一个新的字符串对象
要写出有效率的js代码先要牢记这一点,始终声明局部变量。全局变量在js中非常容易创建,然而坏处是会污染公共命名空间。相信前端开发的人都调用过别人的插件,良好的插件只暴露出一个对象名及其属性,插件的方法和变量全部封装在一个对象当中。如var a = 0,b = "string",c = function(){};就已经使用了三个变量名a,b,c,当封装成对象时则变成var obj = {a:0,b:"string,c:function(){}"},只需要调用obj.a~c即可达到相同的目的。
闭包也是被频频提及的东西,略过不谈,这里要讲一个容易出bug的例子,我在开发时写过以下一段代码 :
check:function(array){
for(var i = 0; i < 3; ++ i){
$(array[i]).on('click',function(){
$('#mainView').load("upload.php?type="+i);
});
}
}
一开始我以为不同标签响应的click事件分别对应参数type=1、2、3,结果发现这是type全部等于3,这是因为js是引用 i 而不是创建一个对象并将 i 赋值给它。修改方法有两种,代码如下:
①:check:function(array){
for(var i = 0; i < 3; ++ i){
(function(){
var j = i;
$(array[i]).on('click',function(){
$('#mainView').load("upload.php?type="+j);
});
})();
}
}
②:check:function(array){
for(var i = 0; i < 3; ++ i){
(function(j){
$(array[i]).on('click',function(){
$('#mainView').load("upload.php?type="+j);
});
})(i);
}
}
两种方法的原理是一样的,都是使用立即调用的方式创建了一个局部作用域,获得i的值而不是其引用,不过查阅资料后得知这种方式不能包含break和continue语句,因为这已经是属于函数外部,而且this和arguments的含义也会被改变。
复制字符串数组时同样如此:
var str = ["abc","cde"];
var str2 = str;//此时str2与str指向同一个数组
当时我犯了类似这样的一个错误: str2[1] = "";
str2[1] = str[0] + str[1]; // =>"abc";
正确的做法应该是
str2[1] = str[0] + str[1];//此时str[1]指向一个新的字符串对象
相关文章推荐
- 关于代码规范的一点心得
- 关于JS的一点心得
- 关于知乎话题“程序员有哪些借口可以让自己写出低质量的代码?”的一点想法
- 关于js的一点小心得
- 关于开发者账号申请需要邓白氏编码的一点小心得
- 谈谈选用技术的原则,技术学习方法技巧,阅读代码的技巧及其它 MSF的一点心得
- 关于web(vs2005)开发的一点感想------开发是看到的cs代码和aspx代码,其实不是不是‘真‘的,只有最后运行时生成的源代码才是真的
- 关于windows metro应用程序开发的一点小心得
- JavaWeb开发中关于JS校验的代码优化问题
- 关于自动化测试的一点心得
- 关于设计数据库的一点心得
- 自说明代码:关于注释的一点事儿
- 关于项目感叹号及报错调试的一点心得
- django:ddtcms项目代码编写计划启用的一点规范和UltraEdit的js脚本.
- js一点代码备用
- 关于Node.js, Jade一点小小的介绍。
- 关于servlet中前台数据后台提取功能的一点心得
- 关于查询总数代码的编写心得
- 在线考试系统关于打印试卷的部分的一点代码