如何寫出優(yōu)雅的js代碼?
網(wǎng)友解答: 首先,你必須要編寫簡潔,規(guī)范,易于閱讀和可維護的代碼。其次你才要考慮的是寫復(fù)雜的應(yīng)用。下面總結(jié)下我web前端工作兩年來,總結(jié)出的編寫優(yōu)雅的JS代碼的一些技巧:定義語義化,可讀
首先,你必須要編寫簡潔,規(guī)范,易于閱讀和可維護的代碼。其次你才要考慮的是寫復(fù)雜的應(yīng)用。下面總結(jié)下我web前端工作兩年來,總結(jié)出的編寫優(yōu)雅的JS代碼的一些技巧:
定義語義化,可讀性好的命名。let str = new Date(); //badlet toDay = new Date(); //good
遵循函數(shù)的單一功能原則。比如說綁定事件處理函數(shù)的功能,就定義一個bindEvent的函數(shù)里面,初始化函數(shù)就定義一個init()的入口函數(shù),這里只做初始化的工作。
使用默認變量代替短路運算function getName(name){let name = name || ' ' ; } //badfunction getName(name = 'jack'){let name = name;} //good
函數(shù)參數(shù),建議不要超過2個,如果超過兩個,可以用對象代替或者用ES6的對象解構(gòu)去解決。
抽取出有同樣功能的函數(shù),移除重復(fù)代碼。
能做變量緩存盡量做緩存。
減少DOM的重復(fù)操作。
避免使用暴露在整個全局作用域的全局變量。
使用ES6/ES7新特性。(1)箭頭函數(shù)(2)模板字符串(3)解構(gòu)(4)async/awai
模塊化很重要,避免在全局作用域下直接寫各種函數(shù),可以考慮用閉包把單一功能的函數(shù)包起來。小結(jié):以上這些規(guī)則,不是說會立刻就讓你變成一個優(yōu)秀的前端工程師,但是如果一直保持這樣規(guī)范的代碼,對于你,也對于你的同事,都是有益的。至于你說怎樣才能寫出那種層次分明,思路清晰的復(fù)制應(yīng)用,這個真的是一步步來的,不要一上來就想著做多大的項目,可以先學(xué)習(xí)下現(xiàn)在已經(jīng)存在的框架或者庫的思路,比如說Jquery,react,別人是怎么封裝,怎么實現(xiàn)的,可以看看源碼先,學(xué)習(xí)一下,然后自己模仿著寫一個小型的js庫。希望對你有所幫助。
網(wǎng)友解答:感謝邀請。首先要用好命名,要容易讀懂名稱表達的含義,然后要組織好模塊功能,最后要標注好引用來源。優(yōu)化器可以壓縮格式,簡化命名,所以不必考慮格式帶來的空間浪費,要用TAB做好模塊縮進,用好注釋寫清楚用法和注意事項。