如何寫出優雅的js代碼？

首先，你必須要編寫簡潔，規範，易於閱讀和可維護的代碼。其次你才要考慮的是寫複雜的應用。下面總結下我web前端工作兩年來，總結出的編寫優雅的JS代碼的一些技巧：

1. 定義語義化，可讀性好的命名。

   let str = new Date(); //bad

   let toDay = new Date(); //good

2. 遵循函數的單一功能原則。

   比如說綁定事件處理函數的功能，就定義一個bindEvent的函數裡面，初始化函數就定義一個init()的入口函數，這裡只做初始化的工作。

3. 使用默認變數代替短路運算

   function getName(name){let name = name || " " ; } //bad
   function getName(name = "jack"){let name = name;} //good

4. 函數參數，建議不要超過2個，如果超過兩個，可以用對象代替或者用ES6的對象解構去解決。

5. 抽取出有同樣功能的函數，移除重複代碼。

6. 能做變數緩存盡量做緩存。

7. 減少DOM的重複操作。

8. 避免使用暴露在整個全局作用域的全局變數。

9. 使用ES6/ES7新特性。

   （1）箭頭函數

   （2）模板字元串

   （3）解構
   （4）async/awai

10. 模塊化很重要，避免在全局作用域下直接寫各種函數，可以考慮用閉包把單一功能的函數包起來。小結：以上這些規則，不是說會立刻就讓你變成一個優秀的前端工程師，但是如果一直保持這樣規範的代碼，對於你，也對於你的同事，都是有益的。至於你說怎樣才能寫出那種層次分明，思路清晰的複製應用，這個真的是一步步來的，不要一上來就想著做多大的項目，可以先學習下現在已經存在的框架或者庫的思路，比如說Jquery，react，別人是怎麼封裝，怎麼實現的，可以看看源碼先，學習一下，然後自己模仿著寫一個小型的js庫。希望對你有所幫助。

感謝邀請。首先要用好命名，要容易讀懂名稱表達的含義，然後要組織好模塊功能，最後要標註好引用來源。優化器可以壓縮格式，簡化命名，所以不必考慮格式帶來的空間浪費，要用TAB做好模塊縮進，用好注釋寫清楚用法和注意事項。