国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網首頁
  2. >Toy博客

前端技術棧 - ES6 - Promise -模塊化編程

2年前作者：吉岡秀隆分類：Toy博客閱讀(1835)違法舉報

這篇具有很好參考價值的文章主要介紹了前端技術棧 - ES6 - Promise -模塊化編程。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。


前端技術棧 - ES6 - Promise -模塊化編程

??ES6

  1. ECMAScript 6.0(簡稱ES6)是JavaScript語言的下一代標準, 2015年6月發(fā)布.
  2. ES6設計目標: 達到JavaScript語言可以用來編寫復雜的大型程序, 成為企業(yè)級開發(fā)語言.
  3. ECMAScript和JavaScript的關系就: ECMAScript是JavaScript的規(guī)范/規(guī)則, JavaScript是ECMAScript的一種實現(xiàn).

?let變量

前端技術棧 - ES6 - Promise -模塊化編程
let.html
+與,的區(qū)別

let name = "趙志偉";
console.log("name=", name);//使用逗號可以輸出對象的完整信息
console.log("name=" + name);//使用加號, 類似于字符串的拼接. 如果name是對象, 輸出的就是object, 而不會輸出對象的完整信息

let_detail.html
細節(jié)1. let聲明的變量有嚴格的局部作用域

//var聲明的變量, 在代碼塊中, 作用域沒有限制
//let聲明的變量, 在代碼塊中, 則作用域在代碼塊中
{
    var name = "趙志偉";
    let job = "java工程師";
    console.log("name= ", name);
    console.log("job= ", job);
}
console.log("name= ", name);
console.log("job= ", job);//job is not defined

細節(jié)2. var 可以聲明多次; let 只能聲明一次

var num1 = 100;
var num1 = 200;
console.log("num1= ", num1);
let num2 = 300;
//SyntaxError 語法錯誤
let num2 = 400;//SyntaxError: redeclaration of var num1
console.log("num2= ", num2);

細節(jié)3. var 存在變量提升; let 不存在變量提升

console.log("x= ", x);//ReferenceError: x is not defined

console.log("y= ", y);//y= undefined[認你這個變量, 不過變量現(xiàn)在還沒有值]
var y = "mary";

console.log("z= ", z);//ReferenceError: can't access lexical declaration 'z' before initialization
let z = "mary";

?const常量

const.html
常量在定義時, 需要賦值; 常量賦值后不能修改

const PI;//SyntaxError: missing = in const declaration
const PI = 3.14;
PI = 3.1415;//TypeError: invalid assignment to const 'PI'
console.log("PI=", PI);

?數(shù)組解構

arr_resolve.html

  1. 解構賦值是對賦值運算符的擴展
  2. 是一種針對數(shù)組或者對象進行模式匹配, 對其中的變量進行賦值
  3. 主要有兩種形式: 數(shù)組解構和對象結構

傳統(tǒng)方式解構

let arr = ["趙志偉",23,"java工程師"];
//如果要看某個變量的類型[,會把所有信息都打印出來]
console.log("arr=>", arr);
//數(shù)組解構
// ※傳統(tǒng)方式
let x = arr[0], y = arr[1], z = arr[2];
console.log(x, y, z);
console.log("=============================================");

ES6風格解構

// ※ES6風格
let [a, b, c] = arr;
console.log(a, b, c);
console.log("=============================================");
let [num1, num2, num3] = ["趙志偉",23,"java工程師"];
console.log(num1, num2, num3);

?對象解構

object_resolve.html
傳統(tǒng)方式解構

//monster是一個對象
let monster = {name: "美猴王", age: 30000};
//傳統(tǒng)方式解構[取出屬性]
console.log(monster.name, " ", monster.age);

ES6對象解構

//ES6對象解構
//1.把monster對象的屬性, 依次賦值給{name,age}
//2.{name,age}的取名name, age要和monster對象的屬性名保持一致
//3.要使用{ }, 不要使用[]
//4.{name,age} 里面的順序是無所謂的
let monster = {name: "美猴王", age: 30000};
let {name, age} = monster;
console.log("name=", name, " age=", age);
console.log("===================================");

//下面這個寫法也可以
// let {name, age} = {name: "牛魔王", age: 35000};

//還有其它的形式, 比如方法上使用對象解構
//如果這樣使用, 仍然要保證 {}名稱 和對象的屬性名一致
function f1({name, age}) {
    console.log("f1-name=", name, " ", "f1-age=", age);
}

f1(monster);

