# web前端模块化框架 **Repository Path**: xuqingcode/mloader ## Basic Information - **Project Name**: web前端模块化框架 - **Description**: 一个web前端模块化框架，html可以很方便的引入另一个html，可以引入模板html文件，利于前后端分离的网站重复代码以及模块的复用！ - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2019-11-16 - **Last Updated**: 2023-03-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # web前端模块化框架 ### 介绍 ##### 一个web前端模块化框架，可以引入模板html文件，利于前后端分离的网站重复代码以及模块的复用。 ### 软件架构 ##### 本框架是利用mloader.js文件加载带有mloader-template的类的标签从而进行的文档的动态复用。 ### 安装教程 ##### 1. 在需要使用模块化的前端页面的head标签内引入mloader.js文件。 ##### 2. 在需要使用模板的前端页面的使用位置添加带有mloader-template的类的标签。 ### 开始使用 ##### 1. index.html中在head标签中引入mloader.js文件。 ``` ``` ##### 2. index.html中在需要模板的位置添加带有mloader-template的类的标签。 ```
``` ##### 3. index.html中如果需要传递参数，则需要在标签中添加json参数数据。 ``` //此处的data1名称需要和第二步中的data的值一样。 var data1={ content:"你好，我是模板！" }; ``` ##### 4. template.html中在使用模板中利用{content}来接收参数。 ``` //此处{}中的值需要和json中的key相对应。
{content}
``` ### 高级用法 ##### 说明：模板中所用到文件引用相关的相对路径，必须为相对于引用模板的路径，模板嵌套模板也需要使用最初时的引用路径。 ##### 1. 模板可以嵌套使用，一个模板嵌套另一个模板，就像和在html中使用一样。 ##### 2. 模板可以引用外部js文件，引用时需要用到``标签，src的值为js文件路径。 ##### 3. 模板可以引用外部css文件，引用时需要用到``标签，src的值为css文件路径。 ##### 4. 模板中可以任意使用内联js和css。 ##### 5. 模板中的图片相对路径也必须相对于最初时的引用路径。 ##### 6. 模板可以使用if和for标签。 ##### （1）if使用可以用m-if、m-elif、m-else三个属性，目前一个模板只允许使用一个条件判断，后期再做更新。 ##### （2）for使用可以用m-for属性，数据可以用"."读取。 例如： ``` //index.html中构建数据。 //template.html中if使用，打印结果为：booleanTest1 is true!。
booleanTest1 is true!
booleanTest2 is true!
booleanTest3 is true!
booleanTest1 and booleanTest2 all is false!
//temlate.html中for使用，打印结果为：序号：0,数据：1 序号：1,数据：2 序号：2,数据：3 序号：3,数据：4。
序号：{index},数据：{item}
//temlate.html中for使用，打印结果为：序号：0,数据：1----长沙;2----岳阳;3----湖南 序号：1,数据：1----武汉;2----咸宁;3----湖北。
序号：{index},数据：1----{item.city.city1};2----{item.city.city2};3----{item.pro}
//if判断中可以使用&&与||条件语句
我是多条件语句测试！
//当if判断嵌套在for循环中时使用
我是for循环测试语句！
我是for循环嵌套if的测试语句！
``` ##### 7. 关于js动态添加模板，需要在动态添加完成模板后调用reloader()函数。 ``` //index.html中的html代码。点击click按钮，模板内容才加载出来。
//index.html中的js代码。 ``` ### 注意事项 ##### 1. data数据必须在head标签里面定义。 ##### 2. 同一页面内引用的多个模板内如果有script代码，定义的函数名字都不能相同。 ##### 3. 涉及到局部添加模板时，请使用reloader（'要刷新的dom，即刚添加的模板dom'）进行刷新。