AMD规范和requirejs入门

AMD(Asynchronous Module Definition)翻译为异步模块定义。异步强调的是，在加载模块以及模块所依赖的其它模块时，都采用异步加载的方式，避免模块加载阻塞了网页的渲染进度。用于浏览器端的异步模块规范

CMD (Common Module Definition), 是seajs推崇的规范，CMD则是依赖就近.是国内的一个叫玉伯的人写的。浏览器端的模块规范

CommonJS是服务器端的模块规范。nodejs就是CommonJS规范实现的。

我们要介绍的require.js就是AMD规范实现的一个库。

requirejs的作用

require.js可以很好的解决两个问题

1.实现js文件的异步加载，避免网页失去响应

2.管理模块之间的依赖性，便于代码的编写和维护。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>requirejs只开放了两个函数define 定义模块define('模块名',[依赖列表]，实现模块的函数)注意:通常我们不写模块名，文件名就是模块名require 使用模块语法:require([依赖列表],函数)注意:a.require可以同时加载多个模块，b.加载多个模块时函数一定要写多个形式参数，形式参数必须与模块进行一一对应。c.require===requirejs</title><script src="Scripts/require.js"></script><script>require(['./Scripts/04.js','./Scripts/04-2.js'], function (a,b) {// console.log(a);
            a.show();console.log(b);});</script>
</head>
<body></body>
</html>

//定义模块
define(function () {return {show: function show() {console.log("今天发生一件事,张三掉水沟里了");}}});

define(['./jquery-1.10.2.js'], function (a) {return $;
});

   requirejs的配置:require.config({baseUrl:设置所有模块的公共路径paths:为我们所有的模块设置别名});注意:1.如果要让配置对象起效果必须将依赖设置为模块名(没有扩展名的文件名)，不是完整路径。2.以对象形式为paths配置别名。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>requirejs的配置:require.config({baseUrl:设置所有模块的公共路径paths:为我们所有的模块设置别名});注意:1.如果要让配置对象起效果必须将依赖设置为模块名(没有扩展名的文件名)，不是完整路径。2.以对象形式为paths配置别名。</title><script src="Scripts/require.js"></script>
</head>
<body><script>require.config({baseUrl: './Scripts/',paths: {jq: 'jquery-1.10.2','2':'05-2'}});require(['jq','05', '2'], function (c,a, b) {// console.log(a);
             a.show();console.log(b);console.log(c);});</script></body>
</html>

requirejs的案例

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><script src="Scripts/require.js"></script>
</head>
<body><script>require(["./Scripts/06.js"], function (a) {console.log(a);console.log( a.add(10, 20));});</script>
</body>
</html>

//衬衣模块
//define({//    color: 'black',
//    size: 'XL',
//    price:100
//});//数学模块
define(function () {var add = function (x, y) {return x + y;};return {add};
});

转载于:https://www.cnblogs.com/zhumeiming/p/9864837.html

AMD规范和requirejs入门相关推荐

RequireJS和AMD规范
目录概述 define方法:定义模块 require方法:调用模块 AMD模式小结配置require.js:config方法插件优化器r.js 参考链接概述 RequireJS是一个工具库, ...
requirejs(shim)处理加载非AMD规范的js库
使用requirejs加载模块,模块的定义得遵守AMD规范,也即定义模块的时候使用如下函数定义模块: 1 define(function(){ 2 var private = function(){ ...
RequireJs入门（一）
RequireJs入门(一) RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系. ...
RequireJS入门（一）转
RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...
CommonJS规范与AMD规范的理解
2019独角兽企业重金招聘Python工程师标准>>> 链接地址:http://www.xx566.com/detail/32.html 谈到AMD,我们首先来了解一个基于AMD规范 ...
Javascript模块规范(CommonJS规范AMD规范)
Javascript模块化编程(AMD&CommonJS) 前端模块化开发的价值:https://github.com/seajs/seajs/issues/547 模块的写法查看 AMD规 ...
JavaScript的AMD规范
一.由来由CommonJS组织提出了许多新的JavaScript架构方案和标准,希望能为前端开发提供统一的指引.AMD规范就是其中比较著名一个,全称是Asynchronous Module Defi ...
JavaSript模块规范 - AMD规范与CMD规范介绍[转]
原文地址:http://blog.chinaunix.net/uid-26672038-id-4112229.html JavaSript模块化在了解AMD,CMD规范前,还是需要先来简单地了解下什 ...
AMD规范：简单而优雅的动态载入JavaScript代码
本文翻译自http://www.sitepen.com/blog/2010/11/04/requirejsamd-module-forms/,并加入部分自己的解释. CommonJS 提出了一种用于同 ...
Modularity（模块化-AMD规范）
第三阶段: AMD规范(Asynchronous Module Definition:异步模块定义) CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作. AMD规范则是 ...

AMD规范和requirejs入门

requirejs的作用

AMD规范和requirejs入门相关推荐

最新文章

热门文章