摘要：引言最近做的項目已經(jīng)接近尾聲剛剛發(fā)到線上回顧和總結(jié)一下這段時間遇到的問題和個人的一些想法。通過在指令中比較前后值以及設(shè)置避免不必要更新導致的彈窗渲染。

最近做的項目已經(jīng)接近尾聲,剛剛發(fā)到線上,回顧和總結(jié)一下這段時間遇到的問題和個人的一些想法。

//部分下拉選項
 
                
                        {{option}}
                 
   
  
 //select綁定的指令部分操作
  Vue.directive("select-change", {
      update: function (el,binding) {
         var oldValue=binding.oldValue;
          var newValue=binding.value;
          if(cache.submitFlag==true){
              return;
          }
          if(validatorRules.isBlank(oldValue)||validatorRules.isBlank(newValue)||(oldValue==newValue)){
              return;
          }
          if(el.getAttribute("measureUnitFlag")!="1"){
            var index= el.dataset.index;
                  new Dialog.tip({
                     ………………xxx邏輯
                      close(){
                                   el.setAttribute("measureUnitFlag","1");
                                    vm.formData[index].measureUnit=oldValue;
                              },
                  })
          }else {
              el.setAttribute("measureUnitFlag","0");
          }
          return false;
      }
  })
    
    恢復按鈕部分邏輯操作
               vm.formData=formDataFail;
                   Vue.nextTick(function () {
                        cache.submitFlag=false;
                  })
                   

說明 需求:點擊select下拉選項,彈窗提示是否修改(select最多有200個)。實現(xiàn):不適合用watch和computed,因為offer.measureUnit太多,且每個都是獨立的不同的響應(yīng)式屬性,考慮用指令,點擊恢復按鈕,列表重新渲染,此時指令會全部執(zhí)行一遍,因為指令是在同一個組件模板中。通過在指令中比較前后值,以及設(shè)置cache.submitFlag避免不必要更新導致的彈窗,渲染。渲染完畢,復原submitFlag,防止select下拉選項單個點時擊失效;measureUnitFlag是為了防止點擊同一個下拉選項時,在彈窗邏輯中點擊不修改賦原值時重復彈窗情況。

知識點1 指令的原理,在vue2中是函數(shù)式組件(就是說模板->render函數(shù)),由于數(shù)據(jù)變化,導致依賴watcher-->update(),在每次組件經(jīng)vdom diff,update后綁定在組件上的指令,只要組件中響應(yīng)式屬性有一個更新,指令全部執(zhí)行一遍.
知識點2 nextTick的機制

export function queueWatcher (watcher: Watcher) {
  const id = watcher.id
  //這里保證了相同的watcher只有一個會被加入到異步隊列中，
  //雖然第一個watcher會放進去,但是對dom的操作是在nextTick異步操作中,所以最終執(zhí)行依賴的update方法時,取的一定是最新的data值。
  if (has[id] == null) {
    has[id] = true
    if (!flushing) {
      queue.push(watcher)
    } else {
      //對應(yīng)watch里面觸發(fā)watch的情況,已經(jīng)刷新的話,根據(jù)watcher標識的id刪除watcher
      let i = queue.length - 1
      while (i >= 0 && queue[i].id > watcher.id) {
        i--
      }
      queue.splice(Math.max(i, index) + 1, 0, watcher)
    }
    // queue the flush
    if (!waiting) {
      waiting = true
      nextTick(flushSchedulerQueue)  //異步隊列執(zhí)行  將waiting和flushing都設(shè)為false
    }
  }
}
然后nextTick(flushSchedulerQueue)-->三種兼容機制實現(xiàn)異步處理(基于優(yōu)先級順序依次是Promise、MutationObserver、setTimeout)-->nextTickHandler()-> watcher.run()

因為幾個項目依賴一個公共目錄,項目1是基于webpack1,項目2是gulp。依賴的公共目錄在被import時能被打包,但是不能編譯。當時沒找到原因,統(tǒng)一改成webpack2可以了,最后做項目3時,基于vue2腳手架，出現(xiàn)同樣問題,探索一番,找到原因,include導致能打包但是不能編譯。

 {
        test: /.js$/,
        loader: "babel-loader",
         exclude: /node_modules/,
        // include: [resolve("src"), resolve("test")],
        options: {
          presets: [
            ["es2015"]
          ]
        }
 }

數(shù)據(jù)200條校驗,在錯誤多時要進行大量出錯樣式渲染,比較卡,改成異步(基于setTimeout)單條校驗渲染，同時搭配上進度條動態(tài)展示處理過程,解決以上問題。

get請求在ie和360兼容模式下多次操作被緩存,接口維護之前的,之前沒測出來,發(fā)到線上測試驗證時發(fā)現(xiàn)這個問題,同事一神助攻,幫助我快速定位找到這個bug,這個bug暴露我ie下調(diào)試工具使用欠缺,指的是win7上ie調(diào)試工具,我平時也沒用到過。然后解決方式可以加時間戳或者改成post請求或者后端設(shè)置禁止緩存的header。

require.ensure只能是用來實現(xiàn)按需加載，同時具有代碼分割的作用，不能實現(xiàn)并行加載，如果要實現(xiàn)并行并且按順序可以用瀏覽器本身的機制。webpack的require.ensure底層是通過jsonp+promise的方式,下面是我寫的例子被編譯后source部分截取,展示出來以便更好的說明問題。

_//1:__webpack_require__.e 加載chunk.js 異步（動態(tài)創(chuàng)建script）的方式,這個操作被封裝成promise返回_
__webpack_require__.e/* require.ensure */(0).then((function (require) {
    console.log("begin");
    var module2 = __webpack_require__(2);
   
  }).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
  
_  ---------------------------
 // 2:jsonp方式,主要功能是安裝chunk_
   window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
       var moduleId, chunkId, i = 0, resolves = [], result;
       for(;i < chunkIds.length; i++) {
          chunkId = chunkIds[i];
          if(installedChunks[chunkId])
             resolves.push(installedChunks[chunkId][0]);
          installedChunks[chunkId] = 0;
       }
       
       if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);
       while(resolves.length)
          resolves.shift()();  _//3:執(zhí)行第一步promise的resolve方法，從而可以繼續(xù)執(zhí)行then當中的業(yè)務(wù)邏輯。_
  
    };

合理的使用dev-server的熱加載機制,優(yōu)化的開發(fā)配置提升開發(fā)效率;合理的使用mixins選項,模塊化拆分封裝功能;利用函數(shù)式思想,封裝抽象函數(shù)單元,業(yè)務(wù)相近的一組功能封裝成一個模塊;關(guān)鍵變量以及邏輯單元加上必要注釋,規(guī)范的編程風格等。感悟：以后我在code時,half or one day time,先在思想中先大致走一遍,做好完善的前期項目規(guī)劃-->技術(shù)選型、結(jié)構(gòu)組織、難優(yōu)化點、可歸納的抽象功能等等 -->A good beginning is half of success.

幾乎沒有實現(xiàn)不了的視覺和交互需求,只有小部分實現(xiàn)起來需考慮時間成本問題。規(guī)范、TDD、性能、開發(fā)效率等等都追求完美有困難,找到一個良好的動態(tài)平衡點很重要。路漫漫其修遠，吾將上下而求索。