JavaScript進階

時間 2019-11-05

原文原文鏈接

一面向對象

1 ES6以前的對象

1 基本對象的建立

1 定義一個函數(構造器)對象，使用this定義屬性
2 使用new 和構造器建立一個新對象
當使用new關鍵字後，其函數的調用將再也不是函數，而是一個原型，就以這個原型爲模板，構造出本身的實例，而後進行對應的個性化操做，將其當作構造器來處理其特殊的屬性或方法。前端

//古老的定義對象的方式 
var  obj= {
    a:'abc',
    b:'123',
    c:'[1,2,3,4]',
}
console.log(obj.a,obj.b,obj.c) 
function fn(x){
    this.x=x;
}
console.log(typeof(fn)) // 此處返回是一個函數
function  fn1(x,y) {
    this.x=x;
    this.y=y;
    console.log(this)  //指代函數自己,而不是實例化後的結果
    console.log(arguments)
}
a=new  fn1(10,20)  //對象構建，fn1由普通函數變成了一個構造器，new 先作對象，基於原型將a進行處理，經過對象虧幫屬性
console.log(a.x,a.y)

結果以下 node

2 繼承關係

function  fn(x,y) {
    console.log('fn')
    this.x=x; //初始化屬性 
    this.y=y;
    this.show=()=> ('show')  //初始化方法，及函數 
}
//繼承
function  fn1(x,y,z) {
    console.log('fn1')
    fn.call(this,x,y);  //調用父類構造器，
    this.z=z;
}

a=new  fn1(1,2,3)
console.log('fn1',a)  //此處將a修改爲一個對象，及字典，其對象中包含着全部的屬性和方法
console.log(a.show(),a.x,a.y,a.z)

結果以下 react

2 ES6之中的對象

1 要求和基本定義處理

1 類的定義使用class 關鍵字，建立的本質仍是函數，是一個特殊的函數
2 一個類只能擁有一個名爲constructor的構造方法，若是沒有顯示的定義一個構造方法，則會默認添加一個constructor方法
3 繼承使用extends 關鍵字
4 一個構造器可使用super關鍵字來調用父類的構造函數
5 類沒有私有屬性webpack

class  fn{   //定義類
    constructor(x,y){ 
        console.log('fn')
        this.x=x;  //定義屬性 
        this.y=y;
    }
    show ()  //定義方法 
    {  
        console.log(this,this.x,this.y)
    }
}
//繼承關係 
class  fn1 extends  fn{   //使用extends表示繼承 
    constructor(x,y,z){
        console.log('fn1')
        super(x,y);  //調用父類方法，必須傳入對應的值，不然父類無入值則會報錯。
        this.z=z;
    }
}
a=new  fn1(1,2,3)
console.log(a.show())  //調用父類的方法
console.log(a.x,a.y,a.z)

結果以下 web

2 函數重載

函數重載及函數名稱相同，參數個數或類型不一樣，此處稱爲重載
子類彙總直接能夠重寫父類的方法，若是須要使用父類的方法，則使用super.method()的方式調用npm

class  fn{   //定義類
    constructor(x,y){ 
        console.log('fn')
        this.x=x;  //定義屬性 
        this.y=y;
    }
    show ()  //定義方法 
    {  
        console.log(this,this.x,this.y)
    }
}

class  fn1 extends  fn{   //使用extends表示繼承 
    constructor(x,y,z){
        console.log('fn1')
        super(x,y);  //調用父類方法，必須傳入對應的值，不然父類無入值則會報錯。
        this.z=z;
    }
    show(){  //屬性重載操做
        console.log(this,this.x,this.y,this.z)
    }
}
a=new  fn1(1,2,3)
console.log(a.show())  //重載後的屬性調用
console.log(a.x,a.y,a.z)

結果以下編程

使用箭頭函數重寫方法json

class  fn{   //定義類
    constructor(x,y){ 
        console.log('fn')
        this.x=x;  //定義屬性 
        this.y=y;
    }
    show = () => console.log(this,this.x,this.y)
}

