JavaScript的命名空间

命名空间：

　　个人角度认为就是把一块相关联的代码,统一存放在一个区域,

　　这个区域有名字, 通过名字的引用, 然后使用区域内的代码。

　　这样就可以 避免命名冲突。

使用大致分三个步骤：

1. 立即执行函数创建私有作用域

2. 在立即执行函数内定义类, 对象 ....

3. 立即执行函数return一个{}对象, 里面提供获取对象的接口(函数)

有基础即可跳过~

前置知识:

立即执行函数:

概念：这个函数定义后立即调用, 一次性

作用：开辟私有作用域，避免全局变量污染

语法：

　　 (函数体)();

!函数体();

+函数体();

-函数体();

　　 ...

PS:

　　　　至于为什么前面又是+,!,这个原因我也不太理解，我只知道就这么用,

还有如果前面没有这些符号的存在会报错的, 所以养成一个好习惯必须先写符号然后函数体

　　具体代码：

 1         // ES5语法
 2         !function(){
 3           alert(1);
 4         }();
 5         
 6         (function() {
 7           alert(1);
 8         })();
 9 
10         // ES6语法, 这个语法我试了如果是+,-符号会报错
11         (() => {
12           alert(1)
13         })();

　　 arguments 关键字：

概念：把所有函数的形式参数, 都存放到这了

伪数组：不能用数组的方法(push, pop)之外, 其他特征都一样

        function aTest(age) {
          console.log(age); // 18
          console.log(arguments[0]); // 18
          console.log(arguments.length); // 1
          console.log(arguments.push(1)); // 报错
        }

        aTest(18);
        // 试着改变参数数量, 看看arguments.length的输出
        aTest(18,20,20);

函数返回对象:

          // 1
          var test = (function() {
            var name = "Mike";
            return {
              getName: function() {
                return name;
              },
              setName: function(newName) {
                name = newName;
              }
            }
          })();
          test; // { getName, setName }
          test.getName();  // "Mike"
          test.setName("John");    
          
          // 2
          function Person() {}
          function getPerson() {
            // 这里是关键
            return new Person();
          }
          var obj = getPerson();

关于类与对象的概念, 又是一大篇话题, 有兴趣的自行搜索这里只给出代码示例

        // 类：
        function Person(name) {
          this.name = name;
        }
        // 对象
        var obj = new Person("Mike"); // { name: "Mike" }
        obj.name; // "Mike"

命名空间实践！

    var namespaceClass = (function () {

      // 定义所有类, 或者变量...  
      var loginDOM = document.getElementById('login');

      function openLogin() {
        loginDOM.style.display = 'block';
      }

      // 别忘记加注释，为了后期维护
      function Person(age, sex) {
        this.age = arguments[0];
        this.sex = arguments[1];
      }
      function Animal(config) {
        this.config = arguments[0];
      }

      return {
        loginDOM: loginDOM,
        openLogin: openLogin,
        newPerson() {
          // 这里最关键直接返回一个新对象, 然后把所有参数传递过去
          return new Person(arguments);
        },
        newAnimal() {
          return new Animal(arguments);
        }
      }
    })();
    // 使用
    var tempPerson = namespaceClass.newPerson(1, 2);
    var tempAnimal = namespaceClass.newAnimal({
      mainDiv: document.getElementById('mainDiv'),
      activeClass: 'active',
      // ...
    });
    namespaceClass.loginDOM.style.display = 'none';
    namespaceClass.openLogin();

JavaScript的命名空间

猜你喜欢