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 οnclick="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函数关联起来)

constructor(data, option) {    // data: 数据data, option: 一般为对象const componentOption = Object.assign({    // 和并optionserver: false,    // 老版中的server属性ignoreStoreData: false    // 忽略存储数据
        }, option);this._omi_ignoreStoreData = componentOption.ignoreStoreData;    // 是否忽略存储数据属性_omi_ignoreStoreData//re render the server-side rendering html on the client-sideconst 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) : datathis._hidden = this.renderTo.querySelector('.omi_scoped__hidden_data')this.id = this._hidden.dataset.omiIdthis.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()}}

Omi.render = function(component , renderTo , incrementOrOption){    // 实例, 渲染到的dom, xxcomponent.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;}

    _generateHTMLCSS() {    // 生成css 和 htmlthis.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中添加局部cssthis._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 οnclick="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.HTMLthis.HTML += '\r\n<input type="hidden" data-omi-id="' + this.id + '" class="' + Omi.STYLESCOPEDPREFIX + '_hidden_data" value=\'' + JSON.stringify(this.data) + '\'  />\r\n'}}

// event.js 文件 正则不好，感兴趣的可以研究一把
function scopedEvent(tpl,id) {    // 模板字符串, idreturn 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;    // 那就直接返回 "οnclick="Omi.instances[0].clickHandle(this, event)""} else if (c.lastIndexOf(')') === c.length - 2) {    // 找到c指定的)最后出现的位置 和 去掉2个"" 相等的话return eventStr.replace(/=(['|"])/, '=$1Omi.instances[' + id + '].');   // eg: "οnclick="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);};});});
}