学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',‘wuliu'};

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

之前的写法是:

if(x > 100)

{

Result = 1;

}else{

Result = -1;

}

而现在可以写成:

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

二、使用JSON作为数据格式

使用Json格式来存储数据:

"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来存储数据,代码如下:

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

三、尽量使用JavaScript原生函数

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

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

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

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

{

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

Classes.push(newclass);

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

}

四、事件委托

例如:

Great Web resources

<ul id="resources">

  • Curriculum
  • voices
  • 最佳脚本书写方式:

    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 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七大注意事项【必看】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

    版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

    相关推荐


    kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
    这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
    js如何实现弹出form提交表单?(图文+视频)
    js怎么获取复选框选中的值
    js如何实现倒计时跳转页面
    如何用js控制图片放大缩小
    JS怎么获取当前时间戳
    JS如何判断对象是否为数组
    JS怎么获取图片当前宽高
    JS对象如何转为json格式字符串
    JS怎么获取图片原始宽高
    怎么在click事件中调用多个js函数
    js如何往数组中添加新元素
    js如何拆分字符串
    JS怎么对数组内元素进行求和
    JS如何判断屏幕大小
    js怎么解析json数据
    js如何实时获取浏览器窗口大小
    原生JS实现别踩白块小游戏(五)
    原生JS实现别踩白块小游戏(一)