成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

jQuery進(jìn)階：用最優(yōu)雅的方式寫(xiě)ajax請(qǐng)求

zzir / 1481人閱讀

摘要：優(yōu)點(diǎn)與擴(kuò)展優(yōu)點(diǎn)類(lèi)似與的回調(diào)方式優(yōu)點(diǎn)增加一個(gè)接口只是需要增加一個(gè)配置文件，很方便擴(kuò)展當(dāng)前的的我只寫(xiě)了，有興趣可以擴(kuò)展其他的數(shù)據(jù)類(lèi)型缺點(diǎn)沒(méi)有對(duì)函數(shù)參數(shù)進(jìn)行校驗(yàn)

或許你也可以試試：xfire: 簡(jiǎn)單優(yōu)雅、高度可配置的fetch接口批量生成工具
首先需要一個(gè)配置文件 
var api = {
    basePath: "http://192.168.200.226:58080",
    pathList: [
        {
            name: "agentHeartBeat",
            path:"/api/csta/agent/heartbeat/{{agentId}}/{{type}}/{{something}}",
            method:"get"
        },
        {
            name: "setAgentState",
            path: "/api/csta/agent/state",
            method: "post"
        },
        {
            name: "getAgents",
            path: "/user/agent/{{query}}",
            method: "get"
        }
    ]
}
然后需要一個(gè)方法，把配置文件生成接口 
function WellApi(Config){
var headers = {};
var Api = function(){};

Api.pt = Api.prototype;

var util = {
    ajax: function(url, method, payload) {
        return $.ajax({
            url: url,
            type: method || "get",
            data: JSON.stringify(payload),
            headers: headers,
            dataType: "json",
            contentType: "application/json; charset=UTF-8"
        });
    },

    /**
     * [render 模板渲染]
     * 主要用于將 /users/{{userId}} 和{userId: "89898"}轉(zhuǎn)換成/users/89898，和mastache語(yǔ)法差不多，
     * 當(dāng)然我們沒(méi)必要為了這么小的一個(gè)功能來(lái)引入一個(gè)模板庫(kù)
     * query字符串可以當(dāng)做一個(gè)參數(shù)傳遞進(jìn)來(lái)
     * 例如： /users/{{query}}和{query:"?name=jisika&sex=1"}
     * @Author   Wdd
     * @DateTime 2017-03-13T19:42:58+0800
     * @param    {[type]} tpl [description]
     * @param    {[type]} data [description]
     * @return   {[type]} [description]
     */
    render: function(tpl, data){
        var re = /{{([^}]+)?}}/;
        var match = "";

        while(match = re.exec(tpl)){
            tpl = tpl.replace(match[0],data[match[1]]);
        }

        return tpl;
    }
};

/**
 * [setHeader 暴露設(shè)置頭部信息的方法]
 * 有些方法需要特定的頭部信息，例如登錄之后才能獲取sesssionId,然后訪問(wèn)所有的接口時(shí)，必須攜帶sessionId
 * 才可以訪問(wèn)
 * @Author   Wdd
 * @DateTime 2017-03-13T10:34:03+0800
 * @param    {[type]} headers [description]
 */
Api.pt.setHeader = function(headers){
    headers = headers;
};

/**
 * [fire 發(fā)送ajax請(qǐng)求，this會(huì)綁定到每個(gè)接口上]
 * @Author   Wdd
 * @DateTime 2017-03-13T19:42:13+0800
 * @param    {[type]} pathParm [description]
 * @param    {[type]} payload [description]
 * @return   {[type]} [description]
 */
function fire(pathParm, payload){
    var url = util.render(this.path, pathParm);
    return util.ajax(url, this.method, payload);
}


/**
 * [for 遍歷所有接口]
 * @Author   Wdd
 * @DateTime 2017-03-13T19:49:33+0800
 * @param    {[type]} var i [description]
 * @return   {[type]} [description]
 */
for(var i=0; i < Config.pathList.length; i++){

    Api.pt[Config.pathList[i].name] = {
        path: Config.basePath + Config.pathList[i].path,
        method: Config.pathList[i].method,
        fire: fire
    };
}

