前言

为了提高代码的复用度,开发人员会按照功能把大量的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:模块名//导出模块的名称
    }
}

【模块化开发】------requireJS的基本使用------【巷子】的更多相关文章

  1. 模块化开发RequireJS之shim配置

    一.shim requirejs使用AMD规范开发,若开发过程中加载非AMD规范js,需要使用requirejs的shim进行配置. shim配置语法为: //配置文件 requirejs.confi ...

  2. 模块化开发(requireJS)

    模块化 在前端使用模块化开发,可以将代码根据功能实施模块的划分,每个模块功能(职责)单一,在需要更改对应的功能的时候,只需要对指定的模块进行修改,其他模块不受任何影响. 为什么要进行前端模块化? 达到 ...

  3. 模块化开发RequireJS之路径解析

    1.requirejs遵循AMD规范,将需要的都加载好(前置加载).注:cmd是就近加载. define(['jQuery','dialog'],function($,d){ // 业务逻辑 }) ( ...

  4. Angular 结合RequireJs实现模块化开发

    angular的指令是模块化很好的一个体现,下面我将只使用指令(不用控制器),结合requirejs,实现模块化开发. 模块化关系图:

  5. Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。

    随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...

  6. 在Html中使用Requirejs进行模块化开发

    在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理.这里就介绍下如何通过requirejs,实现html代码的模块化开发. 如何使用requirejs加载html Re ...

  7. [工具配置]使用requirejs模块化开发多页面一个入口js的使用方式

    描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...

  8. 使用requirejs模块化开发多页面一个入口js的使用方式

    描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...

  9. JS模块化开发:使用SeaJs高效构建页面

    一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...

随机推荐

  1. 关于Cocos2d-x的动作和动画

    1.动作,在cocos2d-x中有非常多种的动作,各种移动,旋转,缩放,淡入淡出....等等非常多,但是这些动作只是作用于节点,最常作用于的就是精灵节点.而且我们可以把很多个动作放进一个Sequenc ...

  2. C#的HttpWebRequest编程,支持带ViewState的网页POST请求

    staticprivatestring SearchURL(string id) { try { //Get the ViewState and EventValidation HttpWebRequ ...

  3. 【转载】WebApi 接口测试工具:WebApiTestClient

    正文 前言:这两天在整WebApi的服务,由于调用方是Android客户端,Android开发人员也不懂C#语法,API里面的接口也不能直接给他们看,没办法,只有整个详细一点的文档呗.由于接口个数有点 ...

  4. html -- 实体

  5. Floyd算法思想

    关键词:代数.图论.矩阵.松弛技术.动态规划 Floyd算法是一个经典的动态规划算法.用通俗的语言来描述的话,首先我们的目标是寻找从点i到点j的最短路径.从动态规划的角度看问题,我们需要为这个目标重新 ...

  6. url传参错误的痛

    今天用一下方法给后台传参数: var url = 'patrolpoint!totalHistoryPage.action' +        '?patrolPoint.batchOnTime=' ...

  7. crc16算法,包括单片机和c#版本

    c语言的#include <stdio.h> static  short const wCRC16Table[256] = {         0x0000, 0xC0C1, 0xC181 ...

  8. c# 以二进制读取文本文件

    using System; using System.IO; public class FileApp {     public static void Main()     {         // ...

  9. oracle 存储过程 where in参数传入问题

    问题: 举个简单例子说明create or replace procedure procStr(inString in varchar2)asbeginselect * from book where ...

  10. Java------遍历Map<k,v>的方法

    1. public class MapAction extends ActionSupport{ private Map<String, User> map = new HashMap&l ...