JavaScript初学者应注意的七个细节详细介绍


Posted in Javascript onDecember 27, 2012

种种语言都有它特别的地方,对于JavaScript来说,使用var就可以声明任意类型的变量,这门脚本语言看起来很简单,然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个细节,与大家分享。
(1)简化代码
--------------------------------------------------------------------------------
JavaScript定义对象和数组非常简单,我们想要创建一个对象,一般是这样写的:

var car = new Object(); 
car.colour = 'red'; 
car.wheels = 4; 
car.hubcaps = 'spinning'; 
car.age = 4;

下面的写法可以达到同样的效果:
var car = { 
colour:'red', 
wheels:4, 
hubcaps:'spinning', 
age:4 
}

后面的写法要短得多,而且你不需要重复写对象名称。
另外对于数组同样有简洁的写法,过去我们声明数组是这样写的:
var moviesThatNeedBetterWriters = new Array( 
'Transformers','Transformers2','Avatar','Indiana Jones 4' 
);

更简洁的写法是:
var moviesThatNeedBetterWriters = [ 
'Transformers','Transformers2','Avatar','Indiana Jones 4' 
];

对于数组,还有关联数组这样一个特别的东西。 你会发现很多代码是这样定义对象的:
var car = new Array(); 
car['colour'] = 'red'; 
car['wheels'] = 4; 
car['hubcaps'] = 'spinning'; 
car['age'] = 4;

这太疯狂了,不要觉得困惑,“关联数组”只是对象的一个别名而已。
另外一个简化代码的方法是使用三元运算符,举个例子:
var direction; 
if(x < 200){ 
direction = 1; 
} else { 
direction = -1; 
}

我们可以使用如下的代码替换这种写法:
var direction = x < 200 ? 1 : -1;

(2)使用JSON作为数据格式
伟大的Douglas Crockford发明了JSON数据格式来存储数据,你可以使用原生的javascript方法来存储复杂的数据而不需要进行任何额外的转换,例如:
var band = { 
"name":"The Red Hot Chili Peppers", 
"members":[ 
{ 
"name":"Anthony Kiedis", 
"role":"lead vocals" 
}, 
{ 
"name":"Michael 'Flea' Balzary", 
"role":"bass guitar, trumpet, backing vocals" 
}, 
{ 
"name":"Chad Smith", 
"role":"drums,percussion" 
}, 
{ 
"name":"John Frusciante", 
"role":"Lead Guitar" 
} 
], 
"year":"2009" 
}

你可以使用在JavaScript中直接使用JSON,甚至作为API返回的一种格式,在许多的API中被应用,例如:
<div id="delicious"></div><script> 
function delicious(o){ 
var out = '<ul>'; 
for(var i=0;i<o.length;i++){ 
out += '<li><a href="' + o[i].u + '">' + 
o[i].d + '</a></li>'; 
} 
out += '</ul>'; 
document.getElementById('delicious').innerHTML = out; 
} 
</script> 
<script src="http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious"></script>

这里调用delicious 的Web服务获取最新书签,以JSON格式返回,然后将它们显示成无序列表的形式。
从本质上讲,JSON是用于描述复杂的数据最轻量级的方式,而且直接它运行在浏览器中。 你甚至可以在PHP中调用 json_decode()函数来使用它。
(3)尽量使用JavaScript原生函数
--------------------------------------------------------------------------------
要找一组数字中的最大数,我们可能会写一个循环,例如:
var numbers = [3,342,23,22,124]; 
var max = 0; 
for(var i=0;i<numbers.length;i++){ 
if(numbers[i] > max){ 
max = numbers[i]; 
} 
} 
alert(max);

其实,不用循环可以实现同样的功能:
var numbers = [3,342,23,22,124]; 
numbers.sort(function(a,b){return b - a}); 
alert(numbers[0]);

而最简洁的写法是:
Math.max(12,123,3,2,433,4); // returns 433

你甚至可以使用Math.max来检测浏览器支持哪个属性:
var scrollTop= Math.max( 
doc.documentElement.scrollTop, 
doc.body.scrollTop 
);

