Upload
guankaishe
View
112
Download
0
Embed Size (px)
Citation preview
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