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 ...
随机推荐
- auto_ptr解析
auto_ptr是当前C++标准库中提供的一种智能指针,或许相对于boost库提供的一系列眼花缭乱的智能指针, 或许相对于Loki中那个无所不包的智能指针,这个不怎么智能的智能指针难免会黯然失色.诚然 ...
- dubbo-RPC学习(一)自定义配置
在dubbo的基础上实现异步调用的时候,因为需要支持回调的“重试间隔时间”与“重试次数”等属性.因此,需要扩展dubbo.xsd,需要添加新的属性来支持这种扩展. dubbo 的xsd是基于sprin ...
- 机器学习中的范数规则化之(一)L0、L1与L2范数 非常好,必看
机器学习中的范数规则化之(一)L0.L1与L2范数 zouxy09@qq.com http://blog.csdn.net/zouxy09 今天我们聊聊机器学习中出现的非常频繁的问题:过拟合与规则化. ...
- 小白日记41:kali渗透测试之Web渗透-SQL手工注入(三)-猜测列名、表名、库名、字段内容,数据库写入
SQL手工注入 靶机:metasploitable(低) 1.当无权读取infomation_schema库[MySQL最重要的源数据库,必须有root权限]/拒绝union.order by语句 ...
- SQLServer 之 常用函数及查看
一.查看 (1)应用程序名称 SELECT APP_NAME() (2)获取登录者名字 SELECT SUSER_NAME() (3)获取字段定义的长度 ...
- Lifting the Stone
我们需要把一块石头平稳的从地板上拿起来.石头的底面是多边形且各个部分的高度都一样,我们需要找出石头的重心. input 测试案例 T; 每组第一行给出N,表示定点数. 接下来N行,每行连个数,表示坐 ...
- Linux下VirtualBox出现kernel driver not installed的解决方法
今天安装好rhel-server-6.6-i386后,再安装VirtualBox成功,但是再VirtualBox中创建虚拟机的时候出现了“不能为xx虚拟机打开新任务” 并弹出如下的错误信息:
- [转]MVC自定义数据验证(两个时间的比较)
本文转自:http://www.cnblogs.com/zhangliangzlee/archive/2012/07/26/2610071.html Model: public class Model ...
- LeetCode 278
First Bad Version You are a product manager and currently leading a team to develop a new product. U ...
- crontab执行java命令失效
一.我们常常碰到在shell下执行某个命令能够成功,比如执行一个java程序: java -jar /home/opscoder/topo-audit.jar,但是在crontab下执行会失败. co ...