摘要:注意,這里目前沒有引入,不管第幾次渲染都是無腦設置,復雜結構對瀏覽器的開銷很大,這里后續會引入。整合這里把給直接暴露在下,因為每個組件都生成了唯一的,后續實現事件作用域以及對象實例獲取都要通過下的獲取。
Hello Omi
Omi框架的每個組件都繼承自Omi.Component,本篇會去完成Omi的Component的基本錐形,讓其能夠渲染第一個組件。
omi.js實現var Omi = {}; Omi._instanceId = 0; Omi.getInstanceId = function () { return Omi._instanceId++; }; Omi.render = function(component, renderTo){ component.renderTo = typeof renderTo === "string" ? document.querySelector(renderTo) : renderTo; component._render(); return component; }; module.exports = Omi;
Omi.getInstanceId 用來給每個組件生成自增的ID
Omi.render 用來把組件渲染到頁面
基類Omi.Component實現所有的組件都是繼承自Omi.Component。
import Omi from "./omi.js"; class Component { constructor(data) { this.data = data || {}; this.id = Omi.getInstanceId(); this.HTML = null; this.renderTo = null; } _render() { this.HTML = this.render(); this.renderTo.innerHTML = this.HTML; } } export default Component;
Omi使用完全面向對象的方式去開發組件,這里約定好帶有下劃線的方法是用于內部實現調用,不建議Omi框架的使用者去調用。
其中,_render為私有方法用于內部實現調用,會去調用組件的真正render方法用于生成HTML,并且把生成的HTML插入到renderTo容器里面。
注意,這里目前沒有引入dom diff,不管第幾次渲染都是無腦設置innerHTML,復雜HTML結構對瀏覽器的開銷很大,這里后續會引入diff。
index.js整合import Omi from "./omi.js"; import Component from "./component.js"; Omi.Component = Component; window.Omi = Omi; module.exports = Omi;
這里把Omi給直接暴露在window下,因為每個組件都生成了唯一的ID,后續實現事件作用域以及對象實例獲取都要通過window下的Omi獲取。
最后使用實現完omi.js和component.js以及index.js之后,你就可以實現Hello Omi拉:
import Omi from "index.js"; //或者使用webpack build之后的omi.js //import Omi from "omi.js"; class Hello extends Omi.Component { constructor(data) { super(data); } render() { return ``; } } Omi.render(new Hello({ name : "Omi" }),"#container");Hello ,`+ this.data.name +`!
什么?都2017年了還在拼接字符串?!雖然ES6+的template string讓多行字符串拼接更加得心應手,但是template string+模板引擎可以讓更加優雅方便。既然用了template string,也可以寫成這樣子:
class Hello extends Omi.Component { constructor(data) { super(data); } render() { return `引入mustachejs模板引擎`; } } Omi.render(new Hello({ name : "Omi" }),"#container");Hello ,${this.data.name}!
Omi支持任意模板引擎。可以看到,上面是通過拼接字符串的形式生成HTML,這里當然可以使用模板引擎。
修改一下index.js:
import Omi from "./omi.js"; import Mustache from "./mustache.js"; import Component from "./component.js"; Omi.template = Mustache.render; Omi.Component = Component; window.Omi=Omi; module.exports = Omi;
這里把Mustache.render掛載在Omi.template下。再修改一下component.js:
import Omi from "./omi.js"; class Component { constructor(data) { this.data = data || {}; this.id = Omi.getInstanceId(); this.HTML = null; } _render() { this.HTML = Omi.template(this.render(), this.data); this.renderTo.innerHTML = this.HTML; } } export default Component;
Omi.template(即Mustache.render)需要接受兩個參數,第一個參數是模板,第二個參數是模板使用的數據。
現在,你便可以使用mustachejs模板引擎的語法了:
class Hello extends Omi.Component { constructor(data) { super(data); } render() { return ``; } }Hello ,{{name}}!
從上面的代碼可以看到,你完全可以重寫Omi.template方法去使用任意模板引擎。重寫Omi.template的話,建議使用omi.lite.js,因為omi.lite.js是不包含任何模板引擎的。那么怎么build出兩個版本的omi?且看webpack里設置的多入口:
entry: { omi: "./src/index.js", "omi.lite": "./src/index.lite.js" }, output: { path: "dist/", library:"Omi", libraryTarget: "umd", filename: "[name].js" },
index.lite.js的代碼如下:
import Omi from "./omi.js"; import Component from "./component.js"; Omi.template = function(tpl, data){ return tpl; } Omi.Component = Component; window.Omi=Omi; module.exports = Omi;
可以看到Omi.template沒有對tpl做任何處理直接返回,開發者可以重寫該方法。
總結到目前為止,已經實現了:
第一個組件的渲染
模板引擎的接入
多入口打包omi.js和omi.lite.js
下片,將介紹《Omi原理-局部CSS》,歡迎關注...
招募計劃Omi的Github地址https://github.com/AlloyTeam/omi
如果想體驗一下Omi框架,請點擊Omi Playground
如果想使用Omi框架,請閱讀 Omi使用文檔
如果想一起開發完善Omi框架,有更好的解決方案或者思路,請閱讀 從零一步步打造web組件化框架Omi
關于上面的兩類文檔,如果你想獲得更佳的閱讀體驗,可以訪問Docs Website
如果你懶得搭建項目腳手架,可以試試Scaffolding for Omi,npm安裝omis便可
如果你有Omi相關的問題可以New issue
如果想更加方便的交流關于Omi的一切可以加入QQ的Omi交流群(256426170)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81473.html
摘要:相關依賴有和其余都是單元測試相關依賴注意,這里使用了。因為使用框架支持和使用是為了在單元測試里面使用的和等語法。腳本其中生成目錄的文件執行單元測試編譯的編譯的在中,會根據去設置不同的入口文件。 環境搭建 Omi框架使用 Webpack + ES6 的方式去開發;使用karma+jasmine來作為Omi的測試工具。 Karma介紹 Karma是一個基于Node.js的JavaScrip...
摘要:屬性我們還可以使用來書寫樣式,它會自動幫我們編譯為格式內容語法高亮建議使用配合該擴展支持語法高亮擴展開發項目,當然你可以把文件當作對待。 Omil 是什么? Omil是一個 webpack 的 loader,它允許你以一種名為單文件組件(SFCs)的格式撰寫 Omi 組件: ${this.data.title} export default class { test(){...
摘要:不用擔心組件的會污染組件外的會幫你處理好一切更自由的更新,每個組件都有方法,自由選擇時機進行更新。通過安裝點擊這里在線試試你可以使用來生成組件標簽用于嵌套。點擊這里試試寫程序加入吧 Omi Open and modern framework for building user interfaces. Omi的Github地址https://github.com/AlloyTeam/o...
閱讀 1290·2021-11-24 09:39
閱讀 2632·2021-09-30 09:47
閱讀 1325·2021-09-22 15:15
閱讀 2410·2021-09-10 10:51
閱讀 1954·2019-08-30 15:55
閱讀 2977·2019-08-30 11:06
閱讀 896·2019-08-30 10:53
閱讀 830·2019-08-29 17:26