模块化开发------requireJS的基本使用------凡尘

Posted 2020-11-03 Alley-巷子

前言

为了提高代码的复用度，开发人员会按照功能把大量的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、管理模块之间的依赖关系，便于代码的编写和维护

 

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

 

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:模块名//导出模块的名称
　　　　}
}