class  fn1 extends  fn{   //使用extends表示繼承 
    constructor(x,y,z){
        console.log('fn1')
        super(x,y);  //調用父類方法，必須傳入對應的值，不然父類無入值則會報錯。
        this.z=z;
    }
    show  = ()  => console.log(this,this.x,this.y,this.z)
}
a=new  fn1(1,2,3)
console.log(a.show())  //重載後的屬性調用
console.log(a.x,a.y,a.z)

3 類和屬性的繼承前後次序

class  fn{   //定義類
    constructor(x,y){ 
        this.x=x;  //定義屬性 
        this.y=y;
        this.show=() => console.log('this fn',this.x,this.y)
    }
    show = () => console.log('fn',this.x,this.y)
}

class  fn1 extends  fn{   //使用extends表示繼承 
    constructor(x,y,z){
        super(x,y);  //調用父類方法，必須傳入對應的值，不然父類無入值則會報錯。
        this.z=z;
        this.show=()  => console.log('this fn1',this.x,this.y,this.z);
    }
    show  = ()  => console.log('fn1',this.x,this.y,this.z);
}
a=new  fn1(1,2,3)
console.log(a.show())

結果以下數組

此處默認調用的是子類的屬性，瀏覽器

class  fn{   //定義類
    constructor(x,y){ 
        this.x=x;  //定義屬性 
        this.y=y;
        this.show=() => console.log('this fn',this.x,this.y)
    }
    show = () => console.log('fn',this.x,this.y)
}

class  fn1 extends  fn{   //使用extends表示繼承 
    constructor(x,y,z){
        super(x,y);  //調用父類方法，必須傳入對應的值，不然父類無入值則會報錯。
        this.z=z;
        // this.show=()  => console.log('this fn1',this.x,this.y,this.z);
    }
    show  = ()  => console.log('fn1',this.x,this.y,this.z);
}
a=new  fn1(1,2,3)
console.log(a.show())

結果以下

此處調用的是子類的方法

class  fn{   //定義類
    constructor(x,y){ 
        this.x=x;  //定義屬性 
        this.y=y;
        this.show=() => console.log('this fn',this.x,this.y)
    }
    show = () => console.log('fn',this.x,this.y)
}

class  fn1 extends  fn{   //使用extends表示繼承 
    constructor(x,y,z){
        super(x,y);  //調用父類方法，必須傳入對應的值，不然父類無入值則會報錯。
        this.z=z;
        // this.show=()  => console.log('this fn1',this.x,this.y,this.z);
    }
    // show  = ()  => console.log('fn1',this.x,this.y,this.z);
}
a=new  fn1(1,2,3)
console.log(a.show())

結果以下

class  fn{   //定義類
    constructor(x,y){ 
        this.x=x;  //定義屬性 
        this.y=y;
        // this.show=() => console.log('this fn',this.x,this.y)
    }
    show = () => console.log('fn',this.x,this.y)
}

class  fn1 extends  fn{   //使用extends表示繼承 
    constructor(x,y,z){
        super(x,y);  //調用父類方法，必須傳入對應的值，不然父類無入值則會報錯。
        this.z=z;
        // this.show=()  => console.log('this fn1',this.x,this.y,this.z);
    }
    // show  = ()  => console.log('fn1',this.x,this.y,this.z);
}
a=new  fn1(1,2,3)
console.log(a.show())

結果以下

總結
屬性和方法定義，不論是父類仍是子類。都是優先使用屬性，若兩個都是方法，則子類覆蓋父類，若是都是屬性，則是子類覆蓋父類，子類的優先級是高於父類的

4 靜態方法

靜態屬性目前支持不徹底
在方法前面加上static就是靜態方法了,此處的靜態方法是在類中進行調用的，而不是在實例中。