?模板字符串

template_str.html
字符串, 換行會原生輸出

//1.字符串, 換行會原生輸出
let str1 = `for(int i = 0; i < 10; i++) {
    System.out.println("i=" + i);
}`;
console.log("str1=", str1);

字符串插入變量和表達式. 變量名寫在 ${} 中, ${} 中可以放入 JavaScript 表達式

//2.字符串插入變量和表達式. 變量名寫在 ${} 中, ${} 中可以放入 JavaScript 表達式
let name = "趙志偉";
//(1)當解析 ${name} 時, 就找最近的name變量, 進行替換
//(2)然后可以得到最后解析的字符串
let str2 = `我是${name}`;
let str3 = `1+2=${1 + 2}`;
let n1 = 80;
let n2 = 20;
let str4 = `${n1}+${n2}=${n1 + n2}`;
console.log("str2=", str2);
console.log("str3=", str3);
console.log("str4=", str4);

字符串中調用函數(shù)

//3.字符串中調用函數(shù)
function hello(name) {
    return "hello, " + name;
}

let name2 = "mary";
let str5 = `hello() 返回的結果是=${hello("趙志偉")}`;
let str6 = `hello() 返回的結果是=${hello(name2)}`;
console.log("str5=", str5);
console.log("str6=", str6);

?對象聲明簡寫

object.html

const age = 23;
const name = "趙志偉";
//傳統(tǒng) 聲明.定義對象
let monster = {name: name, age: age};
//ES6 聲明.定義對象
//1.{name,age}: 表示對象的屬性名是name和age
//2.屬性name,age的值是從常量/變量 name,age來的
let monster2 = {name, age};
console.log("monster2=", monster2);

?對象方法簡寫

object_method.html
傳統(tǒng)-對象方法定義

//傳統(tǒng)-對象方法定義
let monster = {
    name: "玉皇大帝",
    age: 10000000,
    sayHi: function () {
        console.log("信息: name=", this.name, " age=", this.age);
    }
}
monster.f2 = function () {
    console.log("f2()");
}
monster.sayHi();
monster.f2();

ES6-對象方法定義

let monster2 = {
    name: "紅孩兒~",
    age: 2000000,
    sayHi() {
        console.log("信息: name=", this.name, " age=", this.age);
    },
    f1() {
        console.log("f1() ");
    }
}
monster2.sayHi();
monster2.f1();

?對象運算符擴展

object_operator.html
拷貝對象-深拷貝

let cat = {name: "小花貓", age: 2};
// let cat2 = cat;對象的引用
// cat2.name = "大花貓";
// console.log("cat=", cat);
// console.log("cat2=", cat2);
//拷貝對象-深拷貝
let cat2 = {...cat};
cat2.name = "中華田園貓";
console.log("cat=", cat);
console.log("cat2=", cat2);

合并對象-深拷貝

//合并對象-深拷貝
let monster = {name: "白骨精", age: 100};
let car = {brand: "奔馳", price: 10000};
let monster_car = {...monster, ...car};
monster_car.name = "狐貍精";
console.log("monster=", monster);
console.log("monster_car=", monster_car);

?箭頭函數(shù)

1. 箭頭函數(shù)提供了更加簡潔的函數(shù)書寫方式 2. 基本語法是: ( 參數(shù)列表 ) => { 函數(shù)體 } 3. 箭頭函數(shù)沒有參數(shù)或有多個參數(shù), 要用( )括起來. 箭頭函數(shù)只有一個參數(shù), 可以省略( ) 4. 箭頭函數(shù)函數(shù)體有多行語句, 用 { } 包裹起來, 表示代碼塊 5. 函數(shù)體只有一行語句, 并且需要返回結果時, 可以省略 { } , 結果會自動返回 6. 箭頭函數(shù)多用于匿名函數(shù)的定義

傳統(tǒng)

//傳統(tǒng)
var f1 = function (n) {
    return n * 2;
}
console.log("傳統(tǒng)方式=", f1(3));

ES6, 箭頭函數(shù)使用

//ES6, 箭頭函數(shù)使用
let f2 = (n) => {
    return n * 2;
}
console.log(f2);
console.log("箭頭函數(shù)=", f2(999));//1998
//上面的ES6函數(shù)寫法, 還可以簡寫
let f3 = (n) => n * 2;
let f4 = n => n * 2;
console.log("f3=", f3(100));
console.log("f4=", f4(400));
//函數(shù)也可以傳給一個變量
function hi(f5) {
    console.log(f5(900));
}
hi(n => n + 1);
hi((n) => {
    return n - 1;
})

