学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 相关文章推荐
页面中js执行顺序
Nov 09 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 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动态生成VRML网页
2006/10/09 PHP
php 更新数据库中断的解决方法
2009/06/05 PHP
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
电大毕业生自我鉴定
2013/11/10 职场文书
书法比赛获奖感言
2014/02/10 职场文书
个人求职自荐信范文
2014/06/20 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
详解nginx进程锁的实现
2021/06/14 Servers
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang