深入浅出requireJS-1
我们都知道,虽然我们可以通过原型和继承来使javascript面向对象。但是,当js代码和逻辑过多时,代码的维护和扩展会变的很不方便。这时,nodejs做的非常好,但是在浏览器端模块化的js编程一直都是个难题。而requireJS就是来帮助我们解决这个问题的。requireJS遵循amd规范,所以让我们先了解下关于AMD规范的事情。
一、AMD规范
AMD规范是浏览器端的模块规范,它的全称为异步模块定义。从名称上看便知它是适合script tag的。也可以说AMD是专门为浏览器中JavaScript环境设计的规范。它吸取了CommonJS的一些优点,但又不照搬它的格式。开始AMD作为CommonJS的transport format 存在,因无法与CommonJS开发者达成一致而独立出来。它有自己的wiki 和讨论组 。
AMD设计出一个简洁的写模块API:
define(id?, dependencies?, factory);
其中:
- id: 模块标识,可以省略。
- dependencies: 所依赖的模块,可以省略。
- factory: 模块的实现,或者一个JavaScript对象。
define(function() {
return {
mix: function(source, target) {
}
};
});
ui.js
define(['base'], function(base) {
return {
show: function() {
// todo with module base
}
}
});
page.js
define([
'base'
],
function
(base) {
return
{
show:
function
() {
// todo with module base
}
}
});
data.js
define({
users: [],
members: []
});
- 定义无依赖的模块(base.js)
- 定义有依赖的模块(ui.js,page.js)
- 定义数据对象模块(data.js)
define(
'index'
, [
'data'
,
'base'
],
function
(data, base) {
// todo
});
define(
function
(require, exports, module) {
var
base = require(
'base'
);
exports.show =
function
() {
// todo with module base
}
});
- define({ "foo": "bar" });
- define('this is {{data}}.');
- define( function(require, exports, module) {
- // 模块代码
- });
- define( 'module', ['module1', 'module2'], function( require, exports, module ){
- // 模块代码
- } );
- define(function( require, exports ){
- var a = require('./a');
- a.doSomething();
- });
- define( function(require, exports, module) {
- require.async('.a', function(a){
- a.doSomething();
- });
- });
- define(function( require, exports ){
- exports.foo = 'bar'; // 向外提供的属性
- exports.do = function(){}; // 向外提供的方法
- });
- define(function( require, exports ){
- return{
- foo : 'bar', // 向外提供的属性
- do : function(){} // 向外提供的方法
- }
- });
- define({
- foo : 'bar', // 向外提供的属性
- do : function(){} // 向外提供的方法
- });
- define(function( require, exports ){
- exports = {
- foo : 'bar', // 向外提供的属性
- do : function(){} // 向外提供的方法
- }
- });
- define(function( require, exports, module ){
- module.exports = {
- foo : 'bar', // 向外提供的属性
- do : function(){} // 向外提供的方法
- }
- });
深入浅出requireJS-1的更多相关文章
- 【深入浅出jQuery】源码浅析--整体架构
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
- 实现一个类 RequireJS 的模块加载器 (二)
2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进 ...
- 使用RequireJS并实现一个自己的模块加载器 (一)
RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...
- 使用gulp解决RequireJS项目前端缓存问题(二)
1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...
- 【深入浅出jQuery】源码浅析2--奇技淫巧
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- AngularJs2与AMD加载器(dojo requirejs)集成
现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...
- 深入浅出Struts2+Spring+Hibernate框架
一.深入浅出Struts2 什么是Struts2? struts2是一种基于MVC的轻量级的WEB应用框架.有了这个框架我们就可以在这个框架的基础上做起,这样就大大的提高了我们的开发效率和质量,为公司 ...
- angularjs集成requirejs
其实说成使用requirejs加载angularjs应用会更贴切一些 <body> <span ng-controller="homeController"> ...
- DOM 事件深入浅出(二)
在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...
随机推荐
- C# 从零开始 vol.2
这是第二篇 1:命名空间 命名空间可以理解成类的文件夹,这个命名空间中存放着各种类,当你需要使用到对应的类的时候,就需要导入命名空间后才能使用. 引用:可以理解成添加新的存放类的文件夹,也就是一个项目 ...
- FlatBuffers入门
1.下载flatbuffers 从https://github.com/google/flatbuffers地址下载flatbuffers-master.zip文件. 2.编译flatbuffers ...
- kinect2 body joints 的25个点
JointType_SpineBase = 0, JointType_SpineMid = 1, JointType_Neck = 2, J ...
- linux中ssh登录Permanently added (RSA) to the list of known hosts问题解决
文章出自http://www.2cto.com/os/201307/227199.html linux中ssh登录Permanently added (RSA) to the list of know ...
- Webpack学习笔记(二)
市面上已经存在的模块管理和打包工具并不适合大型的项目,尤其单页面 Web 应用程序.最紧迫的原因是如何在一个大规模的代码库中,维护各种模块资源的分割和存放,维护它们之间的依赖关系,并且无缝的将它们整合 ...
- 强制改变IE中的文本模式
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
- mysql 初始化修改密码问题(Mac系统)
今天公司大牛帮我搞定了mysql初始化密码问题,纪录一下: ~ ps aux | grep mysqlMetro 7149 0.0 0.0 2432772 564 s000 R+ 7:16下午 0:0 ...
- iOS开发Embedded dylibs/frameworks are only supported on iOS 8.0 and later for architecture armv7的解决方法
全局搜索IPHONEOS_DEPLOYMENT_TARGE改为更小的版本
- hdu_5965_扫雷(递推)
题目链接:hdu_5965_扫雷 题意: 中文,还是自己看吧. 题解: 现场赛这题用的状压DP过的,不过现在想想当时还确实想复杂了,冷静下来仔细思靠一下,其实第i-1个确定了,那么第i个也是确定的,可 ...
- hdu_5873_Football Games(xjb搞)
题目链接:hdu_5873_Football Games 题意: 有n个队,每个队都会给其他队打一场,赢一场得2分,平局得一分,输了不得分,然后给你全部比赛结束后的得分,问你是否有假分 题解: 可以知 ...