RequireJS的简单应用
一、RequireJS的主要作用与优点
主要作用：js模块化、编写复用js代码
优点：
1、防止命名冲突
2、声明不同js文件之间的依赖
3、代码模块化
（1）一个文件一个模块：每个js文件应该只定义一个模块
（2）define()中注意相对模块名
二、常用方法
1、require.config 为模块指定别名
2、require 引入写好的模块
3、define 编写模块
三、使用方法+一个小例子
模块js写在html外面，由一个js进行模块加载
例如我的工程目录结构
| src
| |—— js
|—— main.js
|—— test.js
| vender
| |—— js
|—— require.min.js
|—— jquery.min.js
|
| test.html
一个 Demo test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个Require Test</title>
<style> #myTest{
height: 50px;;
width: 50px;
background-color: #28a4c9;
text-align: center;
}
</style>
</head>
<body>
<div id="myTest">Test</div>
<script src="vender/js/require.min.js" data-main="src/js/main"></script>
</body>
</html>
|—— main.js
require.config({
paths:{
jquery: '../../vender/js/jquery.min'
}
});
require(['jquery','test'],function($,test){
test.fun1();
$('#myTest').click(function(){
console.log('myTest click2');
});
});
|—— test.js
define(['jquery'],function($){
return {
fun1:function(){
$('#myTest').click(function(){
console.log('myTest click');
});
}
}
})
RequireJS的简单应用的更多相关文章
- seaj和requirejs模块化的简单案例
如今,webpack.gulp等构件工具流行,有人说seajs.requirejs等纯前端的模块化工具已经被淘汰了,我不这么认为,毕竟纯前端领域想要实现模块化就官方来讲,还是有一段路要走的.也因此纯前 ...
- RequireJS 快速入门
说明:本文只提供快速入门内容,方便快速进入实战状态.更高级的配置,请参考官网文档. 当初之所以使用 RequireJS 等工具,是因为想提高js的加载速度,避免不必要的堵塞.但通过一段时间的使用, ...
- RequireJS 基础（一）
RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript,你将不再使用script标签在HTML中引入JS文件,以 ...
- requireJs和r.js压缩工具
上面release是执行命令 node r.js -o build.js 生成的,需要切换到目录require/tools下面,也就是 有r.js和build.js的目录,才能执行命令 代码目录如上: ...
- RequireJS入门（一） 转
RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...
- RequireJS入门与进阶
RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...
- RequireJS入门（一）
RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...
- 30分钟 带你浅入requirejs源码
因为最近项目想现实一个单页功能,用的是react ,然后看了一下react route,挖槽 gzip后16k? 然后我简单写了一个纯单页(不支持多页的单页,所有入口都经过rewrite跑到index ...
- hdjs---后盾网requireJS课程
hdjs---后盾网requireJS课程 一.总结 一句话总结: requireJS是js端模块化开发,主要是实现js的异步加载,和管理模块之间的依赖关系,便于代码的编写和维 1.requireJS ...
随机推荐
- mysqlpump 原理
Oracle官方多线程逻辑备份工具 昨天Inside君写到MySQL 5.7.11版本发布,其中最有意义的部分在于官方修复了之前mysqlpump工具一致性备份的问题,使得mysqlpump工具在生产 ...
- SQL Server XML Path[转]
FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...
- 进程间通信之FIFO
FIFO有时被称为命名管道.管道只能由相关进程使用,这些相关进程的共同祖先进程创建了管道.但是,通过FIFO,不相关的进程也能交换数据. FIFO是一种文件类型(参考http://www.cnblog ...
- 简简单单安装debian桌面工作环境
linux一般给人的影响是对使用者的要求偏高, 使用者需要自行配置很多相应的系统工作参数,因此,从一定的程度上阻碍了用户去使用它.而本文所介绍的是, 使用者完全可以消除这个障碍,非常简单地安装好自己的 ...
- Intellij IDEA 使用Debug模式运行非常慢
今天在用Debug的时候,idea运行非常慢,搜了一下有人说: 自己检查发现果然如此,把在方法前的断点去掉(移到方法体内),就正常了.
- hashTable(哈希表)的基本用法
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.C ...
- linux:ifconfig命令
许多windows非常熟悉ipconfig命令行工具,它被用来获取网络接口配置信息并对此进行修改.Linux系统拥有一个类似的工具,也就是ifconfig(interfaces config).通常需 ...
- CASS转ARCGIS
本文转载千浪兄弟博客 1.先看看这张图:CASS的扩展属性 ("south" (1000 . "310000")) 对应图斑属性编码“310000”,(&quo ...
- Simple Membership 学习笔记
第一步:新建项目后添加对WebMartix.Data 和 WebMatrix.WebData的引用第二步:在web.config中添加membership配置节第三步:修改Global.asax文件 ...
- 经常被忽略的几个CSS3属性之强大应用（一、timing-function: steps() 二、animation-direction 三、timing-function: cubic-bezier()）
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...