1. 单体模式是js中最基本 单最有用的模式之一,非常常用。

单体模式的基本结构如下:

  1. var Person = {
  2. name: 'lilu',
  3. age:'',
  4. sayHi: function(){
  5. alert('');
  6. },
  7. sayBye: function(){
  8. alert('');
  9. }
  10. }

这个栗子中,所有的成员都可以通过Person进行访问,用点运算符就行。

如:

  1. Person.name = "zczc";
  2. Person.age = "";
  3. var hi = Person.sayHI();

我们可以为这个单体对象添加新的成员变量或者方法,意味着这个对象可以被修改。这么做,违背2了面相对象设计的一条原则:---->>类可以被扩展,但不应该被修改<<------。

那么什么才是真正的单体模式?

先看定义:单体是一个用来划分命名空间并将一批相关方法和属性组织在一起的对象,如果它可以被实例化,那么它只能被实例化一次。

对象字面量只是创建单体的方法之一,并非所有对象字面量都是单体。如果它只是用来模拟数组或储存数据,显然不是单体。主要看我们的意图。

2. 单体对象有两部分组成:包含着方法和属性的成员对象自身,以及用于访问它的变量。这个变量同事是全局的。  以便于在网页上任何地方都能访问它所指向的单体对象。虽然说按照定义单体不一定必须是全局的,但是它应该在各个地方都能被访问。由于这些成员只能通过这个单体对象变量进行访问,在某种意义上说,它们被单体对象全在了一个命名空间中。

3.命名空间 的理解

  1. // 声明全局属性
  2.  
  3. function Hell() {
  4. // .....
  5. }
  6.  
  7. // 页面中其他方法
  8.  
  9. var Hell = $('dakjka'); //Hell 方法在这里被改变

函数中使用var 声明很重要,如果不用,那么变量将被声明为全局属性,因此容易干扰全局命名空间中的其他代码。

改写为如下代码:

  1. var myFun = {
  2. Hell: function(){
  3. // code gose here
  4. }
  5. }
  6.  
  7. var Hell = $('fsfs'); // Nothing was chenged

现在Hell是myFun中的一个方法,不会别全局命名空间中的任何新变量改写。

命名空间还可以进一步分割。 网页上的JS 代码不止有一个来源。除了我们的代码,还有库代码,广告代码之列,这些变量都出现在网页的全局命名空间中。为了防止冲突,我们可以定义一个包含自己所有代码的全局对象。

var MyCode = {};

然后分门别类将自己的代码和数据组织到全局对象的各个对象中:

  1. var MyCode = {};
  2.  
  3. MyCode.common = {
  4. // 一个单体对象,包含公共的方法
  5. }
  6.  
  7. MyCode.Error = {
  8. // 用来存储数据
  9. }
  10.  
  11. MyCode.PageHandler = {
  12. // 用来操作页面的方法和属性
  13. }

4. 创建私有成员--->>使用私有方法有一个缺点--比较耗费内存,因为每个实例都具有一个方法的副本。

