摘要:構造函數很多教程都告訴我們,不要直接用內置對象的構造函數來創建基本變量,例如的寫法就應該用的寫法來取代。但是,構造函數注意是大寫的有點特別。構造函數接受的參數中,第一個是要傳入的參數名,第二個是函數內的代碼用字符串來表示。
如何寫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對象的時候比較實用。
一個傲嬌的前端工程師是不需要jQuery的,前提是你經得起折騰。實際上,幾乎所有的jQuery方法都可以用同樣的Dom原生接口來實現,因為這貨本來就是用原生接口實現的嘛,哈哈。怎樣做到不用jQuery(也叫jQuery-free)呢?阮老師的博文《如何做到 jQuery-free?》 給我們很好的講解了做法。依賴于querySelector和querySelectorAll這兩個現代瀏覽器的接口,可以實現跟jQuery同樣方便和同樣效率的Dom查找,而且其他的類似Ajax和CSS的接口同樣也可以把原生方法做一些兼容方面的包裝即可做到jQuery-free。
總結上述所有的JavaScript裝逼寫法,一些是為了程序易懂或者效率提高的語法糖,這樣的做法是比較可取的,比如前面所說的省略if-else的做法;而有些寫法則容易造成代碼晦澀難懂或者效率偏低,例如上面說的void 0的寫法,實際上不可取。JavaScript語法上靈活,讓大家對同一個功能有很多種不同的寫法,寫法上的優化是對程序結構和代碼維護有很大幫助的。所以,裝逼得裝得好看。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78118.html
摘要:實用價值在于可以防止全局污染。別忘了有判定的當然,很明顯,這只是基礎,并不能更裝逼一點。祝愿大家越玩越牛逼從一行代碼里面學點深入淺出高級程序設計設計模式與開發實踐原文裝逼指南順便求實習 Summary 本文秉承著 你看不懂是你sb,我寫的代碼就是牛逼 的理念來介紹一些js的裝逼技巧。 下面的技巧,后三個,請謹慎用于團隊項目中(主要考慮到可讀性的原因),不然,leader 可能請你喝茶。...
摘要:但是,構造函數注意是大寫的有點特別。構造函數接受的參數中,第一個是要傳入的參數名,第二個是函數內的代碼用字符串來表示。 Javascript是一門很吊的語言,我可能學了假的JavaScript,哈哈,大家還有什么推薦的,補充送那啥邀請碼。 本文秉承著:你看不懂是你SB,我寫的代碼就要牛逼。 1、單行寫一個評級組件 ★★★★★☆☆☆☆☆.slice(5 - rate, 10 - rate...
摘要:但是,構造函數注意是大寫的有點特別。構造函數接受的參數中,第一個是要傳入的參數名,第二個是函數內的代碼用字符串來表示。 Javascript是一門很吊的語言,我可能學了假的JavaScript,哈哈,大家還有什么推薦的,補充送那啥邀請碼。 本文秉承著:你看不懂是你SB,我寫的代碼就要牛逼。 1、單行寫一個評級組件 ★★★★★☆☆☆☆☆.slice(5 - rate, 10 - rate...
摘要:但是,構造函數注意是大寫的有點特別。構造函數接受的參數中,第一個是要傳入的參數名,第二個是函數內的代碼用字符串來表示。 Javascript是一門很吊的語言,我可能學了假的JavaScript,哈哈,大家還有什么推薦的,補充送那啥邀請碼。 本文秉承著:你看不懂是你SB,我寫的代碼就要牛逼。 1、單行寫一個評級組件 ★★★★★☆☆☆☆☆.slice(5 - rate, 10 - rate...
閱讀 2247·2021-11-23 09:51
閱讀 1042·2021-11-18 10:02
閱讀 3434·2021-10-13 09:49
閱讀 1262·2021-09-22 14:57
閱讀 10391·2021-08-18 10:20
閱讀 1181·2019-08-30 15:55
閱讀 2225·2019-08-29 16:06
閱讀 3232·2019-08-29 11:14