大体思路 (三)
1.钩子函数 自定义策略
LIFECYCLE_HOOKS= []
created = [function(){} , function(){}] 组装方法。
==> starts[hook]= mergeHook
==> mergeHook(parent,child) // 合并parentVal 和childVal
2.资源选项 自定义策略
==> ASSET_TYPES = []
==> starts[type] = mergeAssets
mergeAssets ==> Object.create(parentVal || null)
===> if(childVal) assetObjectType // 检测conponents 值是否是object
===> extend(res,childVal) // 合并
3.选择watch 合并策略 监听vue实例数据的变化
==> strats.watch
vue.js 如下
1 // 大体思路 (三) 2 // 1.钩子函数 自定义策略 3 /** LIFECYCLE_HOOK= [] 4 * created = [function(){} , function(){}] 组装方法。 5 * ==> starts.[hook]= mergeHook 6 * mergeHook(parent,child) // 合并parentVal 和childVal 7 */ 8 /* 2.资源选项 自定义策略 9 * ==> ASSET_TYPES = [] 10 * ==> starts.[type] = mergeAssets 11 * ==> Object.create(parentVal || null) 12 ==> if(childVal) assetObjectType // 检测conponents 值是否是object 13 ==> extend(res,childVal) // 合并 14 * 15 */ 16 // 3.选择watch 合并策略 监听vue实例数据的变化 17 /* ==> strats.watch */ 18 19 20 (function(global,factory){ 21 // 兼容 cmd 22 typeof exports === 'object' && module !== 'undefined' ? module.exports = factory(): 23 // Amd 24 typeof define === 'function' && define.amd ? define(factory) : global.Vue = factory(); 25 })(this,function(){ 26 var uip = 0; 27 function warn(string){ 28 console.error('Vue Wran:' + string) 29 } 30 function resolveConstructorOptions(Con){ 31 var options = Con.options; 32 // 判断是否为vm的实例 或者是子类 33 return options 34 } 35 var hasOwnPropeerty = Object.prototype.hasOwnProperty 36 function hasOwn(obj , key){ 37 return hasOwnPropeerty.call(obj,key) 38 } 39 function makeMap(str, expectsLoweraseC){ 40 if(expectsLoweraseC){ 41 str = str.toLowerCase() 42 } 43 var map = Object.create(null) 44 var list = str.split(',') 45 for(var i = 0 ; i < list.length; i++){ 46 map[list[i]] = true 47 } 48 return function(key){ 49 return map[key] 50 51 } 52 } 53 var isbuiltInTag = makeMap('slot,component',true) 54 var isHTMLTag = makeMap( 55 'html,body,base,head,link,meta,style,title,' + 56 'address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,' + 57 'div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,' + 58 'a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,' + 59 's,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,' + 60 'embed,object,param,source,canvas,script,noscript,del,ins,' + 61 'caption,col,colgroup,table,thead,tbody,td,th,tr,' + 62 'button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,' + 63 'output,progress,select,textarea,' + 64 'details,dialog,menu,menuitem,summary,' + 65 'content,element,shadow,template,blockquote,iframe,tfoot' 66 ); 67 var isSVG = makeMap( 68 'svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,' + 69 'foreignObject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,' + 70 'polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view', 71 true 72 ); 73 var ASSET_TYPES = [ 74 'component', 75 'directive', 76 'filter' 77 ]; 78 79 var LIFECYCLE_HOOKS = [ 80 'beforeCreate', 81 'created', 82 'beforeMount', 83 'mounted', 84 'beforeUpdate', 85 'updated', 86 'beforeDestroy', 87 'destroyed', 88 'activated', 89 'deactivated', 90 'errorCaptured' 91 ]; 92 93 var isReservedTag = function(key){ 94 return isHTMLTag(key) || isSVG(key) 95 } 96 function validataComponentName(key){ 97 //检测component 的自定义名称是否合格 98 // 只能是字母开头或下划线,必须是字母开头 99 if(!(/^[a-zA-Z][\w-]*$/g.test(key))){100 warn('组件的名称必须是字母或中横线,必须由字母开头')101 }102 // 1. 不能为内置对象,2.不能是html ,和avg的内部标签103 if( isbuiltInTag(key) || isReservedTag(key)){104 warn('不能为html标签或者avg的内部标签')105 } 106 }107 function checkComonpents(child){108 for(var key in child.components){109 validataComponentName(key)110 }111 }112 // 配置对象113 var config = {114 // 自定义的策略115 optionMergeStrategies:{}116 }117 var strats = config.optionMergeStrategies118 strats.el = function(parent,child , key , vm){119 120 if(!vm){121 warn('选项'+key+'只能在vue实例用使用')122 }123 return defaultStrat(parent,child , key , vm)124 }125 function mergeData(to,form){126 // 终极合并127 if(!form){128 return to129 }130 // 具体合并。 131 }132 function mergeDataorFn(parentVal,childVal,vm){133 // 合并 parentVal childVal 都是函数134 if(!vm){135 if(!childVal){136 return parentVal137 }138 if(!parentVal){139 return childVal140 }141 return function mergeDataFn(parentVal,childVal,vm){ //只是一个函数 什么样的情况下调用 加入响应式系统 142 // 合并子组件对应的data 和 父组件对应的data143 return mergeData( 144 typeof parentVal === 'function' ? parentVal.call(this,this) : parentVal, // -----忘记写145 typeof childVal === 'function' ? childVal.call(this,this): childVal) // -----忘记写146 }147 }else{ // vue实例148 return function mergeInstanceDataFn(parentVal,childVal,vm){ //只是一个函数 什么样的情况下调用 加入响应式系统 149 var InstanceData = typeof childVal === 'function' ? childVal.call(vm,vm): childVal; // -----忘记写150 var defaultData = typeof parentVal === 'function' ? parent.call(vm,vm): parentVal; // -----忘记写151 if(InstanceData){152 return mergeData(parentVal,childVal)153 }else{ // -----忘记写154 defaultData155 }156 157 }158 }159 }160 strats.data = function(parent,child , key , vm){161 if(!vm){162 // console.log(typeof child === 'function')163 if(child && !(typeof child === 'function')){164 warn('data必须返回是一个function')165 }166 return mergeDataorFn(parent,child)167 }168 return mergeDataorFn(parent,child,vm)169 }170 // 生命周期策略的合并,值等于一个function 如果是有两个,放到一个数组里面。171 function mergeHook(parentVal,childVal,key,vm){172 // console.log(key)173 // console.log(parentVal.concat(childVal) )174 return childVal ? parentVal ? parentVal.concat(childVal):175 Array.isArray(childVal) ? childVal : [childVal] : parentVal176 }177 LIFECYCLE_HOOKS.forEach(function(key){178 strats[key] = mergeHook179 });180 // 检测是否为object181 function isPlainObject(obj){182 return Object.prototype.toString.call(obj) === '[object Object]'183 }184 function assetObjectType(obj){185 if(!isPlainObject(obj)){186 marn('选项的值'+obj+'无效:必须是一个对象的')187 }188 }189 // 对parent实现链式调用。190 function extend(to,form){191 for(key in form){192 to[key] = form[key]193 }194 return to195 }196 // 实现Assets 的策略合并 conmponents filter diretive 197 function mergeAssets(parentVal,childVal,key,vm){198 var parent = Object.create(parentVal || null) // 保证子类的每个值的指向都是一个新的object。否则回出现相互引用的现象。199 if(childVal){200 assetObjectType(childVal)201 return extend(parent,childVal)202 } 203 return parent204 }205 ASSET_TYPES.forEach(function(key){206 strats[key+'s'] = mergeAssets207 })208 // 实现watch的策略和并,将相同的属性放到一个数组里面。209 strats.watch = function(parentVal,childVal , key , vm){210 if(!childVal){211 return Object.create(parentVal)212 }213 var res = {}214 res = extend(res,parentVal) 215 for(var key in childVal){216 var parent = res[key]217 var child = childVal[key]218 res[key] = parent ? Array.isArray(parent) ? parent.concat(child) : [parent].concat(child) : 219 Array.isArray(child) ? child : [child] ;220 }221 return res222 }223 function defaultStrat(parent,child , key , vm){224 return child === undefined ? parent :child ;225 }226 function mergeOptions(parent,child,vm){227 var options = {}228 // 检测是component 是否是合法的 229 230 checkComonpents(child)231 232 // console.log(parent, child)233 for(key in parent){234 magerField(key)235 }236 for(key in child){237 if(!hasOwn(parent ,key)){ // parent 中循环过地方不进行循环238 magerField(key) // ----忘记写239 }240 241 }242 // 默认合并策略243 function magerField(key){ 244 // 自定义策略 默认策略 245 // console.log(key)246 var result = strats[key] || defaultStrat // ---忘记写247 options[key] = result(parent[key],child[key] , key , vm)248 }249 // console.log(options)250 return options251 }252 function initMinxin(options){253 Vue.prototype._init = function(options){254 var vm = this 255 // 记录生成的vue实例对象 256 vm._uip = uip++ // //-------忘记写257 258 vm.$options =mergeOptions(resolveConstructorOptions(vm.constructor),options,vm)259 }260 }261 function Vue(options){262 // 安全机制263 if(!(this instanceof Vue)){ //-------忘记写264 warn('Vue是一个构造函数,必须是由new关键字调用') 265 }266 this._init(options)267 }268 initMinxin() // 初始化选项1: 规范 2: 合并策略。269 Vue.options = {270 components: {271 transtions: {},272 keepAlive:{},273 solt:{},274 transtionsGroup:{}275 },276 directives:{},277 _bash: Vue278 }279 function initExend(Vue){280 Vue.extend = function(extendOptions){281 extendOptions = extendOptions || {} // -----忘记写282 var Super = this 283 var Child = function VueComponent(options) {284 this._init(options)285 }286 Child.prototype = Object.create(Super.prototype)287 Child.prototype.constructor = Child // 改变constructor 的指向288 Child.options = mergeOptions(Super.options,extendOptions)289 // 子类继承父类的静态方法。290 Child.extend = Vue.extend291 // console.log(new Child({}))292 return Child293 }294 }295 initExend(Vue)296 return Vue297 })
dome.html 代码如下
1 235 6 7 514
以上仅为个人学习笔记,如有疑问,请评论回复