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

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

//部分下拉選項(xiàng)
 
                
                        {{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;
      }
  })
    
    恢復(fù)按鈕部分邏輯操作
               vm.formData=formDataFail;
                   Vue.nextTick(function () {
                        cache.submitFlag=false;
                  })
                   

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

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

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

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

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

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

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

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

_//1:__webpack_require__.e 加載chunk.js 異步（動(dòng)態(tài)創(chuàng)建script）的方式,這個(gè)操作被封裝成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當(dāng)中的業(yè)務(wù)邏輯。_
  
    };

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

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