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

news/2024/7/19 14:54:19 标签: 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






http://www.niftyadmin.cn/n/952006.html

相关文章

永远不要跟父母说的几句话(转)

1、好了,好了,知道了,我自己有分寸,真啰嗦,烦不烦啊2、有事吗,没事?那挂了啊。 (父母打电话,也许只想说说话,我们能否理解他们的用意,不要匆忙挂…

浅谈CommonJs规范

CommonJS标准规定,一个单独的文件就是一个模块,模块内将需要对外暴露的变量放到exports对象里,可以是任意对象,函数,数组等,未放到exports对象里的都是私有的。用require方法加载模块,即读取模块…

php在空值时调用成员函数_C|主调函数调用被调函数时,编译器的一系列的动作...

当主调函数调用被调函数及返回时,编译器会有一系列的动作,主要由参数传递、地址跳转、局部变量分配和赋初值、执行函数体、结果返回、堆栈平衡等几个步骤组成。1 主调函数调用被调函数a 如果被调返回复合类型(如结构体),需要在主调函数的栈空…

PetShop的系统架构设计(转)

PetShop的系统架构设计前言:PetShop是一个范例,微软用它来展示.Net企业系统开发的能力。业界有许多.Net与J2EE之争,许多数据是从微软的PetShop和Sun的PetStore而来。这种争论不可避免带有浓厚的商业色彩,对于我们开发人员而言&…

webpack(v4.7.0版本)的安装使用(适合初学者)

最新的webpack版本是v4.7.0 (注意:因为是针对初学者,所以很多知识并没有引入进来,避免越看越糊涂,后续还会对webpack知识持续更新,希望能帮到初学的你) 先简单认识一下webpack吧 Webpack可以看作…

python 同步和异步版本_Python之并发编程(八)同步和异步两种执行方式

浏览器工作原理:向服务器发送一个请求,服务端验证你的请求,如果正确,给你的浏览器返回一个文件,浏览器接收到文件,将文件里面的代码渲染成你看到的漂亮美丽的模样什么叫爬虫?利用代码模拟一个浏…

矩阵的迹的性质_稀奇古怪的线性代数题 1 - 矩阵的迹

关于题目:这里的题目可能来源于教材和习题集,也有可能是自己造的。主要是通过几个题目来引出一些有趣的想法。关于这个系列:虽然我想尽可能地做成一个系列,但我个人比较随性,不排除弃坑,或者说把“线性代数…

webpack中html-webpack-plugin插件的使用(生成多个html页面,引入不同的js文件)

以html-webpack-plugin插件为例 1、先安装插件,在命令行中输入:npm i -D html-webpack-plugin(执行完之后,在package.js的devDependencies中就多了下面的代码 "html-webpack-plugin": "^3.2.0"即安装了html-…