如何做JS 单体模式的设计---->>js设计模式<<-------单体模式

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

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

var Person = {
         name: ‘lilu‘,
         age:‘20‘,
         sayHi: function(){
            alert(‘456456‘);
          },
         sayBye: function(){
            alert(‘456456‘);
          }
}

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

如:

Person.name = "zczc";
Person.age = "1000";
var hi = Person.sayHI();

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

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

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

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

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

3.命名空间 的理解

// 声明全局属性

function Hell() {
   // .....
}

// 页面中其他方法

var Hell = $(‘dakjka‘); //Hell 方法在这里被改变

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

改写为如下代码:

var myFun = {
    Hell: function(){
     // code gose here
     }
}

var Hell = $(‘fsfs‘); // Nothing was chenged 

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

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

var MyCode = {};

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

var MyCode  = {};

MyCode.common = {
   // 一个单体对象,包含公共的方法
}

MyCode.Error = {
  //  用来存储数据
}

MyCode.PageHandler = {
  //  用来操作页面的方法和属性
}

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

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

MyCode.Data = {
// 私有成员
   _spave:function(str){
       return  str.replace(‘‘‘‘)
    }

// 共有方法
    test:function(){
    console.log(‘this is common method‘)
   }

}

02.使用闭包

var MyCode = function() {
    return {};
}()

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

也可以写作:

var MyCode = (function(){
    return {};
})()

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

var MyCode.Data = (function(){
  return {
    hell: function(){};
    Bye: function(){};
   }
})();

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

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

var MyCode.Data = (function(){
  // 私有
  var name = "lilu";
  var age = "20";
  function print(){
  console.log(213);
 }

 //共有
  return {
    say:function(){
    alert(123);
     };
    rel:function(){
        alert(4563);
     }
  }

})    

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

时间: 2024-10-25 21:32:54

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

设计模式—建造者模式

1 建造者模式  将一个复杂的对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 建造者返回给客户一个完整的产品对象,而客户端无须关心该对象所包含的属性和组建方式,这就是建造者模式的设计动机. 2  模式解析 建造者模式通常包括下面几个角色: 1. builder:给出一个抽象接口,以规范产品对象的各个组成成分的建造.这个接口规定要实现复杂对象的哪些部分的创建,并不涉及具体的对象部件的创建. 2. ConcreteBuilder:实现Builder接口,针对不同的商业逻辑,具体化复

JS设计模式—单体模式(即时加载/惰性加载)

单体模式作为一种软件开发模式在众多面向对象语言中得到了广泛的使用,在javascript中,单体模式也是使用非常广泛的,但是由于javascript语言拥有其独特的面向对象方式,导致其和一些传统面向对象语言虽然在单体模式的思想上是一致的,但是实现起来还是有差异的. 首先来看看传统面向对象语言对于单体模式的定义:单体模式是只能被实例化一次并且可以通过一个众所周知的访问点来访问的类.这个定义有两点突出了传统面向对象语言的特征,即类和实例化,所以对于传统面向对象语言来讲,单体模式是建立在其类和实例化的

js设计模式--单体模式

单体模式 -单体模式(singleton)是javaScript中最基本最有用的设计模式之一. -这种模式提供了一种将代码组织为一个逻辑单元的手段,这个逻辑单元中的代码可以通过单一 的变量进行访问.通过确保单体对象只存在一份实例,你就可以确信自己的所有代码使用的都是 同样的全局资源. -简单单体 -闭包单体 -惰性单体 -分支单体 <script type="text/javascript" charset="utf-8"> // 单体模式(single

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

看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一字节:爽. 作者:aitangyong 链接:blog.csdn.net/aitangyong/article/details/43231111 抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 javascript给DOM绑定事件

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

什么是面向对象?面向对象是一种思想!(废话). 面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下来将为大家讲解在JS中面向对象的实现. 工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象.其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可. function createBlog(

web开发设计--JS的innerHTML/display属性

1.innerHTML 属性 innerHTML 属性用于获取或替换 HTML 元素的内容. 语法: Object.innerHTML 注意: 1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素. 2.注意书写,innerHTML区分大小写. 我们通过id="con"获取<p> 元素,并将元素的内容输出和改变元素内容,代码如下: <!DOCTYPE HTML> <html>

[转]你的编程语言可以这样做吗?(map/reduce的js示范) (转)

一篇很好的关于map/reduce的示范文章.看了这个,你就会理解prototype.js中Enumerable的精髓. 通过它,你可以写出很多非常奇特非常美妙的代码.短短几行,功能可不简单哦~例如Scriptaculous中,一开篇就应用了一个findAll,两个each.8行代码,其实只是一句而已: $A(document.getElementsByTagName("script")).findAll( function(s) { return (s.src &&

js设计模式-命令模式

命令模式是一种组织型模式,主要用在把调用对象(用户界面.API和代理等)与实现操作的对象隔离开.也就是说 ,凡是两个对象间的互动方式需要更高的模块化程度时都可以用到这种模式. 命令模式的好处:1.提高程序的模块化程度和灵活性.(运用得当):2.实现取消和状态恢复等复杂的有用特性非常容易. 例子:菜单组合对象 1 /** 2 * 菜单组合对象 3 */ 4 5 /*command,Composite and MenuObject interfaces*/ 6 var Command = new I

JQuery validate 在IE兼容模式下出现 js错误(成员找不到)的修正:

JQuery validate 在IE兼容模式下 下出现 js错误(成员找不到)的修正: // Add novalidate tag if HTML5. //this.attr( "novalidate", "novalidate" ); if (typeof (Worker) !== "undefined") { this.attr('novalidate', 'novalidate'); } 将第二行注释掉,换成第三行! JQuery val