文档章节

初识JavaScript中的模块

小王JOJO
 小王JOJO
发布于 2015/04/13 17:08
字数 504
阅读 98
收藏 5

模块

    模块可以提供一个接口,并且隐藏其中的状态与实现的的函数或者对象,利用模块我们可以完全屏蔽全局变量的使用(全局变量太坑了,55555)

一个小例子

Function.prototype.method = function(name,func){
	this.prototype[name] = func;
	return this;
}
String.method("def",function(){
	var ent = {
		quot:'""',
		lt:'<',
		gt:'>'
	};
	//这里的整个匿名自执行函数是window调用的
	//this---->window


	
	return function(){
		return this.replace(/&([^&;]+);/g,function(a,b){
			var r = ent[b];
			return typeof r ==="string" ? r : b;
		});
	};

}());




/**************test*********************/
var  a = "&lt;&quot;&gt;".def();
console.log(a);//<"">

在String的自定义def属性 , 这个属性是一个自执行函数, 它会return一个新的函数,并赋值给def(比较绕........),这个新的函数就是最终的在String添加的def方法,只有他才有权力访问内部的ent 对象

一个单例模式

再看一个生成密匙的例子

<!-- lang: js -->
//模块生成安全的对象
var serial_maker = function (){
	var prefix = "";
	var seq = 0;
	return {	
		set_seq:function(s){
			seq = s;
		},
		set_pre:function(p){
			prefix = p;
		},
		gensym:function(){
			var result = prefix + seq;
			seq += 1;
			return result;
		}
	}
}

var seqer = serial_maker();
seqer.set_pre("W");
seqer.set_seq(100);

console.log(seqer.gensym());//W100
console.log(seqer.gensym());//W101
console.log(seqer.gensym());//W102

这里在是返回一个对象,这个对象里的属性是函数,这些函数能访问serial_maker 中定义的变量,而且外面是无法修改serial_maker变量中的值的,serial_maker 返回的值是唯一的

#PS

模块是JavaScript编程的重要思想 , 其实很多情况下,我感觉用模块是比较好的选择,并不是一定要用面向对象的思想,好多框架也是建立在模块的基础的上,比如jQuery,使用的就是架构用面向对象,内部实现使用模块的模式,影响比较神的是jQuery在延迟对象和回调函数部分,内部就使用了模块的方法实现

© 著作权归作者所有

共有 人打赏支持
小王JOJO
粉丝 1
博文 7
码字总数 5082
作品 0
西青
程序员
私信 提问
HTML 5视频教程系列之JavaScript学习篇-何韬-专题视频课程

HTML 5视频教程系列之JavaScript学习篇—52816人已学习 课程介绍 HTML 5视频教程系列中JavaScript开发的基础知识讲解及学习。 课程收益 通过自学视频掌握HTML 5开发手机应用和手机游戏的技能...

pkutao
2015/02/10
0
0
Node.js---01、初识NodeJS和Node.js的HTTP服务器搭建

一、前言 我们先从以下几个方面在大体上认识一下Node.js: Node.js 是什么?==> 运行环境 是一个 可以运行 并加载 ES语法的 脚本运行环境 JS(ES5)、ES6、Common.js 语法 …… Node.js 可以加...

秋季长青
2017/11/06
0
0
React Native 从入门到原理

React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几。 本文分为两个部分:上半部分用通俗的语...

guozhendan
06/26
0
0
谈谈神秘的ES6——(一)初识ECMAScript

谈谈神秘的ES6——(一)初识ECMAScript 在《零基础入门JavaScript》我们就说过,ECMAScript是JavaScript的核心,是JavaScript语法和语义的解释器,同时也是一个标准。而ECMAScript标准其实也...

JandenMa
07/18
0
0
js Event Loop 运行机制

Event Loop,事件环,线程进程。这些概念对初识前端的同学来说可能会一头雾水。而且运行js代码的运行环境除了浏览器还有node。因此不同环境处理Event Loop又变得不同,十分容易混淆。如果你有...

satomiyoyi07
08/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring应用学习——AOP

1. AOP 1. AOP:即面向切面编程,采用横向抽取机制,取代了传统的继承体系的重复代码问题,如下图所示,性能监控、日志记录等代码围绕业务逻辑代码,而这部分代码是一个高度重复的代码,也就...

江左煤郎
今天
1
0
eclipse的版本

Eclipse各版本代号一览表 Eclipse的设计思想是:一切皆插件。Eclipse核心很小,其它所有功能都以插件的形式附加于Eclipse核心之上。 Eclipse基本内核包括:图形API(SWT/Jface),Java开发环...

mdoo
今天
1
0
SpringBoot源码:启动过程分析(一)

本文主要分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 还是老套路,先把分析过程的时序图摆出来:时序图-SpringBoot2.10启动分析 二.源码分析 首...

Jacktanger
今天
3
0
小白带你认识netty(二)之netty服务端启动(上)

上一章 中的标准netty启动代码中,ServerBootstrap到底是如何启动的呢?这一章我们来瞅下。 server.group(bossGroup, workGroup);server.channel(NioServerSocketChannel.class).optio...

天空小小
今天
3
0
聊聊storm trident batch的分流与聚合

序 本文主要研究一下storm trident batch的分流与聚合 实例 TridentTopology topology = new TridentTopology(); topology.newStream("spout1", spout) .p......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部