在Html中使用Requirejs进行模块化开发实例详解


Posted in Javascript onApril 15, 2016

在前端模块化的时候,不仅仅是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进行模块化开发的相关知识就给大家介绍这么多,希望对大家有所帮助!

Javascript 相关文章推荐
Javascript 判断 object 的特定类转载
Feb 01 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 #Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 #Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 #Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 #Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 #Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 #Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 #Javascript
You might like
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
python将文本转换成图片输出的方法
2015/04/28 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
python爬虫实现中英翻译词典
2019/06/25 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
利用python实现周期财务统计可视化
2019/08/25 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
AOP的定义以及作用
2013/09/08 面试题
美术专业学生个人自我评价
2013/09/19 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
《姥姥的剪纸》教学反思
2014/02/25 职场文书
企业党员个人自我评价
2014/09/20 职场文书
营销经理工作检讨书
2014/11/03 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
vue+spring boot实现校验码功能
2021/05/27 Vue.js
Python 中的Sympy详细使用
2021/08/07 Python