web前端模块化框架
介绍
一个web前端模块化框架，可以引入模板html文件，利于前后端分离的网站重复代码以及模块的复用。
软件架构
本框架是利用mloader.js文件加载带有mloader-template的类的标签从而进行的文档的动态复用。
安装教程
1. 在需要使用模块化的前端页面的head标签内引入mloader.js文件。
2. 在需要使用模板的前端页面的使用位置添加带有mloader-template的类的标签。
开始使用
1. index.html中在head标签中引入mloader.js文件。
<head>
<meta charset="utf-8" />
<script src="js/mloader.js"></script>
</head>
2. index.html中在需要模板的位置添加带有mloader-template的类的标签。
<div class="mloader-template" url="template/demo-template.html" data='data1'></div>
3. index.html中如果需要传递参数，则需要在标签中添加json参数数据。
//此处的data1名称需要和第二步中的data的值一样。
var data1={
content:"你好，我是模板！"
};
4. template.html中在使用模板中利用{content}来接收参数。
//此处{}中的值需要和json中的key相对应。
<div>{content}</div>
高级用法
说明：模板中所用到文件引用相关的相对路径，必须为相对于引用模板的路径，模板嵌套模板也需要使用最初时的引用路径。
1. 模板可以嵌套使用，一个模板嵌套另一个模板，就像和在html中使用一样。
2. 模板可以引用外部js文件，引用时需要用到<import-js src=""></import-js>标签，src的值为js文件路径。
3. 模板可以引用外部css文件，引用时需要用到<import-css src=""><import-css>标签，src的值为css文件路径。
4. 模板中可以任意使用内联js和css。
5. 模板中的图片相对路径也必须相对于最初时的引用路径。
6. 模板可以使用if和for标签。
（1）if使用可以用m-if、m-elif、m-else三个属性，目前一个模板只允许使用一个条件判断，后期再做更新。
（2）for使用可以用m-for属性，数据可以用"."读取。
例如：
//index.html中构建数据。
<script>
function getList1(){
return [1,2,3,4];
}
function getList2(){
return [{city:{city1:"长沙",city2:"岳阳"},pro:"湖南"},{city:{city1:"武汉",city2:"咸宁"},pro:"湖北"}];
}
var data1={
content:"你好，我是模板！",
booleanTest1:true,
booleanTest2:false,
booleanTest3:false,
listTest1:getList1(),
listTest2:getList2()
};
</script>
//template.html中if使用，打印结果为：booleanTest1 is true!。
<div m-if="booleanTest1">
booleanTest1 is true!
</div>
<div m-elif="booleanTest2">
booleanTest2 is true!
</div>
<div m-elif="booleanTest3">
booleanTest3 is true!
</div>
<div m-else>
booleanTest1 and booleanTest2 all is false!
</div>
//temlate.html中for使用，打印结果为：序号：0,数据：1 序号：1,数据：2 序号：2,数据：3 序号：3,数据：4。
<div m-for="listTest1">
序号：{index},数据：{item}
</div>
//temlate.html中for使用，打印结果为：序号：0,数据：1----长沙;2----岳阳;3----湖南 序号：1,数据：1----武汉;2----咸宁;3----湖北。
<div m-for="listTest2">
序号：{index},数据：1----{item.city.city1};2----{item.city.city2};3----{item.pro}
</div>
//if判断中可以使用&&与||条件语句
<div m-if="{booleanTest1&&booleanTest2}">
我是多条件语句测试！
</div>
//当if判断嵌套在for循环中时使用
<div m-for="listTest2">
我是for循环测试语句！
<div m-if="{item.b1&&item.b2}">
我是for循环嵌套if的测试语句！
</div>
</div>
7. 关于js动态添加模板，需要在动态添加完成模板后调用reloader()函数。
//index.html中的html代码。点击click按钮，模板内容才加载出来。
<button onclick="ck()">click</button>
<div id="test"></div>
//index.html中的js代码。
<script>
function ck(){
var htmlTag = document.getElementById("test");
htmlTag.innerHTML="<div class=\"mloader-template\" url=\"template/demo-template.html\" data='data1'></div>";
//动态插入template模板后需要手动调用reloader函数。
//不传参数表示刷新整个页面
reloader();
//传参数表示刷新传入的dom
reloader(htmlTag);
}
</script>
注意事项
1. data数据必须在head标签里面定义。
2. 同一页面内引用的多个模板内如果有script代码，定义的函数名字都不能相同。
3. 涉及到局部添加模板时，请使用reloader（‘要刷新的dom，即刚添加的模板dom’）进行刷新。
项目代码
