【js】vue 2.5.1 源码学习（二） 策略合并

 一、  整体思路

    1 首先是代码的大体构造，先判断引入代码的环境，即对应amd 和cmd的处理

    2 vue_init 需要借助 initMinxin    ==>>>       // 初始化选项1: 规范 2: 合并策略。

    3 mergeOptions 选项合并 一个或者多个对象合并，并且生成一个新的对象

         ==>  resloveConstructorOptions 返回vm的optios 判断是否是vue对象有可能是vue子类。不一定指向options。

                parent 自定义的options的选项     child 用户自定义的options

         ==>   checkComonpents // 规范的检测 validataComponentsName(key)

                检测component的名称是否规范（不能使用内置标签slot component 关于html的标签名称 svg的子类的名称）

              （规范：组件的名称必须是字母或中横线，必须由字母开头）

                isbuiltInTag 检测是都是内置标签 isReservedTag是否是html的标签

                ===>   makeMap 检测key是否在makeMap里面

        ==> mergeField 默认策略 // 以默认为优先。用户定义为覆盖

              defaultStrat(parent,chhild)  合并策略   child === undefined ? parent : child;

       ==>  var config = {    // 配置对象

                  // 内置对象自定义策略

                 optionMergeStrategies:{}

               }

             var strats = config.optionMergeStrategies;

    4 Vue.options = {} vue的全局api

 //  大体思路
 // 1 首先是代码的大体构造，先判断引入代码的环境，即对应amd 和cmd的处理
 // 2 vue_init  需要借助  initMinxin  // 初始化选项1: 规范 2: 合并策略。
 // 3 mergeOptions  选项合并 一个或者多个对象合并，并且生成一个新的对象
     // resloveConstructorOptions  返回vm的optios  判断是否是vue对象又k
     // 有可能是vue子类。不一定指向options。
     //  parent 自定义的options的选项
     //  child  用户自定义的options
     /*  checkComonpents  // 规范的检测 validataComponentsName(key)
         检测component的名称是否规范（不能使用内置标签slot component 关于html的标签名称  svg的子类的名称）自称）
        （规范：组件的名称必须是字母或中横线，必须由字母开头）
         isbuiltInTag 检测是都是内置标签  isReservedTag是否是html的标签
         makeMap  检测key是否在makeMap里面
     */
     /*  mergeField 默认策略 // 以默认为优先。用户定义为覆盖
         defaultStrat(parent,chhild)
         child === undefined ? parent : child;
     */
    /*
      var config = {
          optionMergeStrategies:{}
      }
      var strats = config.optionMergeStrategies;
    */
 // 4 Vue.options = {} vue的全局api   

 (function(global,factory){
     // 兼容 cmd
     typeof exports === 'object'  && module !== 'undefined' ? module.exports = factory():
     // Amd
     typeof define  === 'function' && define.amd ?  define(factory) : global.Vue = factory();
 })(this,function(){
     var uip = 0;
     function warn(string){
         console.error('Vue Wran:' + string)
     }

     function resolveConstructorOptions(Con){
         var options = Con.options;
         // 判断是否为vm的实例 或者是子类
           return options
     }
     var hasOwnPropeerty = Object.prototype.hasOwnProperty
     function hasOwn(obj , key){
         return hasOwnPropeerty.call(obj,key)
     }
     function makeMap(str, expectsLoweraseC){
         if(expectsLoweraseC){
             str = str.toLowerCase()
         }
         var map = Object.create(null)
         var list = str.split(',')
         for(var i = 0 ; i < list.length; i++){
             map[list[i]] = true
         }
         return function(key){
             return map[key]

         }
     }
     var  isbuiltInTag = makeMap('slot,component',true)
     var isHTMLTag = makeMap(
         'html,body,base,head,link,meta,style,title,' +
         'address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,' +
         'div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,' +
         'a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,' +
         's,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,' +
         'embed,object,param,source,canvas,script,noscript,del,ins,' +
         'caption,col,colgroup,table,thead,tbody,td,th,tr,' +
         'button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,' +
         'output,progress,select,textarea,' +
         'details,dialog,menu,menuitem,summary,' +
         'content,element,shadow,template,blockquote,iframe,tfoot'
     );
     var isSVG = makeMap(
         'svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,' +
         'foreignObject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,' +
         'polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view',
         true
     );
     var isReservedTag = function(key){
         return isHTMLTag(key) || isSVG(key)
     }
     function validataComponentName(key){
         //检测component 的自定义名称是否合格
         // 只能是字母开头或下划线，必须是字母开头
         if(!(/^[a-zA-Z][\w-]*$/g.test(key))){
            warn('组件的名称必须是字母或中横线，必须由字母开头')
         }
         // 1. 不能为内置对象，2.不能是html ,和avg的内部标签
         if( isbuiltInTag(key) || isReservedTag(key)){
             warn('不能为html标签或者avg的内部标签')
         }
     }
     function checkComonpents(child){
         for(var key in child.component){
             validataComponentName(key)
         }
     }
    // 配置对象
     var config = {
         // 自定义的策略
         optionMergeStrategies:{}
     }
     var strats = config.optionMergeStrategies
     strats.el = function(parent,child , key , vm){

           if(!vm){
               warn('选项'+key+'只能在vue实例用使用')
           }
           return defaultStrat(parent,child , key , vm)
     }
     function defaultStrat(parent,child , key , vm){
         return child === undefined ? parent :child ;
     }
     function mergeOptions(parent,child,vm){
         var options = {}
         // 检测是component 是否是合法的  

         checkComonpents(child)

         // console.log(parent, child)
         for(key in parent){
             magerField(key)
         }
         for(key in child){
             if(!hasOwn(parent ,key)){  // parent 中循环过地方不进行循环
                 magerField(key)  // ----忘记写
             }

         }
         // 默认合并策略
         function magerField(key){
             // 自定义策略  默认策略
             // console.log(key)
             var result = strats[key] || defaultStrat        // ---忘记写
             options[key] = result(parent[key],child[key] , key , vm)
         }
         console.log(options)
         return options
     }
     function initMinxin(options){
         Vue.prototype._init = function(options){
             var vm = this
             // 记录生成的vue实例对象
             vm._uip =  uip++ //   //-------忘记写

              mergeOptions(resolveConstructorOptions(vm.constructor),options,vm)
         }
     }
     function Vue(options){
         // 安全机制
         if(!(this instanceof Vue)){     //-------忘记写
             warn('Vue是一个构造函数，必须是由new关键字调用')
         }
         this._init(options)
     }
     initMinxin()  //  初始化选项1: 规范 2: 合并策略。
     Vue.options = {
         components: {},
         directives:{},
         _bash: Vue
     }
     return Vue
 })

 <body>
     <div id="app">
         <huml></huml>
     </div>
     <script src="vue.js"></script>
     <!-- <script src="vue2.5.1.js"></script> -->
     <script type="text/javascript">
         var componentA = {
             el: "#app"
         }
         var vm = new Vue({
             el:"#app",
             data: {
                 message: "hello Vue",
                 key: "wodow"
             },
             components:{
                 huml: componentA
             }

         })
         console.log(vm.$options)
     </script>
 </body>

以上仅为个人学习上的笔记，如有问题，欢迎评论。