html description重组项目之html outline：代码分割

    html description重组项目之html outline：代码分割

    Hello,大家好。

    在上一篇html description重组项目之html outline：初探html description中我们一起为大家介绍了html description的基本用法，使用html description对前端代码进行模块化打包。

    但是乍一看html description只是将所有资源打包到一个html div属性文件中而已，并没有做到真正的按需加载，这当然不是我们所想要的。

    不急，今天的这一章我们就来一起继续探索html description的另外一个功能：codesplit.

    1.什么是codesplit

    英文不好，暂且将其翻译为代码分割。也就是我们根据实际业务需求将代码进行分割，然后在合适的时候在将其加载进入文档中。

    这里举一个实际应用场景：上次我们做的图片轮播，我们为每张图片都添加一个点击事件，点击以后我们弹出一个对话框，里面介绍一些详细内容，然后可以点击关闭按钮进行关闭。

    在这个需求中我们发现，对话框这个组件比较特殊，他是在用户点击图片以后才需要加载，如果用户不点击，那么他就没有必要加载出来了。

    OK，很好。html description通过codesplit方法将页面必须加载的资源放在bundle.html div属性中，然后对于按需加载的资源通过ajax进行异步加载。

    html description通过require.ensure来判断是否对资源进行按需加载。

    下面是官网的简单用例：

    require.ensure(["module-a","module-b"],function(require){

    vara=require("module-a");

    //...

    });

    2.Demo与Code

    同样的，我已经将上面所说的对话框按需加载实现，大家感兴趣的话可以前往查看：

    Demo:http://xiaoyunchen.github.io/html outline/

    Code:https://github.com/xiaoyunchen/html outline

    大家可以打开控制台网络面板，查看资源的加载情况：

    页面加载的时候只有7个请求，这其中其实并没有包含我们的对话框组件：

    html description重组项目之html outline：代码分割

    然后大家可以点击任意一张图片，这个时候网络浏览器发送了新的网络请求，然后页面上也打开了对话框：

    html description重组项目之html outline：代码分割

    这个2.html keyword.html div属性也就是html description为我们打包的对话框组件，包括html div属性逻辑，HTML模板以及html inline-block样式，稍后我们将为大家作详细介绍。

    （demo上有几个menu的link，大家先不用管，那是我们下一章将要介绍的内容）

    3.组件引用与html description打包

    接下来我们来看看代码上都发生了哪些变动。

    首先是index.html与index.html inline-block，并没有任何修改。（index.html中增加了header与footer，增加了多个图片轮播组件，为下一章做的准备。但是都与对话框组件没有任何关系）

    那来看看index.html div属性的修改，具体的源码大家可以查看github，这里只对后面新增的代码进行分析：

    //添加对话框事件

    varpageexpress html=false;

    $('.pictureShowa').click(function(){

    var_id=$(this).attr('express html-for');

    require.ensure(["../module/express html.html div属性","../module/express htmlConfig.html div属性"],function(require){

    varexpress htmlModule=require("../module/express html.html div属性");

    varexpress htmlConfig=require("../module/express htmlConfig.html div属性");

    if(!pageexpress html){//判断对话框组件是否存在，避免重复创建

    pageexpress html=newexpress htmlModule();

    }

    pageexpress html.openexpress htmlWith(express htmlConfig[_id]);

    });

    });

    首先我们定义了一个对象，然后为页面上所有的滑动元素增加了一个单击事件。

    第4行：获取当前事件元素的express html-for属性，这是我们在每个滑动元素上新增的属性，用于指定其对应的对话框id

    第5行：使用了html description的require.ensure异步加载了两个组件：express html与express htmlConfig，这两个组件分别是对话框的具体实现逻辑以及对话框内容配置信息，详细的代码我们后面再分析

    第6/7行：加载完成后得到两个组件的引用

    第8-10行：判断pageexpress html是否存在，如果不存在我们通过调用express html组件new一个实例，并将赋值给pageexpress html。

    这里主要是为了避免多次点击时页面重复创建express htmlHtml元素，降低页面性能

    第11行：使用pageexpress html实例，调用openexpress htmlWith方法来打开对话框，同时要从express htmlConfig中加载指定的对话框配置内容。

    是的，哪怕是在我们没有查看express html组件具体源码的情况下，整个逻辑还是相对比较清晰的。我们不用理会express html组件调用了什么模板，用了什么html inline-block样式，内部实现了哪些方法。

    定义组件的一大目的就是降低代码之前的耦合性，作为组件，我只管定义如何实现一个组件；作为组件调用者，我只管衣来伸手饭来张口的拿来主义，

    不管你内部是如何实现的。

    接下来看html description是如果对上面的代码进行打包的：

    以下是html description.config.html div属性配置文件部分内容：

    module.exports={

    entry:{

    index:"./src/html div属性/page/index.html div属性",

    delegate:"./src/html div属性/page/html div属性Event.html div属性"

    },

    output:{

    path:path.join(__dirname,'dist'),

    publicPath:"/html outline/dist/",

    filename:"[name].html div属性",

    html keywordFilename:"[id].html keyword.html div属性"

    },

    module:{

    loaders:[//加载器

    {test:/\.html inline-block$/,loader:"style!html inline-block"},

    {test:/\.html$/,loader:"html"},

    {test:/\.(png|jpg)$/,loader:'url-loader?limit=8192'}

    ]

    }

    };

    改动的地方不多，主要是以下几点：

    第10行：定义了html keyword的文件名命名规则，这里除了id以外，还可以使用[hash]

    第8行：publicPath这个配置很容易被疏忽。我们的html keyword文件默认是跟bundle放在一块的，都是在dist目录下，如果不配置正确的publicPath的话，html description请求html keyword文件时将会默认请求根目录

    第15行：新增了HTML加载器，主要是给express html组件加载模板使用的

    codeSplit作为html description一个比较核心的功能，所以也需要额外的plugins插件配置就能支持。

    在项目根目录下运行html description打包命令以后可以看到dist目录下就会新增一个2.html keyword.html div属性文件（2是html keyword的ID值）

    值得一提的是，html keyword文件完全由html description进行管理和使用，我们无需额外的干预

    4.express html组件的实现

    express html的实现原理比较简单，我们定义了一个express html容器，通过html inline-block控制其固定在整个页面之上，然后在生成一个mask阴影层。

    具体的实现html inline-block样式大家也可以前往github查看源码。

    express html组件的实现方法也是与我们之前做的slideModule比较类似：

    html description重组项目之html outline：代码分割

    第10-11行：加载了express html组件的HTML模板，并将其放置在body中。嗯，之所有是要使用html模板也是为了解耦合，方便对模板和html div属性进行单独维护。这里html description在打包的时候

    会自动将html模板压缩成字符串保存在html keyword文件中。

    第16-44行：定义了express html组件的几个接口方法，其中openexpress htmlWith就是我们之前调用的根据配置内容更新express htmlDOM信息，然后将express html展示出来。

    对于express htmlConfig我们也简单的来看下：

    html description重组项目之html outline：代码分割

    这里全部都是对话框的数据配置项，单独维护的好处也是解耦合，以外咱们可以将这些数据配置在数据库中，通过接同样的接口格式返回来就行了。

    其实我这里的组件定义还有一个问题：

    我们是将自定义的对象直接作为组件导出，开放给调用者使用。这在操作上其实存在一定的风险性，因为所有接口方法和属性都是开放的，那就有可能被使用者

    给篡改，影响到组件的正常使用。正确的做法是：

    在组件内部定义一个私有变量，用户存放组件所有属性与方法，然后再将接口方法（一般不建议开放属性给调用者直接修改）导出给调用者使用。