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