标签：alert swiper 文件路径 speed 页面 资源加载 comm str rect
前言
为了提高代码的复用度，开发人员会按照功能把大量的js代码分成若干文件，这样在多个页面就可以使用同一个文件了。，下面是某个网站的js引用情况
虽然代码的复用度提升了，但是缺点也体现了出来
缺点：
<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规范定义模块
//以下定义了一个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(["config"],function(){ require(["jquery","layer","swiper","banner","alert"],function($,layer,swiper,banner,alert){ banner.init() alert.init() }) })
第七步：如果遇到非AMD规范的模块
shim:{
模块名:{
deps:[""],//所依赖的模块
exports:模块名//导出模块的名称
}
}
【模块化开发】------requireJS的基本使用------【凡尘】
标签：alert swiper 文件路径 speed 页面 资源加载 comm str rect
原文地址：https://www.cnblogs.com/nanianqiming/p/8999153.html
