zoukankan      html  css  js  c++  java
  • JavaScript模块模式

    module pattern

    目前了解到的有三种模块模式的书写方式,可根据需要选择最合适的。

    第一种:原始方式书写的模块

    function m1 () {}
    function m2 () {}
    function m3 () {}
    //...
    

    第二种:创建对象的方式书写的模块

    var module = {
        count: 1,
        addNum: function() {
            this.count++;
        },
        minusNum: function() {
            this.count--;
        }
    };
    module.addNum();
    module.minusNum();
    module.count = 1;   //会被篡改
    

    第三种:设置带私有变量的模块模式

    知识储备:

    1. 自执行函数 闭包closure

    (function() {
        //code
    })();
    
    //or
    (function(){
        //code
    }());
    //两种匿名函数自执行方式的效果一样
    //纠正一个观念:闭包不会引起内存泄漏,内存泄漏是程序员使用闭包的方式不当导致的。
    

    贺师俊在知乎上的回答:

    闭包不会造成内存泄漏。程序写错了才会造成内存泄漏。另外,那些书讲的事情应该是:老浏览器(主要是IE6)由于垃圾回收有问题导致很容易出现内存泄漏。但是那是浏览器实现的bug。如果书里面没把这个意思写清楚,那就是本烂书,不要看了,赶紧扔掉。

    2. Module

    var module = (function() {
        return {}
    })();
    

    3. private var & method

    
    //外部访问不到_self与addNum
    var module = (function() {
        var _self;
        var addNum = function() {};
        return {}
    })();
    

    4. return 暴露给用户的方法/属性

    //可供外部访问的变量通过return暴露出来
    var module = (function() {
        var _self;
        var addNum = function() {};
        return {
            _self: _self,
            addNum: addNum
        }
    })();
    
    module._self;
    module.addNum();
    

    总结:

    所以使用模块模式可以采用以下的编码形式:

    var module = (function() {
        var _private;
        var public;
        var _privateMethod = function() {};
        var someMethod = function() {};
        var anotherMethod = function() {};
        return {
            public: public,
            someMthod: someMethod,
            anotherMethod: anotherMethod
        }
    })();
    

    然后提供一个接口用于扩展的方法:

    var module = (function() {
        var _private;
        var public;
        var _privateMethod = function() {};
        var someMethod = function() {};
        var anotherMethod = function() {};
        return {
            public: public,
            someMthod: someMethod,
            anotherMethod: anotherMethod
            
            //看这里
            extension: function() {}
        }
    })();
    var moduleTwo = (function(module) {
        module.extension = function() {
            //anotherMethod
        };
        return module;
    })(module || {});
    

    私有变量一般使用_+变量名的命名形式。

  • 相关阅读:
    12.Docker网络类型
    博客迁移
    java注解
    IO多路复用技术(multiplexing)
    Java 中extends与implements使用方法
    初识autoconf
    初识swoole
    简单配置nginx使之支持pathinfo
    vue-cli 脚手架 安装过程
    PHP阻止页面后退如何用PHP实现禁用浏览器的后退,使后退的页面失效或链接到别的地方?使用php禁止浏览器缓存?
  • 原文地址:https://www.cnblogs.com/foxNike/p/6337305.html
Copyright © 2011-2022 走看看