老生常談，聊聊前端的資料互動
做為一名前端，我們除了寫頁面，特效，元件，可能做得最多的要數資料互動了吧，也許有人會說node伺服器搭建，後臺檔案操作，socket.io雙向傳輸，但其實這些歸咎於前端更多是因為如今ECMAScript的迅猛發展，多數的前端雖說多少會點但用的其實不是很多，用得多的那些都往全棧走了，又搞前端又搞查資料庫欄位的那是java，我們吧，可能更多是利用node這個環境，幫我們做一些比如webpack打包，一些非同步通訊比如axios等等，而傳統上的資料互動，前後端聯調是前端一項非常重要的工作。
那前端的資料互動具體是怎樣的？
首先大體上的流程差不多是這樣：
1、你和後臺根據需求先商議好大致需要怎樣的資料，格式是怎樣（雙方都相對比較方便的平衡點，即後臺比較好查好存，前端也比較好取，好展示）
2、雙方根據協議好的方式各自擼程式碼，各自先測試。
3、合併後聯調。
當然了，這之中還需要解決一些諸如跨域，非同步回撥等遇到的問題。
目前，我們基於瀏覽器的通訊主要還是http協議，也有一些其他的比如webSocket（服務端不再是被動接受請求響應，而是主動發起，比如推送訊息），而js呢，由於它是單執行緒的，資料的互動大多數透過非同步來實現，比如我們常見的ajax，一些升級版的比如axios，axios比較好的是在於它是基於promise的，promise顧名思義：承諾。我們知道ajax最大的問題是什麼呢？所有的操作必須在它的回撥函式里才有效果，可能導致一些程式碼臃腫，不易複用等等。而promise呢，記得看過一些大神的文章，他們對promise的總結很精粹：promise，承諾，猶如古人一諾千金，代表著這個操作我承諾將來會實行，比如我們常見的ajax是這樣：
可能jQuery幫我們封裝好的ajax在實際開發過程會用得更多，比如說這樣：
你想想如果說把所有的操作都寫在success裡面，甚至第一種情況，成功和失敗都寫一起，會不會感覺特別的礙眼？程式碼特別的難看？那如果說，有一種承諾，使得我們可以先執行ajax的請求邏輯，再後面加一些比如ifSuccess（幹嘛幹嘛...）ifFail（幹嘛幹嘛），看上去是不是會舒服一些？因為它的承諾，它承諾將來如果怎樣怎樣，它就會執行怎樣怎樣，而我們不必掉進回撥的深淵（類似於ajax巢狀），是不是在邏輯思維的線索上更直觀更利於我們理順思路？
好了，不管是ajax還是基於promise的axios，不就是資料互動的基礎設施嘛，用哪個其實都差不多，而有了第一步的基礎設施，我們還需要第二步——資料，目前最常見的資料格式是json，也有一些字串（我們後面的例子就用個字串來展示哈）。
而這個過程我們需要知道什麼？或者說需要儲備怎樣的知識？簡單來說其實就是json資料解析，字串處理，正則匹配等等吧（其實不難）。比如說，給到你的資料是這樣的：
或者說甚至是這樣的：
這些資料可能是你們本公司的，也可能是呼叫別人介面返回的（比如說上面這種string，作為前端的你是不是很想把返回這種資料給你的人狠狠揍一頓？因為最終展示出來的是這樣的。）
當然了，實際工作中一些坑你需要去填，你遇到的資料格式型別可能千奇百怪，但都只能靠你的雙手去敲，現在用vue對資料互動就特別的友好，移植複用非常的方便，當然了，說到vue，它這種雙向資料繫結，資料劫持的方式原理是怎樣的？假如讓你用原生js或是jQuery寫一個簡單的雙向繫結demo（比如說你發微博的時候發多少字下面都有一個實時的提示說還差幾個字），你又得怎麼實現？Angular也是雙向繫結的，原理上又有什麼不同？這些其實對於每一個用vue開發的使用者而言都是必須要知道的。
有了基礎設施（js非同步，xhr，http），有了資料與前後臺的約定（json），那還差什麼呢？僅對於前端而言，就差實現了，利用的介面，以及一些你所擅長的特效，以及多個平臺的相容，最終實現你想要的效果。前端嘛，狹義上講，是MVC經典模式下的view，展現在使用者面前的那個介面，使用者的各種互動操作時刻影響著他們的體驗，而前端是讓這種體驗越來越好，增強使用者粘性的工程師。這個介面可以是網站，可以是成型的系統（比如ERP，OA），更可以是遊戲，而這些其實後臺能給你的僅僅就是一連串的資料，根據你不同的請求返回給你需要的資料，讓你去解析，去展示，去實現最終的產品功能。
好了廢話不多扯了，我們透過一些小demo來做做我們的資料互動吧。
這個資料呢上面有提了，是一串字串，你做測試的時候甚至就弄個txt文件都行。
jQuery跟animate.css呢，請自行百度哈。這個特效啥的不重要，重要的是資料的解析過程，展示過程。
html部分：
html>作文自動批閱 <!--動畫css--> <!--樣式層--> <!--jQuery引入--><!--行為層-->
css部分：
html,body,div,h1,h2,h3,h4,h5,h6{margin:0;padding:0}.dc_c_red{color:#f00}.dc_c_green{color:#008000}.paperReview{width:80%;margin:50px auto}.oAutoE,.wordsE,.gramE{width:100%;margin:5px auto;box-shadow:-2px 2px 10px #333;background-color:#cbfcb8;padding:10px 20px;color:#000}h2{font:18px "華文楷體";color:#f00;font-weight:bold;text-shadow:-1px 1px 3px #ccc}h3{font:15px "華文楷體";padding-left:20px;color:#ff4500}p{padding-left:8em;font:12px "microsoft yahei";line-height:25px}.dc_font{font:18px "華文行楷";margin-left:-5em;display:inline-block}.errDetail{margin-bottom:10px;background:rgba(255,255,255,0.4);border-radius:10px;padding:10px 0}.wordsE h3,.gramE h3{margin-top:10px;margin-bottom:10px}body{overflow-x:hidden}
js部分：
$(function(){
let dcObj = function(){};
dcObj.prototype = {
constructor : dcObj,
init : function(){
let _self = this;
_self.user = 'dorseyCh';
_self.submissionTime = "1900-00-00 00:00:00";
_self.autoEvaluation = { //自動評語
name : "※自動評語※",
errWords : "", //單詞錯誤
errGrammar : "", //語法錯誤
errStructure : "", //篇章結構
smooth : "", //可讀連貫
theme : "", //主題思想
autoScore : "" //自動評分
};
_self.wordsErrToRight = {
name : "※單詞糾錯※",
summarize :'',
err : [ //單詞糾錯，以每條例句作為一個單元，資料型別為object
// {
// sentence : "",
// errPrompt : "", //糾錯提示 ： S(拼寫錯誤) U(使用錯誤)
// reference : "", //建議單詞
// meaning : ""
//
// }
]
};
_self.grammarErrToRight = {
name : "※語法糾錯※",
summarize : "",
err : [
// {
// sentence : "",
// errPrompt : "",
// reference : "",
// example : ""
// }
] //語法糾錯，以每條例句作為一個單元，資料型別為object
};
_self.smoothErrToRight = {
name : "※連貫糾錯※",
err : [ //連貫糾錯，以每條例句作為一個單元，資料型別為object
{
sentence : "",
errPrompt : ""
}
]
};
},
strAppend : function(str,ins,loc){
return str.slice(0,loc) + ins + str.slice(loc,str.length);
},
//存json
changeStr : function(str) {
let _self = this;
let arr = str.split('*'),
//四個模組資料
arrWords = (arr[0].split('>'))[1].split('|'), //單詞
arrGrammar = arr[1].split('|'), //語法
arrSmooth = arr[2].split('|'), //連貫性
arrAutoE = arr[5].split('|'); //自動評分
// console.log(arrWords);
// console.log(arrGrammar);
console.log(arrSmooth);
// console.log(arrAutoE);
/**
* 自動評分模組
* @author : dorseyCh 1092240376@qq.com
* @personal-Card : Chasing Dream
* */
//自動評分相關欄位處理
for(let i = 0; i" + arrAutoE[i].replace(/：/,'：');
}
//存該模組json資料
_self.autoEvaluation.errWords = arrAutoE[0];
_self.autoEvaluation.errGrammar = arrAutoE[1];
_self.autoEvaluation.errStructure = arrAutoE[2];
_self.autoEvaluation.smooth = arrAutoE[3];
_self.autoEvaluation.theme = arrAutoE[4];
_self.autoEvaluation.autoScore = arr[4] + "分";
/**
* 單詞糾錯模組
* @author : dorseyCh 1092240376@qq.com
* @personal-Card : Chasing Dream
* */
//單詞模組錯誤情況綜述
let summarizeArr = arrWords[1].split('^');
_self.wordsErrToRight.summarize = summarizeArr[0] + "單詞錯誤：" + summarizeArr[1] + "拼寫錯誤，" + summarizeArr[2] + "使用錯誤。";
//以每一條詳細解析的句子為一個物件，並把結果存入err陣列
_self.wordsErrToRight.err=[];//每次取值前清空原有內容
let errWordsPosition = arrWords[0].split('^');
let k = 0;
for(let i = 0;i',(parseInt(errWordsPosition[k+1])+3));
arrWords[i] = _self.strAppend(arrWords[i],"",(parseInt(errWordsPosition[k])+3));
k+=2;
}
let obj = {
sentence : arrWords[i],
errPrompt : arrWords[i+1] === 'S' ? "拼寫錯誤" : "使用錯誤", //糾錯提示 ： S(拼寫錯誤) U(使用錯誤)
reference : arrWords[i+2], //建議單詞
meaning : ""
};
_self.wordsErrToRight.err.push(obj);
}
}
/**
* 語法糾錯模組
* @author : dorseyCh 1092240376@qq.com
* @personal-Card : Chasing Dream
* */
let gSummarizeArr = arrGrammar[1].split('^');
_self.grammarErrToRight.summarize = "語法錯誤數："+gSummarizeArr[0];
//以每一條詳細解析的句子為一個物件，並把結果存入err陣列
_self.grammarErrToRight.err=[];//每次取值前清空原有內容
let gErrWordsPosition = arrGrammar[0].split('^');
k = 0;
for(let i = 0;i',(parseInt(gErrWordsPosition[k+1])+3));
arrGrammar[i] = _self.strAppend(arrGrammar[i],"",(parseInt(gErrWordsPosition[k])+3));
k+=2;
}
let obj = {
sentence : arrGrammar[i],
errPrompt : arrGrammar[i+1], //糾錯提示 ： S(拼寫錯誤) U(使用錯誤)
reference : arrGrammar[i+2], //建議單詞
example : arrGrammar[i+3]
};
_self.grammarErrToRight.err.push(obj);
}
}
/**
* 連貫糾錯模組
* @author : dorseyCh 1092240376@qq.com
* @personal-Card : Chasing Dream
* */
},
//取json
writeJson : function(select){
select.html("");
let _self = this,
//自動評分模組顯示
oAutoE = '' +
''+_self.autoEvaluation.name+'
' +
''+_self.autoEvaluation.errWords+'
' +
''+_self.autoEvaluation.errGrammar+'
' +
''+_self.autoEvaluation.errStructure+'
' +
''+_self.autoEvaluation.smooth+'
' +
''+_self.autoEvaluation.theme+'
' +
'自動評分：'+_self.autoEvaluation.autoScore+'
' +
'';
select.append(oAutoE);
//單詞糾錯模組
let wordsE = '' +
''+_self.wordsErrToRight.name+'
' +
''+_self.wordsErrToRight.summarize+'
' +
'' +
'';
select.append(wordsE);
let oWords = _self.wordsErrToRight.err;
for(let i = 0;i' +
'出錯句子：'+oWords[i].sentence+'
' +
'糾錯提示：'+oWords[i].errPrompt+'
' +
'建議單詞：'+oWords[i].reference+'
' +
''+oWords[i].meaning+'
' +
'
'+_self.grammarErrToRight.name+'
' + ''+_self.grammarErrToRight.summarize+'
' + '' + '出錯句子：'+oGram[i].sentence+'
' + '糾錯提示：'+oGram[i].errPrompt+'
' + '建議單詞：'+oGram[i].reference+'
' + '簡單舉例：'+oGram[i].example+'
' + ''; $('.gramEContent').append(oDiv); } }, animate : function(){ //自動評語模組 let oP = $('.oAutoE').children('p'); oP.addClass('animated fadeInRight'); oP.each(function(i){ oP.eq(i).css("animation-delay",(i+4)/5+'s'); }); //單詞模組 let errDetail = $('.errDetail'); errDetail.each(function(i){ errDetail.eq(i).css("animation-delay",(i+2)/2+'s'); }); }, run : function(select,str){ this.init(); this.changeStr(str); this.writeJson(select); this.animate(); } }; $.ajax({ type : 'GET', url : 'review.txt', success : function(data){ let obj = new dcObj(); obj.run($('.paperReview'),data); } }); })我們最後呢，得貼點資料，既然是純粹的欄位，我們用個簡單的txt文件存一下吧。
~fc3243a9f2225d47371b4ad13cdfa81c#2018-07-12 09:53:01>19^26^79^85|2^1^1|1. Our time is like a funtuel.|S|funnel, Bunuel|2. His parents come to school to talk with his teachers many times,but it doesn't effect.|U|affect|*11^40|1|1. My View on Computer Games Computer games are not our life.|這個短語重複了，建議改為“Computer Games”。|Computer Games|All we wanted to do was to stand very quietly and look and look and look.| | |*|1^1^2^該句中的短語詞“We students”、“much more time”、“meaningful things”在上一句中沒有提及，導致句子之間過渡中斷。^0-11^25-39^43-60^|1^3^4^該句中的短語詞“It”在上一句中沒有提及，導致句子之間過渡中斷。^0-2^|1^6^7^該句中的短語詞“computer games”、“our health”、“we”在上一句中沒有提及，導致句子之間過渡中斷。^8-22^34-44^45-47^|1^8^9^該句中的短語詞“a bad thought”在上一句中沒有提及，導致句子之間過渡中斷。^7-20^|1^9^10^該句中的短語詞“I”、“a classmate”、“Tom”在上一句中沒有提及，導致句子之間過渡中斷。^0-1^7-18^25-28^|1^14^15^該句中的短語詞“So many examples”、“us”、“much time”、“computer games”在上一句中沒有提及，導致句子之間過渡中斷。^0-16^34-36^50-59^63-77^|**77.3*單詞錯誤：有較少單詞錯誤，請注意單詞的記憶學習。|語法錯誤：有少量語法錯誤，請注意語法知識的學習。|篇章結構：段落數不夠，通常短文結構分三段較好；句子數太多，請注意寫作句子數要求；短語數不夠，請適當增加短語的使用；單詞數太多，請注意寫作字數要求；句子結構有較好的多樣性；使用了較為容易的單詞；詞彙有較好的豐富性。|可讀連貫：具有較好可讀性；文字勉強連貫，第1段基本連貫。|主題思想：不切題；有些地方主題思想與表達不清。|~
當然了，對於字串的匹配，如果規則不是比較複雜的話，其實一句正則就可以搞定，大神都是用正則的，像我這樣的菜鳥當然是只能用點不算正則的正則哈= =
(原創首發於慕課網)
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/1747/viewspace-2804564/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- 老生常談-Activity
- iOS面試題 — 老生常談iOS面試題
- 老生常談之CSS的垂直居中CSS
- 老生常談的陣列去重陣列
- 老生常談-節流函式函式
- 老生常談之Flux與Redux思想Redux
- 老生常談-實現一個PromisePromise
- 《iOS面試題 - 老生常談》之提示答案iOS面試題
- 老生常談：Promise 用法與原始碼分析Promise原始碼
- 老生常談category增加屬性的幾種操作Go
- 老生常談之 PHP 基礎排序演算法PHP排序演算法
- 老生常談 String、StringBuilder、StringBufferUI
- 老生常談：MYSQL模式匹配 REGEXP和like的用法MySql模式
- Java語言和C++語言的差異——老生常談 (轉)JavaC++
- 聊聊雙11互動主動法中前端技術亮點前端
- 老生常談Java虛擬機器垃圾回收機制(必看篇)Java虛擬機
- 老生常談——利用訊息佇列處理分散式事務佇列分散式
- 聊聊與前端工程師天然互補的 Serverless前端工程師Server
- 資料互動
- 談一談常見的資料治理怪象
- 談談資料安全常見的誤區
- 老生常談：什麼樣的(機器學習)結果才有推廣(泛化)價值機器學習
- 老生常談！程式設計師為什麼要閱讀原始碼？程式設計師原始碼
- WPF和js互動 WebBrowser資料互動JSWeb
- Flask資料互動Flask
- Hive 與 ElasticSearch 的資料互動HiveElasticsearch
- 談談前端異常捕獲與上報前端
- 資料互動筆記筆記
- 【面試技巧】老生常談之 n 種使用 CSS 實現三角形的技巧面試CSS
- 互動設計分享：淺談互動設計的一切
- 所有權背後的資料互動
- 老生常談SQL2005語句實現行轉列,列轉行SQL
- 前端進階（一）掌握Web API，開發常見的頁面互動功能前端WebAPI
- Android 與前端互動Android前端
- Android FlatBuffers資料互動Android
- Ajax 資料非同步互動非同步
- 前端監控(效能/資料/異常)前端
- 淺談遊戲中的互動敘事遊戲