国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

2017年試試Web組件化框架Omi

JowayYoung / 678人閱讀

摘要:不用擔心組件的會污染組件外的會幫你處理好一切更自由的更新,每個組件都有方法,自由選擇時機進行更新。通過安裝點擊這里在線試試你可以使用來生成組件標簽用于嵌套。點擊這里試試寫程序加入吧

Omi

Open and modern framework for building user interfaces.

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)

特性

超小的尺寸,7 kb (gzip)

局部CSS,HTML+ Scoped CSS + JS組成可復用的組件。不用擔心組件的CSS會污染組件外的,Omi會幫你處理好一切

更自由的更新,每個組件都有update方法,自由選擇時機進行更新。你也可以和obajs或者mobx一起使用來實現自動更新。

模板引擎可替換,開發者可以重寫Omi.template方法來使用任意模板引擎

完全面向對象,函數式和面向對象各有優劣,Omi使用完全的面向對象的方式來構建Web程序。

ES6+ 和 ES5都可以,Omi提供了ES6+和ES5的兩種開發方案。你可以自有選擇你喜愛的方式。

通過npm安裝
npm install omi
Hello World
class Hello extends Omi.Component {
    constructor(data) {
        super(data);
    }
    style () {
        return  `
            h1{
                cursor:pointer;
            }
         `;
    }
    handleClick(target, evt){
        alert(target.innerHTML);
    }
    render() {
        return  `
        

Hello ,{{name}}!

`; } } Omi.render(new Hello({ name : "Omi" }),"body");

點擊這里->在線試試

你可以使用Omi.makeHTML來生成組件標簽用于嵌套。

    Omi.makeHTML("Hello", Hello);

那么你就在其他組件中使用,并且通過data-*的方式可以給組件傳參,如:

  ...
  render() {
        return  `
        
Test
`; } ...

點擊這里->在線試試

你可以使用 webpack + babel,在webpack配置的module設置babel-loader,立馬就能使用ES6+來編寫你的web程序。

當然Omi沒有拋棄ES5的用戶,你可以使用ES5的方式編寫Omi。

ES5方式
var Hello =  Omi.create("Hello", {
    style: function () {
        return "h1{ cursor:pointer }";
    },
    handleClick: function (dom) {
        alert(dom.innerHTML)
    },
    render: function () {
        return " 

Hello ,{{name}}!

" } }); var Test = Omi.create("Test", { render: function () { return "
Test
" } }); Omi.render(new Test(),"#test");

和ES6+的方式不同的是,不再需要makeHTML來制作標簽用于嵌套,因為 Omi.create的第一個參數的名稱就是標簽名。

點擊這里試試ES5寫Omi程序

加入Omi吧!

Github: https://github.com/AlloyTeam/omi

I need you.

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81443.html

相關文章

  • Omi原理-Hello Omi

    摘要:注意,這里目前沒有引入,不管第幾次渲染都是無腦設置,復雜結構對瀏覽器的開銷很大,這里后續會引入。整合這里把給直接暴露在下,因為每個組件都生成了唯一的,后續實現事件作用域以及對象實例獲取都要通過下的獲取。 Hello Omi Omi框架的每個組件都繼承自Omi.Component,本篇會去完成Omi的Component的基本錐形,讓其能夠渲染第一個組件。 omi.js實現 var Omi...

    王巖威 評論0 收藏0
  • FDCon2019 第4屆中國前端開發者千人峰會 - 《Omi - Cross-Frameworks

    摘要:用過的同學都知道,性能優化的關鍵就是,最被詬病的也是這個,很多開發者也吐槽這個鉤子函數,也可以配合不可變數據類型,直接進行引用地址比較,來決定組件是否需要更新。 大家好,這次給大家講下 Omi 框架 以及即將發布的 Omim 大家有沒有數左邊的圖片里有多少個 Omi?Omi 團隊很在意這里,特意數了下,有三個。Omi 團隊希望 Omi 以后在各大會議里能夠印刷得更加大一些。今天給大家帶來的主...

    nifhlheimr 評論0 收藏0

發表評論

0條評論

JowayYoung

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<