一、 整体思路
1 首先是代码的大体构造，先判断引入代码的环境，即对应amd 和cmd的处理
2 vue_init 需要借助 initMinxin ==>>> // 初始化选项1: 规范 2: 合并策略。
3 mergeOptions 选项合并 一个或者多个对象合并，并且生成一个新的对象
==> resloveConstructorOptions 返回vm的optios 判断是否是vue对象有可能是vue子类。不一定指向options。
parent 自定义的options的选项 child 用户自定义的options
==> checkComonpents // 规范的检测 validataComponentsName(key)
检测component的名称是否规范（不能使用内置标签slot component 关于html的标签名称 svg的子类的名称）
（规范：组件的名称必须是字母或中横线，必须由字母开头）
isbuiltInTag 检测是都是内置标签 isReservedTag是否是html的标签
===> makeMap 检测key是否在makeMap里面
==> mergeField 默认策略 // 以默认为优先。用户定义为覆盖
defaultStrat(parent,chhild) 合并策略 child === undefined ? parent : child;
==> var config = { // 配置对象
// 内置对象自定义策略
optionMergeStrategies:{}
}
var strats = config.optionMergeStrategies;
4 Vue.options = {} vue的全局api
// 大体思路
// 1 首先是代码的大体构造，先判断引入代码的环境，即对应amd 和cmd的处理
// 2 vue_init 需要借助 initMinxin // 初始化选项1: 规范 2: 合并策略。
// 3 mergeOptions 选项合并 一个或者多个对象合并，并且生成一个新的对象
// resloveConstructorOptions 返回vm的optios 判断是否是vue对象又k
// 有可能是vue子类。不一定指向options。
// parent 自定义的options的选项
// child 用户自定义的options
/* checkComonpents // 规范的检测 validataComponentsName(key)
检测component的名称是否规范（不能使用内置标签slot component 关于html的标签名称 svg的子类的名称）自称）
（规范：组件的名称必须是字母或中横线，必须由字母开头）
isbuiltInTag 检测是都是内置标签 isReservedTag是否是html的标签
makeMap 检测key是否在makeMap里面
*/
/* mergeField 默认策略 // 以默认为优先。用户定义为覆盖
defaultStrat(parent,chhild)
child === undefined ? parent : child;
*/
/*
var config = {
optionMergeStrategies:{}
}
var strats = config.optionMergeStrategies;
*/
// 4 Vue.options = {} vue的全局api (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 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++ // //-------忘记写 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
}
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(vm.$options)
</script>
</body>
以上仅为个人学习上的笔记，如有问题，欢迎评论。