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源码基本就明白是怎么一回事了。

如果写的有问题，欢迎指出，也可以进群(看开篇扯蛋的帖子)和原作者交流。哈哈