Omi框架学习之旅 - 组件 及原理说明
hello world demo看完后其实基本的写法就会了。
但是omi中的组件是神马鬼？其实我也不知道组件是啥。
百度百科是这么说的： 是对数据和方法的简单封装。es6中，一个类其实也可以做到对方法和数据的封装。然后new出来的实例共享原型上的方法，至于属性最好不要共享啦，
如果需要共享，自己写静态属性，或者Object.assign到原型上去。这里有点扯远了。
我的理解是一个组件就是一个类，至于组件嵌套，其实就是父类和子类，无非就是挂载到对应的属性下
（父类会主动帮我们自动的new 子类(被嵌套的组件)的实例并且添加些相应的属性，然后和父组件中render中的html合并一下）。
接下来看看一个组件的demo。
老规矩：先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明。
// 组件嵌套抽出List class List extends Omi.Component { constructor(data) { super(data); } render() { return ` <ul> {{#items}} <li> {{.}} </li> {{/items}} </ul> `; } }; Omi.makeHTML('List2', List); // 使用Omi.makeHTML把List类制作成可以声明式的标签List2，在render方法中就能直接使用该标签 class Todo extends Omi.Component { constructor(data) { super(data); this.data.length = this.data.items.length; // 给data添加个length属性 this.listData = {items: this.data.items}; // listData属性名和下面的data="listData"中的listData对应 } style() { return ` h3 { color: red; } button { color: green; } `; } handleChange(target, evt) { this.data.text = target.value; console.log(this.data.text); } add(evt) { evt.preventDefault(); this.instance_list.data.items.push(this.data.text); // this.instance_list这个其实就是下面name="instance_list"的instance_list(他其实就是List类的实例) this.data.length = this.listData.items.length; // 跟新属性 this.data.text = ''; this.update(); console.log(this.data); console.log(this.instance_list.data); // this.instance_list中的data属性其实是一级浅拷贝this.listData这个的 console.log(this.listData); } render() { return ` <div> <h3>TODO</h3> <List2 name="instance_list" data="listData"></List2> <!--name 对应List2标签对应的List类的实例, data的listData属性其实浅拷贝到instance_list实例的data上--> <form> <input type="text" onchange="handleChange(this, event)" value="{{text}}" /> <button onclick="add(event)">add #{{length}}</button> </form> </div> `; } }; var todo = new Todo({ items: [1, 2], text: '' }); Omi.render(todo, '#app'); console.log(todo.instance_list);
先看看omi中文文档的说明：
额，因为demo源码是我自己敲的，有稍微变化，所以说明就挑重要的说明,
通过makeHTML方法把组件制作成可以在render中使用的标签。使用Omi.makeHTML('List2', List);即可
在父组件上定义listData属性用来传递给子组件。
在render方法中使用List2组件。
其中name方法可以让你在代码里通过this快速方法到该组件的实例。
data="listData"可以让你把this.listData传递给子组件。
需要注意的是，父组件的this.listData会被通过Object.assign浅拷贝到子组件。
这样做的目的主要是希望以后DOM的变更都尽量修改子组件自身的data，然后再调用其update方法，而不是去更改父组件的listData。
文档地址：https://alloyteam.github.io/omi/website/docs-cn.html#
接下来说说这个demo的疑问和疑问的说明：
疑问1：
Omi.makeHTML('List2', List);这个语句是干啥的，参数类型分别是啥？
答： 这是Omi对象的一个静态方法,作用是把类制作成可以声明式的标签。
这么说似乎有点难懂。
简单的说就是一个名字对应一个构造函数,也就是键值对。是存放在Omi.componetConstructor这个对象上的。
并且也把标签名存到Omi.customTags这个数组中。
源码感受：
Omi.makeHTML= function(name, ctor) { // name: 组件标签名, ctor: 构造函数也就是类啦 Omi.componetConstructor[name] = ctor; // 把标签名对应类放到componetConstructor对象中去 Omi.customTags.push(name); // 自定义标签 };
那这么做的目的就是就是当我们使用omi.render的时候，他会自动帮我们new List实例然后合并父组件中的html。(这里当然是循环遍历每个孩子标签啦)。继续往下看。
疑问2：
我的List2标签制作好了，该怎么用到其他组件中去呢？
标签是使用单标签还是双标签呢？
答：可以在任意一个组件类的render方法中使用制作好的List2标签。可以如下使用：
<List2 name="instance_list" data="listData"></List2> 双标签
//或者 <List2 name="instance_list" data="listData" /> 单标签
这里面的 name="instance_list" data="listData" 又是神马鬼啊，其实是这样的
属性name对应的值instance_list其实就是 new List()的实例
属性data对应的值listData就是被一级浅拷贝到instance_list实例上的data上了。
那么的话，我操作数据的话，可以操作instance_list上的data数据然后instance_list.update()即可（原作者推荐），其实我们也可以在父类上操作listData属性然后this.update()，数据就更新了。
哇，这么牛逼，怎么做到的呢？继续往下看
疑问3：
上面的<List2 name="instance_list" data="listData"></List2>这个标签里面的属性是不是涉及到组件通讯了啊？
答：是的，组件通讯有4种，加上一个终极通讯模式（上帝模式），后续会讲解的。
本demo的通讯其实通过List2标签上的data属性值listData来实现通讯的。
疑问4：
这些都写好了，那怎么把<List2 name="instance_list" data="listData"></List2> 这个标签转换成如下这个标签呢？
答：恩，原理其实很简单撒，就是先把4种通讯方式中的数据合并，然后实例化 List2标签对应的的类，然后得到实例，之后生成局部css和html,然后替换这个标签，在之后把内置事件
对应起类中的方法，然后插入到指定的dom中去就完了（组件嵌套组件然后各种嵌套，就变成了各种递归）。说起来很简单，真要是实现起来不容易啊，看看作者是怎么实现的。
源码感受：
从用户的代码中可以看到，omi.render方法是主角或者是入口吧。
Omi.render = function(component , renderTo , incrementOrOption){ // 实例, 渲染到的dom, xx component.renderTo = typeof renderTo === "string" ? document.querySelector(renderTo) : renderTo; // 实例的renderTo属性 if (typeof incrementOrOption === 'boolean') { component._omi_increment = incrementOrOption; // 实例的_omi_increment 属性(老版) } else if (incrementOrOption) { // 新增 component._omi_increment = incrementOrOption.increment; component.$store = incrementOrOption.store; if (component.$store) { component.$store.instances.push(component); }; component._omi_autoStoreToData = incrementOrOption.autoStoreToData; }; component.install(); // Component类的install方法(被实例继承了) component._render(true); // Component类的_render方法(被实例继承了) component._childrenInstalled(component); // 给每个实例的孩子执行installed方法 component.installed(); // Component类的installed方法(被实例继承了) return component; // 返回实例 };
这里面对于这个demo最主要的是component._render(true);这个方法，那我们进去看一看
_render(isFirst) { if (this._omi_removed ) { // 实例是否含有_omi_removed属性 let node = this._createHiddenNode(); if (!isFirst) { this.node.parentNode.replaceChild(node, this.node); this.node = node; } else if (this.renderTo) { this.renderTo.appendChild(node); }; return; }; if (this._omi_autoStoreToData) { // 新增 if(!this._omi_ignoreStoreData) { this.data = this.$store.data; }; }; this.storeToData(); // 调用实例的storeToData this._generateHTMLCSS(); // 生成 html 和 css this._extractChildren(this); // 提取孩子(就是提取嵌套标签啦) this.children.forEach((item, index) => { // 遍历孩子 this.HTML = this.HTML.replace(item._omiChildStr, this.children[index].HTML); // 替换html中child的嵌套组件的html (把嵌套组件的html和父组件合并) }); this.HTML = scopedEvent(this.HTML, this.id); // 把html中的事件函数转成实例对应的函数方法 if (isFirst) { // 是否第一次 if (this.renderTo) { // 渲染到的dom if (this._omi_increment) { this.renderTo.insertAdjacentHTML('beforeend', this.HTML); //指定位置在插入 } else { this.renderTo.innerHTML = this.HTML; // 把html插入到渲染dom中 }; }; } else { if (this.HTML !== "") { // 不是第一次插入就是用morphdom跟新节点 morphdom(this.node, this.HTML); } else { morphdom(this.node ,this._createHiddenNode()); }; }; // get node prop from parent node if (this.renderTo) { // 有渲染到的节点 this.node = document.querySelector("[" + this._omi_scoped_attr + "]"); // render()html字符串中的根节点 this._queryElements(this); // 查询dom元素 this._fixForm(); }; }
这里面对于此demo最重要的是this._extractChildren(this);方法了，进去看看
_extractChildren(child) { // child: Component类的实例(一般是Component类子类的实例)
if (Omi.customTags.length > 0) { // 自定义标签名集合的长度大于0
child.HTML = this._replaceTags(Omi.customTags, child.HTML); // 返回 组件嵌套被替换成child开头的标签 看_replaceTags方法
};
let arr = child.HTML.match(/<child[^>][\s\S]*?tag=['|"](\S*)['|"][\s\S]*?><\/child>/g); // 寻找child的标签放到数组中
if(arr){
arr.forEach( (childStr, i) =>{ // 遍历每一个child标签
let json = html2json(childStr); // 把标签转换成对象
let attr = json.child[0].attr; // 取出 child标签的所有属性
let name = attr.tag; // 组件标签名
delete attr.tag; // 删除 attr对象的tag属性(即删除了标签名, 省的循环)
let cmi = this.children[i]; // 当前实例的第i的孩子
//if not first time to invoke _extractChildren method(如果不是第一次调用_extractchildren方法)
if (cmi && cmi.___omi_constructor_name === name) { // 有孩子 且 孩子的函数名等于组件标签名
cmi._childRender(childStr); // 实例渲染组件标签
} else {
let baseData = {}; // 基础数据 (on-)
let dataset = {}; // 数据设置 (data-)
let dataFromParent = {}; // 从实例中获取标签属性data值对应的实例属性值 (data)
let groupData = {}; // 组数据 (group-data)
let omiID = null; // omiId (omi-id)
let instanceName = null; // 标签名类的实例名 (name)
Object.keys(attr).forEach(key => { // 遍历嵌套组件标签中的每一个属性
const value = attr[key]; // 属性值
if (key.indexOf('on') === 0) { // 应该是事件
let handler = child[value];
if (handler) {
baseData[key] = handler.bind(child);
};
} else if (key === 'omi-id'){ // omi-id
omiID = value;
}else if (key === 'name'){ // name
instanceName = value;
}else if (key === 'group-data') { // group-data
if (child._omiGroupDataCounter.hasOwnProperty(value)) {
child._omiGroupDataCounter[value]++;
} else {
child._omiGroupDataCounter[value] = 0;
};
groupData = this._extractPropertyFromString(value,child)[child._omiGroupDataCounter[value]];
} else if(key.indexOf('data-') === 0){ // 以data-开头的属性
dataset[this._capitalize(key.replace('data-', ''))] = value;
}else if(key === 'data'){ // data
dataFromParent = this._extractPropertyFromString(value,child); //获取在child上的value属性值
};
});
let ChildClass = Omi.getClassFromString(name); // 根据标签名获取组件类 (name: 标签名)
if (!ChildClass) throw "Can't find Class called [" + name+"]"; // 没找到组件类
let sub_child = new ChildClass( Object.assign(baseData,child.childrenData[i],dataset,dataFromParent,groupData ),false);
sub_child._omiChildStr = childStr; // 子组件的_omiChildStr属性 值为组件标签
sub_child.parent = child; // 子组件的parent属性 值为子组件的父组件
sub_child.$store = child.$store; // 存储数据
if(sub_child.$store){
sub_child.$store.instances.push(sub_child);
};
sub_child.___omi_constructor_name = name; // 添加这个属性, 2310用到
sub_child._dataset = {}; // _dataset属性
sub_child.install(); // 子组件的install方法
omiID && (Omi.mapping[omiID] = sub_child); // omi-id对应的值, 然后给omi的mapping对象添加omi-id对应的值：嵌套组件的实例
instanceName && (child[instanceName] = sub_child); // 给实例添加name的值instanceName为属性 值为嵌套组件的实例
if (!cmi) { // 没有cmi就把嵌套组件的实例添加到child.children中
child.children.push(sub_child);
} else { // 否则替换
child.children[i] = sub_child;
};
sub_child._childRender(childStr,true); // 嵌套组件渲染 参数(转换后的标签, true)
};
});
};
}
1. 那里就是帮我们自动实例化了。
2.这里我们进去看看
_childRender(childStr,isFirst) { //childStr: 转换后的标签 isFirst: true
if (this._omi_removed ) {
this.HTML = '<input type="hidden" omi_scoped_'+this.id+' >';
return this.HTML;
};
//childStr = childStr.replace("<child", "<div").replace("/>", "></div>")
this._mergeData(childStr); // 数据合并
if(this.parent._omi_autoStoreToData) {
this._omi_autoStoreToData = true;
if (!this._omi_ignoreStoreData) {
this.data = this.$store.data;
};
};
this.storeToData();
this._generateHTMLCSS(); // 生成 html 和 css
this._extractChildren(this); // 子组件提取孩子标签(就是提取嵌套标签啦)
this.children.forEach((item, index) => { // 遍历孩子
this.HTML = this.HTML.replace(item._omiChildStr, this.children[index].HTML); // 替换html中child的嵌套组件的html
});
this.HTML = scopedEvent(this.HTML, this.id); // 把html中的事件函数转成实例对应的函数方法
return this.HTML;
}
这里其实已经帮我们把List实例化的对象instance_list生成了css和html还有内置事件也绑定好了。那怎么和父组件合并呢？其实代码类似了
断点回到了_render方法中，见下图
在之后回到Omi.render方法中，
最后返回实例，前2个语句是组件的生命周期，后续再讲。
至此，组件的demo就讲完了。
ps:
来句官网的话：绝大部分Web网页或者Web应用，需要嵌套定义的组件来完成所有的功能和展示，所以组件很重要。
