riotjs 2.2.4

riotjs 组件

为何选用

由于riotjs小,容易和其他框架混合使用

特点

小,但经不起强渲染

支持ie8吗

riotjs 2.2.4是最后一个支持ie8的版本。(然而事实上,代码中使用了一些es5新增的方法,这些方法要ie9才支持,以至于我们不得不使用es5shiv/es5sham来进行兼容);

静态方法

riot.observable

riot的事件系统,所有事件通知方式都基于该模块,可全局使用

// 发送全局事件

var window.eventBus = riot.observable();

eventBus.on('test', function (e) {
    console.log(e);
});

eventBus.trigger('test', 123);

包含方法

  • on(events, fn)

  • off(events, fn)

  • trigger(name[,arguments])

  • one(name, fn)


riot.mixin

作用是向内部对象mixins添加属性或方法,该对象无保护,所以必须要人为保证命名时不冲突.

// 在外部使用
riot.mixin('testfunction', function () { console.log(2) });

var c = riot.mixin('testfunction');

c() // print 2

该方法一般提供给riot tag初始化实例的时候使用。当在tag类中使用this.mixin混入方法的时候,会将内部对象mixins上的方法或属性混合到tag类上


riot.route

2.2.4版本的riot.route是一个功能超弱的路由管理器,通过监听hashchange事件来触发注册的路由回调。该路由模块是自动启动的。而且它的实现上是有缺陷的。它本质上是个事件分发器。

// 使用示例

riot.route(function (path, module, action, params) {
    console.log(path, module, action, params)
});

riot.route('search/index/search/1234');

包含方法

  • riot.route(arg)

    • 2.2.4版本里arg接受2种类型,字符串和function,上面已经给出示例。需要自己去分出路径,模块,行为和参数。你没看错,就是这么弱

  • riot.route.exec(fn)

    • 解释当前哈希路径,并把参数传递到fn里

  • riot.route.parser(fn)

    • 指定哈希路径解释器,如果未调用该方法,固定解释方法是 path.split(‘/’);如示例所示

  • riot.route.stop()

    • 销毁监听hashchange事件,销毁路由事件

  • riot.route.start()

    • 监听。默认是开启的


riot.util

包含两个内容,brackets和tmpl, brackets是tmpl的辅助函数,单独使用意义不大,该辅助函数可以通过正则或者索引制造我们需要匹配的部分。tmpl是riotjs的模板引擎核心,html字符串拼接完全通过该引擎,可独立使用(在npm上有独立维护的模块名为riot-tmpl)

// 设置模板占位符(默认是{ })
riot.settings.brackets = '{{ }}';
// 使用
var html = riot.util.tmpl('<div>{{a}}</div>', { a:1 });
console.log(html);

//print <div>1</div>

riot.tag(name, html, css, attrs, fn)

全局注册一个riot标签, css attrs参数可省略。其实质是向一个内部对象tagImpl上创建了一个名为name的属性,其值是{name,html,css,attrs,fn}。此时该缓存并没有被使用,tag的实例并没有建立。

riot.tag(
    'ri-root',
    [
        '<ri-login if={showLogin}></ri-login>',
        '<ri-error if={showError}></ri-error>'
    ].join(''),
    function () {
        var self = this;
        this.showLogin = false;
        this.showError = false;
        this.on('mount', function () {
            var device_id = window.Qutils.getParams('device_id');
            if (!device_id) {
                alert('参数device_id缺失!');
            }
            else {
                setTimeout(function () {
                    bridge.isInApp(
                        function () {
                            self.showLogin = true;
                            self.tags['ri-login'].trigger('login-init', device_id);
                            self.update();
                        },
                        function () {
                            self.showError = true;
                            self.update();
                        }
                    )
                }, 100);
            }
        });
    }
);

riot.mount & riot.mountTo

riot.mountTo只是riot.mount的别名。该方法顾名思义,挂在riot标签(组件)。会返回一个tag的实例。

参数

  • selector

    • 接受’*’(mount所有), string split with ‘,’ , string(使用原生的Selectors API,获取一个NodeList),或者接受一个NodeList,Element

  • tagName

    • 接受’*'(mount所有), object(当为Object类型时,即为opts),string(等同mount所有selector上下文下的tagName匹配tag)

  • opts

    • Object,传入的参数对象,可直接混合在tag实体的opts对象上

<!-- example -->
<div id="test"></div>
<script>
    var tag = riot.mount('#test', '*', {a:1,b:2});
    console.log(tag[0].opts.a) // print 1
</script>
IT文库 » riotjs 2.2.4
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址