学JavaScript七大注意事项【必看】


Posted in Javascript onMay 04, 2016

知识说明:

初学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对标准的支持是最差的。最终用户看到的结果也许就是,你写的代码在某个浏览器无法正确运行。你应该把你的代码在主流的浏览器中都测试一下,这也许很费时间,但是应该这样做。

以上这篇学JavaScript七大注意事项【必看】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
JavaScript 基本概念
Jan 20 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
select标签设置默认选中的选项方法
Mar 02 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
VSCode 配置uni-app的方法
Jul 11 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 #Javascript
开启BootStrap学习之旅
May 04 #Javascript
JavaScript入门教程之引用类型
May 04 #Javascript
javascript和jquery实现用户登录验证
May 04 #Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 #Javascript
纯JS代码实现气泡效果
May 04 #Javascript
DWR中各种java方法的调用
May 04 #Javascript
You might like
一个PHP分页类的代码
2011/05/18 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
django下创建多个app并设置urls方法
2020/08/02 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
linux面试题参考答案(5)
2014/09/01 面试题
网络教育自我鉴定
2013/11/01 职场文书
工作评语大全
2014/04/26 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
大学生在校表现评语
2014/12/31 职场文书
新郎结婚感言
2015/07/31 职场文书