摘要：簡(jiǎn)稱是公司內(nèi)部的混合語(yǔ)言數(shù)據(jù)標(biāo)準(zhǔn)，他們用于系統(tǒng)和持續(xù)數(shù)據(jù)存儲(chǔ)系統(tǒng)。可用于通訊協(xié)議數(shù)據(jù)存儲(chǔ)等領(lǐng)域的語(yǔ)言無(wú)關(guān)平臺(tái)無(wú)關(guān)可擴(kuò)展的序列化結(jié)構(gòu)數(shù)據(jù)格式。我們想要的結(jié)果是最終的返回的數(shù)據(jù)。如果當(dāng)前開(kāi)發(fā)開(kāi)啟，就回直接返回?cái)?shù)據(jù)。數(shù)據(jù)是與同級(jí)的文件。

Google Protocol Buffer( 簡(jiǎn)稱 Protobuf) 是 Google 公司內(nèi)部的混合語(yǔ)言數(shù)據(jù)標(biāo)準(zhǔn)，他們用于 RPC 系統(tǒng)和持續(xù)數(shù)據(jù)存儲(chǔ)系統(tǒng)。

Protocol Buffers 是一種輕便高效的結(jié)構(gòu)化數(shù)據(jù)存儲(chǔ)格式，可以用于結(jié)構(gòu)化數(shù)據(jù)串行化，或者說(shuō)序列化。它很適合做數(shù)據(jù)存儲(chǔ)或 RPC 數(shù)據(jù)交換格式?？捎糜谕ㄓ崊f(xié)議、數(shù)據(jù)存儲(chǔ)等領(lǐng)域的語(yǔ)言無(wú)關(guān)、平臺(tái)無(wú)關(guān)、可擴(kuò)展的序列化結(jié)構(gòu)數(shù)據(jù)格式。為什么要講到它，因?yàn)槲覀兒笈_(tái)的協(xié)議就是用的它。

Mock也可以叫mock object，模擬對(duì)象，在面向?qū)ο蟪绦蛟O(shè)計(jì)中，以可控的方式模擬真實(shí)對(duì)象行為的假對(duì)象。前端比較有名的庫(kù)是Mock.js。

為什么要mock呢？
1、前后端分離，并行開(kāi)發(fā)，能夠充分利用人力，避免等待。
2、可以豐富測(cè)試用例，提前模擬很多的真實(shí)場(chǎng)景數(shù)據(jù)，而不必等到線上環(huán)境才發(fā)現(xiàn)問(wèn)題。

但Mock.js有個(gè)問(wèn)題：學(xué)習(xí)和配置成本高。

// 配置 Mock 路徑
require.config({
    paths: {
        mock: "http://mockjs.com/dist/mock"
    }
})
// 加載 Mock
require(["mock"], function(Mock){
    // 使用 Mock
    var data = Mock.mock({
        "list|1-10": [{
            "id|+1": 1
        }]
    })
    // 輸出結(jié)果
    document.body.innerHTML +=
        "
" +
        JSON.stringify(data, null, 4) +
        "
"
})


// ==>
{
    "list": [
        {
            "id": 1
        },
        {
            "id": 2
        },
        {
            "id": 3
        }
    ]
}

用它之前必須要先配置一個(gè)Ajax的請(qǐng)求路徑，然后根據(jù)后臺(tái)的協(xié)議，學(xué)習(xí)mock的語(yǔ)法，才能模擬出list這個(gè)數(shù)組。所以這里存在著兩個(gè)問(wèn)題：
1、配置成本和語(yǔ)法學(xué)習(xí)成本
2、后臺(tái)協(xié)議轉(zhuǎn)換為mock語(yǔ)法

很多時(shí)候，等到我們開(kāi)發(fā)完業(yè)務(wù)邏輯，已經(jīng)沒(méi)有多少耐心來(lái)寫(xiě)這個(gè)mock邏輯，簡(jiǎn)單的協(xié)議還好，如果涉及到很復(fù)雜的，寫(xiě)這個(gè)mock的邏輯就更加不愿意。

為了幫前端同學(xué)偷個(gè)懶，有必要把這個(gè)過(guò)程給省了。

git上已經(jīng)有針對(duì)Protobuf開(kāi)源的js接口：https://github.com/dcodeIO/pr...。因?yàn)闃?gòu)建工具我們使用的是gulp，同樣的也有個(gè)對(duì)應(yīng)的插件：gulp-protobufjs，但是沒(méi)法拿來(lái)就用。

首頁(yè)我們來(lái)看下這個(gè)gulp-protobufjs插件所做的事情

var gulp = require("gulp");
var gulpprotobuf = require("gulp-protobufjs");
 
gulp.task("default", function () {
  return gulp.src("file.proto")
    .pipe(gulpprotobuf())
    .pipe(gulp.dest("out/"));
});

讀取proto文件，然后生成一個(gè)文件，文件類型可以自定義。
如果產(chǎn)出的是.js文件，那么結(jié)果是commonjs模塊文件：

