Omi全新版本来袭 - 指令系统

时间：2023-03-09 09:08:11
Omi全新版本来袭 - 指令系统

写在前面

Omi框架到目前为止有三种版本。

  • omi.js 使用 sodajs 为内置指令系统
  • omi.lite.js 不包含任何模板引擎
  • omi.mustache.js 使用 mustache.js为内置模版引擎

sodajs是我们团队高级工程师(dorsywang)的作品，服务员QQ群、兴趣部落等多个产品线，
以良好的兼容性、卓越的性能、简便的语法、超小的尺寸以及强大的功能而深受同事们的喜爱。下面先来看看sodajs怎么使用。

sodajs语法

sodajs的指令默认是以soda开头。当然不是必须，今天更新了一版sodajs支持自定义前缀。

soda.prefix('o')

现在，下面所有的指令使用o-开头。

simple

var tpl = '<div>Hello, {{name}}</div>'
document.body.innerHTML = soda(tpl,{ name : 'soda' })

if

var tpl = '<div o-if="show">Hello, {{name}}</div>' +
            '<div o-if="!show">I\'m hidden!</div>'
document.body.innerHTML = soda(tpl,{ name : 'soda',show: true })

repeat

o-repeat="item in array"

o-repeat="item in object"

o-repeat="item in array by index"

o-repeat="item in object by key"

o-repeat="(index, value) in array"

o-repeat="(key, value) in object"

default index or key is $index

var tpl = '\
<ul>\
    <li o-repeat="item in list" o-if="item.show">\
        {{item.name}}\
        {{$index}}\
    </li>\
</ul>'

var data = {
    list: [
        {name: "Hello" ,show: true},
        {name: "sodajs" ,show: true},
        {name: "AlloyTeam"}
    ]
};

document.body.innerHTML =  soda(tpl, data);

这里 item in array by index 中的by index有什么作用呢？当然有作用！因为当两层或者多层嵌套循环的时候，通过内层循环已经无法通过{{$index}} 访问到外层循环的索引，所以可以通过 by xxx 对 index进行重命名，这样就解决了多层嵌套循环访问索引的问题。

expression

var tpl = '<div>Hello, {{count+1}}</div>'
document.body.innerHTML = soda(tpl,{ count : 1 })

filter

soda.filter(String filterName, Function func(input, args...))
{{input|filte1:args1:args2...|filter2:args...}}

example:

soda.filter('shortTitle', function(input, length){
    return (input || '').substr(0, length);
});

var tpl = '\
<ul o-repeat="item in list">\
    <li class="title">\
        {{item.title|shortTitle:10}}\
    </li>\
</ul>'

document.body.innerHTML = soda(tpl,{ list : [
    {title:'short'},
    {title:'i am too long!'}
] })

html

var tpl = '<div o-html="html"></div>'
document.body.innerHTML = soda(tpl,{ html : '<span style="color:red;">test soda-html</span>' })

新版omi.js

class List extends Omi.Component {
    constructor(data) {
        super(data);
    }

    render(){
        return `<ul>
                    <li o-repeat="item in items" o-if="item.show">
                        {{$index}}- {{item.text}}
                    </li>
                </ul>`
    }
}

Omi.render(new List({
    items: [
        { text: 'Omi', show: true},
        { text: 'dntzhang', show: true},
        { text: 'AlloyTeam'}
    ]
}),"body",true);

➜ example

上面是一个简单是例子说明o-repeat和条件判断o-if指令的使用方式，也可以支持多重循环:

class List extends Omi.Component {
    constructor(data) {
        super(data);
    }

    render(){
        return `<div>
                    <div o-repeat="item in items" o-if="item.show">
                        {{$index}}- {{item.text}}
                        <ul>
                            <li o-repeat="subItem in item.arr by $subIndex">
                                <div>parent index: {{$index}}</div>
                                <div>parent item text:{{item.text}}</div>
                                <div>sub index: {{$subIndex}}</div>
                                <div>sub item :{{subItem}}</div>
                            </li>
                        </ul>
                    </div>
                </div>`
    }

}

Omi.render(new List({
    items: [
        { text: 'Omi', show: true ,arr:['a','b','c']},
        { text: 'dntzhang', show: true, arr:['d','e']},
        { text: 'AlloyTeam'}
    ]
}),"body",true);

➜ example

自定义标签也可以使用指令：

class Item extends Omi.Component {

    render(){
        return `<div>Hello, {{text}}</div>`
    }
}

Omi.tag('item',Item)

class List extends Omi.Component {
    constructor(data) {
        super(data);
    }

    render(){
        return `<div>
                    <item o-repeat="item in items" o-if="item.show" data-text="{{item.text}}"></item>
                </div>`
    }

}

Omi.render(new List({
    items: [
        { text: 'Omi', show: true },
        { text: 'dntzhang', show: true },
        { text: 'AlloyTeam'}
    ]
}),'#container');

➜ example

需要特别强调，新版omi自定义标签强制必须使用，不能使用。

Omi相关