JavaScript学习笔记-面向对象的模块化编程
面向对象的模块化编程
模块是一个独立的JS文件,模块文件可以包含一个类定义、一组相关的类、一个实用函数库、一些待执行的代码
模块化的目标:支持大规模的程序开发,处理分散源代码的组装,并能让代码正确执行;不同的模块必须避免修改全局上下文,模块应当尽可能少的定义全局标识;
在模块创建过程中避免污染全局变量的一种方法是使用一个对象作为命名空间('容器');
为了保持干净的全局命名空间,将'容器'类定义为一个单独的全局对象,如:var sets = {};
这个sets对象就是模块的命名空间,并且将每个其它类/变量/方法等都定义为这个对象的属性,可以将这些属性封装起来私有化,也可以通过对外开放接口来达到从外部访问该属性;
调用命名空间内的属性:
(一): var s1 = new sets.Set1(4,5); //直接使用来创建类Set2的实例
(二):var s2 = sets.Set2; //导出类Set1到s1 然后就可以创建实例了 var s3 = new s2(4,5);
多层嵌套的命名空间:
var collections;
if(!collections) collections = {};
collections.sets = {};
collections.sets.A_Class = function(){...}; //在collections.sets命名空间内定义类A_Class
最顶层的命名空间通常用来标识模块作者或组织,可通过网站域名来标识,避免命名冲突,如com.biadu.collections.sets;
可以将整个模块导入:var sets = com.biadu.collections.sets;也可以导入命名空间内单独的类;
按照约定,模块的文件名,目录结构应当和命名空间相匹配:
如: 使用命名空间com.biadu.collections.sets的模块应当在这个文件中:com/biadu/collections/sets.js;
一个模块往往会对外导出(开放)一些公共API,其他人通过这些API来使用这个模块,它包括函数\类\属性\方法;但具体实现模块的一些额外的辅助函数和方法不需要对外开放,在模块外部不可见\不可访问;
模块函数(私有命名空间):用一个模块函数包裹模块的所有属性\函数\方法,并立即执行模块函数;模块函数也可以有名字,但它是用函数表达式定义的,因此这个名字不是全局变量,用法:
( function namespace(){......}() );最外层括号表示是函数表达式,而非声明语句;
一旦将模块代码封装进该模块函数,就需要导出其公共API:
方法一: 将模块函数返回的构造函数赋值给一个全局变量,这样这个变量就可以调用该构造函数指代的类的属性了
方法二:通过return{...};来返回要对外开放的属性,返回给全局变量;
方法三:将模块函数当做构造函数,通过new来调用,然后将要对外开放的属性赋值到this对象中;
方法四:在模块函数里直接设置那个对象的属性;
//====第一种
var Set = (function namespace(){
function Set(){
this.n = 0;
this.add.apply(this,arguments);
}
Set.prototype.contains = function(values){
return v2s(values);
};
Set.prototype.add = function(x,y){return x+y};
function v2s(val){return val*2;}
return Set;
}());
var ss = new Set(1,2,3);
ss.n;
ss.contains(8);
ss.add(5,6);
//====第二种
var collections;
if(!collections) collections = {};
collections.sets = (function namespace1(){
//.........定义代码
var aPropoty=1, b=2;
var aFunction = function(){return aPropoty+b;};
return{
a1:aPropoty,
a2:b,
f:aFunction
};
}() );
collections.sets.f();
collections.sets.a1;
//====第三种
var collections1;
if(!collections1) collections1 = {};
collections1.sets = (new function namespace2(){
var aPropoty=1, b=2;
var aFunction = function(){return aPropoty+b;};
this.a1 = aPropoty;
this.a2 = b;
this.f = aFunction;
}() );
collections1.sets.f();
collections1.sets.a1;
collections1.sets.a2;
//====第四种
var collections2;
if(!collections2) collections2 = {};
collections2.sets = {};
( function namespace(){
var aPropoty=1, b=2;
var aFunction = function(){return aPropoty+b;};
collections2.sets.a1 = aPropoty;
collections2.sets.a2 = b;
collections2.sets.f = aFunction;
}() );
collections2.sets.a1;
collections2.sets.a2;
collections2.sets.f();
JavaScript学习笔记-面向对象的模块化编程的更多相关文章
- jquery学习笔记---requirejs 和模块化编程
http://www.cnblogs.com/lisongy/p/4711056.html jquery模块化编程:http://www.cnblogs.com/digdeep/p/4602460.h ...
- 高性能javascript学习笔记系列(3) -DOM编程
参考 高性能javascript 文档对象模型(DOM)是独立于语言的,用于操作XML和HTML文档的程序接口API,在浏览器中主要通过DOM提供的API与HTML进行交互,浏览器通常会把DOM和ja ...
- javascript学习笔记 - 面向对象 理解对象
ECMAScript 中有两种属性:数据属性和访问器属性 一 属性类型 1.数据属性.数据属性有4个描述其行为的特性 [[Configurable]]表示能否通过delete删除属性从而重新定义属性: ...
- Java程序猿的JavaScript学习笔记(6——面向对象模拟)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- 0028 Java学习笔记-面向对象-Lambda表达式
匿名内部类与Lambda表达式示例 下面代码来源于:0027 Java学习笔记-面向对象-(非静态.静态.局部.匿名)内部类 package testpack; public class Test1{ ...
- C#学习笔记——面向对象、面向组件以及类型基础
C#学习笔记——面向对象.面向组件以及类型基础 目录 一 面向对象与面向组件 二 基元类型与 new 操作 三 值类型与引用类型 四 类型转换 五 相等性与同一性 六 对象哈希码 一 面向对象与面向组 ...
- Java程序猿的JavaScript学习笔记(汇总文件夹)
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- Java程序猿的JavaScript学习笔记(8——jQuery选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记(2——复制和继承财产)
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
随机推荐
- Suse碎碎念
1. 如何查看Suse的版本号 vmpbos01:~ # lsb_release -d Description: SUSE Linux Enterprise Server 11 (x86_64) vm ...
- Kruskal算法(三)之 Java详解
前面分别通过C和C++实现了克鲁斯卡尔,本文介绍克鲁斯卡尔的Java实现. 目录 1. 最小生成树 2. 克鲁斯卡尔算法介绍 3. 克鲁斯卡尔算法图解 4. 克鲁斯卡尔算法分析 5. 克鲁斯卡尔算法的 ...
- web基础---->request的请求参数分析
当contentType为application/json的时候,在servlet中通过request.getParameter得到的数据为空.今天我们就java的请求,分析一下request得到参数 ...
- javascript学习6
JavaScript Boolean(逻辑)对象 Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false). 实例 检查逻辑值 检查逻辑对象是 true 还是 false. ...
- Azure ARM (5) ARM Template初探 - 本地JSON Template文件(1)
<Windows Azure Platform 系列文章目录> Azure ARM (1) 概览 Azure ARM (2) 概览 Azure ARM (3) ...
- CentOS7 Java安装
CentOS7 Java安装 CentOS7 Java安装 Download 从Oracle下载jdk-8u31-linux-x64.rpm Install 御载 执行如下命令 java -versi ...
- UI/UE/ID/UED/UCD的区别
简述: UI (User Interface):用户界面 UE (User Experience):用户体验 ID (Interaction design):交互设计 UID (User Interf ...
- LeetCode - 51. N-Queens
51. N-Queens Problem's Link ------------------------------------------------------------------------ ...
- C#去掉HTML标记
该方法亲测可行,下面直接粘贴代码. public string RemoveHTMLTags(string htmlStream) { if (htmlStream == null) { throw ...
- [Asp.net 5] DependencyInjection项目代码分析4-微软的实现(4)
这个系列已经写了6篇,链接地址如下: [Asp.net 5] DependencyInjection项目代码分析 [Asp.net 5] DependencyInjection项目代码分析2-Auto ...