【js】 vue 2.5.1 源碼學習（六） initProxy initLifeCycle 渲染函數的做用域代理
大致思路 （五）
1. initProxy 渲染函數的做用域代理
==> es6 若是支持proxy (hasProxy) 就用proxy 不支持就用 defineProperty()
proxy 和 defineProperty 區別？
definedProperty 只能監聽對象的屬性 描述屬性
proxy 是一個構造函數 監聽對象 支持攔截操做 代理obj對象對obj並不直接作處理。
var obj = {name: 'max'}
var peoxyobj = new Proxy(obj,{
has: function(target,key){
console.log('hahahhah')
}
})
has 鉤子函數 能夠攔截proxyobj 判斷對象是否具備某個屬性時觸發鉤子函數
has 能夠攔截 with語句
with 改變執行中的做用域
console.log("name" in peoxyobj)
with(obj){
console.log(name) //== obj.name 將環境指向obj
}
with 不推薦使用 性能差
==> options.render && options.render._withStripped?
getHeadler :
hasHeadler ;
vm._renderProxy = new Proxy(vm,h)
==>hasHeadler
==> alloweGlobals 檢測是否爲一些全局變量 或者是 render內置方法 _
==>getHeadler
2. initLifecycle 實例對象$children $parent 處理
==> 將當前實例添加到父實例的 $children屬性中，並設置自身的$parent的屬性指向父實例。
abstrat // 抽象組件 1.不會出如今父級的路徑上，2.不會參與dom渲染。
vue.js 代碼以下
1 // 大致思路 （五） 2 // 本節內容： 3 // 1. initProxy 渲染函數的做用域代理 4 // ==> es6 若是支持proxy (hasProxy) 就用proxy 不支持就用 defineProperty() 5 // proxy 和 defineProperty 區別？ 6 // definedProperty 只能監聽對象的屬性 描述屬性 7 // proxy 是一個構造函數 監聽對象 支持攔截操做 代理obj對象對obj並不直接作處理。 8 // var obj = {name: 'max'} 9 // var peoxyobj = new Proxy(obj,{ 10 // has: function(target,key){ 11 // console.log('hahahhah') 12 // } 13 // }) 14 // has 鉤子函數 能夠攔截proxyobj 判斷對象是否具備某個屬性時觸發鉤子函數 15 // has 能夠攔截 with語句 16 // with 改變執行中的做用域 17 // console.log("name" in peoxyobj) 18 // with(obj){ 19 // console.log(name) //== obj.name 將環境指向obj 20 // } 21 // with 不推薦使用 性能差 22 // ==> options.render && options.render._withStripped? 23 // getHeadler : 24 // hasHeadler ; 25 // vm._renderProxy = new Proxy(vm,h) 26 // ==>hasHeadler 27 // ==> alloweGlobals 檢測是否爲一些全局變量 或者是 render內置方法 _ 28 // ==>getHeadler 29 // options.render 準備就緒了 30 // 2. initLifecycle 實例對象$children $parent 處理 31 // 將當前實例添加到父實例的 $children屬性中，並設置自身的$parent的屬性指向父實例。 32 // abstrat // 抽象組件 1.不會出如今父級的路徑上，2.不會參與dom渲染。 33 34 35 (function(global,factory){ 36 // 兼容 cmd 37 typeof exports === 'object' && module !== 'undefined' ? module.exports = factory(): 38 // Amd 39 typeof define === 'function' && define.amd ? define(factory) : global.Vue = factory(); 40 })(this,function(){ 41 var uip = 0; 42 function warn(string){ 43 console.error('Vue Wran:' + string) 44 } 45 function warnNonpresent(target,key){ 46 warn('屬性方法'+ key + '未在實例對象上定義，渲染功能正在嘗試訪問這個不存在的屬性！') 47 } 48 function resolveConstructorOptions(Con){ 49 var options = Con.options; 50 // 判斷是否爲vm的實例 或者是子類 51 return options 52 } 53 var hasOwnPropeerty = Object.prototype.hasOwnProperty 54 function hasOwn(obj , key){ 55 return hasOwnPropeerty.call(obj,key) 56 } 57 function makeMap(str, expectsLoweraseC){ 58 if(expectsLoweraseC){ 59 str = str.toLowerCase() 60 } 61 var map = Object.create(null) 62 var list = str.split(',') 63 for(var i = 0 ; i < list.length; i++){ 64 map[list[i]] = true 65 } 66 return function(key){ 67 return map[key] 68 69 } 70 } 71 var isbuiltInTag = makeMap('slot,component',true) 72 var isHTMLTag = makeMap( 73 'html,body,base,head,link,meta,style,title,' + 74 'address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,' + 75 'div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,' + 76 'a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,' + 77 's,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,' + 78 'embed,object,param,source,canvas,script,noscript,del,ins,' + 79 'caption,col,colgroup,table,thead,tbody,td,th,tr,' + 80 'button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,' + 81 'output,progress,select,textarea,' + 82 'details,dialog,menu,menuitem,summary,' + 83 'content,element,shadow,template,blockquote,iframe,tfoot' 84 ); 85 var isSVG = makeMap( 86 'svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,' + 87 'foreignObject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,' + 88 'polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view', 89 true 90 ); 91 var ASSET_TYPES = [ 92 'component', 93 'directive', 94 'filter' 95 ]; 96 97 var LIFECYCLE_HOOKS = [ 98 'beforeCreate', 99 'created', 100 'beforeMount', 101 'mounted', 102 'beforeUpdate', 103 'updated', 104 'beforeDestroy', 105 'destroyed', 106 'activated', 107 'deactivated', 108 'errorCaptured' 109 ]; 110 111 var isReservedTag = function(key){ 112 return isHTMLTag(key) || isSVG(key) 113 } 114 function validataComponentName(key){ 115 //檢測component 的自定義名稱是否合格 116 // 只能是字母開頭或下劃線，必須是字母開頭 117 if(!(/^[a-zA-Z][\w-]*$/g.test(key))){ 118 warn('組件的名稱必須是字母或中橫線，必須由字母開頭') 119 } 120 // 1. 不能爲內置對象，2.不能是html ,和avg的內部標籤 121 if( isbuiltInTag(key) || isReservedTag(key)){ 122 warn('不能爲html標籤或者avg的內部標籤') 123 } 124 } 125 function checkComonpents(child){ 126 for(var key in child.components){ 127 validataComponentName(key) 128 } 129 } 130 // 配置對象 131 var config = { 132 // 自定義的策略 133 optionMergeStrategies:{} 134 } 135 var strats = config.optionMergeStrategies 136 strats.el = function(parent,child , key , vm){ 137 138 if(!vm){ 139 warn('選項'+key+'只能在vue實例用使用') 140 } 141 return defaultStrat(parent,child , key , vm) 142 } 143 function mergeData(to,form){ 144 // 終極合併 145 if(!form){ 146 return to 147 } 148 // 具體合併。 149 } 150 function mergeDataorFn(parentVal,childVal,vm){ 151 // 合併 parentVal childVal 都是函數 152 if(!vm){ 153 if(!childVal){ 154 return parentVal 155 } 156 if(!parentVal){ 157 return childVal 158 } 159 return function mergeDataFn(parentVal,childVal,vm){//只是一個函數 什麼樣的狀況下調用 加入響應式系統 160 // 合併子組件對應的data 和 父組件對應的data 161 return mergeData( 162 typeof parentVal === 'function' ? parentVal.call(this,this) : parentVal, // -----忘記寫 163 typeof childVal === 'function' ? childVal.call(this,this): childVal) // -----忘記寫 164 } 165 }else{ // vue實例 166 return function mergeInstanceDataFn(parentVal,childVal,vm){//只是一個函數 什麼樣的狀況下調用 加入響應式系統 167 var InstanceData = typeof childVal === 'function' ? childVal.call(vm,vm): childVal; // -----忘記寫 168 var defaultData = typeof parentVal === 'function' ? parent.call(vm,vm): parentVal; // -----忘記寫 169 if(InstanceData){ 170 return mergeData(parentVal,childVal) 171 }else{ // -----忘記寫 172 defaultData 173 } 174 175 } 176 } 177 } 178 strats.data = function(parent,child , key , vm){ 179 if(!vm){ 180 // console.log(typeof child === 'function') 181 if(child && !(typeof child === 'function')){ 182 warn('data必須返回是一個function') 183 } 184 return mergeDataorFn(parent,child) 185 } 186 return mergeDataorFn(parent,child,vm) 187 } 188 // 生命週期策略的合併，值等於一個function 若是是有兩個，放到一個數組裏面。 189 function mergeHook(parentVal,childVal,key,vm){ 190 // console.log(key) 191 // console.log(parentVal.concat(childVal) ) 192 return childVal ? parentVal ? parentVal.concat(childVal): 193 Array.isArray(childVal) ? childVal : [childVal] : parentVal 194 } 195 LIFECYCLE_HOOKS.forEach(function(key){ 196 strats[key] = mergeHook 197 }); 198 // 檢測是否爲object 199 function isPlainObject(obj){ 200 return Object.prototype.toString.call(obj) === '[object Object]' 201 } 202 function assetObjectType(obj){ 203 if(!isPlainObject(obj)){ 204 marn('選項的值'+obj+'無效：必須是一個對象的') 205 } 206 } 207 // 對parent實現鏈式調用。 208 function extend(to,form){ 209 for(key in form){ 210 211 to[key] = form[key] 212 } 213 return to 214 } 215 // 實現Assets 的策略合併 conmponents filter diretive 216 function mergeAssets(parentVal,childVal,key,vm){ 217 var parent = Object.create(parentVal || null) // 保證子類的每一個值的指向都是一個新的object。不然回出現相互引用的現象。 218 if(childVal){ 219 assetObjectType(childVal) 220 return extend(parent,childVal) 221 } 222 return parent 223 } 224 ASSET_TYPES.forEach(function(key){ 225 strats[key+'s'] = mergeAssets 226 }) 227 // 實現watch的策略和並，將相同的屬性放到一個數組裏面。 228 strats.watch = function(parentVal,childVal , key , vm){ 229 if(!childVal){ 230 return Object.create(parentVal) 231 } 232 var res = {} 233 res = extend(res,parentVal) 234 for(var key in childVal){ 235 var parent = res[key] 236 var child = childVal[key] 237 res[key] = parent ? Array.isArray(parent) ? parent.concat(child) : [parent].concat(child) : 238 Array.isArray(child) ? child : [child] ; 239 } 240 return res 241 } 242 // 實現props指令的合併策略 243 strats.props = function(parentVal,childVal , key , vm){ 244 if(!childVal){ 245 return parentVal 246 } 247 var res = Object.create( null) 248 extend(res,parentVal) 249 if(childVal){ 250 extend(res,childVal) 251 } 252 return res 253 } 254 function defaultStrat(parent,child , key , vm){ 255 return child === undefined ? parent :child ; 256 } 257 var cmalizeRE = /-(\w)/g 258 function camelize(val){ 259 return val.replace(cmalizeRE,function(c,m){ 260 return m ? m.toUpperCase(): "" 261 }) 262 } 263 function normalizeProps(options){ 264 var props = options.props 265 if(!props){ 266 return 267 } 268 var i , val , name 269 var res = {} 270 if(Array.isArray(props)){ 271 i = props.length 272 while(i--){ 273 val = props[i] 274 if(toString.call(val) === '[object String]'){ 275 name = camelize(val) 276 res[name] = {type: null} 277 }else{ 278 warn('使用數組愈發時props成員' +val+ '必須時一個數組') 279 } 280 281 282 } 283 }else if(isPlainObject(props)){ 284 for(var key in props){ 285 val = props[key] 286 name = camelize(key) 287 res[name] = isPlainObject(val) ? val : {type: val} 288 } 289 }else { 290 warn('選項props的值必須是一個對象或者是數組') 291 } 292 options.props = res 293 } 294 function mormalizeDirectives(options){ 295 var dir = options.directives 296 var res = {} 297 if(!dir){ 298 return 299 } 300 if(dir){ 301 for(var key in dir){ 302 var val = dir[key] 303 var name = camelize(key) 304 if(isPlainObject(val)){ 305 res[name] = val 306 } 307 if(toString.call(val) === '[object Function]'){ 308 res[name] = { 309 bind: val, 310 upata: val 311 } 312 } 313 } 314 } 315 options.directives = res 316 317 } 318 function mergeOptions(parent,child,vm){ 319 var options = {} 320 // 檢測是component 是不是合法的 321 checkComonpents(child) 322 // 規範props 323 normalizeProps(child) 324 // 規範 dirctives 325 mormalizeDirectives(child) 326 327 // console.log(parent, child) 328 for(key in parent){ 329 magerField(key) 330 } 331 for(key in child){ 332 if(!hasOwn(parent ,key)){ // parent 中循環過地方不進行循環 333 magerField(key) // ----忘記寫 334 } 335 336 } 337 // 默認合併策略 338 function magerField(key){ 339 // 自定義策略 默認策略 340 // console.log(key) 341 var result = strats[key] || defaultStrat // ---忘記寫 342 options[key] = result(parent[key],child[key] , key , vm) 343 } 344 // console.log(options) 345 return options 346 } 347 348 var allowedGlobals = makeMap( 349 'Infinity,undefined,NaN,isFinite,isNaN,' + 350 'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' + 351 'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' + 352 'require' // for Webpack/Browserify 353 ); 354 function isNative(Ctor){ 355 return typeof Ctor !== undefined && /native code/.test(toString.call(Ctor)) 356 } 357 var hasproxy = typeof Proxy !== undefined && isNative(Proxy) 358 var hasHeadler = { 359 has: function(target,key){ 360 var val = key in target 361 // key 是不是全局對象 或者內置方法 _ 362 var isAllowed = allowedGlobals(key) || (typeof key === 'string' && key.charAt(0) === '_') 363 if(!val && !isAllowed){ 364 warnNonpresent(target,key) 365 } 366 return val || !isAllowed 367 } 368 } 369 var getHeadler = { 370 get: function(target,key){ 371 if( typeof key === 'string' && !(key in target)){ 372 warnNonpresent(target,key) 373 } 374 return target[key] 375 } 376 } 377 378 // 數據代理 379 function initProxy(vm){ 380 var options = vm.$options 381 // 判斷是不是es6 是否存在Proxy 382 if(hasproxy){ 383 // 渲染函數攔截那些操做。 1. has 查詢 2. get 或者 384 var headler = options.render && options.render._withStripeed ? 385 getHeadler: 386 hasHeadler; 387 vm._renderPorxy= new proxy(vm,headler) 388 }else{ 389 // 若是不支es6 Proxy 390 vm._renderPorxy = vm 391 } 392 } 393 394 395 // 初始化當前實例的$children 和$parent 的指向 396 function initLifeCycle(vm){ 397 var options = vm.$options 398 // 當前組件 父實例 399 var parent = options.parent // 組件的實例對象 400 // 是否抽象組件 401 if(parent && !parent.abstrat){ 402 while(parent.$options.abstrat && parent.$parent){ 403 parent = parent.$options.parent 404 } 405 parent.$children.push(vm) 406 } 407 vm.$parent = parent 408 vm.$root = parent ? parent.$root : vm; 409 410 vm.$children = []; 411 vm.$refs = {}; 412 413 vm._watcher = null; 414 vm._inactive = null; 415 vm._directInactive = false; 416 vm._isMounted = false; // 是否掛載 417 vm._isDestroyed = false; // 是否銷燬 418 vm._isBeingDestroyed = false; // 是否正在銷燬 419 420 } 421 function initMinxin(options){ 422 Vue.prototype._init = function(options){ 423 var vm = this 424 // 記錄生成的vue實例對象 425 vm._uip = uip++ // //-------忘記寫 426 //合併選項 427 vm.$options =mergeOptions(resolveConstructorOptions(vm.constructor),options,vm) 428 // // 初始化數值代理 429 initProxy(vm) 430 // 初始化當前實例的$children 和$parent 的指向 431 initLifeCycle(vm) 432 } 433 } 434 function Vue(options){ 435 // 安全機制 436 if(!(this instanceof Vue)){ //-------忘記寫 437 warn('Vue是一個構造函數，必須是由new關鍵字調用') 438 } 439 this._init(options) 440 } 441 initMinxin() // 初始化選項1: 規範 2: 合併策略。 442 Vue.options = { 443 components: { 444 transtions: {}, 445 keepAlive:{}, 446 solt:{}, 447 transtionsGroup:{} 448 }, 449 directives:{}, 450 _bash: Vue 451 } 452 function initExend(Vue){ 453 Vue.extend = function(extendOptions){ 454 extendOptions = extendOptions || {} // -----忘記寫 455 var Super = this 456 var Child = function VueComponent(options) { 457 this._init(options) 458 } 459 Child.prototype = Object.create(Super.prototype) 460 Child.prototype.constructor = Child // 改變constructor 的指向 461 Child.options = mergeOptions(Super.options,extendOptions) 462 // 子類繼承父類的靜態方法。 463 Child.extend = Vue.extend 464 // console.log(new Child({})) 465 return Child 466 } 467 } 468 initExend(Vue) 469 return Vue 470 })
html代碼以下javascript
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>第四課</title> 8 </head> 9 <body> 10 <div id="app"> 11 <huml></huml> 12 </div> 13 <script src="vue.js"></script> 14 <!-- <script src="vue2.5.1.js"></script> --> 15 <script type="text/javascript"> 16 var componentA = { 17 el: "#app" 18 } 19 var vm = new Vue({ 20 el:"#app", 21 data: { 22 message: "hello Vue", 23 key: "wodow" 24 }, 25 components:{ 26 humle: componentA 27 } 28 29 }) 30 // console.log(Vue) 31 var Parent = Vue.extend({ 32 data: function() {}, 33 props: { 34 'rrr': 1 35 }, 36 components:{ 37 huml: componentA 38 }, 39 created : function(){ 40 41 }, 42 watch: { 43 test: function(){} 44 } 45 }) 46 var Child = Parent.extend({ 47 components:{ 48 humlt: componentA 49 }, 50 created: function(){ 51 52 }, 53 props: { 54 'ddd': 3, 55 "dcdc-vfv": Number 56 }, 57 directives: { 58 test: { 59 bind: function(){} 60 }, 61 test2: function(){} 62 }, 63 watch: { 64 aa: function(){}, 65 test: function(){} 66 } 67 }); 68 console.log(vm) 69 console.log (Parent.options) 70 console.log(Child.options) 71 </script> 72 </body> 73 </html>
相關文章
- 1. 【js】vue 2.5.1 源碼學習 （十一） 模板編譯compileToFunctions渲染函數
- 2. Vue 渲染函數
- 3. Vue渲染函數
- 4. Vue的渲染函數
- 5. vue render 渲染函數
- 6. Vue - 渲染函數render
- 7. Vue的渲染函數render
- 8. 新手寫的Vue源碼學習記錄(渲染過程)
- 9. 理解Vue中的Render渲染函數
- 10. 【js】vue 2.5.1 源碼學習（二） 策略合併
- 更多相關文章...
- • Markdown 代碼 - Markdown 教程
- • Spring中Bean的作用域 - Spring教程
- • 適用於PHP初學者的學習線路和建議
- • Tomcat學習筆記（史上最全tomcat學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