module.exports = require("protobufjs").newBuilder({})["import"]({
    "package": "mmgameweappwap",
    "syntax": "proto2",
    "messages": [
        {
            "name": "User",
            "syntax": "proto2",
            "fields": [
                {
……

如果是.json文件：

{
    "package": "mmgameweappwap",
    "syntax": "proto2",
    "messages": [
        {
            "name": "UserItem",
            "syntax": "proto2",
            "fields": [
                {
                    "rule": "required",
                    "type": "string",
                    "name": "user_id",
                    "id": 1
                },
                {
                    "rule": "optional",
                    "type": "string",
                    "name": "head_img_url",
                    "id": 2
                },
                {
                    "rule": "optional",
                    "type": "string",
                    "name": "nick_name",
                    "id": 3
                }
            ]
        },
……

很顯然，這不是我們想要的最終結(jié)果。我們想要的結(jié)果是最終的ajax返回的數(shù)據(jù)。當(dāng)然有了協(xié)議的json結(jié)構(gòu)，字段類型、字段名也都有了，剩下的事情就只需根據(jù)他們mock一些數(shù)據(jù)。這個(gè)json文件可以理解為對(duì)接口的一個(gè)描述文件。

pb協(xié)議的rule常見(jiàn)的有以下幾種：

optional：可選

required：必須

repeated：數(shù)組

數(shù)據(jù)類型，有以下幾種最基本的類型，基本都可以映射為js常用的數(shù)據(jù)類型。

在解析pb文件的時(shí)候，后臺(tái)CGI接口名會(huì)被定義為message。

package mmgameweappwap;
message GetDiceGameRoomRequest {
    required string room_id = 1;
}
message GetDiceGameRoomResponse {
    required int32 errcode = 1;
    required string errmsg = 2;

    optional OkResult data = 3;
    message OkResult {
        repeated UserDiceItem user_dice_list     = 1;
        required uint32 room_close_remain_second = 2;
        required bool room_closed                = 3;
    }
}

package 可以理解為模塊，上文我們定義了一個(gè)mmgameweappwap模塊。

GetDiceGameRoomRequest：請(qǐng)求的message

GetDiceGameRoomResponse：返回的message

GetDiceGameRoom：接口名稱

一個(gè)CGI接口在pb協(xié)議中的定義一般會(huì)成對(duì)的出現(xiàn)。Request、Response是所有接口標(biāo)準(zhǔn)的后綴，以區(qū)別普通的message。依賴這種規(guī)則，就可以把接口解析出來(lái)，并且也能夠知道其請(qǐng)求、返回的message。

從上面的pb協(xié)議看，message可以被嵌套，OkResult是屬于GetDiceGameRoomResponse子message。同一個(gè)pb文件下，message名可能重復(fù)，整個(gè)協(xié)議可以看成是一顆樹(shù)。如果要找對(duì)應(yīng)的message，必須從當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)開(kāi)始查找，否則可能找錯(cuò)。

處理的流程比較簡(jiǎn)單。如下圖所示：

通過(guò)分析知道接口名后，如果前端的請(qǐng)求都是統(tǒng)一的，就可以通過(guò)請(qǐng)求接口的代碼模板生成請(qǐng)求代碼。生成對(duì)應(yīng)的API.js：

var Promise = require("js/libs/Promise");
var Util    = require("js/common/util");
var Mock = require("./mock");
var app     = getApp();

var FETCH_URL   = "http://xxxxx/gameweappwap/";
module.exports = {
   getDiceGameRoom: function(data) {
        return new Promise((resolve, reject) => {
            if(app.mock){
                resolve(Mock.getDiceGameRoom);
                return;
            }
            app.request({
                url: FETCH_URL + "getsmobapremadeinfo",
                data: {
                    room_id: data.room_id, // string 
                },
                method: "POST",
                header: {
                    "content-type": "application/json"
                },
                success: resolve,
                fail: reject,
……

exports對(duì)外的接口就是CGI的接口名：getDiceGameRoom。
request中的roomid就是從pb協(xié)議中解析出來(lái)的，后面的注釋標(biāo)注了其類型。這樣一個(gè)ajax請(qǐng)求就非常的簡(jiǎn)單明了了。開(kāi)發(fā)者只需要API.getDiceGameRoom調(diào)用即可。如果當(dāng)前app.mock開(kāi)發(fā)開(kāi)啟，就回直接返回mock數(shù)據(jù)。mock數(shù)據(jù)是與API.js同級(jí)的文件。

這里的數(shù)據(jù)都是調(diào)用mock.js生成的，當(dāng)然我們可以加入一些業(yè)務(wù)的數(shù)據(jù)，這樣測(cè)試起來(lái)更加真實(shí)。

1、前端安全，模擬xss例子。

隨機(jī)生成一些xss用例，用于前端頁(yè)面的測(cè)試。

2、前端UI測(cè)試。

在實(shí)際工作中，經(jīng)常會(huì)遇到文本截?cái)嗟膯?wèn)題。UI界面在多行文本的情況下會(huì)不會(huì)表現(xiàn)正常這個(gè)問(wèn)題，在這種情況下就可以輕易的測(cè)試出來(lái)，而不需每次叫后臺(tái)開(kāi)發(fā)配合加一些假數(shù)據(jù)。

如下圖，我們可以針對(duì)字符串類型的數(shù)據(jù)生成一些長(zhǎng)文本。

所有的項(xiàng)目都在統(tǒng)一框架下，每個(gè)項(xiàng)目都保持統(tǒng)一的目錄結(jié)構(gòu)，只需要自定義一些配置就能初始化項(xiàng)目腳手架，剩下的只需要專注于業(yè)務(wù)開(kāi)發(fā)。

by addy 原創(chuàng)文章，歡迎轉(zhuǎn)載，但希望全文轉(zhuǎn)載，注明本文地址。http://www.iamaddy.net/2017/0...