案例二: 傳統(tǒng)函數(shù)改造成箭頭函數(shù)

//傳統(tǒng)
let f1 = function (n, m) {
    let res = 0;
    for (let i = n; i <= m; i++) {
        res += i;
    }
    return res;
};
//ES6, 箭頭函數(shù)使用
let f2 = (n, m) => {
    let res = 0;
    for (let i = n; i <= m; i++) {
        res += i;
    }
    return res;
};
console.log("f2=", f2(1, 10));

案例三: 箭頭函數(shù)+對象解構

const monster = {
    name: "美猴王",
    age: "30000",
    skill: ["筋斗云", "火眼金睛"]
};
//要求: 在方法形參取出monster對象的skill屬性
//傳統(tǒng)方式
let f1 = function (monster) {
    console.log("skill=", monster.skill);
}
f1(monster);
//箭頭函數(shù)
let f2 = ({skill}) => {
    console.log("skill=", skill);
}
//1.f2傳入對象 monster
//2.f2形參是 {skill}, 所以根據(jù)ES6的對象解構特性, 會把monster對象skill屬性賦給 skill
//3.對象解構的前提 {skill}的skill和 monster 的skill屬性名一致
f2(monster);

//箭頭函數(shù)+解構: 注意有{}, skill名稱需要和對象屬性名一致
//{} 去掉后, monster會賦給name, 所以{}必須帶上才能解構
let f3 = ({name, age, skill}) => {
    console.log("name=", name, " ", "age=", age, " ", "skill=", skill);
}
f3(monster);

?作業(yè)布置

  1. 要求使用模板字符串顯示cat的信息
let cat = {name: "喵喵~", age: 3};
let str = `這是一只小花貓, 名字叫${cat.name}, 年齡${cat.age}歲`;
console.log("str=", str);
  1. 看下面的代碼, 請問輸出什么, 并分析原因
let dog = {name: "旺財", age: 5};
let {namex, age} = dog;
console.log("namex=", namex, " age=", age);
  1. 根據(jù)給出的數(shù)據(jù), 用ES6的方式, 構建對象star, 并提供方法, 可以輸出信息
let name = "周星馳";
let job = "喜劇演員";
let star = {
    name,
    job,
    show() {
        console.log("star信息為 name=", this.name, " job=", this.job);
    }
};
star.show();
  1. 根據(jù)給出的數(shù)據(jù), 用ES6的方式, 編寫方法. 使用對象解構的方式, 得到oper和arr, 并根據(jù)oper的值 (oper可以是+, -, *, /) , 來計算結果
var cal = {
    oper: "*",
    arr: [1, 2, 3, 4, 5]
};
let f1 = ({oper, arr}) => {
    if (arr == null || arr.length <= 0) {
        console.log("數(shù)據(jù)為空");
        return;
    }
    if (arr.length == 1) {
        console.log("result=", arr[0]);
        return;
    }
    let result = arr[0];
    switch (oper) {
        case "+":
            for (let i = 1; i < arr.length; i++) {
                result += arr[i];
            }
            console.log("result=", result);
            break
        case "-":
            for (let i = 1; i < arr.length; i++) {
                result -= arr[i];
            }
            console.log("result=", result);
            break
        case "*":
            for (let i = 1; i < arr.length; i++) {
                result *= arr[i];
            }
            console.log("result=", result);
            break
        case "/":
            for (let i = 1; i < arr.length; i++) {
                result /= arr[i];
            }
            console.log("result=", result);
            break
    }
};
f1(cal);
  1. 調用 f8 函數(shù), arr是數(shù)組, fun傳入箭頭函數(shù). 可以計算arr的和, 并寫出調用方法
let f8 = (arr, fun) => {
    console.log("結果=", fun(arr));
}

f8([1, 2, 3], (arr) => {
    let sum = arr[0];
    for (let i = 1; i < arr.length; i++) {
        sum += arr[i];
    }
    return sum;
});

??Promise

1. 傳統(tǒng)的Ajax異步調用在需要多個操作的時候, 會導致多個回調函數(shù)嵌套, 導致代碼不夠直觀, 就是常說的Callback Hell 2. 為了解決上述問題, Promise對象應運而生. 在EMCAScript 2015當中已經成為標準 3. Promise是異步編程的一種解決方案 4. 從語法上說, Promise是一個對象, 從中可以獲取異步操作的消息 5. Promise是ES6的新特性, 比較重要

