javascript 单例模式应用

最新推荐文章于 2022-06-16 10:56:11 发布

code_xin~

最新推荐文章于 2022-06-16 10:56:11 发布

阅读量171

点赞数 1

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44456354/article/details/111768882

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

单例模式

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="btn">create</button>
</body>
</html>

js部分

 //缺点：外部可以修改Test.instance
 // function Test(name) {
 //     if(typeof Test.instance === 'object') {
 //         return Test.instance;
 //     }
 //     this.name = name;
 //     Test.instance = this;
 // }

 //缺点：失去了原型继承
 // function Test(name) {
 //     const instance = this;
 //     this.name = name;
 //     Test = function() {
 //         return instance;
 //     }
 // }


 //完美的单例模式
 // var Test = (function() {
 //     var instance;
 //     return function(name) {
 //         if(typeof instance === 'object') {
 //             return instance;
 //         }
 //         instance = this;
 //         this.name = name;
 //     }
 // })();
 // const t1 = new Test('huzhixin');
 // Test.prototype.lastName = 'D';
 // const t2 = new Test('huqiao');
 // console.log(t1 === t2);


 // const CreateElement = (function (text) {
 //     var el = null;
 //     return function(text) {
 //         if(el !== null) {
 //             return el;
 //         }
 //         el = document.createElement('div');
 //         el.textContent = text;
 //         el.style.display = 'none';
 //         document.body.appendChild(el);
 //         return el;
 //     }
 // })();


 // btn.onclick = function () {
 //     let el = new CreateElement('hello world');
 //     console.log(el);
 //     el.style.display = 'block';
 // }

 function createElement(text) {
     var el = document.createElement('div');
     el.textContent = text;
     el.style.display = 'none';
     document.body.appendChild(el);
     return el;
 }

 const getSingle = function (fn) {
     var result;
     return function () {
         if(!result) {
             result = fn.apply(this,arguments);
         }
         return result;
     }
 }
 const singleEl = getSingle(createElement);

 btn.onclick = function() {
     console.log(singleEl);
     var ele = singleEl('hello huzhixin');
     ele.style.display = 'block';
 }