鍍金池/ 教程/ HTML/ 接口設(shè)計(jì)
書(shū)單
JavaScript 動(dòng)畫(huà)
HTML
CSS Reset
屬性操作
DOM 事件
閉包
Photoshop
Atom 文本編輯器
表單操作
布局解決方案
類(lèi)型系統(tǒng)
開(kāi)發(fā)實(shí)踐
數(shù)據(jù)通信
變量作用域
BOM
JavaScript 程序設(shè)計(jì)
前端工程師概述
CSS
響應(yīng)式布局
表達(dá)式與運(yùn)算符
基本語(yǔ)法
JavaScript 介紹
版本控制
布局
調(diào)試器
背景
圖片保存
多媒體
文檔樹(shù)
列表操作
Sublime 編輯器
盒模型
常見(jiàn)布局樣例
類(lèi)型識(shí)別
變形
數(shù)據(jù)存儲(chǔ)
選擇器
頁(yè)面架構(gòu)
開(kāi)發(fā)及調(diào)試工具
頁(yè)面模塊化
節(jié)點(diǎn)操作
測(cè)量及取色
瀏覽器兼容
HTML 簡(jiǎn)介
內(nèi)置對(duì)象
實(shí)體字符
產(chǎn)品前端架構(gòu)
協(xié)作流程
切圖
工具, 面板, 視圖
正則表達(dá)式
動(dòng)畫(huà)
語(yǔ)句
面向?qū)ο?/span>
HTML 語(yǔ)法
HTML 標(biāo)簽
技術(shù)選擇
樣式操作
圖片優(yōu)化與合并
語(yǔ)法
DOM 編程藝術(shù)
Canvas
接口設(shè)計(jì)
頁(yè)面優(yōu)化
文本

接口設(shè)計(jì)

接口設(shè)計(jì)

http://wiki.jikexueyuan.com/project/fend_note/images/A/api_design_overview.png" alt="" />

用戶(hù)使用 Web 客戶(hù)端訪問(wèn) Web 系統(tǒng)，系統(tǒng)在收到請(qǐng)求后執(zhí)行操作 （收集數(shù)據(jù)模型，選擇數(shù)據(jù)經(jīng)行組裝），將結(jié)果返回給客戶(hù)。

其中包括的元素和關(guān)系如下圖所示：

http://wiki.jikexueyuan.com/project/fend_note/images/A/api_elements.png" alt="" />

  • Template，分離數(shù)據(jù)模型的頁(yè)面結(jié)構(gòu)，根據(jù)不同的數(shù)據(jù)模型展現(xiàn)不同的信息
  • URL，頁(yè)面訪問(wèn)地址、頁(yè)面標(biāo)示
  • API，用于載入異步請(qǐng)求的接口
  • Model，數(shù)據(jù)模型，頁(yè)面模板組裝模型和異步請(qǐng)求返回的數(shù)據(jù)模型

約定

http://wiki.jikexueyuan.com/project/fend_note/images/A/api_rule.png" alt="" />

  1. URL 與頁(yè)面模板間的映射，和異步載入內(nèi)容對(duì)應(yīng)的接口
  2. 視圖模板和數(shù)據(jù)模型的對(duì)應(yīng)（數(shù)據(jù)模型的格式和類(lèi)型）
  3. 異步接口輸入輸出信息的約定

http://wiki.jikexueyuan.com/project/fend_note/images/A/api_rule_detail.png" alt="" />

  1. 頁(yè)面入口規(guī)范，定義系統(tǒng)對(duì)外可訪問(wèn)入口和配置信息（URL、模板、接口）
  2. 同步數(shù)據(jù)規(guī)范，定義系統(tǒng)對(duì)模板文件的預(yù)填信息（模板、數(shù)據(jù)模型）
  3. 異步接口規(guī)范，定義前后端接口信息（接口、數(shù)據(jù)模型）

接口規(guī)范

每個(gè)規(guī)范也會(huì)對(duì)應(yīng)若干規(guī)定若干規(guī)則約定來(lái)指導(dǎo)前后端工程師的具體實(shí)施。

頁(yè)面入口規(guī)范

http://wiki.jikexueyuan.com/project/fend_note/images/A/api_page_entry.png" alt="" />

  • 基本信息
  • 輸入?yún)?shù)
  • 模板列表
  • 接口列表（異步載入數(shù)據(jù)接口）

頁(yè)面入口規(guī)范（范例）

條目 詳情
訪問(wèn)地址 /dj/{id}
頁(yè)面描述 節(jié)目詳情及推薦信息
輸入?yún)?shù) 名稱(chēng)：ID；類(lèi)型：Number；描述：節(jié)目標(biāo)示
異常跳轉(zhuǎn) 異常：500；跳轉(zhuǎn)地址：/500/
模板列表 默認(rèn)：/template/dj/dj.ftl
過(guò)期：/template/dj/over.ftl
未找到：/template/dj/404.ftl
接口列表 歌曲列表：/api/dj/tracks/{id}/
相關(guān)節(jié)目：/api/dj/rec/{id}/
收藏節(jié)目：/api/dj/fav/{id}/
評(píng)論節(jié)目：/api/comments/{id}
  • 頁(yè)面基本信息，描述頁(yè)面的主要功能
  • 輸入?yún)?shù)為訪問(wèn)地址時(shí)支持的參數(shù)說(shuō)明
  • 異常跳轉(zhuǎn)，為系統(tǒng)全局異常處理
  • 模板列表，列舉當(dāng)前頁(yè)面的相關(guān)模板，包括異常（如下圖）
  • 頁(yè)面需要的所有異步接口列表

http://wiki.jikexueyuan.com/project/fend_note/images/T/template_normal_error.jpg" alt="" />

