学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 相关文章推荐
让html页面不缓存js的实现方法
Oct 31 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 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实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
详解php实现页面静态化原理
2017/06/21 PHP
javascript 命名规则 变量命名规则
2010/02/25 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
js实现车辆管理系统
2020/08/26 Javascript
Python CSV模块使用实例
2015/04/09 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
Django的分页器实例(paginator)
2017/12/01 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
python生成lmdb格式的文件实例
2018/11/08 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
python与pycharm有何区别
2020/07/01 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
全陪导游欢迎词
2014/01/17 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
Nginx反向代理、重定向
2022/04/13 Servers