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();