zoukankan      html  css  js  c++  java
  • JavaScript的设计模式 转载

    原文地址:http://blogs.sitepoint.com/2010/11/30/my-favorite-javascript-design-pattern/

    I thought it might be interesting to look at a JavaScript design pattern that I use a great deal. I settled on it gradually, over a period of time, absorbing and adapting influences from various sources, until reaching a pattern that offers the flexibility I need.

    Let me show you an overview, and then look at how it comes together:

    function MyScript(){}   
    (function()   
    {   
      var THIS = this;   
      function defined(x)   
      {   
        return typeof x != 'undefined';   
      }   
      this.ready = false;   
      this.init = function(   
      {   
        this.ready = true;   
      };   
      this.doSomething = function()   
      {   
      };      
      var options = {   
          x : 123,   
          y : 'abc'  
          };   
      this.define = function(key, value)   
      {   
        if(defined(options[key]))   
        {   
          options[key] = value;   
        }   
      };   
    }).apply(MyScript); 
    

    As you can see from that sample code, the overall structure is a function literal:

    (function()   
    {   
      ...   
    })();  
    

    A function literal is essentially a self-executing scope, equivalent to defining a named function and then calling it immediately:

    function doSomething()   
    {   
      ...   
    }   
    doSomething();  
    
    

    I originally started using function literals for the sake of encapsulation—any script in any format can be wrapped in that enclosure, and it effectively “seals” it into a private scope, preventing it from conflicting with other scripts in the same scope, or with data in the global scope. The bracket-pair at the very end is what executes the scope, calling it just like any other function.

    But if, instead of just calling it globally, the scope is executed using Function.apply, it can be made to execute in a specific, named scope which can then be referenced externally.

    So by combining those two together—the creation of a named function, then the execution of a function literal into the scope of the named function—we end up with a single-use object that can form the basis of any script, while simulating the kind of inheritance that’s found in an object-oriented class.

    The Beauty Within

    Look at that first code example, and you can see what flexibility is offered by the structure of the enclosing scope. It’s nothing you can’t do in any function, of course, but by wrapping it up in this way we have a construct that can be associated with any named scope.

    We can create multiple such constructs, and associate them all with the same scope, and then all of them will share their public data with each other.

    But at the same time as sharing public data, each can define its own private data too. Here for example, at the very top of the script:

    var THIS = this;  
    

    We’ve created a private variable called THIS which points to the function scope, and can be used within private functions to refer to it—exactly the same trick as going "self = this" to create a reference for inner scopes.

    Other private variables, declared the same way, can share the uppercase convention if they define constant data (however declaration using const instead of var should be avoided, because it’s not well-supported).

    Private functions can be used to provide internal utilities:

    function defined(x)   
    {   
      return typeof x != 'undefined';   
    } 
    

    Then we can create public methods and properties, accessible to other instances, and to the outside:

    this.ready = false;   
    this.init = function()   
    {   
      this.ready = true;   
    };   
    this.doSomething = function()   
    {   
    };  
    

    We can also create privileged values—which are private, but publicly definable, in this case via the public define method; its arguments could be further validated according to the needs of the data:

    var options = {   
      x : 123,   
      y : 'abc'  
      };   
    this.define = function(key, value)   
    {   
      if(defined(options[key]))   
      {   
        options[key] = value;   
      }   
    };  
    
    

    后续篇章:The Anatomy of a JavaScript Design Pattern

  • 相关阅读:
    SQL Server参数化查询
    MySQL平台数据库备份方案详细说明
    Android 关机弹出菜单
    android 4.1源码下载方法最新实例教程
    教你如何创建类似QQ的android弹出菜单
    三足鼎立已深入人心 移动开发平台前景展望
    Android上的蓝牙通信功能的开发:BluetoothChat例程分析
    Android经典动画案例分析
    Android使用FileObserver对sdcard文件或文件夹监控
    如何提高Android用户体验
  • 原文地址:https://www.cnblogs.com/jsfans/p/1905829.html
Copyright © 2011-2022 走看看