class  fn{   //定義類
    constructor(x,y){ 
        this.x=x;  //定義屬性 
        this.y=y;
    }
    static  show = () => console.log('fn',this.x,this.y)
}
console.log(fn.show())
a=new fn(1,2)
console.log(a.show())

結果以下

3 this 中坑

1 問題引出

雖然JavaScript和C和Java都有this，但JavaScript的表現是不一樣的
緣由在於C，Java是靜態編譯語言，this是在編譯期間綁定的，而js是動態語言，是在運行期間鎖定的。

var  school= {  //此處定義一個對象，其中包含name和getNamefunc兩個，其中name是屬性，getNamefunc是方法，其返回值是一個函數
name: 'test',
getNamefunc: function(){
    console.log(this.name)
    console.log(this)
    console.log('-----------------')
    return  function() {
        console.log(this == global);  //檢查其是不是全局的
        return this.name;
    }
    }
}

method=school.getNamefunc //此屬性調用後返回的是函數的類型，並未調用外層函數
a=method()  //調用外層函數
a()  //調用內層函數

結果以下

上面的返回結果是其this本應該是school，卻被處理稱爲了全局函數

var  school= {  //此處定義一個對象，其中包含name和getNamefunc兩個，其中name是屬性，getNamefunc是方法，其返回值是一個函數
name: 'test',
getNamefunc: function(){
    console.log(this.name)
    console.log(this)
    console.log('-----------------')
    return  function() {
        console.log(this == global);  //檢查其是不是全局的
        return this.name;
    }
    }
}

method=school.getNamefunc() //此處調用外層函數
a=method()  //調用外層函數

結果以下

此處的結果是this仍然是全局屬性

分析上例
第三行的打印結果是true,則代表當前是global的做用於，由於調用這個返回的函數是直接調用的，這是一個普通函數調用，所以this是全局對象

第四行undefined，就是由於this是global，因此沒name屬性

這就是函數調用的時候，調用方式不一樣，this對應的對象不一樣，它已經不是C++,Java的指向實例自己了。

this的問題，這是歷史遺留問題，新版本只能兼容了。

2 解決辦法

1 顯式傳參

var  school= {  //此處定義一個對象，其中包含name和getNamefunc兩個，其中name是屬性，getNamefunc是方法，其返回值是一個函數
name: 'test',
getNamefunc: function(){
    console.log(this.name)
    console.log(this)
    console.log('-----------------')
    return  function(that) {  //經過此處傳遞參數的方式改變
        console.log(that == global);  //檢查其是不是全局的
        return that.name;
    }
    }
}

console.log(school.getNamefunc()(school))

結果以下

2 ES3 引入了apply和 call方法

經過call將指定的this進行指定了。JavaScript中指代的是這個，其餘的Java指定的不一樣，普通函數的調用和對象的調用是不一樣的，普通函數的調用中的thi指代的是全局變量，而在對象中調用，默認傳遞的值是this的自己

var  school= {  //此處定義一個對象，其中包含name和getNamefunc兩個，其中name是屬性，getNamefunc是方法，其返回值是一個函數
    name: 'test',
    getNamefunc: function(){
        console.log(this.name)
        console.log(this)
        console.log('-----------------')
        return  function() {
            console.log(this == global);  //檢查其是不是全局的
            return this.name;
        }
        }
    }

    var school1={
        'name': 'test1'
    }
    method=school.getNamefunc() //此屬性調用後返回的是函數的類型，並未調用外層函數
    console.log(method.call(school1))  //經過call將其this傳遞進去，
    console.log('---------------')
    console.log(method.call(school))
    console.log('++++++++++++++++')
    console.log(method.apply(school)) //經過apply，將其this傳遞過去

結果以下

相關源碼

apply和 call方法都是函數對象的方法
apply傳遞其餘參數使用數組，call傳遞其餘參數須要使用可變參數收集。相關狀況以下

