<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          前端開發Code Review內容【vue記錄】

          時間:?2019-08-05閱讀:?1274標簽:?Review

          代碼審查的重要性,對碼農來說自是不言而喻, 這里記錄一次 Code Review的簡單紀要,主要以代碼審查優化內容為主。


          一、Import引入路徑

          路徑盡量使用別名的方式,有效避免相對路徑的書寫麻煩,以及項目的移植和擴展等。

          建議

          使用別名,代替使用相對路徑。 擴展vue.config.js,比如: config.resolve.alias.set('@$', './src'); 后續只需要修該配置文件即可。 


          二、組件、插件的擴展

          第三方組件全局引入,可以使用按需加載的形式,只加載需要的 部分。比如使用Vue.component(name, 組件); 

          最好不要直接在main.js中通過Vue.prototype上添加的屬性和方法。

          建議

          Vue的全局組件,或者插件使用Vue.use()的方式。 這樣可以避免重復注冊插件。比如: export default{install(Vue){//...}} 

           

          三、接口請求的位置

          項目接口的請求全部在computed中觸發的。在vue的生命周期中computed是在dom渲染完才進行的。

          建議 

          頁面初始化的數據,最好放在created,beforeCreated中。 這些數據在渲染html前調用。 對于渲染完才需進行的操作,以及頁面中一些dom的操作 才放在computed中 。


          四、前端存儲

          項目采用localStorage的存儲,以login.vue為例, 在使用的地方,直接使用window.localStorage。 如果后續不想使用該方式存儲,代碼修改將比較麻煩。

           建議 

          把存儲功能進行封裝操作,只提供set,get,clear等接口出來。 內部的實現,對于存儲時限,存儲方式的修改更靈活。


          五、路由代碼

          位置:src/router.js,子路由全部寫在routes數組中。 這樣代碼塊內容太多,不利于查找,定位。 

          建議   

          可以把路由的數據封裝到數組中。Require方法單獨出來; 同時每項最好做個備注。 


          六、權限驗證

          位置:src/router.js,項目中通過路由的redirect重定向來判斷的, 同時項目在接口請求http攔截中也判斷了。

          建議   

          redirect重定向主要用于不同的路徑可能是同一個頁面或組件的情況 這里建議使用路由鉤子函數router.beforeEach((to, from, next) => {}) To.path為需要授權路由時候,進行判斷。


          七、配置文件

          在部分組件或頁面中,使用到下載地址,或一些常量。 都是直接在該頁面定義的,這樣修改的時候,需要改動的地方很多 比如下載apk

          建議

          寫個配置文件來放項目使用的常量。比如:請求的URL,安卓,ios等下載地址。把請求的url寫在配置文件,也方便接口的查詢。


          八、cdn的使用

          使用了cdn的方式引入第三方庫。 這樣可以減少打包體積,速度。 

          建議

          項目中常用的模塊打包,放到cdn服務器下,其他項目需要可以直接引入就可以了。 減少不必要的開發。


          九、代碼優化方面

          1.功能代碼封裝的不多 ; 

          2.if判斷還有優化空間 ; 

          3.方法行數過長; 

          4.方法參數安全判定過少; 

          5.多層級.屬性過多,需要優化;

          建議 

          1.相同功能,封裝成獨立方法; 

          2.if(true){}建議改為 if(false )return,減少代碼層級,簡化代碼結構; 

          3.方法行數過長,表明方法需要拆分,一個方法盡量處理一個邏輯 ; 

          4.js為弱類型語言 ,參數的安全判定很有必要 ,可采用es6的解析賦值,默認參數類型; 

          5.多次調用某一對象的屬性時,創建臨時變量,減少原型鏈的查詢,提高代碼效率


          總結 

          1.從細節提高代碼質量 

          2.要學會“偷懶”去提高代碼復用性,可擴展性。


          吐血推薦

          1.站長廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入...

          2.休閑娛樂: 直播/交友    優惠券領取   網頁游戲   H5游戲

          鏈接: http://www.modern-decoration.com.cn/article/detial/3398

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网