AMD、request.js,生词太多,傻傻搞不清
前言
之前在公司用JS写前端页面,本来自己是一个写后端的,但是奈何人少,只能自己也去写了。但是自己对前端基本不懂,基本就是照着前人写的照着抄,反正大体意思是明白的,但是出现问题了,基本上也是吭哧吭哧好几天,也能解决,但是由于自己对前端这一套是一点都不懂,导致效率很低,而且经常返工。后来稍微学习了一波,了解了这个AMD规范和require.js。
因为公司用的是这个require.js,所有这里就好好的把这个require.js总结一下,只为工作需要。
下面我通过三个模块来把整个知识点穿起来。
- calculator.js:定义calculator模块
- author.js:定义author模块
- main.js:主模块,依赖calculator模块和author模块
定义无依赖的模块
定义无依赖的模块语法如下:
define(function() {
return 导出的内容
})
样例代码:
// calculator.js
define(function() {
// 欢迎关注微信公众号:果冻想
let add = function(x, y) {
return x + y;
};
let sub = function(x, y) {
return x - y;
};
let multi = function(x, y) {
return x * y;
};
let div = function(x, y) {
return x / y;
};
// 对外暴漏模块
return {
add: add,
sub: sub,
multi: multi,
div: div
}
});
再来一个模块定义,方便下面依赖引入:
// author.js
define(function() {
let name = "果冻想";
let sex = "男"
function getName() {
return name;
};
function getSex() {
return sex;
};
return {
getName: getName,
getSex: getSex
}
});
定义有依赖的模块
定义有依赖的模块语法如下:
define(["module1", "module2"], function(m1, m2) {
return 模块
})
样例代码:
// main.js,分别依赖上面的calculator和author模块
define([
'calculator',
'author'
], function(calculator, author) {
console.log(calculator.add(1, 1));
console.log(calculator.sub(5, 2));
console.log(calculator.multi(2, 3));
console.log(calculator.div(4, 2));
console.log(author.getName());
console.log(author.getSex());
});
使用模块
使用require.js的第一步,是先去官方网站下载最新版本。下载后,假定把它放在js子目录下面,就可以加载了。下载地址:Download RequireJS
<script src="js/require.js"></script>
其实,加载这个文件,也有可能会造成网页失去相应,我们一般的做法是把这个加载语句放在网页的底部加载;其实,还有另一个方案,可以这个样子:
<script src="js/require.js" defer async="true" ></script>
async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。
加载require.js以后,下一步就要加载我们自己的代码了。
<script src="js/require.js" data-main="js/main"></script>
data-main属性的作用是指定网页程序的主模块。在上例中,就是js目录下面的main.js,这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js,所以可以把main.js简写成main。
这样,我们的代码就可以直接在浏览器中运行喽。
模块的加载
默认情况下,require.js会默认认为模块与data-main指定的文件在同一个目录下,然后自动加载它们。有的时候,这些模块都不在一个目录下,又或我们在加载模块时,想对模块进行重命名,这些肿么搞?
这些我们都可以使用require.config()方法,我们可以对模块的加载行为进行自定义。比如这个样子:
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "https://xxx/jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
}
});
baseUrl是可以直接定义基目录。
非标准模块的加载
对于那些遵循AMD规范的模块,使用require.js来加载,当然是非常舒服的了;即使很多流行的函数库符合AMD规范,但是仍有很多库并不符合,针对这些不符合的库,我们该如何使用呢?
针对这些不符合AMD规范的模块,需要使用时,仍是需要在require.config中进行配置。require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块,具体配置字段说明如下:
- exports值(输出的变量名),表明这个模块外部调用时的名称;
- deps数组,表明该模块的依赖性。
比如,jQuery的插件可以这样引入:
shim: {
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}
总结
好了,关于AMD和CommonJS就总结到这里了,希望对大家有帮助。
AMD、request.js,生词太多,傻傻搞不清的更多相关文章
- JS魔法堂:属性、特性,傻傻分不清楚
一.前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; con ...
- 傻傻分不清之 Cookie、Session、Token、JWT
傻傻分不清之 Cookie.Session.Token.JWT 什么是认证(Authentication) 通俗地讲就是验证当前用户的身份,证明“你是你自己”(比如:你每天上下班打卡,都需要通过指纹打 ...
- cookie、session,、token,还在傻傻分不清?
摘要:session 和 token 本质上是没有区别的,都是对用户身份的认证机制,只是他们实现的校验机制不一样而已. 本文分享自华为云社区<Session/Cookie/Token 还傻傻分不 ...
- MVP MVC MVVM 傻傻分不清
最近MVC (Model-View-Controller) 和MVVM (Model-View-ViewModel) 在微软圈成为显学,ASP.NET MVC 和WPF 的Prism (MVVM Fr ...
- 【华为敏捷/DevOps实践】7. 敏捷,DevOps,傻傻不分清楚【华为云技术分享】
文:姚冬(华为云DevCloud首席技术布道师,资深DevOps与精益/敏捷专家,金融解决方案技术Leader,中国DevOpsDays社区核心组织者) 前言 敏捷是什么?DevOps是什么?两者有什 ...
- JDBC、ORM、JPA、Spring Data JPA,傻傻分不清楚?一文带你厘清个中曲直,给你个选择SpringDataJPA的理由!
序言 Spring Data JPA作为Spring Data中对于关系型数据库支持的一种框架技术,属于ORM的一种,通过得当的使用,可以大大简化开发过程中对于数据操作的复杂度. 本文档隶属于< ...
- How to use Request js (Node js Module) pools
Can someone explain how to use the request.js pool hash? The github notes say this about pools: pool ...
- Java:接口和抽象类,傻傻分不清楚?
01. 来看网络上对接口的一番解释: 接口(英文:Interface),在 Java 编程语言中是一个抽象类型,是抽象方法的集合.一个类通过继承接口的方式,从而来继承接口的抽象方法. 兄弟们,你们怎么 ...
- [转帖]十分钟快速理解DPI和PPI,不再傻傻分不清!
十分钟快速理解DPI和PPI,不再傻傻分不清! https://baijiahao.baidu.com/s?id=1605834796518990333&wfr=spider&for= ...
- OCA,OCP,OCM傻傻分不清?
可能大家知道OCA.OCP.OCM的关系是一个比一个难考,一个比一个含金量高,但是你知道具体的考试科目.考试方式.就业形势区别吗?不知道的话这篇通俗易懂的文章会让你一目了然. 区别一:含金量 ■OCA ...
随机推荐
- JS script脚本async和defer的区别
壹 ❀ 引 我在 google recaptcha 谷歌人机身份验证使用教程 一文中有引用这样一段外部资源代码,如下: <script src="https://www.google. ...
- CF1829H Don't Blame Me
题目链接 题解 知识点:线性dp,位运算. 考虑设 \(f_{i,j}\) 表示考虑了前 \(i\) 个数字,与和为 \(j\) 的方案数.转移方程显然. 注意初值为 \(f_{0,63} = 1\) ...
- win32-制作mini dump文件
一个完整的用户模式dump是基本的用户模式转储文件. 此转储文件包括进程的整个内存空间,程序的可执行映像本身,句柄表以及其他信息,这些信息对于调试器在重建转储发生时正在使用的内存中很有用. 可以将完整 ...
- python中partial用法
应用 典型的,函数在执行时,要带上所有必要的参数进行调用.然后,有时参数可以在函数被调用之前提前获知.这种情况下,一个函数有一个或多个参数预先就能用上,以便函数能用更少的参数进行调用. 示例pyqt5 ...
- 【App Service】遇见本地访问Azure App Service应用慢或者是调用第三方接口慢的调试小工具
问题描述 当应用部署到微软云 Azure后,如果遇见本地访问Azure App Service应用慢或者是调用第三方接口慢的时候,有什么好的调试方法呢? 来判断具体时那一段请求耗时呢? 问题解答 当然 ...
- 【Azure 应用服务】如何禁止chinacloudsites.cn 访问?
问题描述 Azure App Service创建后,默认会有一个 Azure App Service创建后,默认会有一个 https://xxxxxxxxxxxxx.chinacloudsites. ...
- STL-RBTree模拟实现
#pragma once #include<assert.h> #include<iostream> using std::cout; using std::endl; usi ...
- 50条MAUI踩坑记
1. 目录结构: (1)_imports.razor是一个全局using namespace的地方 (2)Platforms下的代码,虽然都放在同一个项目下,但是Platforms\Android下的 ...
- C++ Qt开发:QFileSystemModel文件管理组件
Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍如何运用QFi ...
- redis三主三从详细搭建过程
搭建Redis三主三从集群的详细步骤如下: 准备环境: 确保你有六台服务器或虚拟机,每台服务器上都已经安装了Redis.这些服务器将用于搭建三主三从的Redis集群. 确保所有服务器之间的网络连接正常 ...