详解JavaScript的另类写法


Posted in Javascript onApril 11, 2016

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的另类写法的相关介绍,希望对大家有所帮助!

Javascript 相关文章推荐
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 Javascript
js制作提示框插件
Dec 24 Javascript
详解jQuery中的empty、remove和detach
Apr 11 #Javascript
JQuery导航菜单选择特效
Apr 11 #Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 #Javascript
javascript冒泡排序小结
Apr 10 #Javascript
javascript原生ajax写法分享
Apr 10 #Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 #Javascript
jQuery实现点击水纹波动动画
Apr 10 #Javascript
You might like
php实现短信发送代码
2015/07/05 PHP
图片完美缩放
2006/09/07 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
python中的yield使用方法
2014/02/11 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
python3中布局背景颜色代码分析
2020/12/01 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
如何设置Java的运行环境
2013/04/05 面试题
项目合作计划书
2014/01/09 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
高中生的自我评价
2014/03/04 职场文书
数学系毕业生求职信
2014/05/29 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
加强党性修养心得体会
2016/01/21 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