设为首页 加入收藏

TOP

【js】vue 2.5.1 源码学习 (三) Vue.extend 和 data的合并策略(一)
2019-09-17 19:09:55 】 浏览:56
Tags: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 //  1. 子类父类  
  3 /* 
  4      2.Vue.extend()    //创建vue的子类
  5      组件的语法器  Vue.extend(options)
  6      Profile().$mount('#app')  //  挂在app上,并替换app
  7      新建  initExend   
  8           ==》 Vue.extend 
  9 
 10 */
 11 /*  3. strat.data    
 12     ==> if(!vm){子组件中data的值是一个方法function ==> mergeDataorFn()} // 数据的合并
 13     ==> else {}  //通过实例绑定的data  实际是一个函数 mergeDataorFn 
 14     ==》 mergeDataorFn if(!vm) mergeDataFn  ==> mergeData()   
 15          else  ==》mergedInstanceDataFn ==>mergeData()
 16     mergeData(to,from)  //终极合并
 17     jquery.extend  // 深copy和浅copy
 18 */
 19 
 20   
 21 
 22 (function(global,factory){
 23     // 兼容 cmd  
 24     typeof exports === 'object'  && module !== 'undefined' ? module.exports = factory():   
 25     // Amd
 26     typeof define  === 'function' && define.amd ?  define(factory) : global.Vue = factory();
 27 })(this,function(){
 28     var uip = 0;
 29     function warn(string){
 30         console.error('Vue Wran:' + string)
 31     }
 32 
 33     function resolveConstructorOptions(Con){
 34         var options = Con.options;
 35         // 判断是否为vm的实例 或者是子类
 36           return options
 37     }
 38     var hasOwnPropeerty = Object.prototype.hasOwnProperty
 39     function hasOwn(obj , key){
 40         return hasOwnPropeerty.call(obj,key)
 41     }
 42     function makeMap(str, expectsLoweraseC){
 43         if(expectsLoweraseC){
 44             str = str.toLowerCase()
 45         }
 46         var map = Object.create(null)
 47         var list = str.split(',')
 48         for(var i = 0 ; i < list.length; i++){
 49             map[list[i]] = true
 50         }
 51         return function(key){
 52             return map[key]
 53         
 54         }
 55     }
 56     var  isbuiltInTag = makeMap('slot,component',true)
 57     var isHTMLTag = makeMap(
 58         'html,body,base,head,link,meta,style,title,' +
 59         'address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,' +
 60         'div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,' +
 61         'a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,' +
 62         's,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,' +
 63         'embed,object,param,source,canvas,script,noscript,del,ins,' +
 64         'caption,col,colgroup,table,thead,tbody,td,th,tr,' +
 65         'button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,' +
 66         'output,progress,select,textarea,' +
 67         'details,dialog,menu,menuitem,summary,' +
 68         'content,element,shadow,template,blockquote,iframe,tfoot'
 69     );
 70     var isSVG = makeMap(
 71         'svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,' +
 72         'foreignObject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,' +
 73         'polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view',
 74         true
 75     );
 76     var isReservedTag = function(key){
 77         return isHTMLTag(key) || isSVG(key) 
 78     }
 79     function validataComponentName(key){
 80         //检测component 的自定义名称是否合格 
 81         // 只能是字母
首页 上一页 1 2 3 下一页 尾页 1/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇npm 下一篇前端基础之JavaScript_2

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目