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