Javascript 模块化概述
模块化的目的
当网站开发得越来越复杂,会经常遇到以下问题:
- 命名冲突
- 文件依赖
Sea.js
一个适合web前端的模块加载器,遵守 CMD (Common Module Definition)模块定义规范
- 解决上面两个问题
- http://seajs.org
- 模块化的概念
Sea.js的使用方法
1. 引入Sea.js库
2. 定义模块
define(function(require,exports,module){//参数名写法不变
function tab(){
alert('hi');
}
//exports:对外的接口
exports.tab=tab;
});
3. 调用模块
//参数:模块的地址(相对seajs的地址),回调函数
seajs.use('path.js',function(ex){//回调函数的参数就是模块中的exports
ex.tab();//很好的解决了命名冲突的问题
});
4. 依赖模块
define(function(require,exports,module){
//require:依赖的接口
var dep = require('path.js');//如果地址指向模块,返回模块中的exports
dep.tab();
function tab(){
alert('hi');
}
//exports:对外的接口
exports.tab=tab;
});
进阶
1. 参数module
与 exports 类似,用来在模块内部对外提供接口。
define(function(require, exports, module) {
// 对外提供接口
module.exports = {
name: 'a',
doSomething: function() {};
};
});
2. 异步接口
require.async();
好处:无需等待,按需加载
require.async('./scale.js',function(ex){
ex.scale(a,b);
});
3. 调用多个模块
seajs.use(['main.js','main2.js'],function(ex,ex2){
//do something...
});
4. seajs.config
- alias:模块别名
- preload:预加载
- debug:调试
5. 插件
- 文本插件
- shim插件:js框架转模块化。
模块化的历史
- ECMAScript 6 将正式支持模块语法。
- 因nodeJS发展起来,服务器端需要模块化。
- commonJS规范,针对服务器端js开发,请求文件在本地,所以请求速度快,而浏览器端需要向服务器请求文件,会有所延迟,所以跟适合异步加载。
- AMD(Asynchromous Module Definition) 异步模块加载规范和CMD (Common Module Definition)通用模块定义,适合前端js开发。
- requireJS
- 和seaJS类似,模块化插件。
- requireJS采用AMD((Asynchromous Module Definition)规范,seaJS采用CMD规范。AMD与CMD的区别
- seaJS与requireJS的区别
Javascript 模块化概述的更多相关文章
- Javascript模块化编程详解
在这篇文章中,我将会回顾一下js模块化编程的基础,并且将会讲到一些真的非常值得一提的进阶话题,包括一个我认为是我自创的模式. 模块化编程是一种非常常见Javascript编程模式.它一般来说可以使得代 ...
- Javascript模块化编程(三):require.js的用法
Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...
- Javascript模块化编程(二):AMD规范
Javascript模块化编程(二):AMD规范 作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_d ...
- Javascript模块化编程(一):模块的写法
Javascript模块化编程(一):模块的写法 作者: 阮一峰 原文链接:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html ...
- Javascript模块化编程(二):AMD规范(转)
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
- Javascript模块化编程(一):模块的写法(转)
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...
- Javascript模块化规范
Javascript模块化规范 一.前端js模块化由来与演变 CommonJS 原来叫 ServerJS,推出 Modules/1.0 规范后,在 Node.js 等环境下取得了很不错的实践.09年下 ...
- Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。
随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...
- Javascript 模块化开发上线解决方案
最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...
随机推荐
- linux系统,没有安装任何编辑器的情况,如何操作文件
[清空文件] echo " " > filename [添加内容] echo "123" >> filename
- EOS基础全家桶(十四)智能合约进阶
简介 通过上一期的学习,大家应该能写一些简单的功能了,但是在实际生产中的功能需求往往要复杂很多,今天我就继续和大家分享下智能合约中的一些高级用法和功能. 使用docker编译 如果你需要使用不同版本的 ...
- Cache写策略(Cache一致性问题与骚操作)
写命中 写直达(Write Through) 信息会被同时写到cache的块和主存中.这样做虽然比较慢,但缺少代价小,不需要把整个块都写回主存.也不会发生一致性问题. 对于写直达,多出来%10向主存写 ...
- [POJ3977] Subet(二分枚举)
解题报告 前置知识:折半查找法(二分法) 顾名思义,折半就是把一组数据(有序)分成两半,判断我们要找的key值在哪一半当中,不断重复该操作直至找到目标key值,这玩意说白了就是二分的另一个名字. 解决 ...
- POJ3262贪心
题意:FJ去砍树,然后和平时一样留了 N (2 ≤ N ≤ 100,000)头牛吃草.当他回来的时候,他发现奶牛们正在津津有味地吃着FJ种的美丽的花!为了减少后续伤害,FJ决定立即采取行动:运输每头牛 ...
- day52作业
做一个小米商城首页的头部 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- Beautiful Soup 4 方法便捷查询
目录 BS4便捷查询 属性 子节点 父节点 兄弟节点 格式化输出 搜索文档树 修改文档树 BS4便捷查询 准备 : import requests, re from bs4 import Beauti ...
- Maven 专题(四):什么是Maven
1 Maven 简介 Maven 是 Apache 软件基金会组织维护的一款自动化构建工具,专注服务于 Java 平台的项目构建和 依赖管理.Maven 这个单词的本意是:专家,内行.读音是['meɪ ...
- java 基本语法(十九)Optional类的使用
java.util.Optional类1.理解:为了解决java中的空指针问题而生!Optional<T> 类(java.util.Optional) 是一个容器类,它可以保存类型T的值, ...
- mongodb(二):数据库安装,部署(linux)
1.下载安装包 wget http://fastdl.mongodb.org/linux/mongodb-linux-i686-1.8.2.tgz 下载完成后解压缩压缩包 tar zxf mongod ...