从码农到设计者,从单例模式入手设计代码

简介: 首先先复习一下内存var str1 = "abc";var str2 = "abc";console.log(str1 == str2)console.log(str1 === str2)// 上面的代码实际上是执行了这个操作// var str = String("abc")// 那...

首先先复习一下内存

var str1 = "abc";
var str2 = "abc";
console.log(str1 == str2)
console.log(str1 === str2)
// 上面的代码实际上是执行了这个操作
// var str = String("abc")
AI 代码解读
// 那么如果
var str1 = String("abc");
var str2 = new String("abc");
console.log(str1 == str2)
console.log(str1 === str2)
// 我们可以在控制台输出一下 str1 和 str2,一看就知道为什么不一样了。
AI 代码解读

我们可以得到结论:

  • == 比较的是变量(对象)的值
  • === 比较的是变量(对象)的地址
  • 以后不管什么编程语言,只要看到 new 关键字,一定是在堆中开辟一块新内存

浏览器解析 HTML

模板和实例

<div id="myDiv"></div>
AI 代码解读
var myDiv = document.getElementById("myDiv");
AI 代码解读
  • 浏览器把 HTML 一对对标签解析下来后,全部存放到内存空间,并互相指向,形成所谓的 DOM 树
  • 可以用typeof mydiv的方式查看
  • 如果是 Object 那就一定是存放在堆空间的,其他存放在常量池。
  • 这个 myDiv 实际上是 div 标签的实例
  • 可以用 myDiv.constructor 的方法看这个实例到底是哪个实例类

那么能不能用 new HTMLDivElement() new 一个新的 HTMLDiv 类呢?

不管对错,先猜猜看。

实际操作一遍发现浏览器报错了,浏览器不允许你私自 new 一个 HTMLDiv 类
那么该如何 new 出一个 HTMLDiv 类呢?

--------------------------------------我是分割线--------------------------------------

浏览器提供了这么一个方法 document.createElement("div"),通过这种方式,它能够在内存中创建一个 DOM 对象,并且是 HTMLDivElement 的对象。

var myDiv1 = document.createElement("div");
AI 代码解读

这是一个典型的工厂模式。
我们可以发现 myDiv.constructormyDiv1.constructor 一模一样,这就说明,这两个是同样一个模板下所产生的不同的实例

但是问题来了,我希望我的模板下有且只有一个实例,节约内存,例如 body 标签,全局唯一,这个时候该怎么设计?

--------------------------------------我是引导君--------------------------------------

JavaScript 有一个特性,就是动态对象可以随意复制其行为和属性。

大家来说出自己的理解。

不要着急,我先继续往下讲。

var obj = {};
// 这就是一个简单的单例,同时也是 Object 的一个实例,我们可以在这里面扩展任何我们想要的属性
// 例如 var Obj = {name: "abc",age: 1}
AI 代码解读

这段代码在我们项目代码里非常普遍,但是这样的实例,也是单例模式,有个不好的地方,那就是,这个单例根本无法扩展,而且使用起来也非常不安全,因为我们可以随时改变这个里面的内容。

--------------------------------------我是不正经的正题君--------------------------------------

那么,单例模式在 JavaScript 中该如何设计呢?

(function(){})()
// 熟悉我的写法的人肯定知道
// 这段代码是创建一个匿名函数,并且立即调用
// 那么这么写到底有什么用呢?
AI 代码解读

这种写法是有用的,它帮我实现了一个闭包,这段代码的 {} 中帮我实现了一个闭包临时作用域。

var SingleTest = (function(){
    // 这个 return 的 function 就是刚刚说的模板类
    return function(){
        console.log("进入构造器函数");
    }
})()

// 这个时候我们就可以
var i1 = new SingleTest();
var i2 = new SingleTest();
console.log(i1===i2) // false
AI 代码解读

大家注意,有基础的应该都知道,函数在 JavaScript 里面有两种使用方式,一种是函数调用(小写),另一种是构造器(大写),行业潜规则。

但是我希望不管我怎么 new ,我都想使用内存中的同一块地址,也就是i1===i2,那么该怎么做呢?

var SingleTest = (function(){
    var _instance = null;
    return function(){
        console.log("进入构造器函数");
        if (!_instance) {
            console.log("第一次 new,局部变量(实例)_instance 为 null");
            _instance = this;
            return _instance;
        } else {
            console.log("不是第一次 new,局部变量(实例)_instance 不为 null,直接返回");
            return _instance;
        }
    }
})()
AI 代码解读

大家先理解理解这段代码。

this 代表的是当前创建的这块内存空间的引用,所以定义的属性或者方法都可以用 this 来操作。

这个时候 console.log(i1===i2) 看看会发生什么。

--------------------------------------我是不正经的参数君--------------------------------------

如果我要给这个单例传一个参数,我们要访问实例里面的 name 属性怎么办?

var SingleTest = (function(){
    var _instance = null;
    return function(ops){
        // 我们经常会这么做
        // 通过这种方式我们可以过滤掉不传参数带来的空引用问题
        ops = ops || {};
        if (!_instance) {
            _instance = this;
            // 通过 for 循环,遍历迭代我们的参数
            for (var prop in ops) {
                _instance[prop] = ops[prop];
            }
            return _instance;
        } else {
            for (var prop in ops) {
                _instance[prop] = ops[prop];
            }
            return _instance;
        }
    }
})()

