JOYUI模块规范以及页面搭建

什么是JOYUI模块

相信大家在平常的开发过程中会发现,一个页面往往可划分为几个部分,如简单划分为头部、内容部分和尾部。即使在各色各样的活动页面中仍然可以细分一些构成页面的模块,如轮播模块,滑动tab栏,列表页,品牌banner页等。这些部分在传统开发中每次开发一个新的活动页面时会从之前的页面中复制粘贴回来并修改下显示数据完成二次开发,直至大功告成。这样功能是可以保证,但是却可复用性却很差,可维护性几乎没有,无法适应敏捷开发。计算机领域中有句真理:“解决计算机的问题可以通过增加层来实现”,于是乎在架构中添加了JOYUI层,它作为页面可复用部分的一个抽象,抽离出来单独维护和使用。

JOYUI模块出现的目的是为了快速迭代页面,让没有开发基础的运营人员也可以构建页面,让前端开发人员基于源码搭建方式可以从更底层定制页面。

如何开发JOYUI模块

JOYUI模块的开发十分容易,和fecomponent几乎相同。模块开发可划分为如下几个步骤:
1. 在gitlab的JOYUI组中创建仓库,clone至本地
2. 进入当前目录,执行命令spon mb init --joyui,按照提示信息输入相关数据,如模块名、依赖模块名称和版本号
3. 在index.js中按照commonJS规范编写业务逻辑(在JOYUI规范中,默认创建了和模块名相同的模板文件,后缀为tmpl,该文件的引用同样可以使用require('./xxx.tmpl'));样式文件可以在index.less中书写(但需要在index.js中通过require('./index.less')相对路径引用);依赖模块的引入仍是通过require方法引入,如require('fecomponent/mobi-jswebview/0.0.17'),版本号与package.json中定义的依赖版本号相同
4. 模板在tmpl中书写,使用扩展JS语法的art-template引擎
5. README.md尽可能完善,详述渲染数据和使用方法;data.json文件用来提供默认的渲染数据,必须添加。否则可视化搭建平台则无法正确显示该JOYUI模块的具体表现!
6. JOYUI模块的发布仍采用打标签方式

JOYUI模块组

所谓组,即模块嵌套。一个JOYUI模块可以在其同名的模板中添加占位符来声明其为模块组,占位符的个数标明该组可容纳的数量,为了对应程序的严谨性,占位符的个数必须与实际配置子模块的数量相同,不可多不可少。

实例demo:

与JOYUI同名的模板 {{name}}.tmpl

<!-- JOYUI模块div包含块 -->  
<div class="joyui-module demo">  
      <div class="joy-ui-dialog-pop j_Joy-ui-dialog-pop">
        <div class="joy-ui-dialog-pop-window">
          <div class="joy-ui-dialog-pop-close-btn j_Joy-ui-dialog-pop-close"></div>
          <div class = "joy-ui-dialog-pop-title"></div>
          <div class = "joy-ui-dialog-pop-message">

            <!--占位符-->
            <joyui:view>
            <joyui:view>          

          </div>
        </div>
      </div>
</div>  

可见,子模块在父模块使用作为占位符。此后在使用该模块时必须配置该组中的两个子模块,并根据子模块的引用规则来渲染最终的父模块,详见下节。

如何源码搭建页面

众多的JOYUI模块是一块块积木,开发者可以使用这些积木随意的搭建出一栋栋建筑,即页面。源码搭建页面的方式最为直接,可操作性也最强,基于此详细介绍如何使用源码方式搭建页面。

搭建页面的入口在对应工程的HTML文件中。默认该页面属于一个page工程(即使用spon mb init初始化,所在路径为src/pages/{{name}}),那么对应的入口文件就是src/pages/{{name}}/{{name}}.html,关于模块的搭建和组合都在该文件进行。

首先看下示例的入口文件编码:

<body>  
    {{ use('joyui/m-banner/0.0.8',{
        options: {useTemplate: true},
        $data: {
            address: 'http://cdn1.showjoy.com/images/e7/e7011d3d0e394bfbae4a2e1747733461.jpg'
        }
      })
    }}

    {{ use('joyui/m-scoll/0.0.7',{options: {useTemplate: true}})}}

    {{ use(
        'joyui/m-pop/0.0.4',
        {
          options:
            {
              useTemplate: false
            },
          slabs: [
             {
               name: 'joyui/m-banner/0.0.8',
               options: {useTemplate: true},
               $data: {
                 address: 'http://cdn1.showjoy.com/images/e7/e7011d3d0e394bfbae4a2e1747733461.jpg'
               }
             },
              'joyui/m-image/0.0.2'
            ]
        })
    }}

    {{
    require('joyui/m-head/0.0.4/foot.js')
    }}

    {{
    require('joyui/m-head/0.0.4/foot.css')
    }}
    <button id="popme">
        popme
    </button>
    {-{stub('shop.js')}-}
    <script src="./uitest.min.js"></script>
</body>  

可以粗略看出,在html中仍采用类似模板语言的写法,使用spon提供的一些功能函数,并通过相关配置自定义搭建策略。

引用JOYUI模块之use

use关键字用于全部引入JOYUI模块,它会加载JOYUI模块入口文件(即index.js)中引入的所有文件(样式,逻辑和模板结构)和依赖(fecomponent模块以及该模块依赖的其他所有资源)。因此,use方式引入JOYUI模块是最基本的使用方式,它需要制定JOYUI模块的版本号,具体的版本号请在page工程的mobi.json中查看,如果需要更新该文件则执行spon mb upgrade

use可以定制化。

use 定制化

options.useTemplate: 该选项默认为true。使用该模块同名的tmpl模板在页面中占位,设置为false则默认不使用模板占位

$data: 提供该模块同名模板的渲染数据,渲染成功后在页面中占位

slabs: 数组类型,数组项个数与该模块占位符个数必须相等。数组项类型可以为对象或字符串,若为字符串则为JOYUI模块名和版本号;若为对象则需配置name,options,$data属性,属性含义同上

引用JOYUI模块之require

require方式引用JOYUI模块的单一文件,而不是全部,因此需要制定引用文件名称。

通过require可以引用如下类型的文件:JS、less和css。最终会在页面上生成一个内联脚本,内联脚本的位置就是之前页面中引用的位置。

require方式并没有特殊的配置项,只需要正确制定引用模块的文件名称即可,如require('joyui/m-head/0.0.4/foot.css')

构建页面

基于源码搭建页面完毕后,需要最后整合生成最终的页面,这需要配合spon来完成。在生成页面之前,如果需要针对该页面定制自己的功能,仍然可以在对应页面工程的js文件中编写相应逻辑,在页面中引用该js文件即可。

生成页面需要配合spon mb join -n {{name}}命令,该命令不仅会将各个JOYUI模块按照配置信息引入,同时会构建与该页面工程对应的js文件和样式文件,在生成的HTML中引入正确路径即完成了页面的搭建。

可视化页面搭建平台

待完善

页面发布

待完善

欲休

继续阅读此作者的更多文章

海创园尚妆