一、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的简单应用的更多相关文章

  1. seaj和requirejs模块化的简单案例

    如今,webpack.gulp等构件工具流行,有人说seajs.requirejs等纯前端的模块化工具已经被淘汰了,我不这么认为,毕竟纯前端领域想要实现模块化就官方来讲,还是有一段路要走的.也因此纯前 ...

  2. RequireJS 快速入门

      说明:本文只提供快速入门内容,方便快速进入实战状态.更高级的配置,请参考官网文档. 当初之所以使用 RequireJS 等工具,是因为想提高js的加载速度,避免不必要的堵塞.但通过一段时间的使用, ...

  3. RequireJS 基础(一)

    RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript,你将不再使用script标签在HTML中引入JS文件,以 ...

  4. requireJs和r.js压缩工具

    上面release是执行命令 node r.js -o build.js 生成的,需要切换到目录require/tools下面,也就是 有r.js和build.js的目录,才能执行命令 代码目录如上: ...

  5. RequireJS入门(一) 转

    RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...

  6. RequireJS入门与进阶

    RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...

  7. RequireJS入门(一)

    RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...

  8. 30分钟 带你浅入requirejs源码

    因为最近项目想现实一个单页功能,用的是react ,然后看了一下react route,挖槽 gzip后16k? 然后我简单写了一个纯单页(不支持多页的单页,所有入口都经过rewrite跑到index ...

  9. hdjs---后盾网requireJS课程

    hdjs---后盾网requireJS课程 一.总结 一句话总结: requireJS是js端模块化开发,主要是实现js的异步加载,和管理模块之间的依赖关系,便于代码的编写和维 1.requireJS ...

随机推荐

  1. MySQL 高可用MHA安装部署以及故障转移详细资料汇总 转

    http://blog.itpub.net/26230597/cid-87082-list-2/ 1,简介 .1mha简介 MHA,即MasterHigh Availability Manager a ...

  2. 怎样用通用pe工具箱制作U盘启动盘

    U盘启动盘制作过程,随着网络的普及,电脑已经成为我们日常生活中的重要一环,最近自己重装了下电脑系统,无意中发现一个傻瓜式的U盘装系统方法,就把怎么制作通用pe工具箱u盘启动盘的经验拿出来跟大家分享下. ...

  3. java_redis3.0.3集群搭建

    redis3.0版本之后支持Cluster,具体介绍redis集群我就不多说,了解请看redis中文简介. 首先,直接访问redis.io官网,下载redis.tar.gz,现在版本3.0.3,我下面 ...

  4. web2.0、互联网+、IT时代与DT时代、工业4.0 引发的思考

    最近忙着找实习,来学校一个星期还没到,就感觉已经经历了几个春秋. 第一个实习面试是个杭州互联网小公司,面WEB前端开发实习,怪我一个暑假两个月一点书都没碰,偏偏赶上G20到9/9才开学,没啥准备就一头 ...

  5. PHP读书笔记(6)- 数组

    数组定义 数组就是一个键值对组成的语言结构,键类似于酒店的房间号,值类似于酒店房间里存储的东西.PHP 中的数组实际上是一个有序映射.映射是一种把 values 关联到 keys 的类型. 定义数组 ...

  6. python(3)-lambda表达式

    >>> fun = lambda a: a+1 >>> fun(1) 2 >>> fun = lambda a,b: a+b >>&g ...

  7. linux -cp/mv

    cp 复制 -r文件夹 -f强制没有提示 mv 移动改名 mv test.py temp/test2.py移动(后面只加路径就是移动.路径+文件名就是移动+改名) 执行mv一般会执行  mv -i交互 ...

  8. plsql设置窗口默认格式

    一:plsql设置窗口默认格式 窗口视图设置完毕后,选择“窗口”菜单——点击“保存”版面. 等到下次重启后,就会呈现保存的版面. OK,设置完毕!

  9. 和阿文一起学H5-- H5排版八大套路

    二.中心型 三.倾斜型 四.三角形 5.全图形 6.渐变型 7.蒙版型 \ 8.骨骼型 实例

  10. 第九篇、Swift的基本使用

    1.访问权限 /* 1> internal : 内部的 1. 默认情况下所有的类&属性&方法的访问权限都是internal 2. 在本模块(项目/包/target)中可以访问 2 ...