在Html中使用Requirejs进行模块化开发的解析

互联网 18-6-9

这篇文章主要介绍了关于在Html中使用Requirejs进行模块化开发的解析，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

在前端模块化的时候，不仅仅是js需要进行模块化管理，html有时候也需要模块化管理。这里就介绍下如何通过requirejs，实现html代码的模块化开发

如何使用requirejs加载html

如何下载text插件

第一种方法，可以通过npm下载：

npm install requirejs/text

第二种方法，也可以直接去官方github上面直接下载。

如何安装text插件

在requirejs的main.js中配置text插件的依赖即可，跟jquery差不多，只要保证能通过正常的加载方式加载到它就行。

requirejs.config({ baseUrl: './', paths: { 'text':path+'/require/text', ... }, shim: { ... } });

在目标模块中，按照下面的语法即可：

define(function(require){ var html = require("text!html/test.html"); console.log(html); });

或者

define(["text!html/test.html"],function(html){ console.log(html); });

那么，前端的代码可能会这样：

<html> <body> <nav> 导航按钮1、导航按钮2、导航按钮3 </nav> <p style="display:block">按钮1对应的页面</p> <p style="display:none">按钮2对应的页面</p> <p style="display:none">按钮3对应的页面</p> </body> </html>

那么有了reuqirejs的text插件以后，就可以这样了：

<html> <body> <nav> 导航按钮1、导航按钮2、导航按钮3 </nav> <p id="target"></p> </body> </html>

$('#target').html(require("text!目标按钮对应的页面.html"));

不过需要注意的是：这种方式会导致Jquery绑定的事件失效——所以一定要在html()方法后面，重新绑定下事件。

关于在Html中使用Requirejs进行模块化开发的相关知识就给大家介绍这么多，希望对大家有所帮助！

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

在Html中使用Requirejs进行模块化开发的解析

相关资讯

标签推荐