专栏首页IMWeb前端团队Ques前端组件化体系(二)

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加载完后才发出。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端图表可视化的应用实践总结

    腾讯企鹅辅导在学生上课结束后推送“学习报告”,是课程所提供的一项重要服务。家长在“学习报告”中能查看孩子上课时间及互动情况,答题及掌握知识点,作业考试分数,班级...

    IMWeb前端团队
  • 上拉加载下拉刷新了解下

    1.界面上,只分成简单的两块,一块是上方的刷新文字,一块是下方的内容,然后将上方提示内容隐藏在屏幕之外,一般由两种方式,一种是上面遮一层,另一种是marginT...

    IMWeb前端团队
  • 组件化开发--实践记录与总结

    在参与【腾讯课堂,暑期早起团】活动开发的过程中,涉及到了课程卡片的展示。具体效果如下:

    IMWeb前端团队
  • react 基础之组件篇三——设计复合组件

    书接上文——react 基础之组件篇二——Style in React 本节精彩继续,阿拉斯加继续装逼如何优雅的写bugger!!!

    夜尽天明
  • react组件间的通信

    在使用react过程中,不可避免的需要组件间的数据通信,数据通信一般情况有一下几种情况:

    无邪Z
  • 如何编写一个 Vue JS 内嵌组件

    overtrue
  • Angular6自定义表单控件方式集成Editormd

    曾经找到过“Editor.md”,看之心喜,一直想在Angular中集成下这款markdownpad编辑器玩,在网上也只找到一篇通过指令集成的,虽然可以实现,但...

    汐楓
  • iOS漫谈——对于项目架构的思考

    又一次的版本更新上架,心情容不得片刻舒缓,新的迭代任务又明白的摆在桌面上。今年上半年自己琢磨完ReactiveCocoa之后,对手上了项目做了MVVM架构的尝试...

    Originalee
  • Android基础知识:项目架构基础概述

    前段时间由于工作需要,学习了关于组件化和插件化架构相关的知识。查阅了很多Android开发架构的资料,组件化自己写了个简单的Demo并且开始了原有项目的改造,插...

    Android技术干货分享
  • 使用react render props实现倒计时

    react的组件模式可以观看Michael Chan的演讲视频,平时大家常听到的react模式也是HOC, HOC的使用场景很多,譬如react-redu...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券