介紹
大家好，我是清風(fēng)。今天給大家分享一個項目中遇到問題解決問題的案例，編程其實就是一個思考的過程，缺少思考就沒有靈魂，遇到問題先靜下心去思考，想到方法后再去實踐。我們要學(xué)會靈活變通去解決問題，掌握方法，這樣才能舉一反三，臨危不亂，遇到所有問題都能很好地去解決。
事情是這樣的，做的一個答題小程序，要求在后臺編輯題目，編輯題目是用的textarea文本域，即輸入的是文本內(nèi)容，配置之后小程序里查詢顯示后臺配置的題目列表。
當(dāng)然在測試時后臺去配置文本內(nèi)容，小程序顯示是沒有問題的。因為配置的題目是純文本，小程序里也是直接在text里顯示的，沒有問題。
后臺配置題目
小程序顯示題目
問題出現(xiàn)
問題往往只有在用的時候才會發(fā)現(xiàn)，用戶或管理員的各種操作才能顯現(xiàn)出各種問題?，F(xiàn)在小程序里已經(jīng)不能正常顯示了，有些顯示的是html格式富文本格式，有些不顯示。顯然和需求大相徑庭，已經(jīng)出現(xiàn)問題了。
問題分析
如上圖，在用的時候因為是從word文檔里直接復(fù)制過去的題目（事先在word里整理好了題目，由于各部門工作對接，先是在word文檔進(jìn)行審核），直接復(fù)制會把富文本內(nèi)容也攜帶過去，攜帶過去的當(dāng)然也有style樣式，小程序里不顯示的原因是富文本的字體顏色是黑色字體，和小程序面背景都是黑色，導(dǎo)致看不到文字。打開控制臺調(diào)試，問題確實是這么出現(xiàn)的。
word文檔編輯的題目會出現(xiàn)不同的富文本的樣式格式，這都會導(dǎo)致小程序的不正常顯示。
富文本的文字顏色是黑色，這導(dǎo)致的小程序頁里題目的不顯示。
解決方法
既然后臺有可能出現(xiàn)富文本，我們直接把小程序題目的渲染方式換成富文本渲染，這樣就算是純文本也可以顯示的。而第二個問題，由于小程序頁面背景顏色是黑色，所以題目的字體顏色不能是黑色，我們做一個查找替換，把style樣式里的字體樣式替換掉就可以了。
優(yōu)化
樣式可能是各種各樣的，通過查找style樣式里的字體樣式考慮的匹配太多了，比如說color屬性值可以是rgb形式，也可是rgba形式，也可能是#號顏色值形式，還有可能是英文形式顏色，所以不可取。我們換一種思路，直接把style屬性替換掉，即查找到style，換成一個無效的屬性名。案例中我們替換成了c，c是一個無效的屬性，不會觸發(fā)節(jié)點的查找和計算。
replace函數(shù)
我們用到replace函數(shù)，replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達(dá)式匹配的子串。
參數(shù)
-
regexp/substr，必需。規(guī)定子字符串或要替換的模式的 RegExp 對象。
-
replacement，必需。一個字符串值。規(guī)定了替換文本或生成替換文本的函數(shù)。
請注意，regexp/substr 是一個字符串，則將它作為要檢索的直接量文本模式，而不是首先被轉(zhuǎn)換為 RegExp對象，返回值是一個新的字符串，是用 replacement 替換了 regexp 的第一次匹配或所有匹配之后得到的。
實現(xiàn)
replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達(dá)式匹配的子串。
that.setData({
_list: res.data
})
let data = that.data._list
data.forEach((element, index) => {
var stemContent = '_list[' + index + '].stemContent'
that.setData({
[stemContent]: element.stemContent.replace(/style/g, 'c')
})
element.choiceTopicVos.forEach((item, i) => {
var listCheck = '_list[' + index + '].choiceTopicVos[' + i + '].optionDes';
that.setData({
[listCheck]: item.optionDes.replace(/style/g, 'c')
})
})
})
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
用到的replace函數(shù)，進(jìn)行了字符串的查找替換，查找到style屬性，把它替換到了無效的屬性c，沒有了樣式屬性，從而達(dá)到了去除內(nèi)聯(lián)樣式的效果，經(jīng)過調(diào)試，完美解決問題。
總結(jié)
這是一個小問題，我為什么要拿出來說呢？拋去開發(fā)的測試流程不說，我認(rèn)為它能引發(fā)一些思考。寫代碼的過程必須是一個思考的過程，怎么樣更好地去實現(xiàn)效果，怎么樣更簡單有效地解決問題，怎么樣優(yōu)化，要去考慮一個大的方面。善于發(fā)現(xiàn)問題，解決問題，并不是說用了什么高級語言就鄙棄了思考，機器語言是相通的，開發(fā)中各種各樣地應(yīng)用才是魅力所在。編程是一門是藝術(shù)，最重要的是你怎樣去巧妙地運用，就像解一道數(shù)學(xué)題，精絕巧妙的解法會讓人眼前一亮，增色太多。同樣都做出來了，但是你做的就顯得十分優(yōu)雅！
轉(zhuǎn)自 csdn
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
