网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 详解JavaScript的另类写法
内容
    这篇文章主要介绍了详解JavaScript的另类写法的相关资料,需要的朋友可以参考下
    JavaScript 是属于网络的脚本语言！
    JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
    JavaScript 是因特网上最流行的脚本语言。
    JavaScript 很容易使用！你一定会喜欢它的！
    JavaScript一种解释型的脚本语言，语法灵活，让不同的人对同一个功能有很多种不同的写法。怎样组织JavaScript代码才能让别人一眼看出你不简单呢？是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢？
    匿名函数的N种写法
    Js的匿名函数是未申明函数名的自执行函数，格式如下：
    (function(){})();
    实际在项目上我们经常是在前面加上“;”：
    ;function(){}();
    因为Js的语法是可以省略分号的，但是这种机制也会导致意外的错误。为了避免代码上线后合并压缩成一个文件造成语法错误，所以加上“;”可以避免未知错误。
    但有时我们看见别人的库或是插件里面会这样写匿名函数：
    +function(){}();
    “+”在这里是运算符，运算符具有极高的优先级，所以右边的函数声明加上括号的部分（实际上就是函数执行的写法）就直接执行了。其实不止前面可以是“+”号，“-”、“！”、“~”、“++”等运算符均可。这里只是做扩展介绍，具体用哪种写法看团队统一规范。
    抛弃Math.ceil()和Math.floor取整
    也许在别的代码中看到过这两种符号~~和|0，直接看运行结果：
    >> var a1 = 1.23
    >> ~~a1
    1
    >> var a2 = 2.345
    >> a2|0
    2
    >> var a3 = -3.45
    >> ~~a3
    -3
    >> var a4 = -4.5
    >> a4|0
    -4
    注明下，这种写法不是原创，只是引用过来分析和说明下这种另类的写法。简单解释，~是按位取反的运算符，可以将浮点数通过舍去小数点后面的所有位来转换为整数。正整数可转换为无符号的十六进制值。然后再取反一次（~~）负负得正，就得到原来的整数。就是这么任性不爱调方法，你说算不算也是一种优化呢。
    注意：如果需要做严格的四舍五入运算就要慎用此方法，那就还是得用Math函数。
    if和else也不是唯一
    用if-else的条件判断是很清晰的逻辑，在处理数据量不大情况下看起就不是很简洁：
    if (a===1) { //此处强烈建议用严格等于符号“===”，不会进行类型转换
    a=2
    } else if (a===3) {
    a=4
    } else {
    a=5
    }
    看看用||和&&给代码瘦身后：
    ((a===1)&&(true,a=2))||((a===3)&&(true,a=4))||(a=5)
    一行就搞定，瘦身成功。||和&&，很简单的原理就不用说啦，里面用到逗号运算符还不容易理解，可以继续换成三元运算符：
    (a===1 )? a=2:( (a===3) ? (a=4) : (a=5) )
    这种写法看起来结构是够简化，但是别人看你的代码会有点吃力。
    用toString替代烦人的字符串拼接DOM结构
    如果要动态生成一个dom结构一般我们是这样实现的 ：
    var template = "<div>"
    + "<h2>{title}</h2>"
    + "<div class='content' yAttr=''>{content}</div>"
    + "</div>"
    如果再添加各种属性和参数进去，大、小引号混乱很容易报错。然而ES6提供了Template String帮我们解决了这个问题，你可以这样写：
    var template = <div> 
    <h2>{title}</h2> 
    <div class='content' yAttr=''>{content}</div> 
    </div>
    可问题是ES6现在还未正式来啊…不怕，function.toString来解决我们青黄不接时的尴尬：
    var rComment = /\/\*([\s\S]*?)\*\//;
    // multiply string 
    function ms(fn){ 
    return fn.toString().match(rComment)[1]
    }; 
    ms(function(){/* 
    <div> 
    <h2>{title}</h2> 
    <div class='content' yAttr=''>{content}</div> 
    </div> */
    })
    这里的输出和前面的字符串输出一样一样滴，前端程序猿们只需要关注自己的dom结构就好了。
    添加AMD模块支持，提示代码B格
    给你写的代码声明一下AMD（异步模块定义，Asynchronous Module Definition）模块规范，这样别人就可以直接通过AMD的规范来加载你的模块了，如果别人没有通过规范来加载你的模块，你也可以优雅地返回一个常规的全局对象。来看看jQueryUI的写法：
    (function( factory ) { 
    if ( typeof define === "function" && define.amd ) { 
    // AMD模式。且依赖"jQuery"这个插件 
    define( [ "jquery" ], factory ); } 
    else { 
    // 浏览器全局模式 
    factory( jQuery ); 
    } 
    }(function( $ ) { 
    // 这里放模块代码 
    return $.widget; 
    }));
    改成AMD模块的结构，让你的代码更适于浏览器端加载脚本依赖，按照这种格式来写代码，保证别人一看代码就知道你是个专业的开发者。
    继承最优法
    JavaScript的灵活性，大大小小的继承方式有十余种之多。每种写法优缺点各异，各家方法不一一列举，举个常用的继承方法为例，原型继承：
    function Parent() {}
    function Child() {}
    Child.prototype = Parent.prototype
    Child.prototype.constructor = Child ；
    这种这种方法实际上是将Child.prototype和Parent.prototype中保存的指针指向了同一个对象，所以子对象原型中扩展一些属性以便之后继续继承的话，父对象的原型也会被改写。所以为了解决这个问题，尝试借用一个临时构造器的写法：
    function Empty(){}
    Empty.prototype = Parent.prototype;
    Child.prototype = new Empty();
    Child.prototype.constructor = Child;
    这样父对象的自身属性和原型方法得到保护。“最优”有点夸大，但是是相比较而言的。相信每个人都有自己的写法，还有借用call和apply实现属性继承的优缺点，篇幅有限不一一介绍。
    总结
    上述所有的JavaScript的另类写法，一些是为了程序易懂或者效率提高的语法糖，这样的做法是比较可取的，比如前面所说的省略if-else的做法。一些是为了提升我们代码的兼容性和性能，比如AMD和继承的方式。……本人菜鸟一枚，上述内容肯定还有不全和没解释透彻的地方以后再补充。
    以上内容是针对JavaScript的另类写法的相关介绍，希望对大家有所帮助！
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/13 17:13:45