?需求分析

前端技術棧 - ES6 - Promise -模塊化編程

promise/data/monster.json

{
  "id": 1,
  "name": "唐僧"
}

promise/data/monster_detail_1.json

{
  "id": 1,
  "address": "東土大唐",
  "skill": "阿彌陀佛",
  "age": 30000,
  "gf_id": 2
}

promise/data/monster_girlfriend_2.json

{
  "id": 2,
  "name": "女兒國國王",
  "age": 30000
}

?傳統(tǒng)ajax回調嵌套

promise/ajax.html

//jquery發(fā)出ajax請求
$.ajax({
    url: "data/monster.json",
    //下面是ES6對象方法簡寫形式
    success(resultData) {//成功回調處理函數(shù)
        console.log("第1次ajax請求 monster基本信息=", resultData);
        //發(fā)出第二次ajax請求
        $.ajax({
            url: `data/monster_detail_${resultData.id}.json`,//模板字符串
            success(resultData) {
                console.log("第2次ajax請求 monster詳細信息=", resultData);
                //$.ajax => Callback Hell
                //$.ajax
                //$.ajax
            },
            error(err) {
                console.log("第2次ajax請求出現(xiàn)異常 異常信息=", err);
            }
        })
    },
    error(err) {
        console.log("第1次ajax請求出現(xiàn)異常 異常信息=", err);
    },
})

?promise改進

  1. 創(chuàng)建Promise對象
  2. 構造函數(shù)傳入一個箭頭函數(shù)
  3. (resolve, reject)參數(shù)列表
  4. 如果請求成功, 調用resolve函數(shù); 如果請求失敗, 調用reject函數(shù)
  5. 箭頭函數(shù)體, 仍然是通過jquery發(fā)出ajax

promise/promise.html

//先請求到monster.json
let p = new Promise((resolve, reject) => {
    //發(fā)出ajax請求
    $.ajax({
        url: "data/monster.json",
        success(resultData) {//成功回調函數(shù)
            console.log("promise發(fā)出的第1次ajax請求 monster基本信息=", resultData);
            resolve(resultData);
        },
        error(err) {
        console.log("promise發(fā)出的第1次異步請求異常, 異常信息=", err);
        },
    });
})

//在這里我們可以繼續(xù)編寫請求成功后的業(yè)務
p.then((resultData) => {
    //這里我們可以繼續(xù)發(fā)出請求
    // console.log("p.then 得到 resultData", resultData);
    $.ajax({
        url: `data/monster_detail_${resultData.id}.json`,//模板字符串
        success(resultData) {//第二次ajax請求成功的回調函數(shù)
        console.log("promise發(fā)出的第2次ajax請求 monster的詳細信息=", resultData);
        },
        error(err) {//第2次ajax請求失敗的回調函數(shù)
            console.log("promise發(fā)出的第2次異步請求異常, 異常信息=", err);
        }
    })
});

?promise異常捕獲

let p = new Promise((resolve, reject) => {
    //發(fā)出ajax請求
    $.ajax({
        url: "data/monster.json",
        success(resultData) {//成功回調函數(shù)
		        console.log("promise發(fā)出的第1次ajax請求 monster基本信息=", resultData);
            resolve(resultData);
        },
        error(err) {
            //console.log("promise發(fā)出的第1次異步請求異常, 異常信息=", err);
            reject(err);
        },
    });
});

//在這里我們可以繼續(xù)編寫請求成功后的業(yè)務
p.then((resultData) => {
    //這里我們可以繼續(xù)發(fā)出請求
    // console.log("p.then 得到 resultData", resultData);
    return new Promise((resolve, reject) => {//第二次錯誤被捕獲, 但是沒有輸出信息, 原因:這里沒加return
        $.ajax({
            url: `data/monster_detail1_${resultData.id}.json`,//模板字符串
            success(resultData) {//第二次ajax請求成功的回調函數(shù)
		            console.log("promise發(fā)出的第2次ajax請求 monster的詳細信息=", resultData);
                //繼續(xù)進行下一次的請求
            },
            error(err) {//第2次ajax請求失敗的回調函數(shù)
                // console.log("promise發(fā)出的第2次異步請求異常, 異常信息=", err);
                reject(err);
            }
        })
    })
}).catch((err) =>{//這里可以對多次ajax請求的異常進行處理
    console.log("promise異步請求異常=", err);
});

?promise鏈式調用

