组件

组件：BUI 的组件是包含同名的 HTML 结构及 JS 代码，按照特定格式组织可以复用的代码，BUI 的组件默认是按需加载，也支持一次性加载。

特点

BUI 组件跟模块的进一步区别：组件包含 html、js 文件，且是默认执行初始化的；模块只有 js 文件，只定义，不执行。

组件定义

以轮播图为例，把以下两个文件，放到 pages/ 目录下的任何位置，建议在 pages/components/ 目录下，再新建一个slide的目录

pages/components/slide/slide.html

<div class="bui-slide"></div>

pages/components/slide/slide.js

loader.define(function (require, exports, module, global) {
  // 1.7.x 支持，接收外部参数
  let props = module.props;
  // 1.6.x 支持，接收外部参数
  // let props = bui.history.getParams(module.id);

  // 通过component 的id进行初始化
  props.id = `#${module.id} .bui-slide`;
  // 处理默认参数
  props.height = props.height || 200;
  props.autopage = true;
  props.data = props.data || [
    {
      image: "http://easybui.com/demo/images/banner01.png",
    },
    { image: "http://easybui.com/demo/images/banner02.png" },
  ];

  // 初始化:
  const uiSlide = bui.slide(props);

  // 抛出组件供外部调用
  return uiSlide;
});

组件使用

只需一行代码（用 id 进行区分不同的组件）会把高度跟 id 传到组件中

<!-- 第1个轮播图 -->
<component
  id="slide"
  name="pages/components/slide/slide"
  height="300"
></component>

<!-- 第2个轮播图 -->
<component
  id="slideAd"
  name="pages/components/slide/slide"
  height="200"
></component>

组件动态传参

动态传参需要等待数据加载完成，再编译组件，component 标签加上delay="true"属性，直到loader.delay才会编译，且只编译一次。

pages/main/main.html

<component
  id="slide"
  name="pages/components/slide/slide"
  delay="true"
></component>

pages/main/main.js

loader.define(function (require, exports, module, global) {
  // 异步请求
  bui
    .ajax({
      url: "http://www.easybui.com/demo/json/slide.json",
    })
    .then(function (result) {
      // 只编译一次组件
      loader.delay({
        id: "#slide",
        param: {
          height: 300,
          data: result.data,
        },
      });
    });
});

组件同步开发

业务中有些接口会比较复杂，需要通过多次调用以后才能拿到最终的值，很容易导致回调地狱，利用 es6 的async await同步开发的方式则可以避免。

loader.define(async function (require, exports, module, global) {
  // 同步编译按顺序执行

  // 1. 同步请求token
  let token = await bui.ajax({
    url: "http://www.easybui.com/demo/json/token.json",
    data: {
      uid: "bui",
    },
  });
  // 2. 通过token请求接口
  let result = await bui.ajax({
    url: "http://www.easybui.com/demo/json/slide.json",
    data: {
      token: token.data,
    },
  });
  // 3. 同步编译
  const uiSlide = await loader.delay({
    id: "#slide",
    param: {
      height: 300,
      data: result.data,
    },
  });
});

注意：同步开发需要编译工程的支持，直接部署或者本地打开的方式都会导致报错。

组件预览

修改浏览器的地址 index.html#main 为 index.html#pages/components/slide/slide 就可以直接预览效果

图片为整个页面的预览效果