文档章节

浅谈Javascript模块化开发

jackzlz
 jackzlz
发布于 2015/08/17 23:11
字数 839
阅读 207
收藏 8

自己接触过的几种javascript模块开发,由于水平有限,只能简单谈一谈。


立即执行匿名函数

由于javascript的函数作用域,将模块代码放入立即执行匿名函数中,防止污染全局变量。将需要对外提供的类或对象暴露到window对象中。

需要实例化的模块

定义
// mod1.js
(function(window) {

	var defaultOpts = {};

	// 外部传入一些配置选项,也可不传入以默认选项实现
	var Module1 = function(options) {
		this.options = $.extend(true, {}, defaultOpts, options);
		this.init();
	};

	// 将需要对外提供的方法加到原型链上
	Module1.prototype = {
		constructor : Module1,
		init : function() {
			this.initPage();
			this.initEvent();
			this.initOther();
		},
		initPage : function() {
		},
		initEvent : function() {
			method1();
		},
		initOther : function() {
		},
		getOne : function(){}
		// 其他需要对外提供的接口
	};
	
	// 不需要对外提供的方法
	function method1() {
	}
	
	// 暴露模块到window对象中
	window.Module1 = Module1;
}(window));
使用
// mod1
var mod1 = new Module1({opt1:"",opt2:""});
var one = mod1.getOne();
// mod2
var mod2 = new Module1();
var one = mod2.getOne();

不需要实例化的模块

定义
var mod1 = (function() {
	
	// !!!"全局"变量会共享
	var var1 = "abc";

	function getOne() {

	}

	function getTwo() {

	}

	var module1 = {
		m1 : getOne,
		m2 : getTwo
	};

	return module1;
})();
使用
var one = mod1.m1();
var two = mod1.m2();

总结

**优点:**不依赖第三方框架; **缺点:**使用前必须预先加载js文件;当模块存在依赖时,依赖js的加载顺序。

seajs中的模块化

seajs遵循CMD规范(RequireJS 遵循AMD规范) 。两者不同之处。将匿名函数的写法替换成seajs的写法非常简单,只需要将声明和导出部分替换即可。

需要实例化的模块

定义
define(function(require, exports, module) {
	var defaultOpts = {};

	// 外部传入一些配置选项,也可不传入以默认选项实现
	var Module1 = function(options) {
		this.options = $.extend(true, {}, defaultOpts, options);
		this.init();
	};
	
	// 其他代码与匿名函数一致
	// ...
	
	// 导出不再使用window对象
	module.exports = Module1;
});
使用
define(function(require, exports, module) {
	// 相对于sea.js的目录。模块目录就是md/mod1.js
	// require时可以省略.js
	var Module1 = require("md/mod1");
	
	// mod1
	var mod1 = new Module1({opt1:"",opt2:""});
	var one = mod1.getOne();
	// mod2
	var mod2 = new Module1();
	var one = mod2.getOne();
});

不需要实例化的模块

定义
define(function(require, exports, module) {
	var var1 = "abc";

	function getOne() {
	}
	function getTwo() {
	}

	// 导出不再使用window对象
	module.exports = {
		m1 : getOne,
		m2 : getTwo
	};
});
使用
define(function(require, exports, module) {
	var mod1 = require("md/mod1");
	
	var one = mod1.m1();
	var two = mod1.m2();
});

参考

Sea.js官网 Why SeaJS seajs模块化jQuery与jQuery插件 如何改造现有文件为 CMD 模块

ECMAScript6中的模块化

为了解决JavaScript中的模块化问题,ECMAScript6在语言层面上实现了模块功能; ECMAScript6中有了块级作用域,立即执行匿名函数就不再必要了; ECMAScript6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

需要实例化的模块

