javascript模块化应用
无模块时代

- if(xx){
- //.......
- }
- else{
- //xxxxxxxxxxx
- }
- for(var i=0; i<10; i++){
- //........
- }
- element.onclick = function(){
- //.......
- }

模块萌芽时代
- <script type="text/javascript" src="a.js"></script>
- <script type="text/javascript" src="b.js"></script>

- modA = function(){
- var a,b; //变量a、b外部不可见
- return {
- add : function(c){
- a + b + c;
- },
- format: function(){
- //......
- }
- }
- }()

- app.util.modA = xxx;
- app.tools.modA = xxx;
- app.tools.modA.format = xxx;
- app.tools.modA.format();

- (function(window){
- //代码
- window.jQuery = window.$ = jQuery;//通过给window添加属性而暴漏到全局
- })(window);

模块化面临什么问题
源自nodejs的规范CommonJs

- //math.js
- exports.add = function() {
- var sum = 0, i = 0, args = arguments, l = args.length;
- while (i < l) {
- sum += args[i++];
- }
- return sum;
- };


- //increment.js
- var add = require('math').add;
- exports.increment = function(val) {
- return add(val, 1);
- };

- //program.js
- var inc = require('increment').increment;
- var a = 1;
- inc(a); // 2
服务端向前端进军
- //可以使用exprots来对外暴漏API
- module.declare(function(require, exports, module)
- {
- exports.foo = "bar";
- });
- //也可以直接return来对外暴漏数据
- module.declare(function(require)
- {
- return { foo: "bar" };
- });
AMD/RequireJs的崛起与妥协

- //a.js
- define(function(){
- console.log('a.js执行');
- return {
- hello: function(){
- console.log('hello, a.js');
- }
- }
- });


- //b.js
- define(function(){
- console.log('b.js执行');
- return {
- hello: function(){
- console.log('hello, b.js');
- }
- }
- });


- //main.js
- require(['a', 'b'], function(a, b){
- console.log('main.js执行');
- a.hello();
- $('#b').click(function(){
- b.hello();
- });
- })

b.js执行
main.js执行
hello, a.js
- define(['a', 'b', 'c', 'd', 'e', 'f', 'g'], function(a, b, c, d, e, f, g){ ..... })

- define(function(){
- console.log('main2.js执行');
- require(['a'], function(a){
- a.hello();
- });
- $('#b').click(function(){
- require(['b'], function(b){
- b.hello();
- });
- });
- });

a.js执行
hello, a.js

- var a = require('a');
- a.hello();
- $('#b').click(function(){
- var b = require('b');
- b.hello();
- });


- //d.js
- define(function(require, exports, module){
- console.log('d.js执行');
- return {
- helloA: function(){
- var a = require('a');
- a.hello();
- },
- run: function(){
- $('#b').click(function(){
- var b = require('b');
- b.hello();
- });
- }
- }
- });

- require(['d'], function(d){
- });
b.js执行
d.js执行
兼容并包的CMD/seajs

- //a.js
- define(function(require, exports, module){
- console.log('a.js执行');
- return {
- hello: function(){
- console.log('hello, a.js');
- }
- }
- });


- //b.js
- define(function(require, exports, module){
- console.log('b.js执行');
- return {
- hello: function(){
- console.log('hello, b.js');
- }
- }
- });


- //main.js
- define(function(require, exports, module){
- console.log('main.js执行');
- var a = require('a');
- a.hello();
- $('#b').click(function(){
- var b = require('b');
- b.hello();
- });
- });

a.js执行
hello, a.js
hello, b.js
- var b = require.async('b');
- b.hello();
面向未来的ES6模块标准
- //方式一, a.js
- export var a = 1;
- export var obj = {name: 'abc', age: 20};
- export function run(){....}
- //方式二, b.js
- var a = 1;
- var obj = {name: 'abc', age: 20};
- function run(){....}
- export {a, obj, run}
- import {run as go} from 'a'
- run()
- module foo from 'a'
- console.log(foo.obj);
- a.run();
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模块化开发的方式和自动化合并压缩的一些自己的处 ...
- Javascript模块化编程(二):AMD规范 作者: 阮一峰
声明:转载自阮一峰的网络日志 这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可 ...
- Javascript模块化编程(一):模块的写法 作者: 阮一峰
声明:转载自阮一峰的网络日志 随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理. ...
随机推荐
- ASP.NET 5探险(1):Azure中配置连接字符串、独立项目执行EF7数据迁移
(此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注.) 题记:我开始把ASP.NET 5用于生产系统开发已经有1个多月了,也填了一些坑积累了一些经验,从今天开始会陆陆续 ...
- long和int的区别
转自:http://blog.sina.com.cn/s/blog_6f62c9510101svjz.html 突然间就想到了long和int到底什么区别(发现有很多问题都是突然间想到的),然后百度. ...
- C语言中main函数的参数
转自:http://blog.csdn.net/cnctloveyu/article/details/3905720 我们经常用的main函数都是不带参数的.因此main 后的括号都是空括号.实际上, ...
- 同一天的时间差,显示为HHMMSS和指定日期时间部分
//1.hhmmss private String setGoodsDisBalance(Date startTime,Date endTime){ //时间差:毫秒ms long diff = en ...
- jQuery Mobile Datepicker 使用
插件引入文件: <meta name="viewport" content="width=device-width, initial-scale=1"&g ...
- Java利用Preferences设置个人偏好
Java利用Preferences设置个人偏好 Preferences的中文意思即偏好或喜好的意思,也就是说同一个程序在每次运行完后,可以通过Preferences来记录用户的偏好,下次启动时,程序会 ...
- Linux C编程(1) vim及gcc命令
1. 输入以下命令可以启动vi: (1) vi:不指定文件名,在保存文件时需要指定文件名. (2) vi 文件名:该文件既可以是已存在的,也可以是新建的. (3) vi ...
- 【项目经验】navicat工具 SQLServer数据库迁移MySQL
新近领了一个任务,就是把SQL Server的数据库迁移到My Sql上,经过查资料,圆满完成任务.分享一下流程. 1.首先,在自己的My Sql数据库上新建一个数据库. 2.打开新建的My Sql数 ...
- Jmeter 小攻略(转)
http://www.myexception.cn/open-source/1346307.html
- kylin1.5新特性 new aggregation group
终于啃完并理解了,我果然弱鸡.new aggregation group,是kylin 1.5的新特性:老版本中的agg是需要选中所有可能被使用的纬度字段,以供查询:但存在高纬度的查询需求,例如查询某 ...