01.用下划线表示私有成员

  1. MyCode.Data = {
  2. // 私有成员
  3. _spave:function(str){
  4. return str.replace('''')
  5. }
  6.  
  7. // 共有方法
  8. test:function(){
  9. console.log('this is common method')
  10. }
  11.  
  12. }

02.使用闭包

  1. var MyCode = function() {
  2. return {};
  3. }()

匿名函数返回一个对象,赋给MyCode;

也可以写作:

  1. var MyCode = (function(){
  2. return {};
  3. })()

我们可以摆共有成员添加到作为单体返回的那个对象字面量中

  1. var MyCode.Data = (function(){
  2. return {
  3. hell: function(){};
  4. Bye: function(){};
  5. }
  6. })();

如果这样写得到的结果跟使用一个对象字面量没有什么区别,那为什么还要加上外层函数包装呢?

原因就在于这个包装函数创建了一个可以用来添加真正的私用成员的闭包。任何声明在这个匿名函数中的变量或者函数都只能被在同一个闭包中声明的其他函数访问。这个闭包在匿名函数执行结束后依然存在,所以在其中声明的变量和函数总是能从匿名函数所返回的对象内部访问。

  1. var MyCode.Data = (function(){
  2. // 私有
  3. var name = "lilu";
  4. var age = "";
  5. function print(){
  6. console.log();
  7. }
  8.  
  9. //共有
  10. return {
  11. say:function(){
  12. alert();
  13. };
  14. rel:function(){
  15. alert();
  16. }
  17. }
  18.  
  19. })

这些在return 中的方法都是共有方法,可以直接方位私有属性,而不用再前面加this.  -->这个前缀只用于访问单体对象的公用成员。

如何做JS 单体模式的设计---->>js设计模式<<-------单体模式的更多相关文章

  1. .NET设计模式: 工厂模式

    .NET设计模式: 工厂模式(转) 转自:http://www.cnblogs.com/bit-sand/archive/2008/01/25/1053207.html   .NET设计模式(1): ...

  2. js设计模式--单体模式

    GOF里的23种设计模式, 也是在软件开发中早就存在并反复使用的模式. 如果程序员没有明确意识到他使用过某些模式, 那么下次他也许会错过更合适的设计 (这段话来自<松本行弘的程序世界>). ...

  3. h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

  4. 自己做的网页页面导航浏览JS/JQuery

    需求: 当页面是由一个巨大的表格构成时,浏览器自动会出现纵向和横向滚动条,这时用户浏览页面会出现很蛋疼的感受,那就是恶心的横向滚动条! 为了减缓这种蛋疼的感觉,我尝试做了这个导航器(不知道如何称呼), ...

  5. 看懂此文,不再困惑于 JS 中的事件设计

    看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...

  6. JS 中的事件设计

    看懂此文,不再困惑于 JS 中的事件设计 原文出处: aitangyong    抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 ...

  7. JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

    什么是面向对象?面向对象是一种思想. 面向对象可以把程序中的关键模块都视为对象, 而模块拥有属性及方法. 这样如果我们把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.   工厂 ...

  8. js面向对象的程序设计 --- 中篇(创建对象) 之 工厂模式和 构造函数模式

    创建对象 虽然Object构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量重复代码. ·工厂模式 工厂模式是一种广为人知的设计模式,这种模式 ...

  9. 基于 Angularjs&Node.js 云编辑器架构设计及开发实践

    基于 Angularjs&Node.js 云编辑器架构设计及开发实践 一.产品背景 二.总体架构 1. 前端架构 a.前端层次 b.核心基础模块设计 c.业务模块设计 2. Node.js端设 ...

随机推荐

  1. hadoop配置

    配置参考博客:(目前有问题,百度说官网的是32bit,现在正在尝试64位 http://www.powerxing.com/install-hadoop-cluster/

  2. 3sum问题的解决

    其实一开始想错了,把这个问题想难了,导致没有思路,现在好了很多. 题目: Given an array S of n integers, are there elements a, b, c in S ...

  3. BZOJ 3676: [Apio2014]回文串

    3676: [Apio2014]回文串 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 2013  Solved: 863[Submit][Status ...

  4. BZOJ 4726: [POI2017]Sabota?

    4726: [POI2017]Sabota? Time Limit: 20 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 301  Solved ...

  5. Redis集群研究和实践(基于redis 3.0.5)

    前言 redis 是我们目前大规模使用的缓存中间件,由于它强大高效而又便捷的功能,得到了广泛的使用.现在的2.x的稳定版本是2.8.19,也是我们项目中普遍用到的版本. redis在年初发布了3.0. ...

  6. Python操作MySQL

    本篇对于Python操作MySQL主要使用两种方式: 原生模块 pymsql ORM框架 SQLAchemy pymsql pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb ...

  7. LogStash filter介绍(九)

    LogStash plugins-filters-grok介绍 官方文档:https://www.elastic.co/guide/en/logstash/current/plugins-filter ...

  8. linux下libevent安装

    wget http://monkey.org/~provos/libevent-1.4.13-stable.tar.gz tar –xzvf libevent-1.4.13-stable.tar.gz ...

  9. 没有素描色彩基础适合学习UI吗,如果可以,该怎么学?

      文章背景,来自[ UI设计交流群 - 92588284 ]的一次探讨,由于个人视野有限,个中观点有失狭隘,仅供参考,欢迎拍砖: 问题一:一个朋友想学UI设计,没有任何基础的,也没有美术功底,想问问 ...

  10. [译]flexbox全揭秘

    原文:http://css-tricks.com/snippets/css/a-guide-to-flexbox/ 弹性布局(弹性盒子,现今仍是w3c的候选推荐),目标在于,对于一个容器中的各个项目块 ...