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 ...
随机推荐
- A+B Problem(V)
描述 做了A+B Problem之后,Yougth感觉太简单了,于是他想让你求出两个数反转后相加的值.帮帮他吧 输入 有多组测试数据.每组包括两个数m和n,数据保证int范围,当m和n同时为0是表示输 ...
- jqcss选择器
$("p").css("background-color","red"); $(this) 当前 HTML 元素$("p" ...
- jQuery插件面向对象开发
为什么要有面向对象的思维,因为如果不这样,你可能需要一个方法的时候就去定义一个function,当需要另外一个方法的时候,再去随便定义一个function,同样,需要一个变量的时候,毫无规则地定义一些 ...
- python(3)-队列
队列分为双向队列和单向队列: 对于双向队列,同样需要先import collections 创建队列 >>> import collections >>> d = ...
- Linux 通过 load average 判断服务器负载情况
Linux中load average判断服务器负载情况 转载文章 http://www.111cn.net/sys/linux/56003.htm 写的比较详细,推荐看看.
- mysql输出的错误提示是法语
参考MySQL用户手册 http://dev.mysql.com/doc/refman/5.5/en/error-message-language.html mysql.ini 文件里头有一个参数叫做 ...
- [改善Java代码]断言绝对不是鸡肋
建议19: 断言绝对不是鸡肋 在防御式编程中经常会用断言(Assertion)对参数和环境做出判断,避免程序因不当的输入或错误的环境而产生逻辑异常,断言在很多语言中都存在,C.C++.Python都有 ...
- poj 3678 2-SAT问题
思路:将每个点拆分为两个点 a与a' ,a表示为1,a'表示为0.那么条件给的每个边自然就会存在矛盾,然后根据2-SAT建边就行了. #include<iostream> #include ...
- (转)linuxmint,ubuntu 下修改guake宽度方法
之前在网上找到修改guake.py的方式,但是我一直没能找到guake.py的文件,弄的我纠结,后来找到这个文章,这个确实是有效果的 Ubuntu12.04上Guake在唤出的时候滚动条会消失,主要原 ...
- JMS - ExceptionListener
If a JMS provider detects a problem with a connection, it will inform the connection’s ExceptionList ...