JavaScript装逼指南

2024年2月1日 143次阅读 来源: civerzhu

怎样写JavaScript才逼格更高呢？怎样才组织JavaScript才让他人一眼看出你不简单呢？是不是很期待他人在看完你的代码以后叹息一句“原本还能够如许写”呢？下面列出一些在JavaScript时的装逼技能。

1. 匿名函数的N种写法

你晓得“茴”的四种写法吗？ε=(･д･｀*)ﾊｧ… 扯淡，但你也许不晓得匿名函数的好几种写法。平常情况下写匿名函数是如许的：

(function(){})();

但下面几种写法也是能够的：

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

固然，如许的写法，没有什么区别，地道看装逼水平。

2. 别的一种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的写法让代码艰涩难明。

3. 扬弃你的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');

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

4. 不加分号

关于JavaScript要不要加分号的争辩已吵了好几年。Google的JavaScript语法指南通知我们要加分号，许多JavaScript语法书本也通知我们加上分号更平安。但是，分号加不加，端赖个人对代码的写法，你确信写得充足平安的话，不加分号显得越发嵬峨上。

5. 遇上ES6的早班车

ES6行将在岁尾正式宣布，赶时髦的开发者们，连忙在本身的代码里用起来。用上module声明，写写class，捣鼓一下Map，这些都邑让你的代码逼格更高。神马？你都不会用？那也好歹在代码头部加上一个ES5的"use strict";呀。

6. 增加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;
}));

就用它来包裹你的现实代码吧，保证他人一看代码就晓得你是个专业的开发者。

7. 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对象的时刻比较有用。

8. 用原生Dom接口不必jQuery

一个傲娇的前端工程师是不须要jQuery的，条件是你经得起折腾。现实上，险些一切的jQuery要领都能够用一样的Dom原生接口来完成，由于这货原本就是用原生接口完成的嘛，哈哈。怎样做到不必jQuery（也叫jQuery-free）呢？阮先生的博文《怎样做到 jQuery-free？》 给我们很好的讲解了做法。依赖于querySelector和querySelectorAll这两个当代浏览器的接口，能够完成跟jQuery一样轻易和一样效力的Dom查找，而且其他的相似Ajax和CSS的接口一样也能够把原生要领做一些兼容方面的包装即可做到jQuery-free。

总结

上述一切的JavaScript装逼写法，一些是为了顺序易懂或许效力进步的语法糖，如许的做法是比较可取的，比方前面所说的省略if-else的做法；而有些写轨则轻易形成代码艰涩难明或许效力偏低，比方上面说的void 0的写法，现实上不可取。JavaScript语法上天真，让人人对同一个功用有许多种差别的写法，写法上的优化是对顺序结构和代码保护有很大协助的。所以，装逼得装得悦目。

    原文作者：civerzhu
    原文地址: https://segmentfault.com/a/1190000000514581
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