tailor multi fragment && cutom-amd script demo 说明
tailor 官方demo 中提供了一个multi fragment 的demo，这个比较简单，就是使用不同的后端server 做为fragment ，然后使用 html tag 进行加载就可以了。
multi fragment 说明
- 调用格式
<h2>Fragment 1:</h2> <fragment src <h2>Fragment 2:</h2> <fragment async src <div>All done!</div>- 后端服务
就是一个简单的node http server，格式如下：
const fragment1 = http.createServer( serveFragment('fragment1', ');fragment1.listen(8081);- fragment 创建说明
fragment2 使用了异步处理，fragment3 使用基础模版同时设置了超时处理
'use strict';const url = require('url');const jsHeaders = { 'Content-Type': 'application/javascript', 'Access-Control-Allow-Origin': '*'};const defineFn = (module, fragmentName) => { return `define (['${module}'], function (module) { return function initFragment (element) { element.className += ' fragment-${fragmentName}-${module}'; element.innerHTML += ' ' + module; } })`;};const defineFnPromise = (module, fragmentName) => { return `define (['${module}'], function (module) { return function initFragment (element) { // Lazy rendering on fragment return new Promise((res, rej) => { setTimeout(() => { element.className += ' fragment-${fragmentName}-${module}'; element.innerHTML += ' ' + module; return res(); }, 200) }) } })`;};module.exports = (fragmentName, fragmentUrl, modules = 1, delay = false) => ( request, response) => { const pathname = url.parse(request.url).pathname; switch (pathname) { case '/module-1.js': if (delay) { return setTimeout(() => { response.writeHead(200, jsHeaders); response.end(defineFn('js1', fragmentName)); }, 500); } else { response.writeHead(200, jsHeaders); response.end(defineFn('js1', fragmentName)); } break; case '/module-2.js': response.writeHead(200, jsHeaders); response.end(defineFnPromise('js2', fragmentName)); break; case '/module-3.js': response.writeHead(200, jsHeaders); response.end(defineFn('js3', fragmentName)); break; case '/fragment.css': // serve fragment's CSS response.writeHead(200, { 'Content-Type': 'text/css' }); response.end(` .fragment-${fragmentName} { padding: 30px; margin: 10px; text-align: center; } .fragment-${fragmentName}-js1 { } .fragment-${fragmentName}-js2 { color: blue; } .fragment-${fragmentName}-js3 { text-decoration: underline } `); break; default: const moduleLinks = []; // 默认的处理，为了提供css 以及js 处理，tailor 会使用loadcss 加载css资源 for (var i = 0; i < modules; i++) { moduleLinks[i] = `<${fragmentUrl}/module-${i + 1}.js>; rel="fragment-script"`; } // serve fragment's body response.writeHead(200, { Link: `<${fragmentUrl}/fragment.css>; rel="stylesheet",${moduleLinks.join( ',' )}`, 'Content-Type': 'text/html' }); response.end(` <div > Fragment ${fragmentName} </div> `); }};- js fragment 定义说明
就是一个amd 个格式的js，demo 使用了一个 requirejs 兼容的包iamdee 替换amd 加载处理
格式如下：
以下的调用了其他模块，其他模块的定义在模版文件中，js fragment 如下：
const defineFn = (module, fragmentName) => { return `define (['${module}'], function (module) { return function initFragment (element) { element.className += ' fragment-${fragmentName}-${module}'; element.innerHTML += ' ' + module; } })`;};异步格式
const defineFnPromise = (module, fragmentName) => { return `define (['${module}'], function (module) { return function initFragment (element) { // Lazy rendering on fragment return new Promise((res, rej) => { setTimeout(() => { element.className += ' fragment-${fragmentName}-${module}'; element.innerHTML += ' ' + module; return res(); }, 200) }) } })`;};amd 模块定义
base-template.html
define('js1', function () { return 'js1'; }); define('js2', function () { return 'js2'; });模版的使用
demo 使用了基础模版，通过slot 进行占位符处理,demo 主要是处理fragment3
- 模版使用
<body>+ <slot name="body-start"></slot>fragment3 模版文件：+ <title slot="head">Test Page</title>+ <h2 slot="body-start">Fragment 3</h2>+ <fragment slot="body-start" src="- fetchTemplate 处理
在tailor 初始化处理的时候
const tailor = new Tailor({ amdLoaderUrl: AMD_LOADER, maxAssetLinks: 2,+ fetchTemplate: fetchTemplateFs( path.join(__dirname, 'templates'), baseTemplateFn )});运行效果
说明
multi fragment &&custom amd 这个demo 是一个比较全的使用tailor 的例子，好多方便的功能我们都能看到
