requireJS的基本使用

requireJS的基本使用

1、总结

一句话总结：

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

 

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

|||-begin

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

|||-end

一、网站加载js时会中止其它资源加载，并中止页面渲染（就是咱们常说的白屏现象）

二、加载过多的js文件可能形成浏览器假死（浏览器一直在加载，不能进行页面操做）

三、假如文件有依赖关系，就是使用B.js须要先加载A.js，那咱们还要当心翼翼的去引入js，不过这么多文件，鬼理得清依赖关系啊

 

 

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

模块化开发：好比requireJS

 

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

一、服务器端（CommonJS）：如Node.js

二、客户端（AMD、CMD）：如requireJS 和 seaJS

 

四、什么是requireJS？

一、RequireJS是一个【JavaScript文件或者模块的加载器】。它能够提升JavaScript文件的加载速度，避免没必要要的堵塞。

二、requireJS采用【异步方式加载模块】，能够简单理解为【加载js文件的一个工具】

三、requireJS是客户端模块化开发的一种规范，用于解决加载过多js文件致使浏览器白屏及假死及js文件引入的依赖关系的。

 

五、requireJS的做用？

一、实现js的异步加载

二、管理模块之间的依赖关系，便于代码的编写和维护

 

六、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']
        }
    }
});

 

 

 

2、requireJS的基本使用

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

 

前言

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

 

 

 

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

缺点：

 　一、网站加载js时会中止其它资源加载，并中止页面渲染（就是咱们常说的白屏现象）

     二、加载过多的js文件可能形成浏览器假死（浏览器一直在加载，不能进行页面操做）

     三、假如文件有依赖关系，就是使用B.js须要先加载A.js，那咱们还要当心翼翼的去引入js，不过这么多文件，鬼理得清依赖关系啊

 

 

额 。。。允许我懵逼片刻，那怎么办呢，网站的功能日益强大，js文件愈来愈可能是必然的的事情，因而出现了模块化开发

 

 

 

模块化开发

　

00一、模块化分类

 

目前js模块化 开发规范 分为两种

     一、服务器端（CommonJS）  如Node.js

 

     二、客户端（AMD、CMD）  如：requireJS 和 seaJS

 

 

 

00二、什么是requireJS

　　一、RequireJS是一个JavaScript文件或者模块的加载器。它能够提升JavaScript文件的加载速度，避免没必要要的堵塞。

 

　　二、requireJS采用异步方式加载模块，能够简单理解为加载js文件的一个工具

 

　　三、requireJS是客户端模块化开发的一种规范，用于解决加载过多js文件致使浏览器白屏及假死及js文件引入的依赖关系的。

 

　　四、requireJS的做用：

     　　一、实现js的异步加载

     　　二、管理模块之间的依赖关系，便于代码的编写和维护

 

　　推荐学习地址： http://www.ruanyifeng.com/blog/2012/11/require_js.html

 

00三、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个参数

     一、第一个参数是数组,表示依赖的模块

     二、第二个参数是回调函数

require(["config"],function(){
     require(["jquery","layer","swiper","banner","alert"],function($,layer,swiper,banner,alert){
           banner.init()
           alert.init()
     })
})

第一步加载配置文件

 

第二步加载所须要的模块

 

　　第七步：若是遇到非AMD规范的模块

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