【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>

以上僅為個人學習上的筆記，如有問題，歡迎評論。