首页 > 语言 > JavaScript > 正文

javascript常用的设计模式

2024-05-06 15:01:20
字体:
来源:转载
供稿:网友

js最好是一种面向对象的语言。它的出现时比较迟的。但是它是目前最火的脚本语言。而且,随着近期的微信商城等页面的兴起,相信程序员和互联网的从业者都知道了js正在势头上了。

那么,如果你想要在前端这条路上走得更远,设计模式就必须要懂。下面介绍几种常见的设计模式。

一、单例模式

单例模式也称作为单子模式,更多的也叫做单体模式。为软件设计中较为简单但是最为常用的一种设计模式。 在JavaScript里,实现单例的方式有很多种,其中最简单的一个方式是使用对象字面量的方法,其字面量里可以包含大量的属性和方法:

var mySingleton = {property1: "something",property2: "something else",method1: function () {  console.log('hello world');}};

如果以后要扩展该对象,你可以添加自己的私有成员和方法,然后使用闭包在其内部封装这些变量和函数声明。只暴露你想暴露的public成员和方法,样例代码如下:

 var mySingleton = function () {  /* 这里声明私有变量和方法 */  var privateVariable = 'something private';  function showPrivate() {    console.log(privateVariable);  }  /* 公有变量和方法(可以访问私有变量和方法) */  return {    publicMethod: function () {      showPrivate();    },    publicVar: 'the public can see this!'  };};var single = mySingleton();single.publicMethod(); // 输出 'something private'console.log(single.publicVar); // 输出 'the public can see this!'

上面的代码很不错了,但如果我们想做到只有在使用的时候才初始化,那该如何做呢?为了节约资源的目的,我们可以另外一个构造函数里来初始化这些代码,如下:

var Singleton = (function () {  var instantiated;  function init() {    /*这里定义单例代码*/    return {      publicMethod: function () {        console.log('hello world');      },      publicProperty: 'test'    };  }  return {    getInstance: function () {      if (!instantiated) {        instantiated = init();      }      return instantiated;    }  };})();/*调用公有的方法来获取实例:*/Singleton.getInstance().publicMethod();

二、工厂模式

工厂模式是由一个方法来决定到底要创建哪个类的实例, 而这些实例经常都拥有相同的接口. 这种模式主要用在所实例化的类型在编译期并不能确定, 而是在执行期决定的情况。 说的通俗点,就像公司茶水间的饮料机,要咖啡还是牛奶取决于你按哪个按钮。

实例:

function A( name ){       this.name = name;    }    function ObjectFactory(){       var obj = {},           Constructor = Array.prototype.shift.call( arguments );obj.__proto__ = typeof Constructor .prototype === 'number' ? Object.prototype: Constructor .prototype;       var ret = Constructor.apply( obj, arguments );       return typeof ret === 'object' ? ret : obj;    }    var a = ObjectFactory( A, 'svenzeng' );    alert ( a.name ); //svenzeng            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选