var  school= {  //此處定義一個對象，其中包含name和getNamefunc兩個，其中name是屬性，getNamefunc是方法，其返回值是一個函數
    name: 'test',
    getNamefunc: function(){
        console.log(this.name)
        console.log(this)
        console.log('-----------------')
        return  function(x,y,z) {
            console.log(this == global,x,y,z);  //檢查其是不是全局的
            return this.name;
        }
        }
    }

    method=school.getNamefunc() //此屬性調用後返回的是函數的類型，並未調用外層函數
    console.log('---------------')
    console.log(method.call(school,[1,2,3])) //此處傳地過去不會解構，是一個參數
    console.log('++++++++++++++++')
    console.log(method.apply(school,[1,2,3])) //經過apply，會解構，

結果以下

3 ES5中引入了bind方法

var  school= {  //此處定義一個對象，其中包含name和getNamefunc兩個，其中name是屬性，getNamefunc是方法，其返回值是一個函數
    name: 'test',
    getNamefunc: function(){
        console.log(this.name)
        console.log(this)
        console.log('-----------------')
        return  function(x,y,z) {
            console.log(this == global,x,y,z);  //檢查其是不是全局的
            return this.name;
        }
        }
    }

method=school.getNamefunc() //此屬性調用後返回的是函數的類型，並未調用外層函數
console.log(method.bind(school)(1,2,3))

結果以下

bind 是會返回一個新函數，其和偏函數類似

4 ES6中支持了this箭頭函數

var  school= {  //此處定義一個對象，其中包含name和getNamefunc兩個，其中name是屬性，getNamefunc是方法，其返回值是一個函數
    name: 'test',
    getNamefunc: function(){
        console.log(this.name)
        console.log(this)
        console.log('-----------------')
        return  (x,y,z)  => {
            console.log(this == global,x,y,z);  //檢查其是不是全局的
            return this.name;
        }
        }
    }

school1={
    name:'test1'
}
method=school.getNamefunc() //此屬性調用後返回的是函數的類型，並未調用外層函數
console.log(method(1,2,3))

結果以下

最外層使用箭頭函數的結果

var  school= {  //此處定義一個對象，其中包含name和getNamefunc兩個，其中name是屬性，getNamefunc是方法，其返回值是一個函數
    name: 'test',
    getNamefunc: () => {
        console.log(this.name)
        console.log(this)
        console.log('-----------------')
        return  (x,y,z)  => {
            console.log(this == global,x,y,z);  //檢查其是不是全局的
            return this.name;
        }
        }
    }

school1={
    name:'test1'
}
method=school.getNamefunc() //此屬性調用後返回的是函數的類型，並未調用外層函數
console.log(method(1,2,3))

結果以下

所以，通常不建議最外層使用箭頭函數

4 高階對象

1 簡介

Mixin 模式，及混合模式，這是一種不用繼承就能複用的技術，主要仍是爲了解決多重繼承的問題，多重繼承路徑是個問題

JS是基於對象的，類和對象都是對象模板

混合Mixin，指的是將一個對象的所有或者部分拷貝到另外一個對象上去了，其實就是屬性，能夠將多個類或者對象混合成一個類或者對象，任何一個對象均可以做爲另外一個對象的原型。

2 基礎代碼

class test{
    constructor(){
        console.log('test',this)
        if (typeof(this.show) !=='function')  {
            throw  new  ReferenceError('should define stringify.');
        }
    }
}
class test1  extends  test{
    constructor(x,y){
        super();
        this.x=x;
        this.y=y;
    }
    show(){
        return   `test1 ${this.x} ${this.y}`;
    }
}
p=new  test1(1,2)
console.log(p.show())

結果以下

此處的核心是誰調用的問題，上述父類的this是子類的實例，而不是子類調用父類後父類造成的實例，所以這也是驗證經過的緣由。

class test{
    constructor(){
        console.log('test',this)
        if (typeof(this.show) !=='function')  {
            throw  new  ReferenceError('should define stringify.');
        }
    }
}
class test1  extends  test{
    constructor(x,y){
        super();
        this.x=x;
        this.y=y;
    }
    show(){
        return   `test1 ${this.x} ${this.y}`;
    }
}

