【js】vue 2.5.1 源码学习 （三） Vue.extend 和 data的合并策略

大体思路 （三）

 1. 子类父类

 2.Vue.extend()      //创建vue的子类

　　组件的语法器 Vue.extend(options)

　　Profile().$mount('#app') // 挂在app上，并替换app

　　新建 initExend

　　==》 Vue.extend

 3. strat.data

　　==> if(!vm){子组件中data的值是一个方法function ==> mergeDataorFn()} // 数据的合并

　　==> else {} //通过实例绑定的data 实际是一个函数 mergeDataorFn

　　==》 mergeDataorFn if(!vm) mergeDataFn ==> mergeData()

　　　　　　　　　　　　else ==》mergedInstanceDataFn ==>mergeData()

　   mergeData(to,from) //终极合并

　　jquery.extend // 深copy和浅copy

//  大体思路  （二）
//  1. 子类父类  
/* 
     2.Vue.extend()    //创建vue的子类
     组件的语法器  Vue.extend(options)
     Profile().$mount('#app')  //  挂在app上，并替换app
     新建  initExend   
          ==》 Vue.extend 

*/
/*  3. strat.data    
    ==> if(!vm){子组件中data的值是一个方法function ==> mergeDataorFn()} // 数据的合并
    ==> else {}  //通过实例绑定的data  实际是一个函数 mergeDataorFn 
    ==》 mergeDataorFn if(!vm) mergeDataFn  ==> mergeData()   
         else  ==》mergedInstanceDataFn ==>mergeData()
    mergeData(to,from)  //终极合并
    jquery.extend  // 深copy和浅copy
*/

  

(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 mergeData(to,form){
        // 终极合并
        if(!form){
            return to
        }
    }
    function mergeDataorFn(parentVal,childVal,vm){
        // 合并 parentVal childVal  都是函数
        if(!vm){
            if(!childVal){
                return parentVal
            }
            if(!parentVal){
                return childVal
            }
           return  function mergeDataFn(parentVal,childVal,vm){//只是一个函数   什么样的情况下调用 加入响应式系统 
               // 合并子组件对应的data 和   父组件对应的data
               return mergeData( 
                   typeof parentVal === 'function' ? parentVal.call(this,this) : parentVal,    // -----忘记写
                   typeof childVal === 'function' ? childVal.call(this,this): childVal)      // -----忘记写
           }
        }else{ // vue实例
            return function mergeInstanceDataFn(parentVal,childVal,vm){//只是一个函数   什么样的情况下调用 加入响应式系统 
                var InstanceData = typeof childVal === 'function' ? childVal.call(vm,vm): childVal;   // -----忘记写
                var defaultData = typeof parentVal === 'function' ? parent.call(vm,vm): parentVal;   // -----忘记写
                if(InstanceData){
                    return mergeData(parentVal,childVal)
                }else{                // -----忘记写
                    defaultData
                }
                
            }
        }
    }
    strats.data = function(parent,child , key , vm){
        if(!vm){
          // console.log(typeof child === 'function')
            if(child && !(typeof child === 'function')){
                warn('data必须返回是一个function')
            }
           return mergeDataorFn(parent,child)
        }
        return mergeDataorFn(parent,child,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++ //   //-------忘记写
          
             vm.$options =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
    }
    function initExend(Vue){
        Vue.extend = function(extendOptions){
            extendOptions = extendOptions || {}   // -----忘记写
            var Super = this 
            var Child = function VueComponent() {
                this._init(options)
            }
            Child.prototype = Object.create(Super.prototype)
            Child.prototype.constructor = Child   // 改变constructor 的指向
            Child.options = mergeOptions(Super.options,extendOptions)
            // 子类继承父类的静态方法。
            Child.extend = Vue.extend
            return Child
        }
    }
    initExend(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(Vue)
        var Parent = Vue.extend({
            data: function() {}
        })
        var Child = Parent.extend({});
        console.log(vm.$options)
    </script>
</body>

以上仅个人在学习中的总结笔记，如有问题，请评论回复。