//在這里我們可以繼續(xù)編寫請求成功后的業(yè)務
p.then((resultData) => {
    //這里我們可以繼續(xù)發(fā)出請求
    // console.log("p.then 得到 resultData", resultData);
    return new Promise((resolve, reject) => {//第二次錯誤被捕獲, 但是沒有輸出信息, 原因:這里沒加return
        $.ajax({
            url: `data/monster_detail_${resultData.id}.json`,//模板字符串
            success(resultData) {//第二次ajax請求成功的回調函數(shù)
            		console.log("promise發(fā)出的第2次ajax請求 monster的詳細信息=", resultData);
                //繼續(xù)進行下一次的請求
                resolve(resultData);
            },
            error(err) {//第2次ajax請求失敗的回調函數(shù)
                // console.log("promise發(fā)出的第2次異步請求異常, 異常信息=", err);
                reject(err);
            }
        })
    })
}).then((resultData) => {
    // console.log("p.then().then, resultData=", resultData);
    //即 可以在這里發(fā)出第3次 ajax請求 => 獲取該妖怪的女友信息
    return new Promise((resolve, reject) => {
        $.ajax({
            url: `data/monster_girlfriend_${resultData.gf_id}.json`,//模板字符串
            success(resultData) {//第3次ajax請求成功的回調函數(shù)
            		console.log("promise發(fā)出的第3次ajax請求 monster的女友信息=", resultData);
                //繼續(xù)進行下一次的請求
                resolve(resultData);
            },
            error(err) {//第3次ajax請求失敗的回調函數(shù)
                // console.log("promise發(fā)出的第3次異步請求異常, 異常信息=", err);
                reject(err);
            }
        })
    })
}).catch((err) => {//這里可以對多次ajax請求的異常進行處理
    console.log("promise異步請求異常=", err);
});

?promise代碼重排優(yōu)化

/**
 * 這里將重復的代碼, 抽出來, 編寫一個方法get
 * @param url ajax請求的資源
 * @param data ajax請求攜帶的數(shù)據(jù)
 * @returns {Promise<unknown>}
 */
function get(url, data) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: url,
            data: data,
            success(resultData) {
                resolve(resultData);
            },
            error(err) {
                reject(err);
            },
        })
    })
}

//需求:完成
//1.先獲取monster.json
//2.獲取monster_detail_1.json
//3.獲取monster_girlfriend_2.json
get("data/monster.json").then((resultData) => {
    //第1次ajax請求成功后處理代碼
    console.log("第1次ajax請求返回數(shù)據(jù)=", resultData);
    return get(`data/monster_detail_${resultData.id}.json`);

}).then((resultData) => {
    //第2次ajax請求成功后處理代碼
    console.log("第2次ajax請求返回數(shù)據(jù)=", resultData);
    return get(`data/monster_girlfriend_${resultData.gf_id}.json`);
}).then((resultData) => {
    //第3次ajax請求成功后處理代碼
    console.log("第3次ajax請求返回數(shù)據(jù)=", resultData);

}).catch(err => {//箭頭函數(shù)只有一個參數(shù), 可以不用()小括號
    console.log("promise請求異常=", err);
})

?作業(yè)布置

分別使用jquery-ajax 和 promise代碼重排, 完成如下功能. 發(fā)出3次ajax請求, 獲取對應的數(shù)據(jù), 注意體會promise發(fā)出多次ajax請求的便利之處

??模塊化編程

?基本介紹

  1. 傳統(tǒng)非模塊化開發(fā)有如下的缺點: (1) 命名沖突; (2) 文件依賴
  2. JavaScript代碼越來越龐大, JavaScript引入模塊化編程, 開發(fā)者只需要實現(xiàn)核心的業(yè)務邏輯, 其它都可以加載別人已經寫好的模塊
  3. JavaScript使用 “模塊” 的概念來實現(xiàn)模塊化編程, 解決非模塊化編程問題
  4. 模塊化也是ES6的新特性

?原理示意圖

前端技術棧 - ES6 - Promise -模塊化編程

?ES5模塊化編程

