// 大體思路 （二）// 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>