requireJS的基本使用

一、总结

一句话总结：

requireJS是js端模块化开发，主要是实现js的异步加载，和管理模块之间的依赖关系，便于代码的编写和维护

1、页面加载的js文件过多的缺点是什么？

|||-begin

为了提高代码的复用度，开发人员会按照功能把大量的js代码分成若干文件，这样在多个页面就可以使用同一个文件了

|||-end

1、网站加载js时会停止其它资源加载，并停止页面渲染（就是我们常说的白屏现象）
2、加载过多的js文件可能造成浏览器假死（浏览器一直在加载，不能进行页面操作）
3、假如文件有依赖关系，就是使用B.js需要先加载A.js，那我们还要小心翼翼的去引入js，不过这么多文件，鬼理得清依赖关系啊

2、网站的功能日益强大，js文件越来越多是必然的的事情，如何解决？

模块化开发：比如requireJS

3、js模块化 开发规范 分类？

1、服务器端（CommonJS）：如Node.js
2、客户端（AMD、CMD）：如requireJS 和 seaJS

4、什么是requireJS？

1、RequireJS是一个【JavaScript文件或者模块的加载器】。它可以提高JavaScript文件的加载速度，避免不必要的堵塞。
2、requireJS采用【异步方式加载模块】，可以简单理解为【加载js文件的一个工具】
3、requireJS是客户端模块化开发的一种规范，用于解决加载过多js文件导致浏览器白屏及假死及js文件引入的依赖关系的。

5、requireJS的作用？

1、实现js的异步加载
2、管理模块之间的依赖关系，便于代码的编写和维护

6、require.config方法中的baseUrl、paths、shim分别代表什么？

属性1：baseUrl:指定统一的路径
属性2：paths:每个模块的路径
属性3：shim:定义非AMD
require.config({

    baseUrl: '../resource/app',

    paths: {

        'hd': 'hd',

        'css': '../lib/css.min',

        'jquery': '../lib/jquery.min',

        'angular': '../lib/angular.min',

        'bootstrap': '../lib/bootstrap.min',

    },

    shim: {

        'hd': {

            // exports: 'modal',

            init: function () {

                return {

                    modal: modal,

                    success: success,

                }

            }

        },

        //houdunren.com

        'bootstrap': {

            'deps': ['jquery', 'css!../css/bootstrap.min.css', 'css!../css/font-awesome.min.css']

        }

    }

});

二、requireJS的基本使用

参考或转自：【模块化开发】------requireJS的基本使用------【凡尘】
http://www.mamicode.com/info-detail-2285125.html

前言

为了提高代码的复用度，开发人员会按照功能把大量的js代码分成若干文件，这样在多个页面就可以使用同一个文件了。，下面是某个网站的js引用情况

虽然代码的复用度提升了，但是缺点也体现了出来

缺点：

 　1、网站加载js时会停止其它资源加载，并停止页面渲染（就是我们常说的白屏现象）
     2、加载过多的js文件可能造成浏览器假死（浏览器一直在加载，不能进行页面操作）
     3、假如文件有依赖关系，就是使用B.js需要先加载A.js，那我们还要小心翼翼的去引入js，不过这么多文件，鬼理得清依赖关系啊
 
 
额 。。。容许我懵逼片刻，那怎么办呢，网站的功能日益强大，js文件越来越多是必然的的事情，于是出现了模块化开发
 
 
 
模块化开发
　
001、模块化分类
 
目前js模块化 开发规范 分为两种
     1、服务器端（CommonJS）  如Node.js
 
     2、客户端（AMD、CMD）  如：requireJS 和 seaJS
 
 
 
002、什么是requireJS
　　1、RequireJS是一个JavaScript文件或者模块的加载器。它可以提高JavaScript文件的加载速度，避免不必要的堵塞。
 
　　2、requireJS采用异步方式加载模块，可以简单理解为加载js文件的一个工具
 
　　3、requireJS是客户端模块化开发的一种规范，用于解决加载过多js文件导致浏览器白屏及假死及js文件引入的依赖关系的。
 
　　4、requireJS的作用：
     　　1、实现js的异步加载
     　　2、管理模块之间的依赖关系，便于代码的编写和维护
 
 
003、require的基本使用
 
　　第一步：加载requirejs
　　

<script src="require.js"></script>

　

　第二步：异步加载require.js

