一、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. 跳表SkipList

    原文:http://www.cnblogs.com/xuqiang/archive/2011/05/22/2053516.html 跳表SkipList   1.聊一聊跳表作者的其人其事 2. 言归正 ...

  2. HTML 之 Web页面表单form中只有一个input的text元素，按回车默认提交

    WEB开发中,如果页面的 form 中只有一个input元素,在该input元素的输入框中按回车(注:此时并没有写对应的onkeydown等事件处理),则浏览器会默认提交表单,请看如下代码: < ...

  3. Android（java）学习笔记112：局部位置的内部类的介绍

    1.局部内部类 /* 局部内部类 A:可以直接访问外部类的成员 B:在局部位置,可以创建内部类对象,通过对象调用内部类方法,来使用局部内部类功能 面试题: 局部内部类访问局部变量的注意事项? A:局部 ...

  4. javascript——马步之Array篇

    数组 Array == 1.建立数组==* 通过变量赋值为[]来建立数组 var arr = []; // arr 是一个数组 * 需要注意数组的下标是从0开始中的 ==2.获取数组长度== * 通过 ...

  5. 自定义 Yasnippet 模板

    yasnippet可以把我们常用的代码段或文本储存起来,到使用的时候只需键入几个字母就会自动带出. 比如我们在写python代码时,常常会在文件的第一行写下: #!/usr/bin/env pytho ...

  6. Java计算文件的SHA码和MD5码

    可参考:http://blog.csdn.net/hudashi/article/details/8394158 /** * 计算文件的MD5码 * @param file * @return */ ...

  7. 转：基于Webrtc的跨平台实时语音通信解决方案（讲座）

    转:http://edu.csdn.net/course/detail/320/

  8. http keepalive

    转载自: http://www.92csz.com/17/1152.html http keepalive 在http早期 ,每个http请求都要求打开一个tpc socket连接,并且使用一次之后就 ...

  9. 关于java.lang.NullPointerException: Module 'null' not found.的问题

    在用eclipse做struts1项目时,配置都ok了.可是一运行就报java.lang.NullPointerException: Module 'null' not found.错. 代码如下: ...

  10. Android对象类系列化public class User implements Parcelable

    package com.gaojinhua.android.activitymsg; import android.os.Parcel; import android.os.Parcelable; / ...