Omi框架学习之旅 - Hello World 及原理说明
学什么东西都从hello world开始, 我也不知道为啥。
恩，先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明。
hello world - demo:
class Hello extends Omi.Component { // 1. Hello类先继承Component类
constructor(str, data) { // 2. Hello类构造函数的参数和个数随便传,但是必须要有个数据对象data(其实可以是对象或者传undefined,因为其还有第二个参数,不传undefined的话,第二个参数就变成了第一个参数)
super(data); // 3. es6和es5的继承还是有区别的,es6需要先得到父类的this实例，然后子类对其加工。Component父类其实可以接受2个参数的,这里就先接受data数据对象作为第一个参数
this.str = str;
console.log(this);
}
style() { // 4. style方法其实是Hello类重写了Component类的style方法(其实父类的style方法也只是空函数)
return `
h1 {
color: red;
}
`;
}
clickHandle(t, evt) { // 5. Hello类的原型方法和Component类没关系哈
console.log(t, evt);
}
render() { // 6. render方法也是Hello类重写了Component类的render方法
return `
<h1 onclick="clickHandle(this, event)">aaa{{name}}</h1>
`;
}
};
var hello = new Hello('str', {name: 'hello world'}); // 7. 创建Hello类的实例
Omi.render(hello, '#app'); // 8.让omi渲染(生成html和局部css和把内置事件和对应的实例clickHandle函数关联起来)
先看看omi中文文档的说明：
组件生成的HTML最终会插入到#app中。上面的例子展示了Omi的部分特性:
- data传递: new Hello(data,..)的data可以直接提供给render方法里的模板
- 局部CSS: h1只对render里的h1生效，不会污染外面的h1
- 声明式事件绑定: onclick调用的就是组件内的handleClick，this可以拿到当前的DOM元素,还可以拿到当前的event
- 文档地址：https://alloyteam.github.io/omi/website/docs-cn.html#
接下来说说这个demo的疑问和疑问的说明：
疑问1：
自己写的类一定要继承Omi.Component类吗?
答：废话,想用omi,你还不继承别人的属性和方法,怎么玩下去(当然牛逼的人可以自己写哈)。
注: Component类是核心, 源码在component.js中,然后
Omi.Component = Component; 把Component类挂载到Omi的Component对象上去了。
疑问2：
super()方法中可以传什么数据类型的参数,和参数的个数?
答：Component构造函数可以接收2个参数。
理论上可以有这几种传参的方式:
传1个参数 super()/super(undefined), super({}), super('str'), super(true), super([]), super(null)
传2个参数 super(data, 真值)
先说传1个参数会导致啥吧：
传 true, 'str', [], null, 会使变量isReRendering则为true, {}, undefined/或者不传参数, 变量isReRendering则为false,然而isReRendering变量是if的条件会开了2个分支，
处理不同的逻辑。
传2个参数会怎样啊：
第二个参数可以任意类型的值：因为会和对象{server: false, ignoreStoreData: false}合并
感受下omi的源码：
constructor(data, option) { // data: 数据data, option: 一般为对象
const componentOption = Object.assign({ // 和并option
server: false, // 老版中的server属性
ignoreStoreData: false // 忽略存储数据
}, option);
this._omi_ignoreStoreData = componentOption.ignoreStoreData; // 是否忽略存储数据属性_omi_ignoreStoreData
//re render the server-side rendering html on the client-side
const type = Object.prototype.toString.call(data); // data的数据类型
const isReRendering = type !== '[object Object]' && type !== '[object Undefined]'; // 是否重新渲染
if (isReRendering) {
this.renderTo = typeof data === "string" ? document.querySelector(data) : data
this._hidden = this.renderTo.querySelector('.omi_scoped__hidden_data')
this.id = this._hidden.dataset.omiId
this.data = JSON.parse(this._hidden.value)
} else {
this.data = data || {}; // 给实例添加 data属性
this._omi_server_rendering = componentOption.server; // _omi_server_rendering属性
this.id = this._omi_server_rendering ? (1000000 + Omi.getInstanceId()) : Omi.getInstanceId(); // id属性
};
this.refs = {};
this.children = []; // 每个实例的孩子
this.childrenData = []; // 每个实例孩子的数据
this.HTML = null; // 实例中render返回的字符串
this._addedItems = [];
Omi.instances[this.id] = this; // Omi._instanceId 对应 Component类的每个实例(或者子类)
this.dataFirst = true;
this._omi_scoped_attr = Omi.STYLESCOPEDPREFIX + this.id; // 实例的样式局部属性 omi_scoped_ + id
//this.BODY_ELEMENT = document.createElement('body')
this._preCSS = null; // 预设样式
this._omiGroupDataCounter = {};
if (this._omi_server_rendering || isReRendering) {
this.install()
this._render(true)
this._childrenInstalled(this)
this.installed()
}
}
疑问3：
style()方法是干啥的？
答： style方法返回一个css字符串,用来生成局部css的。style方法中可以写各种语句哈。只要返回css字符串即可。
疑问4：
render()方法是干啥的？
答：render方法返回一个html字符串，就是html组合好的标签啦。render方法中可以写各种语句哈。只要返回字符串即可。
疑问5：
那omi是怎么帮我们生成局部css和html插入到指定的dom容器中呢。html内置的事件又是怎样对应起Hello类中clickHandle方法？
答：这一切就得从Omi.render(hello, '#app'); 这个语句开始。
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); component.installed(); return component; }
render方法就omi上的一个静态方法,接收3个参数(实例, 渲染到的dom, xx), xx表示我也不清楚这个变量干啥的,以后肯定会知道的。
方法中的这个语句对于这个demo很重要component._render(true);接下来终点看看这个方法.
这个方法里面对于这个demo最重要的语句就是
this._generateHTMLCSS(); // 生成 html 和 css， 怎么生成html和css呢，看如下代码
_generateHTMLCSS() { // 生成css 和 html
this.CSS = (this.style()|| '').replace(/<\/?style>/g,''); // 处理下style()方法中的字符串样式
if (this.CSS) {
this.CSS = style.scoper(this.CSS, "[" + this._omi_scoped_attr + "]"); // 给css标签搞成 (标签名[omi_scoped_0], [omi_scoped_0] 标签名) 变成属性选择器
if (this.CSS !== this._preCSS && !this._omi_server_rendering) { // 现在的CSS不等于_preCSS 且 _omi_server_rendering 为假值
style.addStyle(this.CSS, this.id); // 在head中添加局部css
this._preCSS = this.CSS; // 本次的css存一下
};
};
let tpl = this.render(); // 用户提供的html字符串
this.HTML = this._scopedAttr(Omi.template(tpl ? tpl : "", this.data), this._omi_scoped_attr).trim(); // 给每个html元素添加omi_scoped_0 = '', 有模板数据的也计算好了. eg: <h1 omi_scoped_0 onclick="clickHandle(this, event)">aaahello world</h1>
if (this._omi_server_rendering) {
this.HTML = '\r\n<style id="'+Omi.STYLEPREFIX+this.id+'">\r\n' + this.CSS + '\r\n</style>\r\n'+this.HTML
this.HTML += '\r\n<input type="hidden" data-omi-id="' + this.id + '" class="' + Omi.STYLESCOPEDPREFIX + '_hidden_data" value=\'' + JSON.stringify(this.data) + '\' />\r\n'
}
}
局部css生成好了，并且添加到了head中了，html也生成好了,并且把data数据也生成好了，这里使用的是Mustache模板。
那html中的声明式事件绑定怎么和clickHandle方法对应的呢,代码如下：
// event.js 文件 正则不好，感兴趣的可以研究一把 function scopedEvent(tpl,id) { // 模板字符串, id return tpl.replace(/<[\s\S]*?>/g, function (item) { return item.replace(/on(abort|blur|cancel|canplay|canplaythrough|change|click|close|contextmenu|cuechange|dblclick|drag|dragend|dragenter|dragleave|dragover|dragstart|drop|durationchange|emptied|ended|error|focus|input|invalid|keydown|keypress|keyup|load|loadeddata|loadedmetadata|loadstart|mousedown|mouseenter|mouseleave|mousemove|mouseout|mouseover|mouseup|mousewheel|pause|play|playing|progress|ratechange|reset|resize|scroll|seeked|seeking|select|show|stalled|submit|suspend|timeupdate|toggle|volumechange|waiting|autocomplete|autocompleteerror|beforecopy|beforecut|beforepaste|copy|cut|paste|search|selectstart|wheel|webkitfullscreenchange|webkitfullscreenerror|touchstart|touchmove|touchend|touchcancel|pointerdown|pointerup|pointercancel|pointermove|pointerover|pointerout|pointerenter|pointerleave|Abort|Blur|Cancel|CanPlay|CanPlayThrough|Change|Click|Close|ContextMenu|CueChange|DblClick|Drag|DragEnd|DragEnter|DragLeave|DragOver|DragStart|Drop|DurationChange|Emptied|Ended|Error|Focus|Input|Invalid|KeyDown|KeyPress|KeyUp|Load|LoadedData|LoadedMetadata|LoadStart|MouseDown|MouseEnter|MouseLeave|MouseMove|MouseOut|MouseOver|MouseUp|MouseWheel|Pause|Play|Playing|Progress|RateChange|Reset|Resize|Scroll|Seeked|Seeking|Select|Show|Stalled|Submit|Suspend|TimeUpdate|Toggle|VolumeChange|Waiting|AutoComplete|AutoCompleteError|BeforeCopy|BeforeCut|BeforePaste|Copy|Cut|Paste|Search|SelectStart|Wheel|WebkitFullScreenChange|WebkitFullScreenError|TouchStart|TouchMove|TouchEnd|TouchCancel|PointerDown|PointerUp|PointerCancel|PointerMove|PointerOver|PointerOut|PointerEnter|PointerLeave)=(('([\s\S]*?)')|("([\s\S]*?)"))/g, function (eventStr, b, c) { if (c.indexOf('Omi.instances[') === 1) { // 声明式事件函数如果包含Omi.instances[ 的话 return eventStr; // 那就直接返回 "onclick="Omi.instances[0].clickHandle(this, event)"" } else if (c.lastIndexOf(')') === c.length - 2) { // 找到c指定的)最后出现的位置 和 去掉2个"" 相等的话 return eventStr.replace(/=(['|"])/, '=$1Omi.instances[' + id + '].'); // eg: "onclick="Omi.instances[0].clickHandle(this, event)"" } else { let str = eventStr.replace(/=(['|"])/, '=$1Omi.instances[' + id + '].'); return str.substr(0, str.length - 1) + "(event)" + str.substr(str.length - 1, 1); }; }); }); }
内置事件也对应好了，那就把html插到指定的dom容器中去吧。
this.renderTo.innerHTML = this.HTML;
ps:
好了, hello world的这个demo就这么说完了, 这个简单的demo只是抽取了对应的源码,
每个demo都将只抽取对应源码, 等到所有demo写完，omi源码基本就明白是怎么一回事了。
如果写的有问题，欢迎指出，也可以进群(看开篇扯蛋的帖子)和原作者交流。哈哈
