首先，你必須要編寫簡潔，規範，易於閱讀和可維護的程式碼。其次你才要考慮的是寫複雜的應用。下面總結下我web前端工作兩年來，總結出的編寫優雅的JS程式碼的一些技巧：
定義語義化，可讀性好的命名。let str = new Date(); //badlet toDay = new Date(); //good
遵循函式的單一功能原則。比如說繫結事件處理函式的功能，就定義一個bindEvent的函數里面，初始化函式就定義一個init()的入口函式，這裡只做初始化的工作。
使用預設變數代替短路運算function getName(name){let name = name || " " ; } //badfunction getName(name = "jack"){let name = name;} //good
函式引數，建議不要超過2個，如果超過兩個，可以用物件代替或者用ES6的物件解構去解決。
抽取出有同樣功能的函式，移除重複程式碼。
能做變數快取儘量做快取。
減少DOM的重複操作。
避免使用暴露在整個全域性作用域的全域性變數。
使用ES6/ES7新特性。（1）箭頭函式（2）模板字串（3）解構（4）async/awai
模組化很重要，避免在全域性作用域下直接寫各種函式，可以考慮用閉包把單一功能的函式包起來。小結：以上這些規則，不是說會立刻就讓你變成一個優秀的前端工程師，但是如果一直保持這樣規範的程式碼，對於你，也對於你的同事，都是有益的。至於你說怎樣才能寫出那種層次分明，思路清晰的複製應用，這個真的是一步步來的，不要一上來就想著做多大的專案，可以先學習下現在已經存在的框架或者庫的思路，比如說Jquery，react，別人是怎麼封裝，怎麼實現的，可以看看原始碼先，學習一下，然後自己模仿著寫一個小型的js庫。希望對你有所幫助。
首先，你必須要編寫簡潔，規範，易於閱讀和可維護的程式碼。其次你才要考慮的是寫複雜的應用。下面總結下我web前端工作兩年來，總結出的編寫優雅的JS程式碼的一些技巧：
定義語義化，可讀性好的命名。let str = new Date(); //badlet toDay = new Date(); //good
遵循函式的單一功能原則。比如說繫結事件處理函式的功能，就定義一個bindEvent的函數里面，初始化函式就定義一個init()的入口函式，這裡只做初始化的工作。
使用預設變數代替短路運算function getName(name){let name = name || " " ; } //badfunction getName(name = "jack"){let name = name;} //good
函式引數，建議不要超過2個，如果超過兩個，可以用物件代替或者用ES6的物件解構去解決。
抽取出有同樣功能的函式，移除重複程式碼。
能做變數快取儘量做快取。
減少DOM的重複操作。
避免使用暴露在整個全域性作用域的全域性變數。
使用ES6/ES7新特性。（1）箭頭函式（2）模板字串（3）解構（4）async/awai
模組化很重要，避免在全域性作用域下直接寫各種函式，可以考慮用閉包把單一功能的函式包起來。小結：以上這些規則，不是說會立刻就讓你變成一個優秀的前端工程師，但是如果一直保持這樣規範的程式碼，對於你，也對於你的同事，都是有益的。至於你說怎樣才能寫出那種層次分明，思路清晰的複製應用，這個真的是一步步來的，不要一上來就想著做多大的專案，可以先學習下現在已經存在的框架或者庫的思路，比如說Jquery，react，別人是怎麼封裝，怎麼實現的，可以看看原始碼先，學習一下，然後自己模仿著寫一個小型的js庫。希望對你有所幫助。