详解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系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
详解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 正则表达式小结
2009/08/31 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
python中管道用法入门实例
2015/06/04 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
python操作cfg配置文件方式
2019/12/22 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
Internal修饰符有什么含义
2013/07/10 面试题
老师对学生的寄语
2014/04/09 职场文书
体育课外活动总结
2014/07/08 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
Pygame Event事件模块的详细示例
2021/11/17 Python