初学JavaScript七大注意事项

知识说明:

初学JavaScript,注意以下七大细节,在实现同样功能的情况下,让我们的代码更易懂、效率更高。

一、简化代码

例如:创建对象

之前是这样的:

Var car = new object();

Car.color = “red”;

Car.wheels = 4;

Car.age = 8;

而现在可以写成这样子:

Var car = {color:’red’, wheels:4, age:8}

例如:创建数组

之前是这样的:

Var studentArray = new Array(‘zhangsan’, ’lisi’, ‘zhaowu’, ‘wuliu’);

而现在可以写成这样子:

Var studentArray = {‘zhangsan’, ‘ lisi’, ‘zhaowu’, ‘wuliu’};

例如:使用三元运算符简化代码

之前的写法是:

Var result;

if(x > 100)

{

Result = 1;

}else{

Result = -1;

}

而现在可以写成:

Var result = x >100 ? 1 : -1;

二、使用JSON作为数据格式

使用Json格式来存储数据:

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"

}

也可以使用JS来存储数据,代码如下:

<div id = “dataDiv”></div>

<script>

Function saveData(data)

{

Var out =“<ul>”;

For(var i=0; i<data.length; i++)

{

Out += “<li><a href =”’+data[i].url+’”>+

data[i].d+</a></li>”;

}

Out += ‘</ul>’;

Document.getElementById(‘dataDiv’).innerHTML = out;

}

</script>

甚至可以将上面JS生成的存储数据的作为API的返回值

<script src="http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious">

</script>

三、尽量使用JavaScript原生函数

例如:获取一组数据中的最大值

var maxData = Math.max(0,20,50,10);

alert(maxData);   //返回的最大值为50

例如:使用JS给一个元素添加class样式,代码片段如下:

Function addClass(elm, newclass)

{

Var classes = elm.className.split(‘ ‘ );

Classes.push(newclass);

Elm.className = classes.join(‘ ’);

}

四、事件委托

例如:

<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>

最佳脚本书写方式:

(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();

}

};

})();

五、匿名函数

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.

六、代码可配置

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

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

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

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

七、代码兼容性

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

时间: 2024-10-19 22:54:45

初学JavaScript七大注意事项的相关文章

学JavaScript七大注意事项

知识说明: 初学JavaScript,注意以下七大细节,在实现同样功能的情况下,让我们的代码更易懂.效率更高. 一.简化代码 例如:创建对象 之前是这样的: Var car = new object(); Car.color = “red”; Car.wheels = 4; Car.age = 8; 而现在可以写成这样子: Var car = {color:’red’, wheels:4, age:8} 例如:创建数组 之前是这样的: Var studentArray = new Array(‘

H1标签使用的七大注意事项

H1标签使用的七大注意事项: 1 每个页面都应该有H1标签,H1标签是每个网页不可缺少的要素. 2 使用H1标签的内容应该简洁明了; 3 H1标签要尽量出现在源文件代码的开头的部分,这样可以让访问者和搜索引擎爬虫/蜘蛛能尽快了解页面的内容. 4 每个页面的H1标签元素的内容应该是不一样的,每个页面包含的内容肯定是不一样的,所以总能够为每个页面的H1标签找到一个不同的角度. 5 使用H1标签的元素的文字应该包含页面的目标关键字. 6 每个页面中应该只有一个H1标签.在网站上最常见的错误是在网站首页

javascript类型注意事项

以下是javascript类型的注意事项: null:表示尚未存在的对象,注意,尽管尚未存在,也是个对象啊,所以用typeof检测一个null值变量的结果是Object:不过,为了便于写if语句,在js中,"undefined==false", "null=false", 因此,"undefined==null". 整数:最容易犯的错误就是,忘了070其实是个八进制数,相当于十进制的56: 浮点数:“在进行运算之前,真正存储的是字符串”——这应该

点滴的积累---初学Javascript

在学习知识的路上,我们需要的不断的去接触新的知识,同时我们也不要不停地对自己旧的知识进行总结.最近通过<牛腩Javascript>和姜昊的<Javascript专题视频>对Javascript有了初步的理论了解. Javascript学习简介 由于Javascript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言.因此在学习Javascript时需要具备一定的对象对象基础,由于已经学习过C#和VB.NET因此在学习的过程中理解起来还是相对容易的. 同时JavaScript

初学JavaScript之猜测new操作符的原理

本文是一篇原理猜测的文章,如果有不准确的地方请指正,转载请声明出处,谢谢! 原文:http://blog.csdn.net/softmanfly/article/details/34833931 点击跳转 JavaScript中构造函数与普通函数其实没有什么差别,构造函数可以当做普通函数来使用,普通函数也可以用new来模拟构造函数的调用,然而使普通函数与构造函数发生区别的其实就在于new操作符的内部原理,下面是我通过测试猜测的new操作符的执行过程,当你在用new操作符来生成一个对象时内部可能执

Javascript 原型注意事项

function abc() {} abc.prototype.xx = { name: "keatkeat" } var x = new abc(); x.xx.name = "5566"; alert(abc.prototype.xx.name); //是 5566 ,你把原型的值给改掉了 要注意,原型是共享的,我们在实例对象可以调用到原型,也可以改变他. function abc() {} abc.prototype.xx = "keatkeat&q

初学Javascript,写一个简易的登陆框

<!--下面是源代码--> <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> </head> <!--<script type = "text/javascript" src = "test.js"> --> <!-- </script> --> <script&

初学JavaScript须知道的七件事

1.1.缩略标记 //定义对象 //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 testArr = new Array('str1', 'str2

javascript代码注意事项

1 代码行末要加分好.原因<<javascript高级程序设计第三版21页第三行>> 2 初始化变量应该加上默认值因为使用typeof时 未声明和声明为初始化的值都返回undefined,如果规定都要初始化,得到undefined,就知道没有声明var message;alert(typeof message) //undefinedalert(typeof age) //undefined age没有声明 3如果定义的变量用来保存对象,最好初始化为null,这样只要检查是否时nu