杨文坚

2015-07-19 23:52

Ques前端组件化体系(二)

本文作者:IMWeb 杨文坚 原文出处:IMWeb社区 未经同意,禁止转载

紧接上文:http://imweb.io/topic/55abbc5a6ee095884b704c2e

组件嵌套

当组件可以嵌套,组件件可以拆成较小的颗粒,使得复用性大大提升。

下面我们是一个codeclick组件,其用途是高亮展示代码片段,点击代码弹出dialog,也就是说我们准备嵌套上面做出来的third-codedialog组件:

定义
  • CSS文件:
/** 可以给组件定义一些特殊样式,但为了简单我们什么也不做 **/
  • 模版文件:
<div>
    <third-code q-ref="code">
        <content></content>
    </third-code>
    <dialog q-ref="dialog">
        <header>欢迎使用Ques</header>
        <article>你点击了代码</article>
    </dialog>
</div>
  • Javascript文件:
var $ = require('jquery');

module.exports = {
    data: {},
    ready: function () {
        var code = this.$.code,
            dialog = this.$.dialog;
        // 点击代码,弹出dialog
        $(code.el).on('click', function () {
            dialog.show();
        });
    }
};
效果
  • 在页面上引用:
<codeclick>
    &lt;ui-button class=&quot;ui-default&quot;&gt;DEFAULT&lt;/ui-button&gt;
    &lt;ui-button class=&quot;ui-success&quot;&gt;SUCCESS&lt;/ui-button&gt;
    &lt;ui-button class=&quot;ui-info&quot;&gt;INFO&lt;/ui-button&gt;
    &lt;ui-button class=&quot;ui-warning&quot;&gt;WARNING&lt;/ui-button&gt;
    &lt;ui-button class=&quot;ui-danger&quot;&gt;DANGER&lt;/ui-button&gt;
</codeclick>
  • 展示:

备注
  • 我们看到<content>标签另一个神奇的用法是可传递,我们从third-code传递到codeclick,再传递到最外部。使得我们可以在最外部改third-code内部的节点。
  • 我们注意到q-ref本来是Q.js用于组件嵌套从母Component(为了和扩展中的父Component其分开来,这里称之为母Component)拿到子Component的引用,同样可以拿到第三方Component的引用。

组件扩展

组件可扩展,则差别不大的组件可以继承同一个父组件。

下面dialog组件扩展的例子,效果是弹出一个dialog,要求输入内容:

定义
  • CSS文件:
/** 同样为了简单我们什么也不做 **/
  • 模版文件:
<dialog extend>
    <header>
        <h2>欢迎使用Ques</h2>
    </header>
    <article>
        <p>请输入要设置的值</p>
        <ui-input value="" q-model="curVal" q-on="keyup: submit | key enter" q-focus="focus"></ui-input>
    </article>
</dialog>
  • Javascript文件:
var filters = require('filters');

module.exports = {
    methods: {
        submit: function () {
            if (!this.curVal) {
                this.$set('focus', true);
            } else {
                this.$emit('submit', this.curVal);
                this.$set('curVal', '');
                this.hide();
            }
        },
        show: function () {
            // call super.show
            this.constructor.super.options.methods.show.call(this);
            this.$set('focus', true);
        }
    },
    directives: {
        focus: function (val) {
            val && this.el.focus();
        }
    },
    filters: {
        key: filters.key
    }
};
效果
  • 在页面上引用inputval
<inputval id="my-dialog"></inputval>
  • 在Controller调用其show方法:
var Q = require('Q');

Q.get('#my-dialog').show();
  • 则页面弹出一个弹出,要求输入值:

备注
  • 这里我们引入extend属性,用于表示该组件继承哪个组件。
  • 我们还复写了dialogsubmitshow方法,并且可以调用其父Componnet的方法,如:
this.constructor.super.options.methods.show.call(this);

嵌套使用扩展组件

我们可以嵌套使用扩展后的组件。

下面是一个复杂的例子,一个按钮点击后弹出inputval,输入后alert出输入的内容。

定义
  • CSS文件
.$__anchor {
    padding: 13px 35px 17px;
    box-shadow: inset 0 -4px 0 #2a6496;
    border: 0;
    color: #fff;
    transition: all .2s ease-in-out;
    background-color: #337ab7;
    border-color: #2e6da4;
    display: block;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    border-radius: 4px;
    text-decoration: none;
    margin: 0 auto;
}

.$__anchor:hover,
.$__anchor:active
.$__anchor:focus {
    background-color: #286090;
    border-color: #204d74;
}
  • 模版文件:
<div>
    <a href="void(0);" class="$__anchor" q-on="click: setMessage">
        <content></content>
    </a>
    <inputval q-ref="input"></inputval>
</div>
  • Javascript文件:
module.exports = {
    data: {},
    methods: {
        setMessage: function (e) {
            var self = this;
            this.$.input.$once('submit', function (value) {
                value && alert('输入了:' + value);
            });
            this.$.input.show();
        }
    }
};
效果
  • 在页面引用:
<clkme>请点击我</clkme>
  • 效果:

DIY组件

DIY组件允许页面通过Markup的方法引用NodeJS组件,这样我们可以使用该NodeJS组件分析我们的代码来做一些神奇的事情。

例如我们提供的diy-preload组件提供的CGI预加载方案,整个过程没有改变开发人员的编码体验,只是简简单单标记一下哪个CGI需要预加载,则系统会自动预加载CGI。

使用
  • 在页面引入diy-preload组件
<diy-preload></diy-preload>
  • 在页面对应的数据层配置文件,这里我们的规范是该文件名为db.*.js,的对应CGI设置成preload = true:
    var DB = require('db');

    DB.extend({
        ke: DB.httpMethod({
            url: 'http://ke.qq.com/cgi-bin/index_json',
            type: 'JSONP',
            preload: true
        })
    })

    module.exports = DB;
  • diy-preload组件会找到db.*.js,然后分析出什么CGI需要预加载,在<diy-preload>标签对应的位置插入预加载脚本。整个过程开发人员感知不到,体验上还是调取一个CGI,但是实际上在页面文档打开后CGI请求立刻发出,而不是等待Javascript加载完后才发出。
9条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。