class test2  extends  test1 {
    constructor(x,y,z)  {
        super(x,y);
        this.z=z;
    }
}
p=new  test2(1,2)
console.log(p.show())  //此處本身自己沒有show，則經過調用父類的show來實現，上述傳入的this 仍然是子類的實例，

結果以下

3 高階對象實現

經過在test中使用函數並傳遞參數的方式將test1的相關屬性注入進去,相關代碼以下

初步改造結果以下

class test1{
    constructor(x,y){
        this.x=x;
        this.y=y;
    }
    show(){
        return   `test1 ${this.x} ${this.y}`;
    }
}
const  test = function  test(SUP)   {  //此函數的返回值是一個類，經過將類test1傳入其中進行相關的操做處理並進行輸出
    return   class    extends  SUP {
          constructor(...args) {
              super(...args);
              console.log('test',this)
              if (typeof(this.show) !=='function')  {
                  throw  new  ReferenceError('should define stringify.');
          }
      }
    }
}

class test2 extends  test(test1){
  constructor(x,y,z)  {
      super(x,y);
      this.z=z;
  }
}
p=new test2(1,2,3)
console.log(p.show())

結果以下

將上述函數修改成箭頭函數結果以下

class test1{
    constructor(x,y){
        this.x=x;
        this.y=y;
    }
    show(){
        return   `test1 ${this.x} ${this.y}`;
    }
}
const  test =  SUP=>  class    extends  SUP {
          constructor(...args) {
              super(...args);
              console.log('test',this)
              if (typeof(this.show) !=='function')  {
                  throw  new  ReferenceError('should define stringify.');
          }
      }
    }

class test2 extends  test(test1){
  constructor(x,y,z)  {
      super(x,y);
      this.z=z;
  }
}
p=new test2(1,2,3)
console.log(p.show())

注意：
test(test1)這一步其實是一個匿名箭頭函數的調用，返回一個新的類型，test2繼承自這個新的類型，加強了功能，react大量使用了這種Mixin技術。

二異常

1 基礎實例

try {
    throw  1; // 拋出異常
} catch (error){    //此處不用指定異常類型，此處的error是上面的throw扔出來的
    console.log(error,typeof(error));
}

拋出一個對象

try {
    throw  {}; // 拋出異常
} catch (error){    //此處不用指定異常類型，此處的error是上面的throw扔出來的
    console.log(error,typeof(error));
}

結果以下

拋出一個函數

try {
    throw  () => console.log(2); // 拋出異常
} catch (error){    //此處不用指定異常類型，此處的error是上面的throw扔出來的
    console.log(error,typeof(error));
}

結果以下

2 拋出異常

try {
    throw  Error('new Error'); // 拋出異常
} catch (error){    //此處不用指定異常類型，此處的error是上面的throw扔出來的
    console.log(error,typeof(error));
}

結果以下

try {
        throw ReferenceError('new Error')
    } catch  (error){  //此處不用指定類型  ，此處的error是接上面扔出來的東西
        console.log(error,typeof(error));
    };

結果以下

try {
        throw ReferenceError('new Error')
    } catch  (error){  //此處不用指定類型  ，此處的error是接上面扔出來的東西
        console.log(error,typeof(error));  //此處不影響下面的執行
        console.log(error.constructor);  //此處的執行結果是函數
    };

結果以下

try {
        throw ReferenceError('new Error')
    } catch  (error){  //此處不用指定類型  ，此處的error是接上面扔出來的東西
        console.log(error,typeof(error));  //此處不影響下面的執行
        console.log(error.constructor.name);  //獲取函數名稱
    };

結果以下

3 必須執行的finally

try {
        throw null;
    } catch  (error){  //此處不用指定類型  ，此處的error是接上面扔出來的東西
        console.log(error,typeof(error));
        console.log(error.constructor.name); //一切皆函數
    } finally  {  //定義必須執行的函數
        console.log('1325345234')
    }

