在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进行模块化开发相关推荐
- css,js模块化开发
css模块化: 1原始模块: base.css-header.css-footer.css-sidebar.css-forms.css-icons.css-buttons.css-dropdown.c ...
- requirejs 模块化开发中遇到的小问题吓死本宝宝了
最近在写系统的时候,前端加入了requirejs,主要是为了跟随潮流...骗你的. 之前偶然听公司前端同事提前模块化开发.我没听说过,后来查了资料,都说是好处一大丢.就是方便快捷复用等等. 大家也都拿 ...
- Node.js模块化开发||Node.js中模块化开发规范
JavaScript开发弊端 a.js b.js JavaScript在使用时存在两大问题,文件依赖和命名冲突. 生活中的模块化开发 软件中的模块化开发 app.j user.一个功能就是一个模块,多 ...
- 【Node学习】—Node.js中模块化开发的规范
[Node学习]-Node.js中模块化开发的规范 Node.js 规定一个JavaScript就是一个模块,模块内部定义的变量和函数默认情况下在外部无法得到 模块化内部可以使用exports对象进行 ...
- 【翻译】WPF应用程序模块化开发快速入门(使用Prism+MEF)【中】
索引 [翻译]WPF应用程序模块化开发快速入门(使用Prism框架)[上] 编译并运行快速入门 需要在VisualStudio 2010上运行此快速入门示例 代码下载:ModularityWithMe ...
- magento 模块化开发_Magento中的PayPal信用卡令牌化
magento 模块化开发 As a robust eCommerce platform, Magento has long supported integration with a variety ...
- Vue实战中的模块化开发
最近公司接了一个Pc端的后台项目,所以我也从APP转向了Web平台的开发,在经受了一年多的APP开发的折磨之后终于迎来了春天,再也不用自己梳理业务.绘制原型.编写各种文档.处理IM.做后台保活这些让人 ...
- 模块加载及第三方包:Node.js模块化开发、系统模块、第三方模块、package.json文件、Node.js中模块的加载机制、开发环境与生产环境、cookie与session
1.Node.js模块化开发 1.1 JavaScript开发弊端 JavaScript 在使用时存在两大问题,文件依赖和命名冲突. 1.2 软件中的模块化开发 一个功能就是一个模块,多个模块可以组成 ...
- web中模块化开发理解
web中模块化开发理解 一.什么是模块化开发? 1.web开发中将项目的实现划分为许多模块,模块其实就是将功能相关的代码封装在一起,方便维护 ,重用:模块之间通过API进行重组. 二.为什么要通过模块 ...
最新文章
- 解决从本地文件系统上传到HDFS时的权限问题
- java 新建double对象_java-如何在BlueJ“创建对象”对话框中输入...
- PMP 之程序性计划、实体性计划、综合计划
- Google Guava MultiMaps
- html中padding和margin的区别和用法与存在的bug消除
- java中Object.equals()简单用法
- Ubuntu 20.04 更新,界面美化及安装搜狗输入法
- SQL Server 用SSMS查看依赖关系有时候不准确,改用代码查
- 探究:数字孪生是如何赋能智慧能源信息化领域系统发展的?
- Matlab2016b中文乱码怎么办
- android Measurespec测量模式
- 最近京东抢茅台的很火啊,但是必须要京东plus会员。天猫超市抢茅台插件来咯
- java md5在线解密免费_Java MD5如何解密?
- java 裁剪 pdf_PDFBox:使用Java轻松从PDF文件提取内容
- tp6的运行流程+一个完整的tp6请求的流程:
- apple pencil_如何检查Apple Pencil的电池电量
- xubuntu切换回到ubuntu登陆界面
- python学习-day15:函数作用域、匿名函数、函数式编程、map、filter、reduce函数、内置函数r...
- PowerBI-逻辑函数-SWITCH
- Redis之惰性删除