脚本宝典收集整理的这篇文章主要介绍了js实例教程-Js中的模块函数和命名空间详细介绍，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

 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

 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

 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

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

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-Js中的模块函数和命名空间详细介绍全部内容，希望文章能够帮你解决js实例教程-Js中的模块函数和命名空间详细介绍所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。