結果以下

三解構和相關方法

1 JS數組解構

1 常量的修改

常量的聲明和初始化時不能被分開的，常量只是對象的地址不能發生改變了，並非其中的內容也不能改變了。

const   l1=[1,2,3,4]
l1.pop() //l1雖然是一個常量，但其能夠被修改
console.log(l1)

2 參數解構

徹底解構

const   l1=[1,2,3,4]
const  [a,b,c,d]=l1 
console.log(a,b,c,d)

丟棄解構

const   l1=[1,2,3,4]
const  [a,b,,c,d]=l1 
console.log(a,b,c,d)

結果以下

const   l1=[1,2,3,4]
const [a]=l1
console.log(a)

結果以下

可變變量

const   l1=[1,2,3,4]
const  [a,...d]=l1 
console.log(a,d)

結果以下

const   l1=[1,2,3,4]
const  [a,...d,e]=l1  //可變長必須放置在最後面 
console.log(a,d,e)

默認值

const   l1=[1,2,3,4]
const [x=10,,,,y=20]=l1  //能覆蓋的覆蓋，不能覆蓋的保持原值，先賦值，再覆蓋，
console.log(x,y)

3 複雜數組解構

const arr = [1,[2,3],4];  //三個元素，嵌套解構
const [a,[b,c],d]=arr;  
console.log(a,b,c,d);  //直接拆開 
const [e,f]=arr;  // 只有兩
console.log(e,f);  // 第一個和第二個 

const [g,h,i,j=18]=arr;  // 三個 加1 ，則是對應的
console.log(g,h,i,j);
const  [k,...l]=arr;  // 此處會將後面兩個元素進行搬家
console.log(k,l);

結果以下

2 數組方法

1 方法描述

方法	描述
push(...items)	尾部追多個元素
pop()	移除最後一個元素，並返回它
map	引入處理函數來處理數組中的每個元素，返回新的數組
filter	引入處理函數處理數組中的每個元素，此處理函數返回true的元素保留，不然該元素被過濾掉，保留的元素構成新的數組返回
foreach	迭代全部元素，無返回值

2 push方法

const   l1=[1,2,3,4]
l1.push([5,6,7,8])
l1.push(...['a','b','c'])
l1.push(9,10,11)
console.log(l1)

結果以下

3 pop 方法

const   l1=[1,2,3,4]
l1.push([5,6,7,8])
l1.push(...['a','b','c'])
l1.push(9,10,11)
console.log(l1.pop())
console.log(l1.pop())
console.log(l1.pop())
console.log(l1)

結果以下

4 map方法

const  abs = (x) => x**2
const   l1=[1,2,3,4]
console.log(l1.map(abs))

結果以下

5 filter

const  abs  = function  (x)  {
    if (x%2==0) {
        return  true;
    }
    else {
        return  false;
    }
}
const   l1=[1,2,3,4]
console.log(l1.filter(abs))

結果以下

6 foreach

const   l1=[1,2,3,4]
const  newarr= l1.forEach(x=>x+10) //無返回值
console.log(newarr,l1)

結果以下

7 數組練習

有一個數組const arr=[1,2,3,4,5];，要求計算出全部元素平方值是偶數且大於10的。

代碼一

const   arr=[1,2,3,4,5];
console.log(arr.filter(x => ((x**2)%2==0 && (x**2)>10)))

代碼二，若平方是偶數，則該數也應該是偶數，則以下

const   arr=[1,2,3,4,5];
console.log(arr.filter((x=> x%2==0 && x**2>10)))

代碼三,經過map來實現

const   arr=[1,2,3,4,5];
console.log(Math.log2(((arr.filter(x=>x%2==0)).map(x=>x**2)).filter(x=>x>10)))

代碼四，求10的平方根，而後再進行相關比較

const   arr=[1,2,3,4,5];
const  cond=10
const  cond1=Math.sqrt(cond)
console.log(arr.filter(x=>x%2==0 && x> cond1))

