一、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. Centos 安装KScope1.6.2

    准备工作:安装ctags graphviz,和cscope  (可以用yum install来安装) 1.首先下载kscope,最好下载16.x的版本,这个最好的 下载kscope-1.6.2.tar ...

  2. myeclipse2014如何添加源码反编译工具插件

    Eclipse下的Java反编译插件:Eclipse Class Decompiler,整合了目前最好的2个Java反编译工具Jad和JD-Core,并且和Eclipse Class Viewer无缝 ...

  3. cocos2d-x调度器原理

    程序运行后每达到一帧的时间间隔就会执行一次mainLoop void CCDisplayLinkDirector::mainLoop(void) { //判断是否需要释放CCDirector,通常游戏 ...

  4. ASP.NET MVC 4 让数据库自动迁移

    今天实际测试了下这个方法,可以保持数据库与实体类同步,同时不会出现数据库迁移的提示.但是只能更改实体类来改变数据库,而不能改数据库来改变实体类.所以这才是Code frist,如果通过改数据库表来改动 ...

  5. Wing IDE编译TesorFlow中Mnist convolutional 实例

    # # http://www.cnblogs.com/mydebug/ # from __future__ import absolute_import from __future__ import ...

  6. 关于Eclipse(MyEclipse)中一次性批量导入多个项目Project.

    以前更换Eclipse(MyEclipse)的时候要想把原Eclipse中的项目导入到新的Eclipse中的做法是: 1.先把原Eclipse中工作空间中的项目(不包括.metadata文件夹)复制到 ...

  7. hdu 2196 树形dp

    思路:先求以1为根时,每个节点到子节点的最大长度.然后再次从1进入进行更新. #include<iostream> #include<cstring> #include< ...

  8. css选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先

    CSS选择器:基本可以分为通配选择器,标签选择器,类选择器,ID选择器,简单属性选择,具体属性选择,根据部分属性值选择,特定属性选择,从结构上来分还有后代选择器,子元素选择器,相邻兄弟选择器以及伪类. ...

  9. Servlet & JSP - HttpSession

    关于 Session 的内容,参考 HTTP - Session 机制 创建和检索 HttpSession 通过 HttpServletRequest.getSession 方法可以获取 HttpSe ...

  10. Git - Download for Linux and Unix

    It is easiest to install Git on Linux using the preferred package manager of your Linux distribution ...