require.js 笔记
1.前言
随着网站功能逐渐丰富，网页中的js也变得越来越复杂和臃肿，原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式，我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。
通过script标签来导入众多的js文件有几个缺点：
- 文件的引入路径难以书写，一大串路径字符串难以记忆，也不直观
- 无法清晰的表明各种库之间的依赖关系,一旦引入顺序出错就不能正常执行
- 所有的js都处在同一个作用域下，容易造成全局变量污染
而require.js做到了这一点，它是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。
相关代码笔记：简易demo
2.基本使用
- 引入require.js，并指定主模块的路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入require.js 并指定主模块的路径 -->
<script src="/assets/libs/require/require.js" data-main="/assets/js/require-backend.js"></script>
<title>主页</title>
</head>
<body>
</body>
</html>
- 主模块：相关路径配置，依赖配置，引入公共模块，引入页面js
//定义相关配置
require.config({
baseUrl : "/assets", //基础路径 只针对 paths 下的字段生效
//模块路径配置
paths:{
'vue':['libs/vue/vue.min', 'https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min'], //1.数组中可设多个路径 2.无需.js后缀
'ELEMENT': 'libs/element-ui/index.min',
},
map: {
'*': {
//引入require-css，使其支持加载css
'css': '/assets/libs/require-css/css.min.js'
}
},
shim: { //声明模块依赖
'ELEMENT': ['css!/assets/libs/element-ui/index.min.css'],//如果引入了ELEMENT模块，则自动引入这个css文件
}
})
//vue和element-ui每个页面都会用到，所以作为公共模块引入
//每个页面都有其对应的js模块，需要为其配置相应的规则，使其根据页面路径自动引入
//引入页面公共模块和页面js模块
require(['vue','ELEMENT'],function(Vue,ELEMENT){
//安装element-ui
Vue.use(ELEMENT)
//将Vue渲染至全局
window.Vue = Vue
//设定js基本路径
var baseJsPath = "/assets/js"
//获取当前页面路径
var page_path = window.location.pathname
//判断路径是否以 .html 结束
if(page_path.lastIndexOf('.html') > -1 && (page_path.length - 5) == page_path.lastIndexOf('.html')){
//页面路径完整（需去除.html后缀 再拼接）
var jsPath = baseJsPath + page_path.slice(0,-5) + '.js'
}else if(page_path.lastIndexOf('/') > -1 && (page_path.length - 1) == page_path.lastIndexOf('/')){//判断是否已 / 结尾
//页面路径不完整（需要拼接 index.js）
var jsPath = baseJsPath + page_path + 'index.js'
}else{
//页面路径不完整（说明无需去除.html后缀 直接拼接）
var jsPath = baseJsPath + page_path + '.js'
}
//引入页面的js文件
require([jsPath],function(){
})
})
- 页面js
define([],function(utils){
new Vue({
el:"#app",
data(){
return {
}
}
})
})
3.封装自定义模块
模块定义使用define()方法，他有3个参数：
| 参数 | 类型 | 说明 |
|---|---|---|
| 参数一 | String | 可选，当前模块名称，一旦设定，在配置模块路径（paths）是就必须使用该名称 |
| 参数二 | Array | 可选，依赖的模块 |
| 参数三 | Function | 模块的定义，需要return一个数据作为当前模块的暴漏值 |
define('name_utils',[],function () {
return {}
})
某些库就是使用这种方式定义的，所以引入是名称必须固定，例如jquery和elementui
像上面的依赖，elementui的源码已经指明依赖vue，一旦页面引入了elementui，即使没有引入vue，则require.js会自动引入vue，但是在回调中无法拿到Vue这个类，导致页面无法使用vue渲染，也无法安装elementui，所以还是得手动引入vue，require.js会自动忽略重复的请求
4.加载css
- 加载css需要用到require-css插件，在主模块中引入这个插件，确保后面所有的模块都可正常加载css
require.config({
map: { //map告诉RequireJS在任何模块之前，都先载入这个css模块
'*': {
css: 'https://cdn.bootcdn.net/ajax/libs/require-css/0.1.9/css.js'
}
}
})
- 例1：element-ui依赖其配套的css，我们在shim字段中为element-ui声明他所需要的依赖。
require.config({
map: { //map告诉RequireJS在任何模块之前，都先载入这个css模块
'*': {
css: 'https://cdn.bootcdn.net/ajax/libs/require-css/0.1.9/css.js'
}
},
shim: { //声明模块依赖
'ELEMENT':{
"deps":['css!https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/theme-chalk/index.css'], //声明 'ELEMENT' 的依赖
}
}
})
- 例2：引入页面的css文件，在引入时添加前缀 "css!" 后面跟css文件路径即可
当然，页面的js和css可以集中主模块中进行引入
//引入页面js映射模块
require([],function(){
//加载页面对应的js和css (部分代码省略)
require([jsPath, 'css!'+cssPath],function(){
})
})
5.加载非规范的模块
require.js的模块使用define()方法进行定义，在回调中return一个数据，其他模块引入他的时候，就能够接收到这个模块，参考上面的封装自定义模块
但是如果在define()的参数回调中，没有return任何数据，或者编写js模块时，未使用模块化的写法，，则无法接收，显示undefined
上面的js定义了不止一个数据，我们可以指定其中的一个作为模块进行引入
require.config({
//模块路径配置
paths:{
'utils':"js/utils"
},
shim: { //声明模块依赖
'utils':{
exports:"utils",//本例中可以sayHello和utils二选一
}
}
})
require.js 笔记的更多相关文章
- require.js笔记
笔记参考来源:阮一峰 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 1. 浏览器端的模块只能采用“异步加载”方式 = ...
- require.js 入门笔记
网站越来越庞大,JS也是越写越多. 当所有的JS 都集中在 HTML的 head 部分时,网页加载变得很慢,很多的 JS代码也并不是全都适用在当前的页面,造成了代码的冗余度非常高. 而且长长的JS代码 ...
- 【转】require.js学习笔记(二)
require.js遵循AMD规范,通过define定义模块,require异步加载模块,一个js文件即一个模块. 一.模块加载require1.加载符合AMD规范模块 HTML: <scrip ...
- require.js学习笔记（内容属于转载总结）
<script data-main="src/app" src="src/lib/require.js"></script> backb ...
- require.js学习笔记
使用require.js的好处? 1 有效的防止命名冲突(可以将变量封装在模块内,通过暴露出的接口解决命名冲突) 2 解决不同JS文件中的依赖 3 可以让我们的代码以模块化的方式组织 官方网站http ...
- 【转】require.js学习笔记(一)
一.立即执行函数 立即执行函数可以有效避免临时变量污染全局空间.可以在页面初始化时,在立即执行函数内实现一次执行变量的定义及使用. for (var i = 0; i < elems.lengt ...
- 【笔记】关于require.js 的用法
最近忙于学校的一个新网站建设,对于以前的前端程序编写方式的不正规特意上网学习了require.js 的用法,使此次的工程更加有条理同时符合当前前端的开发模式——前端模块化. 网上有不少很好的学习文章这 ...
- require.js源码分析
写的寥寥草草,博客园的布局怎么弄还没有研究,再保存一份草稿,日后在完善,深度研究 require.js 加载顺序 1:加载html主页,require.js文件 2:脚本执行到html中的script ...
- javascript模块化编程库require.js的用法
随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的.更是为了能更加容易的维护日后的代码,因为现在的随着人们对交互效果的越来越强烈的需求,我们的JS代码 ...
- Javascript模块化编程（三）：require.js的用法
Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...
随机推荐
- Node.js开发博客项目笔记-搭建环境（2）
搭建环境 首先新建blog-1文件夹,在文件夹下初始化package.json,执行命令: npm init -y 生成的package.json文件中的main属性默认值index.js改成bin/ ...
- Dart 2.14 版现已发布
支持 Apple Silicon,增加了默认的 lint.更好的工具和新的语言功能提高生产力. 本月,我们发布了 Dart SDK 2.14 的正式版,新的版本旨在通过独特的可移植性.生产力和稳健性组 ...
- bfs 与优先队列————洛谷p1126（历经两个小时总算AC了，哭晕）
机器人搬重物 题目描述 机器人移动学会(RMI)现在正尝试用机器人搬运物品.机器人的形状是一个直径 \(1.6\) 米的球.在试验阶段,机器人被用于在一个储藏室中搬运货物.储藏室是一个 \(N\tim ...
- 深入理解 Nuxt.js 中的 app:data:refresh 钩子
title: 深入理解 Nuxt.js 中的 app:data:refresh 钩子 date: 2024/9/29 updated: 2024/9/29 author: cmdragon excer ...
- 高强度学习训练第七天总结:JVM分配内存机制
理解JVM内存分配策略 三大原则+担保机制 JVM分配内存机制有三大原则和担保机制 具体如下所示: 优先分配到eden区 大对象,直接进入到老年代 长期存活的对象分配到老年代 空间分配担保 对象优先在 ...
- Oracle、MySQL等数据库故障处理优质文章分享 | 10月汇总
墨天轮社区于9月起持续举办[聊聊故障处理那些事儿]DBA专题征文活动,每月进行评优发奖,鼓励大家记录工作中遇到的数据库故障处理过程,不仅用于自我复盘与分析,同时也能帮助其他的同仁们避坑. 上月为大家梳 ...
- 未来“数”于你 | 墨天轮携手 Vertica 发布技术文章征集令，双重大奖蓄势待“发”
作为新一代数据分析平台,Vertica凭借高性能.高可用性以及混合模式部署的底层架构等特点,为国内电信.金融行业提供了较多的整体解决方案. 今天,Vertica 限时开放体验,同时,MacBook P ...
- 墨天轮访谈 | IvorySQL王志斌—IvorySQL，一个基于PostgreSQL的兼容Oracle的开源数据库
分享嘉宾:王志斌 瀚高IvorySQL产品经理 整理:墨天轮社区 导读 大家好,我是瀚高IvorySQL产品经理王志斌,IvorySQL是基于PostgreSQL的衍生开源项目. 我今天分享的内容主要 ...
- js中判断数据类型的方法有哪些
判断数据类型可以使用 typeof 但是typeof 判断数组和函数时返回的都是Object 不能具体判断,这时使用 instanceof 可以判断对象是否是另一个函数创造的 : 用法: typeof ...
- TP6 使用 nusoap为第三方webservice调用插件
composer下载插件 composer require nusoap/nusoap use NuSoap\Client\Client; class Index extends BaseContro ...