Js中的模块函数和命名空间的介绍

Bertha 。 2022-05-25 00:54 182阅读 0赞

**命名空间**namespace（某些语言中叫package），是一个在静态语言中常见的概念。它可以帮助我们更好地整理代码，并可避免命名冲突。

遗憾的是，JS中并不提供原生的命名空间支持。在JS中创建的任何对象都默认是全局对象。在现代的大规模JS开发中，不采用命名空间会造成非常糟糕的命名方式，比如用前缀命名函数和变量，导致代码丑陋不可读。当引入第三方库后，更可能会发生命名覆盖的情况。

简单地说，我们可以创建一个简单对象字面量来打包所有的相关函数和变量。

**模块函数**：通过把模块定义在某个函数内部来实现，定义的变量和函数都属于该函数的局部变量，在函数外不可见。实际上，可以将这个函数作用域用作模块的命名空间

一旦将模块封装进一个函数中，就需要一些方法导出公用API，以便在函数外部调用他们，下面有几种方式导出公用API

话不多说，我们一边看例子一边解释喽

1、利用构造函数

var school;//创建一个全局变量用来存放与学校相关的模块
    if(!school){
        school = {};//创建school命名空间
    }
    school.student = (function(){
        function student(sex,age){
            console.log(`你的性别:${sex}   你的年龄：${age}`);
        }
        return student;
    })();
    school.student('女',18);//你的性别:女   你的年龄：18

**2. 返回命名空间对象**

如果模块API包括多个单元，则它可以返回命名空间对象

var school;
    if(!school){
        school = {};
    }
    
    school.students = (function(){
        function Subject(sub){
            console.log(`我最爱的学科是：${sub}`)
        }
        function Grade(cride){
            console.log(`我最高的学分是：${cride}`)
        }
        return {
            Subject:Subject,
            Grade:Grade
        }
    })();
    school.students.Subject('英语');//我最爱的学科是：英语
    school.students.Grade(8);//我最高的学分是：8

**3. 通过关键字new调用**

另外一种类似类似技术：把模块函数当做构造函数，通过new来调用。把它们（公共API）赋值给this属性来将其导出

var school;
    if(!school){
        school = {};
    }
        school.students = (new function(){
            function Subject(sub){
                console.log(`我最爱的学科是：${sub}`)
            }
            function Grade(cride){
                console.log(`我最高的学分是：${cride}`)
            }
            this.Subject = Subject;
            this.Grade = Grade;
        }());
    school.students.Subject('英语');//我最爱的学科是：英语
    school.students.Grade(8);//我最高的学分是：8

**4. 已定义命名空间对象**

作为一种替代方案，如果已经定义了全局命名空间对象，通过模块函数可以直接设置那个对象的属性。

var school;
    if(!school){
        school = {};
    }
    school.students = {};
    (function(students){
                function Subject(sub){
                console.log(`我最爱的学科是：${sub}`)
            }
            function Grade(cride){
                console.log(`我最高的学分是：${cride}`)
            }
            students.Subject = Subject;
                students.Grade = Grade;
    
    })(school.students);
    school.students.Subject('英语');//我最爱的学科是：英语
    school.students.Grade(8);//我最高的学分是：8