同步數(shù)據(jù)規(guī)范

http://wiki.jikexueyuan.com/project/fend_note/images/A/api_data_sync.png" alt="" />

  • 基本信息
  • 預(yù)填數(shù)據(jù)
  • 注入接口

同步數(shù)據(jù)規(guī)范（范例）

條目 詳情
模板文件 /templates/dj/dj.ftl
模板描述 節(jié)目詳情及推薦信息模板文件
預(yù)填信息 {"名稱(chēng)":"user", "類(lèi)型":"User","描述":"登陸用戶(hù)信息"}
{"名稱(chēng)":"dj", "類(lèi)型":"Program","描述":"節(jié)目信息"}
{"名稱(chēng)":"other", "類(lèi)型":"String","描述":"其他信息"}
注入接口 jd.parser
{"輸入":[["String", "節(jié)目信息"], ["Boolean", "是否格式化"]]}
{"輸出":["Program", "節(jié)目對(duì)象"]}
dj.api
dj.api2
  • 模板的基本信息
  • 預(yù)填數(shù)據(jù)包括全局和頁(yè)面數(shù)據(jù)及其類(lèi)型
  • 注入的接口說(shuō)明（輸入輸出信息），沒(méi)有可以不填寫(xiě)

異步接口數(shù)據(jù)規(guī)范

http://wiki.jikexueyuan.com/project/fend_note/images/A/api_async.png" alt="" />

  • 基本信息
  • 輸入信息
  • 輸出信息

異步接口規(guī)范（范例）

條目 詳情
請(qǐng)求方式 GET POST
接口地址 api/dj/tracks/{id}/
接口描述 獲取指定節(jié)目的歌曲列表
輸入數(shù)據(jù) {"名稱(chēng)":"id", "類(lèi)型":"Number","描述":"節(jié)目標(biāo)示"}
{"名稱(chēng)":"offset", "類(lèi)型":"Number","描述":"節(jié)目起始位置"}
{"名稱(chēng)":"limit", "類(lèi)型":"Number","描述":"列表數(shù)量"}
輸出結(jié)果 {"名稱(chēng)":" code", "類(lèi)型":"Number","描述":"請(qǐng)求結(jié)果標(biāo)示"}
{"名稱(chēng)":"message", "類(lèi)型":"String","描述":"請(qǐng)求異常信息"}
{"名稱(chēng)":"result", "類(lèi)型":"Array","描述":"歌曲列表"}
  • 接口基本信息，地址不帶查詢(xún)參數(shù)
  • 輸入數(shù)據(jù)，REST，查詢(xún)數(shù)據(jù)（必須包含名稱(chēng)類(lèi)型及描述）
  • 輸出結(jié)果，通用部分及結(jié)果集（復(fù)雜的信息需展開(kāi)說(shuō)明）

規(guī)范的應(yīng)用

通過(guò)模擬數(shù)據(jù)的形成，將前端本地開(kāi)發(fā)與后端獨(dú)立出來(lái)， 這樣前端工程師就可以獨(dú)立的進(jìn)行本地的開(kāi)發(fā)工作。

http://wiki.jikexueyuan.com/project/fend_note/images/A/api-rule-apply.jpg" alt="" />

使用頁(yè)面入口規(guī)范制定項(xiàng)目結(jié)構(gòu)（配置信息，目錄結(jié)構(gòu)和模板結(jié)構(gòu)）， 此過(guò)程可以使用自動(dòng)化工具自動(dòng)完成。

http://wiki.jikexueyuan.com/project/fend_note/images/A/api-rule-apply-1.jpg" alt="" />

根據(jù)同步數(shù)據(jù)規(guī)范可生成模擬數(shù)據(jù)的配置文件。（此部分通用可以使用自動(dòng)化工具來(lái)完成）

http://wiki.jikexueyuan.com/project/fend_note/images/A/api-apply-2.jpg" alt="" />

根據(jù)異步接口規(guī)范生成模擬異步數(shù)據(jù)。

本地開(kāi)發(fā)

http://wiki.jikexueyuan.com/project/fend_note/images/L/local-development.jpg" alt="" />

前端開(kāi)發(fā)環(huán)境包含兩個(gè)部分，本地模擬服務(wù)器和本地代理。

  1. 客戶(hù)端發(fā)送的請(qǐng)求，會(huì)被本地模擬服務(wù)器攔截并返回相應(yīng)的模擬數(shù)據(jù)
  2. 客戶(hù)端發(fā)送的異步請(qǐng)求，會(huì)被本地代理攔截并返回對(duì)應(yīng)的模擬數(shù)據(jù)

Local Server

http://wiki.jikexueyuan.com/project/fend_note/images/L/local-server-working.jpg" alt="" />

根據(jù)請(qǐng)求規(guī)則進(jìn)行匹配，然后生成（整合模板和模擬數(shù)據(jù)）所請(qǐng)求的頁(yè)面

Local Proxy

http://wiki.jikexueyuan.com/project/fend_note/images/L/local-proxy-working.jpg" alt="" />

攔截異步請(qǐng)求后，根據(jù)請(qǐng)求的匹配規(guī)則返回所請(qǐng)求的數(shù)據(jù)（例如 JSON 或 XML）。

聯(lián)調(diào)

http://wiki.jikexueyuan.com/project/fend_note/images/L/local-and-remote.png" alt="" />

前后端聯(lián)調(diào)需要去除本地環(huán)境，在實(shí)際開(kāi)發(fā)中只需要對(duì)配置文件進(jìn)行調(diào)整既可 （控制哪些請(qǐng)求需要被本地服務(wù)器或代理攔截，哪些需要使用遠(yuǎn)程服務(wù)器）。

上一篇：DOM 編程藝術(shù)下一篇：文本