javascript中代码组织的相关概念共有三种：函数、类、模块。
前两种在服务器与浏览器环境中基本完全一致，因此我们先行介绍前两种。
函数
在面向过程流行的年代，函数早已被用作程序功能划分，相应的功能被命名为不同的函数，函数在现在这个面向对象的时代常常也被称做方法，其实二者表达的是同一件事。
javascript中函数的写法有两种，一种是关键字function，一种是箭头函数。二者唯一的区别是上下文环境不同，即this对象所指的对象不一样。这一点在函数与类介绍的末尾会详细说明。
无论function还是箭头函数，都有匿名函数和具名函数之分。
// 具名function函数
funcrion todo(fuc,arg){
fuc(arg);
}
// 匿名fucntion函数
todo( function(arg){ console.log(arg); },'hello' );
// 具名箭头函数
const say = fc => fc();
// 匿名箭头函数
say( () => console.log('say') );
对于函数这种代码组织结构，从概念上分为最重要的三部分：形参、返回值、代码体。
形参的传入方法有以下几种：
// 普通传参
function fuc1( a,b,c ){
console.log(a,b,c);
}
fuc1(1,2,3);
// 结构传参
function fuc2({username,password}){
console.log(username,password);
}
let userForm = {
username:'zmp',
password:'1314521'
};
fuc2(userForm); //输出zmp 与 1314521两段字符串
// 不定传参
function fuc3( ...args ){
for( item of args )
console.log(item);
}
fuc3(1,2,3,4); //输出 1 2 3 4
// 部分不定传参
function fuc4(username,...foodLists){
for( let item of foodLists)
console.log(username,'like',item);
}
fuc4('zmp','Apple','Banana');//输出如下
/*
zmp like Apple
zmp like Banana
*/
而函数的返回值可以是任何东西。
function(){
// 返回原始值
return '123'; //字符串
return 1; //整数
return 1.2; //浮点数
// 返回复杂对象
return {
username:'zmp',
password:'1314521',
};
// 返回函数
return function(){
console.log('hello world');
};
// 返回数组
return [1,2,3];
// 返回类
return class A{
print(){
console.log('hello world');
}
}
}
以上示例在箭头函数中同样成立。
类
简单类的写法
class Student{
//构造方法
constructor(name){
this._name = name;
}
// 成员方法
say(){
console.log('hello world');
console.log('My name is '+this._name);
}
// 静态方法
static TODO(){
console.log('TODO');
}
}
let stu = new Student('zmp');
stu.say(); //输出
/*
hello world
My name is zmp
*/
Student.TODO(); //输出 TODO
注意javascript的类中没有成员变量这个概念和写法，通常情况下你也不需要有成员变量。所有希望挂载的成员变量都可以通过新增this对象上的属性完成。
类的继承
class I extends Student{
constructor(name){
super(name);
}
// 覆盖方法
say(){
// 调用父类方法
super.say();
// 扩展方法
console.log('我是一个大学生');
}
}
let i = new I(zmp);
i.say(); //输出
/*
hello world
My name is zmp
我是一个大学生
*/
Student.TODO(); //输出 TODO
类中的super指针的用法有两种，一种是在子类构造函数中，其意义为父类的构造方法，一种是在子类的成员方法中，其意义是指向父类this指针。
那么如果在类的成员方法中我们需要书写回调函数怎么做呢？
// cb表示回调函数
function todo(cb){
console.log('我做了一些事');
cb || cb(); //这是一种短路模式，指的是在cb的逻辑含义不为假时，才执行cb函数
}
class I extends Student{
constructor(name){
super(name);
}
// 覆盖方法
say(){
// 调用父类方法
super.say();
// 扩展方法
console.log('我是一个大学生');
todo( function(){
console.log(this._username+' 完成了回调函数'); //此时会输出 undefined 完成了回调函数
} );
}
}
造成以上结果的原因是:this指针指向的方法的调用者，而以上代码中todo函数传入的作为参数的函数，其调用者早已不是类I的实例，转而指的是运行环境（node中是process，浏览器中是window）。
解决方法如下
say(){
// 调用父类方法
super.say();
// 扩展方法
console.log('我是一个大学生');
let that = this;
todo( function(){
console.log(that._username+' 完成了回调函数'); //此时会输出 undefined 完成了回调函数
} );
}
这是在箭头函数未推出了时候的一种解决方法，用于处理大多数的ajax请求回调。以下介绍一种使用箭头函数的。
say(){
// 调用父类方法
super.say();
// 扩展方法
console.log('我是一个大学生');
todo( () => {
console.log(this._username+' 完成了回调函数'); //此时会输出 zmp 完成了回调函数
} );
}
这里表现出的是箭头函数的一个重要特性，不改变调用者，即不改变this指针指向。所以在大多数代码中，若一个函数将一个函数作为参数，那么传入的多数是一个箭头函数，因为这样可以处理this指针变向的问题。
模块
模块是现在js项目较上层的代码组织方式，仅次于包，多个模块组成了包
浏览器中的模块通常是靠一堆script标签引入远程js文件实现的，文件及模块，且不使用闭包的话文件间的变量是会污染的。
在nodejs环境中，node使用CommonJS规范，同样也是文件及模块，但是文件间的变量是不会污染的。这归功于CommonJS规范要求每个模块中可被访问的东西是必须显示导出的。
CommonJS在浏览器中也有实现，sea.js就是一个很好的实现项目，但其原理和script标签差不多，都是采用网络请求的方式动态加载并运行模块。
模块的导出需要挂载module.exports对象，这个对象的表现就是这个模块文件的表现。而引用则是使用require方法。（这些都只适用于nodejs环境）
//a.js
module.exports.sqrt = s => x*x;
//b.js
const AModule = require('./a.js');
console.log(AModule.sqrt(2)); //输出4
网友评论