前言

为了提高代码的复用度,开发人员会按照功能把大量的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. hbase权威指南阅读随手笔记二之过滤器

    转自:http://blog.csdn.net/saint1126/article/details/8257941 base过滤器的比较操作符:   LESS  <LESS_OR_EQUAL & ...

  2. 关于Struts2的jsp页面的注释

    语句就算用<!-- -->注释后,还是会在编译的时候显示在网页上,而且网页还会报错,因为注释的那些语句也会去编译,也会去检查有没有错误,所以一些注释掉的过时的变量和方法也会导致报错.500

  3. 关于Cocos2d-x物理引擎用到的类和使用

    其实就是这三类PhysicsWorld类,PhysicsBody类,PhysicsShape类. 1.PhysicsWorld类 PhysicsWorld对象代表Cocos2d-x中的物理世界,这个世 ...

  4. python + opencv: 解决不能读取视频的问题

    博主一开始使用python2.7和Opencv2.4.10来获取摄像头图像,程序如下: cap = cv2.VideoCapture(0) ret, frame = cap.read() 使用这个程序 ...

  5. 在windows下编译ffmpeg

    编译ffmpeg,我在网上找了很多相关的方法,但最后都没编译成功. 所以下面就记录下自己的编译方法吧,留着以后编译的时候做参考. 1.首先,下载编译工具MinGW+Msys,搭建编译环境.工具下载地址 ...

  6. Oracle 添加主键和索引

    数据的主键和索引一般情况下都是必须的,特别是表有大量数据的时候,索引和主键更是必不可少,这样可以提供数据的查询效率: 一.创建表的同时创建主键约束 (1)无命名 create table studen ...

  7. 【Rmarkdown rmysql】

    http://stackoverflow.com/questions/21167070/how-to-query-multiple-times-and-close-the-connection-at- ...

  8. myEclipse svn 插件安装

    MyEclipse6.0 安装svn插件 博客分类: 技术   只说一种在线安装流程: 1. 打开Myeclipse,在菜单栏中选择Help→Software Updates→Find and Ins ...

  9. hadoop程序MapReduce之MaxTemperature

    需求:求每年当中最高的温度 样本:temp.log 2016080623 2016072330 2015030420 输出结果:2016 30 2015 20 MapReduce分析设计: Mappe ...

  10. PyQt4菜单栏

    菜单栏是GUI程序最明显的组成部分.它由一组位于不同菜单中的命令组成.在控制台程序中,我们必须记住那些晦涩难懂的命令.但在GUI程序中,通过菜单栏我们将命令合理的放置在不同的菜单中来降低学习新应用程序 ...