在Html中使用Requirejs进行模块化开发实例详解
在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理。这里就介绍下如何通过requirejs,实现html代码的模块化开发。
如何使用requirejs加载html
Reuqirejs有一个text的插件,它可以读取指定文件的内容,读取到的内容就是文本。
如何下载text插件
第一种方法,可以通过npm下载:
npm install requirejs/text
第二种方法,也可以直接去官方github上面直接下载。
直接拷贝内容到text.js中即可。
如何安装text插件
在requirejs的main.js中配置text插件的依赖即可,跟jquery差不多,只要保证能通过正常的加载方式加载到它就行。
requirejs.config({ baseUrl: './', paths: { 'text':path+'/require/text', ... }, shim: { ... } });
也可以直接放在baseUrl里面。
如何使用text
在目标模块中,按照下面的语法即可:
define(function(require){ var html = require("text!html/test.html"); console.log(html); });
或者
define(["text!html/test.html"],function(html){ console.log(html); });
如何进行html的模块化开发?
看过上面你已经会使用text了,但是仍然不知道怎么组织前端代码。
举个栗子:
博客园的网站页面会根据上方的导航跳转到不同的页面。如果是在单页面中,很容易想到原始的做法是,导航的按钮对应不同的div,点击那个按钮,就显示与之对应的div;其他的div则隐藏掉。
那么,前端的代码可能会这样:
<html> <body> <nav> 导航按钮1、导航按钮2、导航按钮3 </nav> <div style="display:block">按钮1对应的页面</div> <div style="display:none">按钮2对应的页面</div> <div style="display:none">按钮3对应的页面</div> </body> </html>
这样的代码会很杂乱...而且前端Html会很长...不利于维护。
那么有了reuqirejs的text插件以后,就可以这样了:
<html> <body> <nav> 导航按钮1、导航按钮2、导航按钮3 </nav> <div id="target"></div> </body> </html>
然后在对应的模块中:
$('#target').html(require("text!目标按钮对应的页面.html"));
这样就随性多了吧!前端代码也可以跟着模块一起有效的管理了!
不过需要注意的是:这种方式会导致Jquery绑定的事件失效——所以一定要在html()方法后面,重新绑定下事件。
关于在Html中使用Requirejs进行模块化开发的相关知识就给大家介绍这么多,希望对大家有所帮助!
相关文章
- SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制,本文给大家介绍JavaScript模块化开发之SeaJS,需要的朋友参考下...2015-12-14
- 这篇文章主要介绍了angularjs中ng-bind-html的用法总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-05-27
基于RequireJS和JQuery的模块化编程——常见问题全面解析
下面小编就为大家带来一篇基于RequireJS和JQuery的模块化编程——常见问题全面解析。小编觉得挺不错的,现在分享给大家,也给大家做个参考...2016-04-17- 这篇文章主要介绍了PHP正则表达式过滤html标签属性的相关内容,实用性非常,感兴趣的朋友参考下吧...2016-05-06
- 这篇文章主要介绍了微信小程序 模块化的相关资料,需要的朋友可以参考下...2016-10-20
- 在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理。这里就介绍下如何通过requirejs,实现html代码的模块化开发...2016-04-18
探索angularjs+requirejs全面实现按需加载的套路
这篇文章主要探索了angularjs+requirejs全面实现按需加载的套路,围绕angularjs提供的各种机制进行研究,感兴趣的小伙伴们可以参考一下...2016-03-01小心!AngularJS结合RequireJS做文件合并压缩的那些坑
小心!AngularJS结合RequireJS做文件合并压缩的那些坑,大家在做文件合并压缩的时候一定要注意,感兴趣的朋友可以参考一下...2016-01-12- 这篇文章主要介绍了javascript html实现网页版日历代码,需要的朋友可以参考下...2016-03-10
- 这篇文章主要为大家详细介绍了PHP生成静态HTML文档实现代码,将数据库中的文章数据生成单个的HTML文档原理,感兴趣的小伙伴们可以参考一下...2016-06-24
- 下面小编就为大家带来一篇PHP获取表单数据与HTML嵌入PHP脚本的实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-02-18
PHP正则删除html代码中a标签并保留标签内容的方法 原创
这篇文章主要介绍了PHP正则删除html代码中a标签并保留标签内容的方法,涉及php基于正则的字符串匹配与子表达式操作相关技巧,需要的朋友可以参考下...2017-05-26- 本文主要介绍AngularJS HTML DOM基础知识,这里整理了相关资料和示例代码进行详解,有需要的小伙伴可以参考下...2016-08-24
- 这篇文章主要为大家详细介绍了如何运用js教你轻松制作html音乐播放器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-02
- 这篇文章主要介绍了jQuery Html控件基本操作(日常收集整理)的相关资料,需要的朋友可以参考下...2016-03-12
基于RequireJS和JQuery的模块化编程日常问题解析
本文是小编日常收集整理些有关RequireJS和JQuery的模块化编程,感兴趣的朋友一起学习吧...2016-04-17- KindEditor使用JavaScript编写,可以无缝的与Java、.NET、PHP、ASP等程序接合。本文给大家介绍Kindeditor在线文本编辑器如何过滤HTML,需要的朋友参考下吧...2016-04-17
- 这篇文章主要介绍了php HTML无刷新提交表单,本文介绍了两种无刷新提交表单的方法,感兴趣的小伙伴们可以参考一下...2016-04-07
- 这篇文章主要介绍了php正则删除html代码中class样式属性的方法,涉及php字符串正则匹配相关操作技巧,需要的朋友可以参考下...2017-05-26
- 这篇文章主要介绍了php使用simple_html_dom解析HTML的方法,实例分析了php针对dom节点操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2016-07-29