文档章节

初识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
javascript——从「最被误解的语言」到「最流行的语言」

JavaScript曾是“世界上最被误解的语言”,因为它担负太多的特性,包括糟糕的交互和失败的设计,但随着Ajax的到来,JavaScript“从最受误解的编程语言演变为最流行的语言”,这除了幸运之外,...

modernizr
2014/05/20
1K
12
React Native 从入门到原理

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

guozhendan
2018/06/26
0
0
初识 Web Component

1. 前言 组件化这个词 应该大家耳朵都听起茧巴了 在 三个大佬 的带领下 , 我们前端 是否终于告别了 粘贴复制的 "组件化" 时代 这些高质量 且开箱即用 的 ui 库更是让组件化开发更上一层楼. 如...

lijinke666
2018/12/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mybaties中通用mapper的基本使用

使用Mybatis的开发者,大多数都会遇到一个问题,就是要写大量的SQL在xml文件中,除了特殊的业务逻辑SQL之外,还有大量结构类似的增删改查SQL。而且,当数据库表结构改动时,对应的所有SQL以及...

嘴角轻扬30
31分钟前
1
0
都996了,研发效能还是提不起来,关键在这里

上一篇我们介绍了研发效能提升目标及其度量方法。(本文是阿里“研发效能提升系列”的第2篇,第1篇“研发效能的定义和度量”敬请期待【下周三】的钉钉群直播:钉钉搜索群号 23192180) 研发效...

zhaowei121
31分钟前
2
0
阿里重磅开源首款自研科学计算引擎Mars,揭秘超大规模科学计算

日前,阿里巴巴正式对外发布了分布式科学计算引擎 Mars 的开源代码地址,开发者们可以在pypi上自主下载安装,或在Github上获取源代码并参与开发。 此前,早在2018年9月的杭州云栖大会上,阿里...

阿里云云栖社区
34分钟前
2
0
大牛是怎么思考设计SQL优化方案的?

在进行MySQL的优化之前,必须要了解的就是MySQL的查询过程,很多查询优化工作实际上就是遵循一些原则,让MySQL的优化器能够按照预想的合理方式运行而已。 图-MySQL查询过程 一、优化的哲学 ...

Java填坑路
43分钟前
1
0
docker1.7 Error: Path not specified 错误

在centos6.1上,用yum命令安装的docker版本是1.7 。在拷贝文件的时候报 Error: Path not specified错误。 错误消息“错误:路径未指定” 在docker1.8.0中已修复。 修复方法: 直接下载1.9.1...

applepaihs
43分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部