定义
// mod1.js
{
	class Module1 {
		let defaultOpts = {};
		constructor(options) {
			this.options = $.extend(true, {}, defaultOpts, options);
			this.init();
		}
		init() {
			this.initPage();
			this.initEvent();
			this.initOther();
		}
		initPage() {
		}
		initEvent() {
		}
		initOther() {
		}
		getOne() {
		}
	}
	// 自定义模块并导出
	export { Module1 }
}
使用
// 导入
import { Module1 } from 'md/mod1';
// mod1
let mod1 = new Module1({opt1:"",opt2:""});
let one = mod1.getOne();
// mod2
let mod2 = new Module1();
let one = mod2.getOne();

不需要实例化的模块

定义
{
	let var1 = "abc";

	function getOne() {
	}
	function getTwo() {
	}

	// 导出
	export {getOne, getTwo}
}
使用
// 导入
import { getOne, getTwo} from 'md/mod1';
let one = getOne();
let two = getTwo();
// 整体导入
import * as mod1 from 'md/mod1';
// 或者
module mod1 from 'md/mod1';
let one = mod1.m1();
let two = mod1.m2();

参考

ECMAScript 6入门

© 著作权归作者所有

共有 人打赏支持
jackzlz
粉丝 20
博文 22
码字总数 9645
作品 0
深圳
程序员
私信 提问
细说JavaScript数据类型及转换

细说JavaScript数据类型及转换 JavaScript数据类型 1.Boolean(布尔) 布尔:(值类型)var b1=true;//布尔类型 2.Number(数字) 数值:(值类型)var n1=3.1415926;//数值类型 n1.toFixed...

开元中国2015
2015/07/13
0
0
seaJs学习笔记之javascript的冲突问题

seaJs是一个处理模块化的JS开源库,在学习seaJs之前还是要了解一下什么是JS模块化的一些概念,知道这个之后,会更好的了解seaJs的使用。  首先先看一下下面的这个问题。当你的学习教程网站...

xuexijc
2013/11/27
0
0
每个 JavaScript 工程师都应懂的33个概念

简介 这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备,但在未来学习(JavaScript)中,可以作为一篇指南。 本篇文章是参照 @leonardomso 创立,英文版项目地址在这里。 ...

前端小攻略
02/17
0
0
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║ Vue前篇:ES6初体验 & 模块化编程

缘起 昨天说到了《[从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this](https://www.cnblogs.com/laozhang-is-phi/p/9580807.html)》,通过总体来看,好像大家...

laozhang_is_phi
2018/09/05
0
0
2015 年开源前端框架盘点 TOP 20

2015年已经过去了,作为一个前端开发者,我觉得有必要把过去一年帮助过我或朋友们的优秀开源前端框架做个盘点,希望这些项目能够越来越好,帮助到更多的前端开发者们。 此榜单根据github上s...

wuhen147
2016/01/11
25K
34

没有更多内容

加载失败,请刷新页面

加载更多

matlab-线性代数 将矩阵变成列、行向量

  matlab : R2018a 64bit     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   将矩阵变成列、行向量(按照......

志成就
13分钟前
0
0
开始使用Filebeat

认识Beats Beats是用于单用途数据托运人的平台。它们以轻量级代理的形式安装,并将来自成百上千台机器的数据发送到Logstash或Elasticsearch。 (画外音:通俗地理解,就是采集数据,并上报到...

北极南哥
15分钟前
0
0
shell getopts template

!/bin/bash# ------------------------------------------------------------------# [Author] Title# Description# ---------------------------------------------------......

易野
31分钟前
0
0
DHCP服务原理与搭建(Linux系统+路由器,二选一方案)

大家都知道上网的最基本前提是要在终端上设置IP、子网掩码、网关、DNS等地址信息,在家里或者在办公室很多时候打开电脑后发现就可以上网,并没有手动设置IP、掩码、DNS地址也能上网,这是什么...

老率的IT私房菜
40分钟前
5
0
GitLab的安装及使用教程

首页 新随笔 管理 随笔 - 575 文章 - 0 评论 - 27 GitLab的安装及使用教程 1、配置yum源 vim /etc/yum.repos.d/gitlab-ce.repo 复制以下内容: [gitlab-ce] name=Gitlab CE Repository base...

rootliu
47分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部