1. 面向對象

a) 單例模式（單體模式）

     let name = 'Datura';
     let age = 18;
     let person = {
        name,
        age,
        sex:'Man',
        showName:function(){return this.name},
        showAge:function(){return this.age} 
    };
    alert(person.showAge());    //18
    alert(person.sex);    //Man

b) 工廠模式

es5的面向對象工廠模式：

首先讓我們一起來回一下es5面向對象的寫法：
i) 首先定義一個構造函數（此處是 Person）；
ii) 定義Person的“屬性”，用this.xxx = xxx；
iii) 把方法掛在原型上，Person.prototype.xxx = function(){ xxx }；
iiii) 調用

   function Person(name,age){
        this.name = name;
        this.age = age;
    }
    Person.prototype.showName = function(){
        return this.name;   
    };
    Person.prototype.showAge = function(){
        return this.age;    
    };
    var p1 = new Person('alice',18);
    alert(p1.showAge());   //18

es5繼承：

//定義一個Person構造函數
   function Person(name,age){
        this.name = name;
        this.age = age;
    }
    Person.prototype.showName = function(){
        return this.name;   
    };
    Person.prototype.showAge = function(){
        return this.age;    
    };

    //Worker構造函數
    //繼承屬性 
    function Worker(name,age,job){
              //改變this指向，繼承Person的屬性
        Person.apply(this,arguments);
             //定義worker新的屬性
        this.job = job; 
    }
    //繼承方法
    Worker.prototype = new Person();
    //給worker指定“親爹”
    Worker.prototype.construcotr = Worker;
    //定義worker新的方法
    Worker.prototype.showJob = function(){
        return this.job;    
    };
    //調用
    var p2 = new Worker('Datura',20,'boss');
    alert(p2.showName());   //Datura
    alert(p2.showJob());      //boss

es6的面向對象工廠模式：

i) 首先定義一個構造函數（此處是 Person），注意用class關鍵字而不是function；
ii) 定義Person的“屬性”，寫在constructor(){this.xxx = xxx }；
iii) 定義方法，xxx () { xxx }；
iiii) 調用
iiiii) 注意constructor和方法之間沒有“;”，可以給屬性初始值或默認值

    class Person{
        constructor(name,age=25){  //可以給屬性初始值或默認值,正常es的function函數也可以給默認值
            this.name = name;
            this.age = age;
        }
        showName(){
            return this.name;   
        }
        showAge(){
            return this.age;
        }   
    }
    
    var p1 = new Person('alice',18);
    alert(p1.showAge());   // 18

es6繼承：

  //父類構造函數Person
   class Person{
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        showName(){
            return this.name;   
        }
        
        showAge(){
            return this.age;
        }   
    }
//子類繼承父類
    class Worker extends Person{
            constructor(name,age,job='搬磚的'){   //繼承父類屬性，并新加屬性給默認值
            super(name,age);    
//這里必須傳參，也就是需要把原來構造函數的參數傳入。
//子類必須在constructor方法中調用super方法，否則新建實例時會報錯。
//這是因為子類沒有自己的this對象，而是繼承父類的this對象，然后對其進行加工。如果不調用super方法，子類就得不到this對象。
            this.job = job;
        }
      //給子類定義新方法showJob
            showJob(){
            return this.job;
        }   

    }
    //調用
    var w1 = new Worker('rose',17);
    alert(w1.showJob());
    alert(w1.showName());

2. 模塊化

注意：目前還沒有瀏覽器支持模塊化(需要引入traceur.js和bootstrap.js)

第三方：seajs require.js 模塊化工具
那么我們來學習下,es6自帶的模塊化

a).導出，將變量a“暴露”出去
const a =12;
export default a;
b).導入1.js文件“暴露”的東西，并用modA 接收
import modA from './1.js'; (./代表同級目錄下)
c).同一個模塊導出多個值 export default {a:12,b:5};
d).不同模塊間的引入
import modA from './mod1.js';
import modB from './mod2.js';
let sum = modA+modB;
export default sum;

實例寫個小例子：

//mod1.js文件的內容
const a = 12;
export default a;

//mod2.js文件的內容
const b = 5;
export default c;

//主入口（模塊）的內容
<script src="traceur.js"></script>
<script src="bootstrap.js"></script>
<script type="module">
    import modA from './mod1.js';
    import modB from './mod2.js';
    alert(modA+modB);   //17
</script>

一個子模塊“暴露”一個json數據

//mod3.js文件的內容
export default {a:12,b:5};

//主入口（模塊）的內容
import modA from './mod3.js';
console.log(modA.a+modA.b);   //  17