3 對象解構

var  metadata= {
        title: "Seratchpad",
        translations :[
            {
            locale: "de",
            localization_tags: [],
            last_edit: "2019-01-01T08:11:11",
            url: "/de/docs/Tools/scratchpad",
            title: "JavaScript-Umgebung"
            }
        ],
        url: "/en-US/docs/Tools/Scratchpad" 
}
var  {title:enTitle,translations:[{title: localeTitle}] }=metadata; //: 後面的是重命名

console.log(enTitle)
console.log(localeTitle)

4 對象操做

1 基本介紹

object 的靜態方法	描述
object.keys(obj)	ES5開始支持，返回全部key
object.values(obj)	返回全部值，實驗階段，支持較差
object.entries(obj)	返回全部值，試驗階段，支持較差
object.assign(target,...sources)	使用多個source對象，來填充target對象，返回target對象

var  obj = {
        a:100,
        b:200,
        c:()=>{}
    }
console.log(Object.keys(obj)) //返回全部的鍵
console.log(Object.values(obj)) //返回全部的值
console.log(Object.entries(obj))//返回全部的鍵和值
obj1={
    d:300,
    e:400,
}
let  obj2=Object.assign(obj,obj1)  //返回新的對象
console.log()

結果以下

四模塊化

1 簡介

ES6 以前，JS沒有出現模塊化系統
JS主要是在前端瀏覽器中使用,JS文件下載緩存到客戶端，在瀏覽器中執行。
好比簡單的表達本地驗證，漂浮一個廣告。

服務器端使用ASP,JSP等動態網頁技術，將動態生成數據嵌入一個HTNL模板，裏面夾雜着JS後使用<script>標籤，返回瀏覽器端。
這時候的JS知識一些簡單的函數和語句組合。

2005年後，隨着Google大量使用了AJAX技術後，能夠一步請求服務器端數據，帶來了前端交互的巨大變化，前端的功能需求愈來愈多，代碼也愈來愈多，隨着JS文件的增長，災難性的後果產生了，因爲習慣了隨便寫，JS腳本中各類全局變量污染，函數名衝突，沒法表達腳本之間的依賴關係。此時便有待模塊化的產生。

2008年V8引擎發佈後，2009年誕生了nodejs，支持服務端JS編程，但沒有模塊化是不能夠的，以後產生了commonjs規範。

commonjs 規範
使用全局require函數來導入模塊，模塊名就是文件名，使用exports導出變量
exports包含了全部須要導出的函數

require會將exports中的全部函數遍歷出來便可進行相關的處理操做。

AMD規範
AMD (asynchronous module definition)異步模塊定義，使用異步方式加載模塊，模塊的加載不影響它後面語句的執行，全部依這個模塊的語句，都須要定義在一個回調函數中，回調函數中使用模塊的變量和函數，等模塊加載完成以後，這回調函數才執行，就能夠安全的使用模塊中的資源了。其實現就是AMD/requireJS.AMD雖然是異步，可是會預先加載和執行。

CMD(Common Module Defintion)，使用seajs，做者是淘寶前端玉伯，兼容並解決了requirejs的問題，CMD推崇as lazy as possible，儘量的懶加載。

2 ES6模塊中的導入

import語句，導入另外一個模塊導出的綁定

export語句，從模塊中導出函數，對象，值等，供其餘模塊import導入

建立兩個文件

1.js和2.js

1.js中寫入以下數據

//導出默認類
export  default   class A {//此處設置默認導出，能夠導出類，函數，變量和常量
        constructor(x){
            this.x=x;
        }
        show() {
            console.log(this.x)
        }    
}
//導出函數 
export var foo =() =>console.log('foo function')

//導出變量 
export  const CONST='aaa';

2.js中進行相關導入

以下

import {foo,CONST}  from  './1'; //此處若不指定./當前目錄。則默認是全局變量
import A from "./1";

let a=new A(10);
a.show();

