微信扫一扫打赏支持

requireJS的基本使用

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

 

 

 

 
posted @   范仁义  阅读(627)  评论(0编辑  收藏  举报
侧边栏

打赏

点击右上角即可分享
微信分享提示