html description重组项目之html outline：代码分割
Hello,大家好。
在上一篇html description重组项目之html outline：初探html description中我们一起为大家介绍了html description的基本用法，使用html description对前端代码进行模块化打包。
但是乍一看html description只是将所有资源打包到一个html p属性文件中而已，并没有做到真正的按需加载，这当然不是我们所想要的。
不急，今天的这一章我们就来一起继续探索html description的另外一个功能：codesplit.
1.什么是codesplit
英文不好，暂且将其翻译为代码分割。也就是我们根据实际业务需求将代码进行分割，然后在合适的时候在将其加载进入文档中。
这里举一个实际应用场景：上次我们做的图片轮播，我们为每张图片都添加一个点击事件，点击以后我们弹出一个对话框，里面介绍一些详细内容，然后可以点击关闭按钮进行关闭。
在这个需求中我们发现，对话框这个组件比较特殊，他是在用户点击图片以后才需要加载，如果用户不点击，那么他就没有必要加载出来了。
OK，很好。html description通过codesplit方法将页面必须加载的资源放在bundle.html p属性中，然后对于按需加载的资源通过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 p属性也就是html description为我们打包的对话框组件，包括html p属性逻辑，HTML模板以及html inline-block样式，稍后我们将为大家作详细介绍。
（demo上有几个menu的link，大家先不用管，那是我们下一章将要介绍的内容）
3.组件引用与html description打包
接下来我们来看看代码上都发生了哪些变动。
首先是index.html与index.html inline-block，并没有任何修改。（index.html中增加了header与footer，增加了多个图片轮播组件，为下一章做的准备。但是都与对话框组件没有任何关系）
那来看看index.html p属性的修改，具体的源码大家可以查看github，这里只对后面新增的代码进行分析：
//添加对话框事件
varpageexpress html=false;
$('.pictureShowa').click(function(){
var_id=$(this).attr('express html-for');
require.ensure(["../module/express html.html p属性","../module/express htmlConfig.html p属性"],function(require){
varexpress htmlModule=require("../module/express html.html p属性");
varexpress htmlConfig=require("../module/express htmlConfig.html p属性");
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 p属性配置文件部分内容：
module.exports={
entry:{
index:"./src/html p属性/page/index.html p属性",
delegate:"./src/html p属性/page/html p属性Event.html p属性"
},
output:{
path:path.join(__dirname,'dist'),
publicPath:"/html outline/dist/",
filename:"[name].html p属性",
html keywordFilename:"[id].html keyword.html p属性"
},
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 p属性文件（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 p属性进行单独维护。这里html description在打包的时候
会自动将html模板压缩成字符串保存在html keyword文件中。
第16-44行：定义了express html组件的几个接口方法，其中openexpress htmlWith就是我们之前调用的根据配置内容更新express htmlDOM信息，然后将express html展示出来。
对于express htmlConfig我们也简单的来看下：
html description重组项目之html outline：代码分割
这里全部都是对话框的数据配置项，单独维护的好处也是解耦合，以外咱们可以将这些数据配置在数据库中，通过接同样的接口格式返回来就行了。
其实我这里的组件定义还有一个问题：
我们是将自定义的对象直接作为组件导出，开放给调用者使用。这在操作上其实存在一定的风险性，因为所有接口方法和属性都是开放的，那就有可能被使用者
给篡改，影响到组件的正常使用。正确的做法是：
在组件内部定义一个私有变量，用户存放组件所有属性与方法，然后再将接口方法（一般不建议开放属性给调用者直接修改）导出给调用者使用。