前端模块化时，不仅js，html有时也需要模块化管理。本文介绍了如何通过requirejs实现html代码的模块化开发

前端模块化时，不仅js，html有时也需要模块化管理。本文介绍了如何通过requirejs实现html代码的模块化开发。

如何使用requirejs加载html

Reuqirejs有一个文本插件，可以读取指定文件的内容，读取的内容是文本。

如何下载文本插件

种方法可以通过npm下载：

npminstallrequirejs/text

第二种方法也可以直接从官方github下载。

直接把内容复制到text.js就可以了

如何安装文本插件

可以在requirejs的main.js中配置文本插件的依赖关系，类似于jquery，只要能正常加载即可。

requirejs.config({

baseUrl: '。/',

paths: {

文本' :path '/require/text '，

.

},

shim:{

.

}

});

它也可以直接放在baseUrl中。

如何使用文本

在目标模块中，只需遵循以下语法：

定义(函数(必需){

varhtml=require('text！html/test . html’)；

console . log(html)；

});

或者

define(['text！html/test.html']，函数(html){

console . log(html)；

});

如何模块化开发html？

看完上面，已经可以用文字了，但还是不知道前端代码怎么组织。

举个栗子：

博客公园的网页会根据上面的导航跳转到不同的页面。如果是在单个页面，很容易认为原来的方法是导航按钮对应不同的P，点击那个按钮会显示对应的P；其他p是隐藏的。

然后，前端代码可能如下所示：

超文本标记语言

身体

航行

导航按钮1、导航按钮2、导航按钮3

/nav

Pstyle='display:block '对应按钮1 /p的页面

Pstyle='display:none '按钮2对应页面/p

Pstyle='display:none '按钮3对应页面/p

/body

/html

这样的代码会很乱.前端Html会很长.这不利于维护。

然后，使用reuqirejs的文本插件，您可以做到这一点：

超文本标记语言

身体

航行

导航按钮1、导航按钮2、导航按钮3

/nav

pid='target'/p

/body

/html

然后在相应的模块中：

$('#target ')。html(要求(' text！目标按钮对应的页面。html ')；

这样就随意多了！前端代码也可以随模块一起有效管理！

但是需要注意的是，这个方法会使Jquery绑定的事件失效，所以一定要在html()方法之后重新绑定事件。

Html中使用Requirejs的模块化开发的这么多知识，希望对你有帮助！

本文转载自中文网站