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

前言

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

原文地址:https://www.cnblogs.com/nanianqiming/p/8999153.html

时间: 2024-11-05 17:23:06

【模块化开发】------requireJS的基本使用------【凡尘】的相关文章

JS模块化开发(requireJS)

使用模块化开发的好处: 通过 exports 暴露接口.这意味着不需要命名空间了,更不需要全局变量.这是一种彻底的命名冲突解决方案. 通过 require 引入依赖.这可以让依赖内置,开发者只需关心当前模块的依赖,其他事情 Sea.js/ Require.js 都会自动处理好.对模块开发者来说,这是一种很好的 关注度分离,能让程序员更多地享受编码的乐趣 实现JS模块化开发,目前有两个规范,一个是AMD规范,一个是CMD规范. RequireJS遵循的是AMD规范.AMD推崇依赖前置. SeaJS

模块化开发RequireJS之shim配置

一.shim requirejs使用AMD规范开发,若开发过程中加载非AMD规范js,需要使用requirejs的shim进行配置. shim配置语法为: //配置文件 requirejs.config({ baseUrl: 'js', //默认是main.js所在的文件夹为基准. paths: { jquery: 'jquery-1.12.4.min' //起个别名 }, //关键配置 shim: { //配置方式一:jQuery.CateNav为模块名称,jquery为依赖的js模块 //'

模块化开发(requireJS)

模块化 在前端使用模块化开发,可以将代码根据功能实施模块的划分,每个模块功能(职责)单一,在需要更改对应的功能的时候,只需要对指定的模块进行修改,其他模块不受任何影响. 为什么要进行前端模块化? 达到公共模块的复用 可以很好的解决全局变量污染的问题 可以很好的解决各个功能之间的依赖关系 如何实现前端模块化开发 JavaScript本身不支持模块化开发,但是可以通过一些手段来实现. CommonJS是一个规范,用来规定模块化开发的标准. CommonJS由于一系列的限制,在前端开发当中,并不能很好

Angular 结合RequireJs实现模块化开发

angular的指令是模块化很好的一个体现,下面我将只使用指令(不用控制器),结合requirejs,实现模块化开发. 模块化关系图: 传统开发方式 <!--aaa模块--> <div> <h3>this is aaa</h3> <input type="text" ng-model="asd">{{asd}} <button ng-click="submit()">subm

UC前端‘搭积木’的模块化开发——scrat.js

模块化开发 将模块所需的js\css\img\tmpl维护在一起,一个模块一个目录 js渲染模板 css只关心模块内样式 开发团队心声:"我们希望每次研发新产品不是从零开始,不同团队不同项目之间能有可复用的模块沉淀下来." 模块生态 每个工程有_工程模块_和_生态模块_. 生态模块:基于_component规范_开发,部署到Github上,可以通过命令行工具将Github上的模块安装到工程中使用.比如:jQuery, iscroll, zepto.js, vue.js 安装命令: sc

JS模块化工具requirejs教程(一):初识requirejs

随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用.单元测试等等一系列复杂的需求. RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升. requirejs能带来什么好处 官方对requ

前端模块化开发的价值

本文发表在<程序员>杂志 2013 年 3 月刊,推荐购买. 前端模块化开发的价值 随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做项目时,常常会将一些通用的.底层的功能抽象出来,独立成一个个函数,比如 function each(arr) { // 实现代码 } function log(str) { // 实现代码 } 并像模像样地把这些函

【转】JS模块化工具requirejs教程(一):初识requirejs

随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用.单元测试等等一系列复杂的需求. RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升. requirejs能带来什么好处 官方对requ

前端模块化开发学习之gulp&amp;browserify篇

 随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发的时候,你会觉得十分费劲,因为你不知道文件之间复杂的关系,所以我们需要利用一些插件来配合进行模块化的开发. 所谓模块化的开发,写过nodejs的人都知道,文件之间的依赖可以用require()实现,但是浏览器端是不支持这样的依赖形式的,而browserify却可以解决这个问题,再加上gulp这个强大