return new Api();
}
試用一下
注意點(diǎn)

fire(pathParm, payload)中的pathParm是最終會(huì)被渲染到請(qǐng)求的路徑里面，而paylaod代表請(qǐng)求體。

例如：

// 路徑這么寫(xiě)
/api/{{version}}/agent/{{id}}/{{somethingElse}}

// pathParm這樣寫(xiě)
{version: 1, id: "2", somethingElse: "sss"}

// 最終路徑會(huì)被渲染成
/api/1/agent/2/sss

path里面不僅僅可放一個(gè)變量的，具體可以參考mustache語(yǔ)法，上面代碼里的render是以最簡(jiǎn)單的實(shí)現(xiàn)。

優(yōu)點(diǎn)與擴(kuò)展

[優(yōu)點(diǎn)]：類(lèi)似與promise的回調(diào)方式

[優(yōu)點(diǎn)]：增加一個(gè)接口只是需要增加一個(gè)配置文件，很方便

[擴(kuò)展]：當(dāng)前的ajax 的contentType我只寫(xiě)了json，有興趣可以擴(kuò)展其他的數(shù)據(jù)類(lèi)型

[缺點(diǎn)]：沒(méi)有對(duì)函數(shù)參數(shù)進(jìn)行校驗(yàn)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/86966.html

相關(guān)文章

  • 【連載】前端個(gè)人文章整理-從基礎(chǔ)到入門(mén)

    摘要：個(gè)人前端文章整理從最開(kāi)始萌生寫(xiě)文章的想法，到著手開(kāi)始寫(xiě)，再到現(xiàn)在已經(jīng)一年的時(shí)間了，由于工作比較忙，更新緩慢，后面還是會(huì)繼更新，現(xiàn)將已經(jīng)寫(xiě)好的文章整理一個(gè)目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個(gè)人前端文章整理 從最開(kāi)始萌生寫(xiě)文章的想法，到著手...

    madthumb 評(píng)論0 收藏0

  • JavaScript - 收藏集 - 掘金

    摘要：插件開(kāi)發(fā)前端掘金作者原文地址譯者插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡(jiǎn)單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內(nèi)優(yōu)雅的實(shí)現(xiàn)文件分片斷點(diǎn)續(xù)傳。 Vue.js 插件開(kāi)發(fā) - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡(jiǎn)單的方式。插....

    izhuhaodev 評(píng)論0 收藏0

  • jquery ajax請(qǐng)求參數(shù)和返回?cái)?shù)據(jù)的處理

    摘要：處理返回?cái)?shù)據(jù)，渲染到頁(yè)面上去。之前的做法也是和上面一模一樣的吧，返回的數(shù)據(jù)是數(shù)據(jù)格式的，然后分別取值賦值給頁(yè)面元素，所以代碼往往是這樣的。如果有什么更好的方案，請(qǐng)指教，謝謝另外摘記一個(gè)表單輸入框中回車(chē)自動(dòng)提交的情況和處理方案 剛接觸學(xué)會(huì)用jQuery ajax的時(shí)候，覺(jué)得真東西好神奇，這樣就可以把數(shù)據(jù)取回來(lái)了啊。然后我可以把取回來(lái)的數(shù)據(jù)渲染到頁(yè)面上，一顆賽艇。之前很早接觸到項(xiàng)目，并不知...

    2bdenny 評(píng)論0 收藏0

  • 前端基礎(chǔ)進(jìn)階（十三）：透徹掌握Promise的使用，讀這篇就夠了

    摘要：在對(duì)象的構(gòu)造函數(shù)中，將一個(gè)函數(shù)作為第一個(gè)參數(shù)。二對(duì)象中的方法，可以接收構(gòu)造函數(shù)中處理的狀態(tài)變化，并分別對(duì)應(yīng)執(zhí)行。 showImg(https://segmentfault.com/img/remote/1460000008932857); Promise的重要性我認(rèn)為我沒(méi)有必要多講，概括起來(lái)說(shuō)就是必須得掌握，而且還要掌握透徹。這篇文章的開(kāi)頭，主要跟大家分析一下，為什么會(huì)有Promise...

    yy736044583 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<