弁言

近来做的项目已靠近尾声,方才发到线上,回忆和总结一下这段时候碰到的题目和个人的一些主意。

select下拉修正和回复

//部份下拉选项
 <select  v-model="offer.measureUnit"  :data-index="index" v-select-change="offer.measureUnit">
                <option v-for="option in selectList['measureUnit']" v-bind:value="option" >
                        {{option}}
                 </option>
   </select>
  <!------------------------------------------->
 //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个)。完成:不适合用watch和computed,因为offer.measureUnit太多,且每一个都是自力的差别的相应式属性,斟酌用指令,点击恢复按钮,列表从新衬着,此时指令会悉数实行一遍,因为指令是在同一个组件模板中。经由历程在指令中比较前后值,以及设置cache.submitFlag防备不必要更新致使的弹窗,衬着。衬着终了,回复submitFlag,防备select下拉选项单个点时击失效;measureUnitFlag是为了防备点击同一个下拉选项时,在弹窗逻辑中点击不修正赋原值时反复弹窗状况。

知识点1 指令的道理,在vue2中是函数式组件(就是说模板->render函数),因为数据变化,致使依靠watcher–>update(),在每次组件经vdom diff,update后绑定在组件上的指令,只需组件中相应式属性有一个更新,指令悉数实行一遍.
知识点2 nextTick的机制

export function queueWatcher (watcher: Watcher) {
  const id = watcher.id
  //这里保证了雷同的watcher只要一个会被加入到异步行列中，
  //虽然第一个watcher会放进去,然则对dom的操纵是在nextTick异步操纵中,所以终究实行依靠的update要领时,取的一定是最新的data值。
  if (has[id] == null) {
    has[id] = true
    if (!flushing) {
      queue.push(watcher)
    } else {
      //对应watch内里触发watch的状况,已革新的话,依据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)  //异步行列实行  将waiting和flushing都设为false
    }
  }
}
然后nextTick(flushSchedulerQueue)-->三种兼容机制完成异步处置惩罚(基于优先级递次依次是Promise、MutationObserver、setTimeout)-->nextTickHandler()-> watcher.run()

打包题目

因为几个项目依靠一个大众目次,项目1是基于webpack1,项目2是gulp。依靠的大众目次在被import时能被打包,然则不能编译。当时没找到缘由,一致改成webpack2能够了,末了做项目3时,基于vue2脚手架，涌现一样题目,探究一番,找到缘由,include致使能打包然则不能编译。

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

数据校验

数据200条校验,在毛病多时要举行大批失足款式衬着,比较卡,改成异步(基于setTimeout)单条校验衬着，同时搭配上进度条动态展现处置惩罚历程,处理以上题目。

bug

get要求在ie和360兼容形式下屡次操纵被缓存,接口保护之前的,之前没测出来,发到线上测试考证时发明这个题目,同事一神助攻,协助我疾速定位找到这个bug,这个bug暴露我ie下调试东西运用短缺,指的是win7上ie调试东西,我日常平凡也没用到过。然后处理体式格局能够加时候戳或许改成post要求或许后端设置制止缓存的header。

require.ensure

require.ensure只能是用来完成按需加载，同时具有代码支解的作用，不能完成并行加载，假如要完成并行而且按递次能够用浏览器自身的机制。webpack的require.ensure底层是经由历程jsonp+promise的体式格局,下面是我写的例子被编译后source部份截取,展现出来以便更好的申明题目。

_//1:__webpack_require__.e 加载chunk.js 异步（动态建立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:实行第一步promise的resolve要领，从而能够继承实行then当中的营业逻辑。_
  
    };

开辟

合理的运用dev-server的热加载机制,优化的开辟设置提拔开辟效力;合理的运用mixins选项,模块化拆分封装功用;应用函数式头脑,封装笼统函数单位,营业邻近的一组功用封装成一个模块;症结变量以及逻辑单位加上必要解释,范例的编程作风等。感悟：今后我在code时,half or one day time,先在头脑中先大抵走一遍,做好圆满的前期项目计划–>手艺选型、构造构造、难优化点、可归结的笼统功用等等 –>A good beginning is half of success.

总结

几乎没有完成不了的视觉和交互需求,只要小部份完成起来需斟酌时候本钱题目。范例、TDD、机能、开辟效力等等都寻求圆满有难题,找到一个优越的动态平衡点很主要。路漫漫其修远，吾将高低而求索。