<script src="require.js"  defer async="true"></script>

//async属性表明这个文件需要异步加载， IE不支持该属性，只支持defer所以把defer也写上

　　

　　第三步：加载入口文件

<script src="require.js" data-main="js/index" defer async="true"/><script>

data-main：用于加载入口文件（当require加载完毕后，需要引进主模块js文件）

　　

　　第四步：使用require.config方法配置各个模块所加载的路径

require.config方法:

　　参数是一个对象:对象中有3个属性
　　　　　　属性1：baseUrl:指定统一的路径

　　　　　　属性2：paths:每个模块的路径
　　　　　　
　　　　　　属性3：shim:定义非AMD

require.config({

     //指定根路径js文件夹

     baseUrl:"js",

     //每个文件路径

     paths:{

           "jquery":"lib/jquery-1.11.3",

           "layer":"plug/layer",

           "swiper":"plug/swiper.min",

           "banner":"list/banner",

           "alert":"list/alert"

     },

     //非AMD文件的模块

     shim:{

     }

})

　　第五步：AMD规范定义模块

AMD规范：
     因为require是采用AMD规范，因为必须要按照AMD的规定来编写。也就是所有的模块必须采用define()函数来定义
define函数有2个参数：
          第一个参数是需要依赖的模块，如果不依赖就不用书写 必须是一个数组
 
          第二参数是书写的模块内容

//以下定义了一个swiper的轮播图
define(["jquery","swiper"],function(){

     function init(){

           new Swiper (‘.swiper-container‘, {

         direction: ‘horizontal‘,

         loop: true,

         autoplay : 3000,

           speed:300,

         pagination: ‘.swiper-pagination‘,

         // 如果需要前进后退按钮

         nextButton: ‘.swiper-button-next‘,

         prevButton: ‘.swiper-button-prev‘,

       })

     }

     return {

           init:init

     }

})

　　第六步：入口的核心文件

require:接受2个参数
     1、第一个参数是数组,表示依赖的模块
     2、第二个参数是回调函数

require(["config"],function(){

     require(["jquery","layer","swiper","banner","alert"],function($,layer,swiper,banner,alert){

           banner.init()

           alert.init()

     })

})
第一步加载配置文件
 
第二步加载所需要的模块
 

　　第七步：如果遇到非AMD规范的模块

shim:{

    模块名:{
　　　　　　deps:[""],//所依赖的模块
　　　　　　exports:模块名//导出模块的名称
　　　　}

}
 

最新文章

  1. Linux常用命令学习6---（vim的使用）
  2. 【转载】Ansys中的阻尼
  3. Python基础语法，基本数据类型及相关操作
  4. Autofac和DynamicProxy2搭配实现Aop动手训练
  5. zipimport.ZipImportError: can&#39;t decompress data; zlib not available 解决办法
  6. OneZero第一次会议（非正式）
  7. [译]rabbitmq 2.4 Multiple tenants: virtual hosts and separation
  8. List转换成Json、对象集合转换Json等
  9. HDU 3749 Financial Crisis
  10. 控件treeview使用
  11. npm和gulp学习笔记
  12. FINDPEAKS - matlab函数
  13. Hdu 5073 Galaxy 精度问题
  14. python实例编写(7)---测试报告与测试套件（多个py文件，1个py文件内多个用例）
  15. 做多了国际化项目，你怎么处理时区不同的各种blabla...问题
  16. Flask 扩展 自定义扩展
  17. Java设计模式小议之1------- 迭代器模式
  18. Java 基础：认识&amp;理解关键字 native 实战篇
  19. linux中一些简便的命令之wc
  20. hzy 和zsl 的生存挑战

热门文章

  1. lnmp+discuz使用redis缓存（待进一步研究）
  2. Zipkin+Sleuth 链路追踪整合
  3. 待补充 MySQL必知必会第29章--------数据库维护
  4. csu 1978: LXX的图论题
  5. Git config文件
  6. 64位linux安装了32位jdk8报错怎么办-bash:/usr/local/jdk1.8/jdk1.8.0_181/bin/java:/lib/ld-linux.so.2:badELFinterpreter:Nosuch
  7. stm32f103c8串口USART1发送多一字节
  8. 删除elasticsearch 30天前的所有索引
  9. node-red inject节点 debug节点 switch节点
  10. .net core 读取、修改配置文件appsettings.json