欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-28 19:13:05
命名空间namespace(某些语言中叫package),是一个在静态语言中常见的概念。它可以帮助我们更好地整理代码,并可避免命名冲突。 遗憾的是,js中并不提供原生的命名空间支持。在js中创建的任...

命名空间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