var i1 = new SingleTest({name:"zhangsan"});
var i2 = new SingleTest({name:"lisi"});
console.log(i1.name);
// 那么输出的值是多少呢?
// 很明显上面写了两个 for 循环,我们代码里也经常有这种情况发生,这个时候该怎么优化?
AI 代码解读
var SingleTest = (function(){
    var _instance = null;
    var _default = {}
    // 封装 for 循环
    function _init(ops) {
        for (var prop in ops) {
            this[prop] = ops[prop];
        }
    }
    return function(ops=_default){// es6支持
        // ops = ops || {}; 这种方式已经 out 了
        if (!_instance) {
            _instance = this;
            _init.call(_instance, ops);
        } else {
            _init.call(_instance, ops);
        }
        return _instance;
    }
})()

var i1 = new SingleTest({name:"zhangsan"});
var i2 = new SingleTest({name:"lisi"});
console.log(i1.name);
AI 代码解读

这个代码已经优化度很高了,但是还可以进行优化,比如说,如果我这里面不止 _init 方法,还有其他方法,例如,function _method1(){} function _method2(){}等,在函数体内进行调用的时候,你会发现,这么设计并不是一个好主意。
那么,有多个方法的时候该如何进行优化呢?

--------------------------------------我是正经的优化君--------------------------------------

简单来说,就是将这些方法加到原型链中。

var SingleTest = (function(){
    var _instance = null;
    var _default = {}
    function SingleInstance(ops=_default){
        if (!_instance) {
            _instance = this;
            this._init(ops);
        } else {
            _instance._init(ops);
        }
        return _instance;
    }
    // 将方法加到原型中去
    // _的意思是,私有属性或方法,行业规则。
    SingleInstance.prototype._init = function(ops) {
        for (var prop in ops) {
            this[prop] = ops[prop];
        }
    }
    return SingleInstance;
})()

var i1 = new SingleTest({name:"zhangsan"});
var i2 = new SingleTest({name:"lisi"});
console.log(i1.name);
AI 代码解读

你会发现,这样做代码量并没有减少多少,但是优点是,在写入其他方法的时候,可以用 this 直接相互调用已存在的方法。
还有一个优点是,如果后期想 new 出不同的实例,直接对 _instance 做处理就好了,因为我已经把这个单例打包成了闭包,不会影响外面的调用者。

但是这样还有一个 bug !
那就是如果有些人不上规矩,想直接调用 SingleTest({name:"mazi"}) ,这个时候你会发现,控制台报错了。
那么该如何优化,让这种调用也兼容呢?

--------------------------------------我是万恶的bug君--------------------------------------

原因就是,这样做是直接调用这个函数堆栈,这就意味着,当前函数的作用域并不是堆里面的 this
不要问我函数堆栈是什么,这个不是主题,简单来说就是把函数拿到栈里面去执行。

奔主题。

var SingleTest = (function(){
    var _instance = null;
    var _default = {}
    function SingleInstance(ops=_default){
        // instanceof 是表示 this 是不是 SingleInstance 的实例
        if (this instanceof SingleInstance) {
            if (!_instance) {
                _instance = this;
                this._init(ops);
            } else {
                _instance._init(ops);
            }
        } else {
            if (!_instance) {
                _instance = new SingleInstance();
                _instance._init(ops);
            } else {
                _instance._init(ops);
            }
        }
        return _instance;
    }
    SingleInstance.prototype._init = function(ops) {
        for (var prop in ops) {
            this[prop] = ops[prop];
        }
    }
    return SingleInstance;
})()

var i0 = SingleTest({name:"wangwu"})
var i1 = new SingleTest({name:"zhangsan"});
var i2 = new SingleTest({name:"lisi"});
console.log(i0 === i1);
console.log(i0 === i2);
AI 代码解读

至此,这个单例已经优化完毕。
或许还可以继续优化,但是这个不重要了,讲到这足够了。
我想说的是,你们不要记代码,没用的,试着去理解我的思路,思路是通用的。

梁音
+关注
目录
打赏
0
0
0
0
9
分享
相关文章
个人实际开发心得感悟及学习方法
个人实际开发心得感悟及学习方法
77 4
写了这么久代码你了解Java面向对象的设计原则吗?(二)
写了这么久代码你了解Java面向对象的设计原则吗
224 0
写了这么久代码你了解Java面向对象的设计原则吗?(二)
我明白了,谈一谈设计原则
死记是没有用的,正如教条主义式的生搬硬套没有多少作用,理解了才能举一反三、灵活运用。 我们可以再弄清楚十大原则:单一职责原则、开放封闭原则、里氏替换原则、接口隔离原则、依赖倒置原则、 迪米法特原则、组合聚合复用原则、不重复你自己、尽量保持简单、不过度设计。
120 0
我明白了,谈一谈设计原则
Java面向对象程序设计基础实战
Java面向对象程序设计基础实战
227 0
一日一技:8行炫技代码,知识点多得不得了
一日一技:8行炫技代码,知识点多得不得了
296 0
一日一技:8行炫技代码,知识点多得不得了
AI助理

阿里云 AI 助理已上线!

快来体验一下吧。