即使在 Webpack 大行其道的今天，我们仍然推荐 AMD，理由如下：

  1. 无需编译，浏览器天生支持
  2. 具有模块化带来的各种好处
  3. 构建工具非常成熟，不用去折腾 Webpack 复杂的配置项
  4. 不影响使用 ES6

模板的加载方式

在文档和项目的各种示例中，我们采用的是 <script> 标签内嵌模板的方式，如下：

<script id="template" type="text/plain">
    <div>
        ....
    </div>
</script>

new Yox({
    el: '#app',
    template: '#template'
});

实际开发中，这样写模板会损失编辑器的高亮特性，并且模板也不好管理。

我们推荐使用 AMD 的文本插件，步骤如下：

  1. 创建一个xxx.html，用于承载组件的模板
  2. 采用 require('text!./xxx.html') 的方式引入

模板写在单独的 html 文件中，因此编辑器自然会当做 html 处理，高亮的特性也就得以保留。

组件的组成方式

一个组件，通常有模板、样式、脚本组成，因此，我们推荐采用如下的方式开发组件：

component/
  - Header.js
  - Header.css
  - Header.html

在 Header.js 中，通过 AMD 文本插件把模板加载进来，如下：

new Yox({
    el: '#app',
    template: require('text!./Header.html')
});

样式的处理见仁见智，目前我的实践方式是在 Header.css 中写样式，然后用文本插件加载进来，如下：

new Yox({
    el: '#app',
    template: require('text!./Header.html'),
    data: {
        style: require('text!./Header.css'),
        ...
    }
});

<div class="root">
    ...
    <style>
        {{{style}}}
    </style>
</div>

注意，style 用了非转义插值。

这种方式的一个缺点是，图片等静态资源文件的引入路径难以确定。如果有类似背景图的需求，建议还是采用 <link> 标签加载。

results matching ""

    No results matching ""