foo();
console.log(CONST)

因爲相關的引擎均不支持import 和export操做，所以須要經過相關的附加模塊來實現此種操做
上述中使用{}能夠同時導入多個環境變量。

3 轉譯(label)

1 簡介

轉譯就是從一種語言代碼到另外一個語言代碼，固然可使從高版本轉譯到低版本的支持語句。
因爲JS存在不一樣的版本，不一樣瀏覽器的兼容問題可經過transpiler轉譯工具進行解決，而babel就是其中的一種，官網以下
https://www.babeljs.cn

2 本地安裝label

1 須要生成package.json文件，用於編譯使用，可經過npm init 進行初始化

生成文件以下

3 設置國內鏡像，用於下載相關依賴包速度更快

.npmrc文件，此文件可經過touch .npmrc建立
能夠放置到npm目錄下的npmrc文件中。也能夠放置到用戶家目錄中，也能夠放置到項目根目錄中，此處放置到項目根目錄，以下

registry=http://registry.npm.taobao.org

以下

4 安裝

npm install  babel-core babel-cli  --save-dev

相關參數說明

--save-dev 說明
當你爲你的模塊安裝一個依賴模塊時，正常狀況下你得先安裝他們(在模塊根目錄下npm install mode-name)，而後連同版本號手動將其添加到模塊配置文件package.json中的依賴中

--save 和--save-dev能夠省略你手動修改package.json文件的步驟。
npm install mode-name --save 自動將模塊和版本號添加到dependencies部分，用於在打包至線上的依賴關係時使用
npm install mode-name --save-dev 自動將模塊和版本號添加到devdependencise部分

查看package.json中的內容

5 準備目錄

項目根目錄中建立src和lib目錄
src是源碼目錄;
lib是目標目錄；

6 配置 babel

在目錄根目錄下建立.babelrc文件,json格式，其babelrc是和babel運行相關的
內容以下

{
    "presets":["env"]
}

7 修改配置文件package.json，肯定轉換源和目標

{
  "name": "test",
  "version": "1.0.0",
  "description": "from test",
  "main": "1.js",
  "scripts": {
    "build": "babel src -d  lib"
  },
  "author": "test",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3"
  }
}

此處是scripts中的修改，其若目標爲目錄，則爲-d，若目標爲文件，則爲-o。

8 準備源文件

將1.js 和 2.js放置到src下

9 安裝依賴

npm install  babel-preset-env --save-dev

10項目根目錄執行npm run build

npm run  build

轉換後的結果

運行以下

後期的經過webpack來實現全部的的聯動，自動化的打包操做所有進行處理。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

JavaScript進階

一 面向對象

1 ES6以前的對象

1 基本對象的建立

2 繼承關係

2 ES6之中的對象

1 要求和基本定義處理

2 函數重載

3 類和屬性的繼承前後次序

4 靜態方法

3 this 中坑

1 問題引出

2 解決辦法

1 顯式傳參

2 ES3 引入了apply和 call方法

3 ES5中引入了bind方法

4 ES6中支持了this箭頭函數

4 高階對象

1 簡介

2 基礎代碼

3 高階對象實現

二 異常

1 基礎實例

2 拋出異常

3 必須執行的finally

三 解構和相關方法

1 JS數組解構

1 常量的修改

2 參數解構

3 複雜數組解構

2 數組方法

1 方法描述

2 push方法

3 pop 方法

4 map方法

5 filter

6 foreach

7 數組練習

3 對象解構

4 對象操做

1 基本介紹

四 模塊化

1 簡介

2 ES6模塊中的導入

3 轉譯(label)

1 簡介

2 本地安裝label

3 設置國內鏡像，用於下載相關依賴包速度更快

4 安裝

5 準備目錄

6 配置 babel

7 修改配置文件package.json，肯定轉換源和目標

8 準備源文件

9 安裝依賴

10項目根目錄執行npm run build

一面向對象

二異常

三解構和相關方法

四模塊化