JS模块化规范AMD之RequireJS
1.基本操作
加载 JavaScript 文件(入口文件)
RequireJS以一个相对于baseUrl的地址来加载所有的代码
<script data-main="scripts/main.js" src="scripts/require.js"></script>
相关配置
requirejs.config({ baseUrl: 'js/lib', paths: {
app: '../app'
}
}); requirejs(['jquery', 'canvas', 'app/sub'],
function ($, canvas, sub) {
//jQuery, canvas and the app/sub module are all
//loaded and can be used here now.
});
2.模块相关
简单的值对
define({ color: "black",
size: "unisize"
});
没有任何依赖的函数式定义
define(function () { return {
color: "black",
size: "unisize"
}
});
存在依赖的函数式定义
define(["./cart", "./inventory"], function(cart, inventory) {
//return an object to define the "my/shirt" module.
return {
color: "blue",
size: "large",
addToCart: function() {
inventory.decrement(this);
cart.add(this);
}
}
}
);
4.将模块定义为一个函数
define(["my/cart", "my/inventory"],
function(cart, inventory) {
return function(title) {
return title ? (window.title = title) :
inventory.storeName + ' ' + cart.name;
}
}
);
3.简单包装CommonJS来定义模块
define(function(require, exports, module) {
var a = require('a'),
b = require('b');
//Return the module value
return function () {};
}
);
4. 定义一个命名模块(jquery中使用)
define("foo/title",
["my/cart", "my/inventory"],
function(cart, inventory) {
//Define foo/title object in here.
}
);
jquery:
if ( typeof define === "function" && define.amd ) {
define( "jquery", [], function() {
return jQuery;
} );
}
5.JSONP服务依赖
为了在RequireJS中使用JSON服务,须要将callback参数的值指定为"define"。这意味着你可将获取到的JSONP URL的值看成是一个模块定义。
下面是一个调用JSONP API端点的示例。该示例中,JSONP的callback参数为"callback",因此"callback=define"告诉API将JSON响应包裹到一个"define()"中:
require(["http://example.com/api/data.json?callback=define"],
function (data) {
//The data object will be the API response for the
//JSONP data call.
console.log(data);
}
);
仅支持返回值类型为JSON object的JSONP服务,其他返回类型如数组、字串、数字等都不能支持。
6.压缩合并
常规压缩合并
node r.js -o baseUrl=js name=main out=built.js
有外部CDN的情况
//表示paths.jquery不参与合并,压缩。这时生成的built.js
node r.js -o baseUrl=js name=main out=built.js paths.jquery=empty: 也就不包含它了。
合并成大文件,设置配置文件
({
appDir: "./",
baseUrl: "js",
dir: "../r6-built",
paths: {
jquery: 'empty:'
},
modules: [
{
name: "page1"
},
{
name: "page2"
}
]
})
命令
node r.js -o build.js
合并压缩CSS
node r.js -o cssIn=css/main.css out=css/built.css
还可以使用optimizeCss参数设置来配置是否压缩及压缩选项。
optimizeCss的取值有
none 不压缩,仅合并 standard 标准压缩 去换行、空格、注释 standard.keepLines 除标准压缩外,保留换行 standard.keepComments 除标准压缩外,保留注释 standard.keepComments.keepLines 除标准压缩外,保留换行和注释
示例:
node r.js -o cssIn=css/main.css out=css/built.css optimizeCss=standard
压缩后built.css整个为一行了。
*:first-child {
margin-top: 0 !important;
}
body>*:last-child {
margin-bottom: 0 !important;
}
/* BLOCKS
=============================================================================*/
p, blockquote, ul, ol, dl, table, pre {
margin: 15px 0;
}
/* HEADERS
=============================================================================*/
h1, h2, h3, h4, h5, h6 {
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}
h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
font-size: inherit;
}
body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
margin-top: 0;
padding-top: 0;
}
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0;
}
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
margin-top: 10px;
}
/* LINKS
=============================================================================*/
a {
color: #4183C4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* LISTS
=============================================================================*/
ul, ol {
padding-left: 30px;
}
ul li > :first-child,
ol li > :first-child,
ul li ul:first-of-type,
ol li ol:first-of-type,
ul li ol:first-of-type,
ol li ul:first-of-type {
margin-top: 0px;
}
ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
}
dl {
padding: 0;
}
dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}
dl dt:first-child {
padding: 0;
}
dl dt>:first-child {
margin-top: 0px;
}
dl dt>:last-child {
margin-bottom: 0px;
}
dl dd {
margin: 0 0 15px;
padding: 0 15px;
}
dl dd>:first-child {
margin-top: 0px;
}
dl dd>:last-child {
margin-bottom: 0px;
}
/* CODE
=============================================================================*/
pre, code, tt {
font-size: 12px;
font-family: Consolas, "Liberation Mono", Courier, monospace;
}
code, tt {
margin: 0 0px;
padding: 0px 0px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}
pre>code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}
pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}
pre code, pre tt {
background-color: transparent;
border: none;
}
kbd {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DDDDDD;
background-image: linear-gradient(#F1F1F1, #DDDDDD);
background-repeat: repeat-x;
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
border-image: none;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
padding: 1px 4px;
}
/* QUOTES
=============================================================================*/
blockquote {
border-left: 4px solid #DDD;
padding: 0 15px;
color: #777;
}
blockquote>:first-child {
margin-top: 0px;
}
blockquote>:last-child {
margin-bottom: 0px;
}
/* HORIZONTAL RULES
=============================================================================*/
hr {
clear: both;
margin: 15px 0;
height: 0px;
overflow: hidden;
border: none;
background: transparent;
border-bottom: 4px solid #ddd;
padding: 0;
}
.postBody a:link, .postBody a:visited, .postBody a:active ,.postBody a,.postBody a:hover,{
text-decoration: none;
}
a:hover{
cursor: pointer;
}
/* IMAGES
=============================================================================*/
img {
max-width: 100%
}
-->
JS模块化规范AMD之RequireJS的更多相关文章
- js模块化规范AMD、CMD、CommonJS...
1. AMD 1.1 什么是AMD? AMD 英文名 Asynchronous Module Definition ,中文名 异步模块定义 .这是一个浏览器模块化开发的规范. 由于浏览器环境执行环境的 ...
- js模块化规范—AMD规范
AMD规范说明 AMD全称是:Asynchronous Module Definition(异步模块定义),github地址 是专门用于浏览器端, 模块的加载是异步的 AMD规范基本语法 定义暴露模块 ...
- JS 模块化 - 02 Common JS 模块化规范
1 Common JS 介绍 Common JS 是模块化规范之一.每个文件都是一个作用域,文件里面定义的变量/函数都是私有的,对其他模块不可见.Common JS 规范在 Node 端和浏览器端有不 ...
- JS模块化规范CommonJS,AMD,CMD
模块化是软件系统的属性,这个系统被分解为一组高内聚,低耦合的模块.理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可.一个模块化系统所必须的 ...
- JS 模块化 - 03 AMD 规范与 Require JS
1 AMD 规范介绍 AMD 规范,全称 Asynchronous Module Definition,异步模块定义,模块之间的依赖可以被异步加载. AMD 规范由 Common JS 规范演进而来, ...
- 【整理】 JavaScript模块化规范AMD 和 CMD 的区别有哪些?
根据玉伯等人在知乎上的回答整理.整理中... AMD 规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMD CMD 规范在这里:https://githu ...
- JS模块化规范CMD之SeaJS
1. 在接触规范之前,我们用模块化来封装代码大多为如下: ;(function (形参模块名, 依赖项, 依赖项) { // 通过 形参模块名 修改模块 window.模块名 = 形参模块名 })(w ...
- js 模块化规范
模块规范 CommonJS module.exports, exports 导出模块 require 加载模块, CommonJS 同步,服务端.实践者: nodejs ES6 export, exp ...
- js模块化开发——AMD规范
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就 ...
随机推荐
- c++11变长参数函数模板
By francis_hao Mar 25,2018 一个最简单的实例大概是这个样子: #include <iostream>using namespace std; /*变长参 ...
- org.springframework.beans.factory.NoSuchBeanDefinitionException: No bean named 'sessionFactory' is defined
请检查你在web.xml中加载spring.xml文件的时候没有加载成功,看你的路径是否正确 <context-param> <param-name>contextConfi ...
- SpringCloud学习(6)——Hystrix熔断器
分布式系统面临的问题 复杂的分布式体系结构中的应用程序有数十个依赖关系, 每个依赖关系在某些时刻不可避免的失败. 服务雪崩效应 多个微服务调用的时候, 假设微服务A调用微服务B和微服务C, 微服务B和 ...
- Mongodb 备份 还原 导出 导入 等批量操作
mongodb数据备份和还原主要分为二种,一种是针对于库的mongodump和mongorestore,一种是针对库中表的mongoexport和mongoimport. 一,mongodump备份数 ...
- vee-validate
http://vee-validate.logaretm.com/ 表单校验,配合VUE使用
- LightOJ 1166 Old Sorting 置换群 或 贪心 水题
LINK 题意:给出1~n数字的排列,求变为递增有序的最小交换次数 思路:水题.数据给的很小怎么搞都可以.由于坐标和数字都是1~n,所以我使用置换群求循环节个数和长度的方法. /** @Date : ...
- 支付宝Android接口4.0以上报错Failure calling remote service
很坑爹的问题,4.0一下没问题,完全按照接口文件写的.网上一查,很多人遇到.最好直接在4.2下调试,看看报错问题,然后度娘. 将RSA文件中的加上“BC”后测试通过...NND PKCS8Encode ...
- HDU 5995 Kblack loves flag (模拟)
题目链接 Problem Description Kblack loves flags, so he has infinite flags in his pocket. One day, Kblack ...
- c语言学习笔记.关键字.存储类型关键字等
关键字const 1.修饰变量. 修饰的对象为常量,只读. 2.修饰指针. const 也可以和指针变量一起使用,这样可以限制指针变量本身,也可以限制指针指向的数据. const 离变量名近就是用来修 ...
- 深入理解Spring系列之六:bean初始化
转载 https://mp.weixin.qq.com/s/SmtqoELzBEdZLo8wsSvUdQ <深入理解Spring系列之四:BeanDefinition装载前奏曲>中提到,对 ...