??????Javascript????????????

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了??????Javascript????????????相关的知识，希望对你有一定的参考价值。

?????????lan   ????????????   java   javascrip   result   ??????   free   ??????   ??????   

??????

  ?????????????????????????????????????????????????????????????????????????????? ???????????????????????????????????????????????????????????????window?????????

1. ??????????????????

var Singleton = function( name ) { 
    this.name = name;
};
Singleton.prototype.getName = function() { 
    alert ( this.name );
};
Singleton.getInstance = function( name ) { 
    if ( !this.instance ) {   //?????????this?????????Singleton???????????????????????????????????????this
        this.instance = new Singleton( name ); 
    }
    return this.instance;
};
var a = Singleton.getInstance( ???sven1??? ); 
var b = Singleton.getInstance( ???sven2??? );
alert ( a === b ); // true

???????????? Singleton.getInstance ????????? Singleton ???????????????????????????????????????????????????????????????????????????Java?????????????????????????????? ???????????????????????????????????????????????????????????????Singleton ??????????????????????????????????????????????????? ??????????????? new??????????????????????????????????????????????????? Singleton.getInstance ?????????????????? ???????????????????????????New??????????????????????????????????????????

 

2.?????????????????????

var Singleton = (function() {
  var instance;
  var Singleton = function(name) {
    if ( instance ) {
      return instance;
    }
    this.name = name;
    return instance = this;
  };
  Singleton.prototype.getName = function() {   //?????????????????????????????????Singleton
    alert ( this.name );
  };
  return Singleton;
})();
var a = new Singleton( ???sven1??? );
var b = new Singleton( ???sven2??? );
console.log(a == b)

???????????????????????????????????????????????????????????????????????????????????????
????????? instance ??????????????????????????????????????????????????????????????????????????????????????????????????????????????? Singleton ??????????????????????????????????????????????????????????????????????????????????????? ????????????????????????

3.javascript??????????????????

????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ???????????????????????????????????????????????????????????????????????????????????????????????? Java ??????????????????????????????????????????????????????????????????????????????????????????????????????

??? JavaScript ?????????????????????(class-free)???????????????ES6????????????????????????????????????????????????????????????????????????????????? ???????????? JavaScript ???????????????????????????????????????????????????????????????????????????????????????????????? ???????????????????????????????????????? 

??????????????????????????????????????????????????????????????????????????? 

 

???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

???1???

<html> 
  <body>
    <button id="loginBtn">??????</button> 
  </body>
  <script>
  var loginLayer = (function() {
    var div = document.createElement( ???div??? ); 
    div.innerHTML = ????????????????????????; 
    div.style.display = ???none???; 
    document.body.appendChild( div );
    return div; 
  })();
  document.getElementById( ???loginBtn??? ).onclick = function(){
  loginLayer.style.display = ???block???; };
  </script>
 </html>

????????????????????????????????????????????????????????????????????? div ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????DOM????????????????????????

???2???

<html> 
  <body>
    <button id="loginBtn">??????</button> 
  </body>
  <script>
  var createLoginLayer = function() {
    var div = document.createElement( ???div??? ); 
    div.innerHTML = ????????????????????????; 
    div.style.display = ???none???; 
    document.body.appendChild( div );
    return div; 
  };
  document.getElementById( ???loginBtn??? ).onclick = function(){
    var loginLayer = createLoginLayer();
    loginLayer.style.display = ???block???;
  }; 
  </script>
</html>

??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ?????????????????????????????? div?????????????????????????????????????????????????????????(???????????????)???????????? ??????????????????????????????????????????????????????????????????????????????????????????????????????????????? 

???3???

<html> 
  <body>
    <button id="loginBtn">??????</button> 
  </body>
  <script>
  var createLoginLayer = (function(){ 
    var div;
    return function() { 
      if ( !div ) {
        div = document.createElement( ???div??? ); 
        div.innerHTML = ????????????????????????; 
        div.style.display = ???none???; 
        document.body.appendChild( div );
      }
      return div; 
    }
  })();
  document.getElementById( ???loginBtn??? ).onclick = function(){ 
    var loginLayer = createLoginLayer(); 
    loginLayer.style.display = ???block???;
  };
  </script>
</html>

?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

4.?????????????????????

????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

<html>
  <body>
    <button id="loginBtn">??????</button>
  </body>
  <script>
  var getSingle = function(fn){
    var result;
    return function() {
      return result || ( result = fn .apply(this, arguments ) );
    }
  };
  var createLoginLayer = function() {
    var div = document.createElement( ???div??? );
    div.innerHTML = ????????????????????????;
    div.style.display = ???none???;
    document.body.appendChild( div );
    return div;
  };
  var createMask = function() {
    var div = document.createElement( ???div??? );
    div.innerHTML = ???mask???;
    div.style.display = ???none???;
    document.body.appendChild( div );
    return div;
  };
  var createSingleLoginLayer = getSingle( createLoginLayer );
  var createMask = getSingle( createMask );
  document.getElementById( ???loginBtn??? ).onclick = function(){
    var loginLayer = createSingleLoginLayer();
    var mask = createMask();
    loginLayer.style.display = ???block???;
    mask.style.display = ???block???;
  };
  </script>
</html>

?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????getSingle

???getSingle????????????????????????????????? fn ??????????????????????????? getSingle ?????? ???result ??????????????????????????????????????????????????????????????????????????????????????? result ????????????????????????????????????????????? ???

 5. ES6??????????????????

class SingletonApple {
  constructor(name, creator, products) {
      this.name = name;
      this.creator = creator;
      this.products = products;
  }
  //????????????
  static getInstance(name, creator, products) {
    if(!this.instance) {
      this.instance = new SingletonApple(name, creator, products);
    }
    return this.instance;
  }
}
let appleCompany = SingletonApple.getInstance(??????????????????, ???????????????, [???iPhone???, ???iMac???, ???iPad???, ???iPod???]);

ES6?????????????????????????????????????????????????????????????????????????????????Java???????????????????????????Java????????????????????????????????????SingletonApple???????????????getInstance?????????????????????????????????ES6???????????????new?????????????????????????????????????????????????????????

class SingletonApple {
  constructor(name, creator, products) {
      this.name = name;
      this.creator = creator;
      this.products = products;
  }
  //????????????
  static getInstance(name, creator, products) {
    if(!this.instance) {
      this.instance = new SingletonApple(name, creator, products);
    }
    return this.instance;
  }
}

 

Javascript??????????????????????????????????????????????????????????????????



以上是关于??????Javascript????????????的主要内容，如果未能解决你的问题，请参考以下文章

javascript JavaScript isset（）等效： - JavaScript

JavaScript 使用JavaScript更改CSS（JavaScript）

JavaScript之基础-1 JavaScript(概述基础语法)

前端基础-JavaScript的基本概述和语法

JavaScript

JavaScript