如果你想给一个元素增加class样式,可能原始的写法是这样的:
function addclass(elm,newclass){ 
var c = elm.className; 
elm.className = (c === '') ? newclass : c+' '+newclass;

而更优雅的写法是:
function addclass(elm,newclass){ 
var classes = elm.className.split(' '); 
classes.push(newclass); 
elm.className = classes.join(' '); 
}

(4)事件委托
--------------------------------------------------------------------------------
事件是JavaScript非常重要的一部分。我们想给一个列表中的链接绑定点击事件,一般的做法是写一个循环,给每个链接对象绑定事件,HTML代码如下:
<h2>Great Web resources</h2> 
<ul id="resources"> 
<li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li> 
<li><a href="http://sitepoint.com">Sitepoint</a></li> 
<li><a href="http://alistapart.com">A List Apart</a></li> 
<li><a href="http://yuiblog.com">YUI Blog</a></li> 
<li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li> 
<li><a href="http://oddlyspecific.com">Oddly specific</a></li> 
</ul>

脚本如下:
// Classic event handling example 
(function(){ 
var resources = document.getElementById('resources'); 
var links = resources.getElementsByTagName('a'); 
var all = links.length; 
for(var i=0;i<all;i++){ 
// Attach a listener to each link 
links[i].addEventListener('click',handler,false); 
}; 
function handler(e){ 
var x = e.target; // Get the link that was clicked 
alert(x); 
e.preventDefault(); 
}; 
})();

更合理的写法是只给列表的父对象绑定事件,代码如下
(function(){ 
var resources = document.getElementById('resources'); 
resources.addEventListener('click',handler,false); 
function handler(e){ 
var x = e.target; // get the link tha 
if(x.nodeName.toLowerCase() === 'a'){ 
alert('Event delegation:' + x); 
e.preventDefault(); 
} 
}; 
})();

(5)匿名函数
--------------------------------------------------------------------------------
关于JavaScript的最头疼的事情之一是,它的变量没有特定的作用范围。 一般情况下,任何变量,函数,数组或对象都是全局性,这意味着在同一页上的其他脚本可以访问并覆盖它们。解决方法是把变量封装在一个匿名函数中。 例如,下面的定义将产生三个全局变量和和两个全局函数:
var name = 'Chris'; 
var age = '34'; 
var status = 'single'; 
function createMember(){ 
// [...] 
} 
function getMemberDetails(){ 
// [...] 
}

封装后如下:
var myApplication = function(){ 
var name = 'Chris'; 
var age = '34'; 
var status = 'single'; 
return{ 
createMember:function(){ 
// [...] 
}, 
getMemberDetails:function(){ 
// [...] 
} 
} 
}(); 
// myApplication.createMember() and 
// myApplication.getMemberDetails() now works.

这被称为单体模式,是JavaScript设计模式的一种,这种模式在YUI中用得非常多,改进的写法是:
var myApplication = function(){ 
var name = 'Chris'; 
var age = '34'; 
var status = 'single'; 
function createMember(){ 
// [...] 
} 
function getMemberDetails(){ 
// [...] 
} 
return{ 
create:createMember, 
get:getMemberDetails 
} 
}(); 
//myApplication.get() and myApplication.create() now work.

(6)代码可配置
--------------------------------------------------------------------------------
你写的代码如果想让别人更容易进行使用或者修改,则需要可配置,解决方案是在你写的脚本中增加一个配置对象。要点如下:
1、在你的脚本中新增一个叫configuration的对象。
2、在配置对象中存放所有其它人可能想要去改变的东西,例如CSS的ID、class名称、语言等等。
3、返回这个对象,作为公共属性以便其它人可以进行重写。
(7)代码兼容性
--------------------------------------------------------------------------------
兼容性是初学者容易忽略的部分,通常学习Javascript的时候都是在某个固定的浏览器中进行测试,而这个浏览器很有可能就是IE,这是非常致命的,因为目前几大主流浏览器中偏偏IE对标准的支持是最差的。最终用户看到的结果也许就是,你写的代码在某个浏览器无法正确运行。你应该把你的代码在主流的浏览器中都测试一下,这也许很费时间,但是应该这样做。
Javascript 相关文章推荐
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
简单了解前端渐进式框架VUE
Jul 20 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 #Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 #Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 #Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 #Javascript
ie支持function.bind()方法实现代码
Dec 27 #Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 #Javascript
多个js与css文件的合并方法详细说明
Dec 26 #Javascript
You might like
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
Python二元赋值实用技巧解析
2019/10/25 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
Python实现自动整理文件的脚本
2020/12/17 Python
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
写好自荐信要注意的问题
2013/11/10 职场文书
安全宣传标语口号
2014/06/06 职场文书
跳蚤市场口号
2014/06/13 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
打架检讨书
2015/01/27 职场文书
个人委托书范文
2015/01/28 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
bat批处理之字符串操作的实现
2022/03/16 Python
ICOM R71E和R72E图文对比解说
2022/04/07 无线电