tailor multi fragment && cutom-amd script demo 说明
tailor 官方demo 中提供了一个multi fragment 的demo，这个比较简单，就是使用不同的
后端server 做为fragment ，然后使用 html tag 进行加载就可以了。
multi fragment 说明
- 调用格式
<h2>Fragment 1:</h2>
<fragment src="http://localhost:8081" primary id="custom-id"></fragment>
<h2>Fragment 2:</h2>
<fragment async src="http://localhost:8082"></fragment>
<div>All done!</div>
- 后端服务
就是一个简单的node http server，格式如下：
const fragment1 = http.createServer(
serveFragment('fragment1', 'http://localhost:8081')
);
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 class="fragment-${fragmentName}">
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="http://localhost:8083" timeout="1000"></fragment>
- fetchTemplate 处理
在tailor 初始化处理的时候
const tailor = new Tailor({
amdLoaderUrl: AMD_LOADER,
maxAssetLinks: 2,
+ fetchTemplate: fetchTemplateFs(
path.join(__dirname, 'templates'),
baseTemplateFn
)
});
运行效果
说明
multi fragment &&custom amd 这个demo 是一个比较全的使用tailor 的例子，好多方便的功能我们都能看到
参考资料
https://www.npmjs.com/package/iamdee
https://github.com/zalando/tailor
https://github.com/zalando/tailor/tree/master/examples/multiple-fragments-with-custom-amd
