一、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. NGUI panel使用soft clip时，屏幕缩放后无法正常工作的问题解决

    最近开始使用NGUI,通过查找,搞定了屏幕缩放问题,但在用到panel的soft clip时,碰到了问题,NGUI给出了警告 “clipped panels must have a uniform s ...

  2. mysql的二级索引

    mysql中每个表都有一个聚簇索引(clustered index ),除此之外的表上的每个非聚簇索引都是二级索引,又叫辅助索引(secondary indexes). 以InnoDB来说,每个Inn ...

  3. Android检测是否安装了指定应用

    检测是否安装了指定应用的方法如下: private boolean isAvilible( Context context, String packageName ) { final PackageM ...

  4. iOS 开发常用宏

    来源:iOS_小松哥 链接:http://www.jianshu.com/p/be00c3f3cafd 大家都是知道使用宏不仅方便,而且可以提高开发效率.下面总结了iOS开发过程中的一些常用宏,会持续 ...

  5. 解决JSP页面图片缓存问题

    <% String imagepath="D:\\work\\dbUpdate\\src\\main\\webapp\\newyzm.png"; %> <img ...

  6. ie6 7 8 9 firefox的css兼容问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. html中input type=file 改变样式

    <style> #uploadImg{ font-size:12px; overflow:hidden; position:absolute} #file{ position:absolu ...

  8. SQL Server blocking session

    select * from sys.sysprocesses where blocked>0; 96被95block住了. dbcc INPUTBUFFER(95) dbcc INPUTBUFF ...

  9. Webservice简单概念

    一.序言 大家或多或少都听过 WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成 分.但是不得不承认的是W ...

  10. Web系统大规模并发----电商秒杀与抢购

    原文链接请参见:http://uule.iteye.com/blog/2186786