Web Components With ScratWeb Components With Scrat

Vue + Scrat 构建 Web components 应用

Web Components 的组成

• Shadow DOM

• HTML Templates

• Custom Elements

• HTML Imports

Web Components 的组成

• Shadow DOM （ DOM 与 Style 的封装边界）– 命名空间方式限制 CSS 的作用范围– DOM Tree 沙箱需要浏览器支持

• HTML Templates– Vue 基于 DOM 解析方式解析 templates– Scrat 提供 __inline() 粘合

Web Components 的组成

• Custom Elements– Vue 组件实现

• HTML Imports– Scrat.js 加载 JS 文件 ( js + template ) + CSS 文件

一个 Vue 组件模块

+---c-header | | c-header.css | | c-header.js | | c-header.tpl | | | \---img | header-home.png

/** c-header.tpl<div class="c-header"> <div class="title">header title</div></div> **/Vue.component('c-header', { template: __inline('c-header.tpl'), created: function ( ) {}, methods: { // ... }});

组件模块目录 组件构造

Vue 组件的组合/** p-index.tpl<div class="p-index"> <c-header v-with="headerConfig"></c-header></div> **/

require('c-header'); // => require(c-header.js') + require(c-header.css')

Vue.extend('p-index', { template: __inline('p-index.tpl'), created: function ( ) { headerConfig: {/*...*/} }, methods: { // ... }});

项目目录结构+---component_modules| |+---views| | index.ejs| | scrat.js| | vue.js| |\---components | | +---boot | +---c-header | +---p-index | \---redirect

components| |+---boot| | boot.js| || +---directives| | log.js| || \---filters| date.js|+---c-header| | c-header.css| | c-header.js| | c-header.tpl| || \---img| header-home.png|+---p-index| p-index.css| p-index.js| p-index.tpl|\---redirect redirect.js

模块的命名约定

1. p-* 页面组件

2. c-* UI 基本组件

3. d-* directive 模块

4. f-* filter 模块

5. * 其它功能模块

项目规模

68 68 业务模块业务模块 2525 个公共模块个公共模块

模块资源请求优化

构建命令： scrat release -cuop

模块加载器： scrat.js 发起 comb 请求 => /co??a.js,a.css,b.js,b.css,...

减少请求数

模块资源请求优化

资源缓存

实现： LocalStorage 缓存， MD5 校验

配置： fis.config.set('framework.cache', true);

Thanks ！@switer github.com/switer