介紹

大家好，我是清風(fēng)。今天給大家分享一個項(xiàng)目中遇到問題解決問題的案例，編程其實(shí)就是一個思考的過程，缺少思考就沒有靈魂，遇到問題先靜下心去思考，想到方法后再去實(shí)踐。我們要學(xué)會靈活變通去解決問題，掌握方法，這樣才能舉一反三，臨危不亂，遇到所有問題都能很好地去解決。

事情是這樣的，做的一個答題小程序，要求在后臺編輯題目，編輯題目是用的textarea文本域，即輸入的是文本內(nèi)容，配置之后小程序里查詢顯示后臺配置的題目列表。

當(dāng)然在測試時(shí)后臺去配置文本內(nèi)容，小程序顯示是沒有問題的。因?yàn)榕渲玫念}目是純文本，小程序里也是直接在text里顯示的，沒有問題。

后臺配置題目

小程序顯示題目

問題出現(xiàn)

問題往往只有在用的時(shí)候才會發(fā)現(xiàn)，用戶或管理員的各種操作才能顯現(xiàn)出各種問題。現(xiàn)在小程序里已經(jīng)不能正常顯示了，有些顯示的是html格式富文本格式，有些不顯示。顯然和需求大相徑庭，已經(jīng)出現(xiàn)問題了。

問題分析

如上圖，在用的時(shí)候因?yàn)槭菑?code style="box-sizing:border-box;outline:0px;font-family:"font-size:14px;line-height:22px;border-radius:2px;padding:2px 4px;overflow-wrap:break-word;user-select:text !important;background-color:#404041 !important;">word文檔里直接復(fù)制過去的題目（事先在word里整理好了題目，由于各部門工作對接，先是在word文檔進(jìn)行審核），直接復(fù)制會把富文本內(nèi)容也攜帶過去，攜帶過去的當(dāng)然也有style樣式，小程序里不顯示的原因是富文本的字體顏色是黑色字體，和小程序面背景都是黑色，導(dǎo)致看不到文字。打開控制臺調(diào)試，問題確實(shí)是這么出現(xiàn)的。

word文檔編輯的題目會出現(xiàn)不同的富文本的樣式格式，這都會導(dǎo)致小程序的不正常顯示。

富文本的文字顏色是黑色，這導(dǎo)致的小程序頁里題目的不顯示。

解決方法

既然后臺有可能出現(xiàn)富文本，我們直接把小程序題目的渲染方式換成富文本渲染，這樣就算是純文本也可以顯示的。而第二個問題，由于小程序頁面背景顏色是黑色，所以題目的字體顏色不能是黑色，我們做一個查找替換，把style樣式里的字體樣式替換掉就可以了。

優(yōu)化

樣式可能是各種各樣的，通過查找style樣式里的字體樣式考慮的匹配太多了，比如說color屬性值可以是rgb形式，也可是rgba形式，也可能是#號顏色值形式，還有可能是英文形式顏色，所以不可取。我們換一種思路，直接把style屬性替換掉，即查找到style，換成一個無效的屬性名。案例中我們替換成了c，c是一個無效的屬性，不會觸發(fā)節(jié)點(diǎn)的查找和計(jì)算。

replace函數(shù)

我們用到replace函數(shù)，replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達(dá)式匹配的子串。

參數(shù)

1. regexp/substr，必需。規(guī)定子字符串或要替換的模式的 RegExp 對象。
2. replacement，必需。一個字符串值。規(guī)定了替換文本或生成替換文本的函數(shù)。

請注意，regexp/substr 是一個字符串，則將它作為要檢索的直接量文本模式，而不是首先被轉(zhuǎn)換為 RegExp對象，返回值是一個新的字符串，是用 replacement 替換了 regexp 的第一次匹配或所有匹配之后得到的。

實(shí)現(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ā)一些思考。寫代碼的過程必須是一個思考的過程，怎么樣更好地去實(shí)現(xiàn)效果，怎么樣更簡單有效地解決問題，怎么樣優(yōu)化，要去考慮一個大的方面。善于發(fā)現(xiàn)問題，解決問題，并不是說用了什么高級語言就鄙棄了思考，機(jī)器語言是相通的，開發(fā)中各種各樣地應(yīng)用才是魅力所在。編程是一門是藝術(shù)，最重要的是你怎樣去巧妙地運(yùn)用，就像解一道數(shù)學(xué)題，精絕巧妙的解法會讓人眼前一亮，增色太多。同樣都做出來了，但是你做的就顯得十分優(yōu)雅！

轉(zhuǎn)自 csdn

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.wtxcl.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司