下面小编就为大家带来一篇学 JavaScript 七大注意事项【必看】。小编觉得挺不错的,现在分享给大家,也给大家做个参考
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
知识说明:
初学 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 七大注意事项【必看】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0222/266012.html