`

转载:JavaScript初学者应注意的七个细节

 
阅读更多
转载文章的博客地址:http://www.cnblogs.com/lhb25/tag/javascript/
(1)简化代码


--------------------------------------------------------------------------------



JavaScript定义对象和数组非常简单,我们想要创建一个对象,一般是这样写的:  

view sourceprint?
1 var car = new Object(); 

2 car.colour = 'red'; 

3 car.wheels = 4; 

4 car.hubcaps = 'spinning'; 

5 car.age = 4;
下面的写法可以达到同样的效果:


view sourceprint?
1 var car = { 

2     colour:'red', 

3     wheels:4, 

4   hubcaps:'spinning', 

5   age:4 

6 }
后面的写法要短得多,而且你不需要重复写对象名称。

另外对于数组同样有简洁的写法,过去我们声明数组是这样写的:


view sourceprint?
1 var moviesThatNeedBetterWriters = new Array( 

2   'Transformers','Transformers2','Avatar','Indiana Jones 4'

3 );
更简洁的写法是: 


view sourceprint?
1 var moviesThatNeedBetterWriters = [ 

2   'Transformers','Transformers2','Avatar','Indiana Jones 4'

3 ];
对于数组,还有关联数组这样一个特别的东西。 你会发现很多代码是这样定义对象的:


view sourceprint?
1 var car = new Array(); 

2 car['colour'] = 'red'; 

3 car['wheels'] = 4; 

4 car['hubcaps'] = 'spinning'; 

5 car['age'] = 4;
这太疯狂了,不要觉得困惑,“关联数组”只是对象的一个别名而已。

另外一个简化代码的方法是使用三元运算符,举个例子:


view sourceprint?
1 var direction; 

2 if(x < 200){ 

3   direction = 1; 

4 } else { 

5   direction = -1; 

6 }
我们可以使用如下的代码替换这种写法:


view sourceprint?
1 var direction = x < 200 ? 1 : -1;




(2)使用JSON作为数据格式  




--------------------------------------------------------------------------------



伟大的Douglas Crockford发明了JSON数据格式来存储数据,你可以使用原生的javascript方法来存储复杂的数据而不需要进行任何额外的转换,例如:

view sourceprint?
01 var band = { 

02   "name":"The Red Hot Chili Peppers", 

03   "members":[ 

04     { 

05       "name":"Anthony Kiedis", 

06       "role":"lead vocals"

07     }, 

08     { 

09       "name":"Michael 'Flea' Balzary", 

10       "role":"bass guitar, trumpet, backing vocals"

11     }, 

12     { 

13       "name":"Chad Smith", 

14       "role":"drums,percussion"

15     }, 

16     { 

17       "name":"John Frusciante", 

18       "role":"Lead Guitar"

19     } 

20   ], 

21   "year":"2009"

22 }
你可以使用在JavaScript中直接使用JSON,甚至作为API返回的一种格式,在许多的API中被应用,例如:



view sourceprint?
01 <div id="delicious"></div><script> 

02 function delicious(o){ 

03   var out = '<ul>'; 

04   for(var i=0;i<o.length;i++){ 

05     out += '<li><a href="' + o[i].u + '">' + 

06            o[i].d + '</a></li>'; 

07   } 

08   out += '</ul>'; 

09   document.getElementById('delicious').innerHTML = out; 

10 } 

11 </script> 

12 <script src="http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious"></script>
这里调用delicious 的Web服务获取最新书签,以JSON格式返回,然后将它们显示成无序列表的形式。

从本质上讲,JSON是用于描述复杂的数据最轻量级的方式,而且直接它运行在浏览器中。 你甚至可以在PHP中调用 json_decode()函数来使用它。

(3)尽量使用JavaScript原生函数


--------------------------------------------------------------------------------



要找一组数字中的最大数,我们可能会写一个循环,例如:



view sourceprint?
1 var numbers = [3,342,23,22,124]; 

2 var max = 0; 

3 for(var i=0;i<numbers.length;i++){ 

4   if(numbers[i] > max){ 

5     max = numbers[i]; 

6   } 

7 } 

8 alert(max);
其实,不用循环可以实现同样的功能:


view sourceprint?
1 var numbers = [3,342,23,22,124]; 

2 numbers.sort(function(a,b){return b - a}); 

3 alert(numbers[0]);
而最简洁的写法是:


view sourceprint?
1 Math.max(12,123,3,2,433,4); // returns 433
你甚至可以使用Math.max来检测浏览器支持哪个属性:


view sourceprint?
1 var scrollTop= Math.max( 

2  doc.documentElement.scrollTop, 

3  doc.body.scrollTop 

4 );
如果你想给一个元素增加class样式,可能原始的写法是这样的:


view sourceprint?
1 function addclass(elm,newclass){ 

2   var c = elm.className; 

3   elm.className = (c === '') ? newclass : c+' '+newclass;
而更优雅的写法是:


view sourceprint?
1 function addclass(elm,newclass){ 

2   var classes = elm.className.split(' '); 

3   classes.push(newclass); 

4   elm.className = classes.join(' '); 

5 }
 

(4)事件委托



--------------------------------------------------------------------------------



事件是JavaScript非常重要的一部分。我们想给一个列表中的链接绑定点击事件,一般的做法是写一个循环,给每个链接对象绑定事件,HTML代码如下:

view sourceprint?
1 <h2>Great Web resources</h2> 

2 <ul id="resources"> 

3   <li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li> 

4   <li><a href="http://sitepoint.com">Sitepoint</a></li> 

5   <li><a href="http://alistapart.com">A List Apart</a></li> 

6   <li><a href="http://yuiblog.com">YUI Blog</a></li> 

7   <li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li> 

8   <li><a href="http://oddlyspecific.com">Oddly specific</a></li> 

9 </ul>
脚本如下:


view sourceprint?
01 // Classic event handling example 

02 (function(){ 

03   var resources = document.getElementById('resources'); 

04   var links = resources.getElementsByTagName('a'); 

05   var all = links.length; 

06   for(var i=0;i<all;i++){ 

07     // Attach a listener to each link 

08     links[i].addEventListener('click',handler,false); 

09   }; 

10   function handler(e){ 

11     var x = e.target; // Get the link that was clicked 

12     alert(x); 

13     e.preventDefault(); 

14   }; 

15 })();
更合理的写法是只给列表的父对象绑定事件,代码如下:


view sourceprint?
01 (function(){ 

02   var resources = document.getElementById('resources'); 

03   resources.addEventListener('click',handler,false); 

04   function handler(e){ 

05     var x = e.target; // get the link tha 

06     if(x.nodeName.toLowerCase() === 'a'){ 

07       alert('Event delegation:' + x); 

08       e.preventDefault(); 

09     } 

10   }; 

11 })();
 

(5)匿名函数



--------------------------------------------------------------------------------


关于JavaScript的最头疼的事情之一是,它的变量没有特定的作用范围。 一般情况下,任何变量,函数,数组或对象都是全局性,这意味着在同一页上的其他脚本可以访问并覆盖它们。解决方法是把变量封装在一个匿名函数中。 例如,下面的定义将产生三个全局变量和和两个全局函数:

view sourceprint?
1 var name = 'Chris'; 

2 var age = '34'; 

3 var status = 'single'; 

4 function createMember(){ 

5   // [...] 

6 } 

7 function getMemberDetails(){ 

8   // [...] 

9 }
封装后如下:


view sourceprint?
01 var myApplication = function(){ 

02   var name = 'Chris'; 

03   var age = '34'; 

04   var status = 'single'; 

05   return{ 

06     createMember:function(){ 

07       // [...] 

08     }, 

09     getMemberDetails:function(){ 

10       // [...] 

11     } 

12   } 

13 }(); 

14 // myApplication.createMember() and 

15 // myApplication.getMemberDetails() now works.
这被称为单体模式,是JavaScript设计模式的一种,这种模式在YUI中用得非常多,改进的写法是: 

view sourceprint?
01 var myApplication = function(){ 

02   var name = 'Chris'; 

03   var age = '34'; 

04   var status = 'single'; 

05   function createMember(){ 

06     // [...] 

07   } 

08   function getMemberDetails(){ 

09     // [...] 

10   } 

11   return{ 

12     create:createMember, 

13     get:getMemberDetails 

14   } 

15 }(); 

16 //myApplication.get() and myApplication.create() now work.
  

(6)代码可配置



--------------------------------------------------------------------------------

你写的代码如果想让别人更容易进行使用或者修改,则需要可配置,解决方案是在你写的脚本中增加一个配置对象。要点如下:

1、在你的脚本中新增一个叫configuration的对象。

2、在配置对象中存放所有其它人可能想要去改变的东西,例如CSS的ID、class名称、语言等等。

3、返回这个对象,作为公共属性以便其它人可以进行重写。

 


(7)代码兼容性


--------------------------------------------------------------------------------

  兼容性是初学者容易忽略的部分,通常学习Javascript的时候都是在某个固定的浏览器中进行测试,而这个浏览器很有可能就是IE,这是非常致命的,因为目前几大主流浏览器中偏偏IE对标准的支持是最差的。最终用户看到的结果也许就是,你写的代码在某个浏览器无法正确运行。你应该把你的代码在主流的浏览器中都测试一下,这也许很费时间,但是应该这样做。
分享到:
评论

相关推荐

    JavaScript初学者应注意的七个细节小结

    标题中提到的知识点是"JavaScript初学者应注意的七个细节小结",这里说明了JavaScript初学者在学习这门语言时需要注意的一些关键细节,这些细节对于提高代码质量、优化代码结构、加深对JavaScript特性的理解至关重要...

    javascript基础:供新人初学者学习

    对于初学者来说,掌握JavaScript的基础知识至关重要,因为它是现代Web开发不可或缺的一部分。 1. **JavaScript简介**: JavaScript是由Brendan Eich在1995年为 Netscape Navigator 浏览器开发的,最初名为...

    一个适合初学者的经典的javaScript教程

    本教程针对初学者,旨在提供一个经典的学习路径,让你轻松掌握JavaScript的基础知识,并体验到编程的乐趣。 JavaScript,简称JS,是由Netscape公司的Brendan Eich在1995年发明的。它是一种解释型、弱类型的脚本语言...

    JavaScript初学者例子

    对于初学者来说,理解和掌握JavaScript的基础至关重要。以下是一些在学习JavaScript过程中会遇到的重要知识点: 1. **变量与数据类型**:JavaScript支持七种数据类型,包括基本数据类型(Number、String、Boolean、...

    jquery+纯生javascript写的适合初学者

    标题中的“jquery+纯生javascript写的适合初学者”暗示了这个压缩包可能包含了一系列使用JavaScript和jQuery库编写的示例代码或教程,旨在帮助初学者理解这两种技术的基础和交互方式。JavaScript是一种广泛用于Web...

    奉献给JavaScript初学者的编写开发的七个细节

    (1)简化代码 JavaScript定义对象和数组非常简单,我们想要创建一个对象,一般是这样写的: 代码如下: var car = new Object(); car.colour = ‘red’; car.wheels = 4; car.hubcaps = ‘spinning’; car.age = 4; ...

    javascript 笔记 适合初学者 jquery chm 资料

    对于初学者来说,理解JavaScript的基本语法、数据类型、控制结构、函数以及事件处理是学习的关键。 这份"javascript笔记"可能是作者根据自己的学习和实践整理而成,对初学者来说是非常宝贵的资源。笔记中可能涵盖了...

    javascript初学者必备,初学者适用。

    作为初学者,理解JavaScript的基础概念和语法是至关重要的。 1. **基础语法** JavaScript是基于ECMAScript规范的,它的语法深受C和Java的影响。基本数据类型包括字符串、数字、布尔值,还有特殊的null和undefined...

    javascript初学教程 多本 pdf

    首先,从标题和描述我们可以推测,这是一份针对JavaScript初学者的教程资料集,包含多个章节,覆盖了从语言概述到深入编程的多个方面。这些PDF文件以章节的形式划分,便于逐步学习和理解。 让我们详细探讨一下这些...

    语言程序设计资料:JavaScript手册.doc

    1. **简单易学**:JavaScript语法简洁,适合初学者入门。 2. **跨平台**:它可以在多种操作系统和浏览器中运行,如IE和Navigator。 3. **符合ECMA标准**:JavaScript遵循ECMA-262规范,确保代码的可移植性。 4. **...

    编程实践:JavaScript进阶100例

    《编程实践:JavaScript进阶100例》是一份专为初级JavaScript学习者设计的资源,旨在通过丰富的实例帮助初学者深入理解这门语言。这份PDF文档包含了一系列精心挑选的编程练习,覆盖了JavaScript的核心概念和实用技巧...

    web网页制作初学者

    在“web网页制作初学者”这个主题中,我们主要探讨的是如何从零开始学习创建一个基本的网页,特别是在教育背景下的应用,例如学校网站。在这个过程中,我们将关注以下几个关键知识点: 1. HTML(HyperText Markup ...

    JavaScript资料(适合初学者)

    这个压缩包集合了一些适合初学者的JavaScript学习资源,包括`.chm`(Microsoft帮助文档格式)和一个`.rar`文件,这些资料将帮助初学者深入理解和掌握JavaScript的基本概念和实践技巧。 1. **JavaScript宝典.chm** -...

    JavaScript常用初学者帮助大全

    JavaScript是Web开发中不可或缺的一部分,尤其对于初学者来说,掌握其基本概念和常用技巧至关重要。这份"JavaScript常用初学者帮助大全"将引导你逐步走进JavaScript的世界。 首先,JavaScript是一种解释型、弱类型...

    初学者之JAVAScript参考资料集

    作为初学者,了解并掌握JavaScript的基础知识至关重要。以下是一些关于JavaScript的关键知识点,涵盖了从基本语法到高级特性的全面解析。 1. **变量与数据类型**: - JavaScript是弱类型语言,变量声明时无需指定...

    JavaScript高级编程(初学者的好帮手)

    ### JavaScript高级编程(初学者的好帮手) #### 1. JavaScript简介 JavaScript 是一种轻量级的、解释型或即时编译型的编程语言。它最初由 Netscape 公司的 Brendan Eich 设计用于 Web 浏览器,并在1995年首次发布...

    教程JavaScript初学者的挑战.zip

    作为初学者,掌握JavaScript是踏入Web开发领域的基础。 首先,JavaScript是解释型的,这意味着代码无需编译,而是逐行在浏览器中执行。这种特性使得JS具有很高的灵活性,同时也降低了开发过程中的门槛。其次,它是...

    这是一个用javascript和css做的网页非常使用初学者

    对于初学者来说,理解和掌握这两门语言的基本概念和应用至关重要。这个教程将帮助你逐步踏入网页设计的世界,通过实例学习如何使用JavaScript和CSS创建交互式、视觉吸引人的网页。 ### JavaScript基础知识 1. **...

    JavaScript学习PPT(适合初学者)

    通过这个"JavaScript学习PPT",初学者可以系统地了解和掌握JavaScript的基本概念和实际应用,为进一步深入学习和开发JavaScript项目打下坚实基础。在学习过程中,实践是关键,结合实际的代码示例和小项目,将理论...

Global site tag (gtag.js) - Google Analytics