html5教程 教你如何塑造JavaScript牛逼形象

栏目分类：html教程   发布日期：2014-09-23   来源：互联网   浏览次数：次

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

1. 匿名函数的N种写法

       你知道“茴”的四种写法吗？ε=(･д･｀*)ﾊｧ… 扯淡，但你或许不知道匿名函数的好几种写法。一般情况下写匿名函数是这样的：

1. (function(){})(); 

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

1. !function(){}(); 
2. +function(){}(); 
3. -function(){}(); 
4. ~function(){}(); 
5. ~(function(){})(); 
6. void function(){}(); 
7. (function(){}()); 

       其实细看可以看出规律，因为+-!~这些具有极高的优先级，所以右边的函数声明加上括号的部分（实际上就是函数执行的写法）就直接执行了。当然，这样的写法，没有什么区别，纯粹看装逼程度。

2. 另外一种undefined

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

1. var data = undefined; 

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

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

3. 抛弃你的if和else

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

1. if () { 
2.     // ... 
3. } else if () { 
4.     // ... 
5. } else if () { 
6.     // ... 
7. } else { 
8.     // ... 
9. } 

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

1. // 普通的if-else模式 
2. var isValid = false; 
3. if (value && value !== 'error') { 
4.     isValid = true; 
5. } 
6. // 使用!!符号 
7. var isValid = !!(value && value !== 'error'); 

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

4. 不加分号

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

5. 赶上ES6的早班车

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

6. 添加AMD模块支持

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

1. (function( factory ) { 
2.     if ( typeof define === "function" && define.amd ) { 
3.         // AMD. Register as an anonymous module. 
4.         define( [ "jquery" ], factory ); 
5.     } else { 
6.         // Browser globals 
7.         factory( jQuery ); 
8.     } 
9. }(function( $ ) { 
10.     // 这里放模块代码 
11.     return $.widget; 
12. })); 

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