ES5模塊化編程也叫CommonJS模塊化編程

  1. 每個js文件就是一個模塊, 有自己的作用域. 在文件中定義的變量, 函數(shù), 類, 都是私有的, 對其它文件是不可用的
  2. CommonJS使用 module.exports={ } / exports={ }導出模塊, 使用 let/const 名稱 = require("xx.js")導入模塊`

需求說明

  1. 編寫 functions.js, 該文件有函數(shù), 變量, 常量, 對象, 數(shù)組…
  2. 要求在use.js中, 可以使用到function.js中定義的 函數(shù)/變量/常量/對象/數(shù)組
  3. 要求使用模塊化編程的方式完成

思路分析
前端技術棧 - ES6 - Promise -模塊化編程

module/es5/function.js

//定義對象, 變量, 常量, 函數(shù)
const sum = function (num1, num2) {
    return parseInt(num1) + parseInt(num2);
};
const sub = function (num1, num2) {
    return parseInt(num1) - parseInt(num2);
};
let name = "趙志偉";

const PI = 3.14;

const monster = {
    name: "鐵扇公主",
    age: 300,
    sayHi() {
        console.log("鐵扇公主");
    },
};

/*導出
1.module.exports 導出模塊
2.把要導出的數(shù)據(jù), 寫入到 { } 中即可
3.可以全部導出, 也可以部分導出
4.相當于把導出的數(shù)據(jù)當作一個對象
5.如果屬性名/函數(shù)/變量/對象..名字相同, 可以簡寫
6.有些前端, 簡寫 module.exports={} 成 exports={}
*/
exports = {
    sum,
    sub,
    name,
    PI
}

// module.exports = {
//     sum,
//     sub,
//     name,
//     PI
// }

// module.exports = {
//     sum: sum,
//     sub: sub,
//     myName: name
// }

在module/es5/use.html 中 查看效果

<head>
    <meta charset="UTF-8">
    <title>use</title>
  <!--在html文件中要使用js-->
  <script type="text/javascript>" src="function.js"></script>
</head>

module/es5/use.js

//導入
//1.在es5中, 我們通過 require 就把對應.js中的數(shù)據(jù)/對象, 引入
//2.我們使用的時候, 通過m.屬性, 就可以使用
//3.如果我們導入時, 不需要所有的, 我們可以導入部分數(shù)據(jù)
const m = require("./function");//默認后綴js

const {sub} = require("./function");

//使用
//只要這里idea可以識別變量,函數(shù),對象 說明沒有問題
console.log(m.sub("1", "2"));
console.log(m.sum(33, 22));
console.log(m.name);
console.log(sub(10, 12));

?ES6模塊化編程

  1. ES6使用 (1)export {名稱 / 對象 / 函數(shù) / 變量 / 常量} (2)export 定義 = (3)export default { } 導出模塊
  2. 使用 import { } from "xx.js" 或者 import 名稱 from "xx.js"導入模塊

需求說明

  1. 編寫common.js, 該文件有函數(shù), 變量, 常量, 對象
  2. 要求在use_common.js, 可以使用到 common.js中定義的 函數(shù)/變量/常量/對象
  3. 使用ES6模塊化編程的方式完成

思路分析
前端技術棧 - ES6 - Promise -模塊化編程

??批量導出

common.js

//定義對象, 變量, 常量, 函數(shù)
const sum = function (num1, num2) {
    return parseInt(num1) + parseInt(num2);
};
const sub = function (num1, num2) {
    return parseInt(num1) - parseInt(num2);
};
let name = "趙志偉";

//ES6的導出模塊/數(shù)據(jù)
/**
 * 1.export 就是導出
 * 2.可以全部導出, 也可以部分導出
 */
export {
    sum,
    sub,
    name
}

use_common.js

/**導入
 * 1.我們可以用 {} 來接收導出的數(shù)據(jù)
 * 2.可以全部接收, 也可以選擇接收
 * 3.要求導入的名稱 和 導出的名稱一致
 */
import {sub, sum, name} from "./common";

//使用
console.log(sum(1, 3));
console.log(name);
??定義時導出

common2.js

//定義對象, 變量, 常量, 函數(shù)

//定義sum函數(shù)時, 直接導出
//說明: 如果在定義時,導出的數(shù)據(jù), 在導入時,要保持名稱一致
export const sum = function (num1, num2) {
    return parseInt(num1) + parseInt(num2);
};

use_common2.js

//可以導入模塊/數(shù)據(jù)
import {sum} from "./common2";
//沒有導出的數(shù)據(jù), 是不可以導入的
import {sum2} from "./common2";

console.log(sum(10, 12));
??默認導出

common3.js

//定義對象, 變量, 常量, 函數(shù)

//演示默認導出
//如果是默認導出, 那么在導入的時候,使用的語法
//可以這么理解: 類似于把 {} 當作一個對象導出
export default {
    sum(num1, num2) {
        return parseInt(num1) + parseInt(num2);
    },

    sub(num1, num2) {
        return parseInt(num1) - parseInt(num2);
    },
}

use_common3.js

//導入默認導出的模塊/數(shù)據(jù)
//好處是 m 名稱是可以自己指定的
//因為m名字, 程序員可以自己指定, 因此我們就可以解決命名沖突的問題
import m from "./common3";

//使用 m.xx
console.log(m.sub(100, 200));
??注意事項和細節(jié)
  1. ES6的模塊化無法在Node.js中執(zhí)行, 需要用Babel轉碼ES5后再執(zhí)行
    老師說明: ES6 的模塊化，需要用 Babel 轉碼 ES5 后再執(zhí)行, 我們后面在整體項目中使用即可, 只要 es6_use.js 可以識別變量名說明是正確的
  2. export不僅可以導出對象, 一切JS變量都可以導出. 比如: 基本類型變量, 函數(shù), 數(shù)組, 對象
  3. 沒有導出的不能使用
  4. ES6的導出方式很多, 不同的導出方式對導入方式也有一定影響

?作業(yè)布置

  1. 請編寫一個文件zzwcommon,js, 該文件有對象cat(屬性: name, age, cry()) dog(屬性: name, age, hello()).
  2. 編寫use_zzwcommon.js, 在該文件中使用zzwcommon.js 導出的模塊/對象/數(shù)組, 體會使用特點

使用批量導出

zzwcommon.js

let cat = {
    name: "喵喵~",
    age: 2,
    cry() {
        console.log("花喵哭泣");
    },
};

let dog = {
    name: "旺財",
    age: 3,
    hi() {
        console.log("汪汪");
    },
};

// 批量導出
export {cat, dog};

use_zzwcommon.js

import {dog, cat} from "./zzwcommon";

console.log(cat.age);
console.log(cat.name);
cat.cry();

創(chuàng)建時, 直接導出

//定義時導出
export const cat = {
    name: "喵喵~",
    age: 2,
    cry() {
        console.log("花喵哭泣");
    }
}

export const dog = {
    name: "旺財",
    age: 3,
    hi() {
        console.log("汪汪");
    }
}

默認方式導出

zzwcommon.js

//默認方式導出
//這里注意 寫法有一些變化, 把我們的兩個對象當做 {} 的屬性即可
export default {
     cat: {
        name: "喵喵~",
        age: 2,
        cry() {
            console.log("花喵哭泣");
        },
    },

    dog: {
        name: "旺財",
        age: 3,
        hi() {
            console.log("汪汪");
        },
    },
}

use_zzwcommon.js

//導入zzwcommon.js 默認導出的模塊
import m from "./zzwcommon";

console.log(m.dog.age);
console.log(m.dog.name);
m.dog.hi();

3.a.js有一個dog對象(含有hi()方法), b.js中有一個dog對象(含有say()方法), 請使用模塊化的編程思路, 在a.js中能使用到不同的dog對象,

b.js

//b.js中定義了dog對象

//方式一
export default {
    dog: {
        say() {

        },
    },
};

//方式二
let dog = {
    say() {

    },
};

export default {
    dog: dog,
};

a.js文章來源地址http://www.zghlxwxcb.cn/news/detail-514982.html

import m from "./b";

//a.js中的dog
const dog = {
    hi() {

    },
};

console.log(dog.hi());//a.js
console.log(m.dog.say());//b.js

到了這里，關于前端技術棧 - ES6 - Promise -模塊化編程的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！

本文來自互聯(lián)網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如若轉載，請注明出處： 如若內容造成侵權/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經查實，立即刪除！

領支付寶紅包贊助服務器費用

相關文章

  • JavaScript:模塊化【CommonJS與ES6】

    在 JavaScript 編程中，隨著項目的復雜性增加，代碼的組織和管理變得至關重要。模塊化是一種強大的編程概念，它允許我們將代碼劃分為獨立的模塊，提高了可維護性和可擴展性。本文將詳細介紹 CommonJS 和 ES6 模塊，幫助你理解它們的特點和用法。 1. CommonJS 模塊化 CommonJS 是

    2024年02月13日
    瀏覽(92)
  • ES6模塊化（默認導入導出、按需導入導出、直接導入）

    ES6模塊化（默認導入導出、按需導入導出、直接導入）

    一、介紹ES6模塊化 ? ? ES6 模塊化規(guī)范是瀏覽器端與服務器端通用的模塊化規(guī)范，ES6模塊化的出現(xiàn)前端開發(fā)者不再需要額外的學習其他的模塊化規(guī)范。 ?二、ES6 模塊化規(guī)范中定義： 1.每個 js 文件都是一個獨立的模塊 2.導入其它模塊成員使用 import 3.向外共享模塊成員使

    2024年02月09日
    瀏覽(101)

  • 【前端模塊化】JS模塊化思想以及相關規(guī)范（CommonJS、ES module）

    1.模塊化概念 隨著前端應用日趨復雜，項目代碼也大量膨脹，模塊化就是一種最主流的代碼組織方式， 一個模塊就是一個實現(xiàn)特定功能的文件 ，它通過把我們的復雜代碼按照功能的不同，劃分為不同的模塊單獨維護的這種方式，去提高我們的開發(fā)效率，降低維護成本。要用

    2024年02月01日
    瀏覽(42)

  • 【前端JS交互篇】函數(shù)、參數(shù)、返回值、閉包函數(shù)、遞歸函數(shù)、內存、模塊化編程

    函數(shù)可以封裝一些功能，可以供外部去重復的調用。所以，一般我們把函數(shù)叫做具有重復功能的代碼塊。 JavaScript 基礎到高級 Canvas游戲開發(fā) 原生JavaScipt案例合集 JavaScript +DOM基礎 假設飯店就是一個函數(shù)，飯店的功能就是做各種各樣的菜，但是具體做什么菜，需要用戶來點，用

    2024年02月15日
    瀏覽(94)
  • 前端進階之——模塊化

    前端進階之——模塊化

    ? ? ? ? 在做項目的時候越來越發(fā)現(xiàn)模塊化的重要性，做好模塊化開發(fā)不僅給后期的維護帶來不少好處而且大大提升項目開發(fā)效率，接下來整理一下模塊化相關知識吧。 封裝方法、提高代碼的復用性、可維護性和可讀性 隔離作用域，避免污染全局作用域 避免變量沖突 立即執(zhí)

    2024年02月10日
    瀏覽(93)
  • 前端模塊化

    前端模塊化

    ? 隨著前端應用的日益復雜，我們的項目代碼已經逐漸膨脹到了不得不花大量時間去管理的程度了。而模塊化就是一種最主流的代碼組織方式，它通過把復雜的代碼按照功能的不同劃分為不同的模塊單獨維護，從而提高開發(fā)效率、降低維護成本。模塊化可以使你能夠更容易地

    2024年02月08日
    瀏覽(116)
  • C語言模塊化編程思維

    C語言模塊化編程思維

    eg1:代碼案例演示 1：程序的頭文件 2：程序邏輯函數(shù)文件（這里使用一個延時函數(shù)為例子） 3：程序的主文件控制函數(shù)的實現(xiàn) （main函數(shù)是c語言程序的入口一個c文件有且僅僅只能有一個main函數(shù)文件） 以上是編寫代碼的一種思路，要進一步掌握需要在實際的編程中鍛煉 c語言模

    2024年01月21日
    瀏覽(97)

  • JavaScript中的模塊化編程

    JavaScript是一種強大的編程語言，它可以在瀏覽器中進行客戶端腳本編寫，并且在服務器端也有廣泛的應用。隨著JavaScript應用的增多，JavaScript代碼的復雜度也不斷增加。為了提高代碼的可維護性和重用性，模塊化編程變得越來越重要。本文將討論JavaScript中的模塊化編程，包括

    2024年02月02日
    瀏覽(99)
  • 前端工程化之模塊化

    前端工程化之模塊化

    前端模塊化是一種標準，不是實現(xiàn) 理解模塊化是理解前端工程化的前提 前端模塊化是前端項目規(guī)模化的必然結果 前端模塊化就是將復雜程序根據(jù)規(guī)范拆分成若干模塊，一個模塊包括輸入和輸出。而且模塊的內部實現(xiàn)是私有的，它通過對外暴露接口與其他模塊通信，而不是直

    2024年02月11日
    瀏覽(1241)
  • WPF+Prism 模塊化編程（一）

    WPF+Prism 模塊化編程（一）

    提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔 1、新建WPF項目,創(chuàng)建基于 .NET Framework 框架的應用程序,項目名稱為 PrismModelDemo,創(chuàng)建步驟如下所示。 項目創(chuàng)建完成后，新建Views文件夾和ViewModels 文件夾，移動 MainWindow.xaml 至 Views文件下，在ViewModels文件中

    2024年04月09日
    瀏覽(103)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包，優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包