<ul id="4siqw"></ul>

<strike id="4siqw"></strike>

<fieldset id="4siqw"></fieldset>

co模塊的前端實現

Vixb 發布于2019-08-21 10:46 / 2279人閱讀

摘要：模塊的意義和原理在上已經有詳細的介紹了，具體參見用法異常處理輸出結果應該為源碼各種模塊加載方式的處理下面這倆函數是有用的主該函數會在異步過程執行完畢后被調用會喚醒主函數繼續執行到下一個或為止。

其實就是照著網上的介紹和co的源碼實現了一個自己用的前端async模塊。支持RequireJS和SeaJS，支持$.ajax。
有喜歡co但是不知道怎么用的前端朋友可以拿去用。

co模塊的意義和原理在sf上已經有詳細的介紹了，具體參見：
http://segmentfault.com/a/1190000002732081

用法：

async(function* () {
    var a = yield Promise.resolve(1);
    console.log(a);
    var b = yield [Promise.resolve(2), Promise.resolve(3)];
    console.log(b);
    return 4;
}).then(function (value) {
    console.log(value);
}).catch(function (e) {
    // 異常處理
});

// 輸出結果應該為 1 [2,3] 4

源碼：

/*global exports*/
"use strict";
(function (factory) {
    // 各種模塊加載方式的處理
    if (typeof define === "function" && define.amd) {
        define([], factory);
    } else if (typeof define === "function" && define.cmd) {
        define(function (require, exports, module) {
            module.exports = factory(jQuery);
        });
    } else if (typeof exports === "object") {
        exports.async = factory();
    } else {
        // window.async=factory();
    }
}(function () {
    // 下面這倆函數是有用的
    function async(generator) {
        // 主Promise
        return new Promise(function (resolve, reject) {
            var g = generator();
            /**
             *  該函數會在異步過程執行完畢后被調用,會喚醒主函數繼續執行到下一個yield或return為止。
             *  參數val為異步過程的結果，即promise.result。
             *  返回值為主函數內yield或return的結果，
             *  如果是yield則必須為promise或可被autoPack包裝的對象，或者包含前兩者的數組
             */
            function next(val) {
            
                // 將上次運行結果返回給主函數，令主函數繼續執行到下一處中斷，并將結果存入result
                var result = g.next(val);
                // 暫存主函數運行結果
                var promise = result.value;
                // 判斷主函數是否執行完畢，執行完畢則調用resolve完成主Promise,否則繼續執行
                if (!result.done) {
                    // 判斷主函數提供的參數是否為數組，
                    // 如果不是數組則用autoPack封裝后通過then(next)綁定下一步流程。并通過catch(reject)拋出異常
                    // 如果是數組則對每個成員進行封裝后用Promise.All打包，然后繼續執行。
                    if (promise instanceof Array) {
                        Promise.all(promise.map(autoPack)).then(next).catch(reject);
                    } else {
                        autoPack(promise).then(next).catch(reject);
                    }
                } else {
                    resolve(promise);
                }
            }

            // 捕獲并通過reject拋出異常
            try {
                next();
            } catch (e) {
                reject(e);
            }
        })
    }

    // 自動打包，可以將第三方實現的Promise工具打包為ES6標準的Promise
    // 目前僅支持jQuery.Promise
    function autoPack(target) {
        // 包裝$.ajax
        if (target.error) {
            return new Promise(function (resolve, reject) {
                target.done(resolve).error(reject);
            })
        } else {
            return target;
        }
    }

    return async;
}));

云服務器 GPU云服務器前端模塊前端模塊化 lua模塊實現 php實現收銀臺模塊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86172.html

前端每周清單半年盤點之 Node.js 篇

摘要：前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。對該漏洞的綜合評級為高危。目前，相關利用方式已經在互聯網上公開，近期出現攻擊嘗試爆發的可能。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡...

kid143 2019-08-21 11:59 評論0 收藏0
前端每周清單第 12 期：支付寶前端構建工具發展、LinkedIn用Brotli加快網頁響應速度、餓

摘要：前端每周清單第期支付寶前端構建工具發展用加快網頁響應速度餓了么升級實踐前端前端每周清單前端每周清單專注前端領域內容，分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。前端每周清單第 12 期：支付寶前端構建工具發展、LinkedIn用Brotli加快網頁響應速度、餓了么PWA 升級實踐為InfoQ中文站特供稿件，首發地址為這里；如需轉載，請與InfoQ中文站聯系。從屬于筆...

liuchengxu 2019-08-20 16:23 評論0 收藏0
異步流程控制：7 行代碼學會 co 模塊

摘要：而在中是迭代器生成器，被創造性的拿來做異步流程控制了。當執行的時候，并不執行函數體，而是返回一個迭代器。行代碼再看看文章開頭的行代碼首先生成一個迭代器，然后執行一遍，得到的是一個對象，里面再執行。廣告招人：阿里巴巴招前端，在這里你可以享受大公司的福利和技術體系，也有小團隊的挑戰和成長空間。聯系： qingguang.meiqg at alibaba-inc.com 首先請原諒我的標題...

tinna 2019-08-21 10:31 評論0 收藏0
前端每周清單半年盤點之 Angular 篇

摘要：延伸閱讀學習與實踐資料索引與前端工程化實踐前端每周清單半年盤點之篇前端每周清單半年盤點之與篇前端每周清單半年盤點之篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于半年來發布的前端每周清單...

LeviDing 2019-08-20 18:54 評論0 收藏0
前端每周清單半年盤點之 JavaScript 篇

摘要：前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。背后的故事本文是對于年之間世界發生的大事件的詳細介紹，闡述了從提出到角力到流產的前世今生。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎...

Vixb 2019-08-21 12:04 評論0 收藏0