设计模式之单例模式-【官方】百战程序员_IT在线教育培训机构


xxxxxxxxxx
7
1
var mySingleton = {
2
 property1: "something",
3
 property2: "something else",
4
 method1: function () {
5
 console.log('hello world');
6
 }
7
};


x
1
var single = (function () {
2
 let instance;
3
    
4
 function getInstance() {
5
 // 如果该实例存在，则直接返回，否则就对其实例化
6
 if (instance === undefined) {
7
 instance = new Construct();
8
      }
9
      return instance
10
  }
11
 function Construct() {
12
   // ... ⽣成单例的构造函数的代码
13
    return{
14
      name:"iwen",
15
      getName(){
16
           return this.name;
17
        }
18
     }
19
 }
20
 return {
21
 getInstance: getInstance
22
 }
23
})();
24

25
console.log(single.getInstance().getName());


xxxxxxxxxx
36
1
<!DOCTYPE html>
2
<html lang="en">
3
<body>
4
    <button id="btn">登录</button>
5
</body>
6
<script>
7
  class Login {
8
   createLayout() {
9
     var oDiv = document.createElement('div')
10
     oDiv.innerHTML = '我是登录框'
11
     document.body.appendChild(oDiv)
12
     oDiv.style.display = 'none'
13
     return oDiv
14
    }
15
  }
16
  class Single {
17
    getSingle(fn) {
18
       var result;
19
       return function() {
20
         return result || (result = fn.apply(this, arguments))
21
        }
22
     }
23
  }
24
 var oBtn = document.getElementById('btn')
25
 var single = new Single()
26
 var login = new Login()
27
 // 由于闭包，createLoginLayer对result的引⽤，所以当single.getSingle函数执⾏完之后，内存中并不会销毁result。
28
 // 当第⼆次以后点击按钮，根据createLoginLayer函数的作⽤域链中已经包含了result，所以直接返回result
29
 var createLoginLayer = single.getSingle(login.createLayout)
30
 oBtn.onclick = function() {
31
     var layout = createLoginLayer()
32
     layout.style.display = 'block'
33
 }
34
</script>
35

36
</html>

Grid_网格布局基础

北京市昌平区回龙观镇南店村综合商业楼2楼226室