发布价值信息
Wordpress、Software、VPN。。

JavaScript 装逼指南

如何写 JavaScript 才能逼格更高呢?怎样才能组织 JavaScript 才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?下面列出一些在 JavaScript 时的装逼技巧。

一、匿名函数的 N 种写法

你知道“茴”的四种写法吗?ε=(・д・`*)ハァ… 扯淡,但你或许不知道匿名函数的好几种写法。一般情况下写匿名函数是这样的:

(function(){})();

但下面几种写法也是可以的:

!function(){}();
+function(){}();
-function(){}();
~function(){}();
~(function(){})();
void function(){}();
(function(){}());

当然,这样的写法,没有什么区别,纯粹看装逼程度。

二、另外一种 undefined

从来不需要声明一个变量的值是 undefined,因为 JavaScript 会自动把一个未赋值的变量置为 undefined。所有如果你在代码里这么写,会被鄙视的:

var data = undefined;

但是如果你就是强迫症发作,一定要再声明一个暂时没有值的变量的时候赋上一个 undefined。那你可以考虑这么做:

var data = void 0; // undefined

void 在 JavaScript 中是一个操作符,对传入的操作不执行并且返回 undefined。void 后面可以跟()来用,例如 void(0),看起来是不是很熟悉?没错,在 HTML 里阻止带href的默认点击操作时,都喜欢把 href 写成 javascript:void(0),实际上也是依靠 void 操作不执行的意思。

当然,除了出于装逼的原因外,实际用途上不太赞成使用 void,因为void的出现是为了兼容早起 ECMAScript 标准中没有 undefined 属性。void 0 的写法让代码晦涩难懂。

三、抛弃你的 if 和 else

当JS代码里有大量的条件逻辑判断时,那代码看起来多可怕:

if () {
    // ...
} else if () {
    // ...
} else if () {
    // ...
} else {
    // ...
}

不用我说你都猜到用什么语法来简化 if-else 了。没错,用 ||和&& ,很简单的原理就不用说啦。值得一提的是,有时候用 !! 操作符也能简化 if-else 模式。例如这样:

// 普通的if-else模式
var isValid = false;
if (value && value !== 'error') {
    isValid = true;
}
// 使用!!符号
var isValid = !!(value && value !== 'error');

“!”是取反操作,两个“!”自然是负负得正了。

四、不加分号

关于JavaScript要不要加分号的争论已经吵了好几年。Google 的 JavaScript 语法指南告诉我们要加分号,很多 JavaScript 语法书籍也告诉我们加上分号更安全。然而,分号加不加,全靠个人对代码的写法,你确信写得足够安全的话,不加分号显得更加高大上。

五、赶上 ES6 的早班车

ES6 已在 2016 年底正式发布,赶时髦的开发者们,赶快在自己的代码里用起来。用上module声明,写写 class,捣鼓一下 Map,这些都会让你的代码逼格更高。神马?你都不会用?那也好歹在代码头部加上一个ES5的 “use strict”; 呀。

六、添加AMD模块支持

给你写的代码声明一下 AMD 模块规范,这样别人就可以直接通过 AMD 的规范来加载你的模块了,如果别人没有通过规范来加载你的模块,你也可以优雅地返回一个常规的全局对象。来看看 jQueryUI 的写法:

(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        // AMD. Register as an anonymous module.
        define( [ "jquery" ], factory );
    } else {
        // Browser globals
        factory( jQuery );
    }
}(function( $ ) {
    // 这里放模块代码
    return $.widget;
}));

就用它来包裹你的实际代码吧,保证别人一看代码就知道你是个专业的开发者。

七、Function构造函数

很多 JavaScript 教程都告诉我们,不要直接用内置对象的构造函数来创建基本变量,例如 var arr = new Array(2); 的写法就应该用 var arr = [1, 2]; 的写法来取代。但是,Function 构造函数(注意是大写的 Function )有点特别。Function 构造函数接受的参数中,第一个是要传入的参数名,第二个是函数内的代码(用字符串来表示)。

var f = new Function('a', 'alert(a)');
f('test'); // 将会弹出窗口显示test

或许大家疑惑了,你这样绕着写,跟 function f(a) {alert(a);} 比有什么好处呢?
事实上在某种情况下是有好处的,比如不能用 eval 的时候,你需要传入字符串内容来创建一个函数的时候。在一些 JavaScript 模板语言的解析,和字符串转换 json 对象的时候比较实用。

八、用原生 Dom 接口不用 jQuery

一个傲娇的前端工程师是不需要 jQuery 的,前提是你经得起折腾。实际上,几乎所有的 jQuery 方法都可以用同样的 Dom 原生接口来实现,因为这货本来就是用原生接口实现的嘛,哈哈。怎样做到不用 jQuery(也叫jQuery-free)呢?阮老师的博文 《如何做到 jQuery-free?》 给我们很好的讲解了做法。依赖于 querySelector 和 querySelectorAll 这两个现代浏览器的接口,可以实现跟 jQuery 同样方便和同样效率的 Dom 查找,而且其他的类似 Ajax 和 CSS 的接口同样也可以把原生方法做一些兼容方面的包装即可做到 jQuery-free。

总结

上述所有的 JavaScript 装逼写法,一些是为了程序易懂或者效率提高的语法糖,这样的做法是比较可取的,比如前面所说的省略 if-else 的做法;而有些写法则容易造成代码晦涩难懂或者效率偏低,例如上面说的 void 0 的写法,实际上不可取。JavaScript 语法上灵活,让大家对同一个功能有很多种不同的写法,写法上的优化是对程序结构和代码维护有很大帮助的。所以,装逼得装得好看。

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

×
打赏作者
未经允许不得转载:何先生 » JavaScript 装逼指南
网站维护离不开您的支持,您可以点赞和赞助本站,谢谢
×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

赞助本站
分享到: 更多 (0)

评论 2

  • QQ号(可选)
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 沙发

    前来支持

    星空游戏
    1
    5个月前 (04-18)回复 Google Chrome 21.0.1180.89| Windows 7 x64| 江苏省连云港市 电信
  2. 板凳
    qq_avatar

    该评论为私密评论

    rainboy
    0
    4个月前 (05-30)回复 Firefox 53.0| Windows 10 x64| 江苏省盐城市 移动
出本站二次开发 DUX 主题。邮箱admin#mrhee.com(#换成@)。 网盘,推荐一木禾分享文件赚佣金。 一木禾网盘注册