10.组件实战

序

上一篇主要介绍了组件的原理，这一篇主要是举个例子，来说明组件的应用。

案例

1. 实现一个下拉刷新组件，当用户在某个区域将手指从上面往下滑动，这个组件就会出现，然后页面执行刷新操作。等刷新完，这个组件就会消失。

   • 我们定义一个对象，放在组件配置数组中，在需要用到的时候加载，在/public/index.js加入代码
   • 在home.html中添加，对于组件获取，只能通过id
   • 然后在/public/component文件夹中加入以下目录文件
   • 在str-down-fresh.html加入如下代码
   • 在str-down-fresh.js加入组件的逻辑代码
   • 在home.js监听loading事件，在10s后隐藏，如以下代码

2. 关于slot的例子，引入的a-btn标签，在home.html引入,slot的单元素直接用元素，如果是多元素替换slot，用template元素。

   • 引入组件配置

   • slot顺序不代表渲染顺序

   • 然后在/public/component文件夹中加入

   • 在a-btn.html加入如下代码, 以这里的渲染顺序为主

   • 在a-btn.js加入如下代码

这里引入的都是单元素，如果组件定义多元素，也是符合的, 比如下面定义一个x-component, 如果只有一个slot，那么就可以不用定义name属性，在html上定义的里面的内容都是属于slot的content
在x-component.html定义

<div class="x-component-style"></div>
<div><slot></slot></div>
<div></div>

这里要注意：slot必须要将元素包围起来。因为上一篇对于组件的属性nodes是从放在html就开始定义的，而不是save的时候定义，因为它没有parentDom，如果没有包围起来，在执行页面restore的时候，会造成不可思议的bug。

ui组件库

上述说明了几个Componnet的例子， 如果创建一个组件库呢？统一组件的整体风格是非常的重要的。这里我们按照google的material design创建了一个符合移动端的组件库。把它放在/public/ui的文件夹中，并把组件库的的service文件strui.js放在services文件夹中，里面主要是定义一系列的组件信息。在使用的时候，在/public/script/index.js中引入strui服务

App.require(["strui"], function (strui) {
    // 其它页面配置信息
    strui.init(app, function () { // 初始化，主要是为了引入相关的样式，是个异步的过程
        app.initialize(document.body);
    })
})

以下就是strui里面的简要代码

App.require(function () {
    var components = []; // 组件配置
    var popUps = []; // 弹窗配置, 下一篇详解
    var layers = []; // 继承于组件，应用于canvas的组件，不做介绍
    var pages = []; // 页面配置
    var services = [];

    App.prototype.showDialog = function () {} // App的附加方法群
    Page.prototype.showDialog = function () {} // Page的附加方法群

    // 全局的涟漪特效
    if ("ontouchstart" in window) {
        window.addEventListener("touchstart", touchstartHandler, false);
    } else {
        window.addEventListener("mousedown", touchstartHandler, false);
    }

    // 定义服务
    App.define("tdrui", {
        init: function (app, feeback) {
            app.appendComponentConfig(components);
            app.appendComponentConfig(layers);
            app.appendPopUpConfig(popUps);
            app.appendPageConfig(pages);
            app.appendServiceConfig(services); // 不是放在services文件夹中的需要特别定义 

            // 接下来移入css文件，主要是str.css，引入后执行feeback
            // 最后引入适配各个屏幕的str-xx.css
        }
    })
})

这样子，就可以畅快的使用组件库里面的组件了。
strui组件库是一个为了兼容现代浏览器的高性能全平台ui组件库，目前正在开发中，目前只有在移动端进行开发项目，pc端还未兼容（正在开发中）

strui框架主要做了以下的事情：

1. 定义全局化样式，统一风格；
2. 里面使用了多个css文件，为了更好的适配移动端以及pc端；
3. 简化开发流程，提高项目的质量。

使用组件的时机

在这里，我们相当于把组件的使用全介绍了，回到上一篇的开头，通过组件怎么让业务和渲染层的代码不混杂在一起呢？

1. 我们要掌握数据的流向，对于组件来说，它是可以保存数据的，它的主要目标是根据数据渲染不同的界面，它应该是和业务无关的；
2. 对于Page对象来说，它是控制数据的流向，如果需要获取数据，可以从后端获取，可以从组件里面获取，也可以给组件赋值，更改组件的状态。同时它也是处理业务的主要场地，通过监听组件和dom的事件，进行业务处理；
3. 有时候组件是一次性的，仅仅针对于单个Page对象，把它抽象出来还是有很大的意义的。它可以更好的分离页面各种功能，让它们各司其职。在下一次更改的时候，只需要更改部分组件和它的数据流行就可以很好的解决；
4. 对于组件我们应该是可以精细控制的，虽然开发的时候会耗费点时间，对于要应对复杂多变的业务，也是非常必须的。

案例地址

总结

介绍组件的定义和使用，同时引入了组件库。并且总结了组件的使用情况。

推广

底层框架开源地址：https://gitee.com/string-for-100w/string
演示网站: https://www.renxuan.tech/