基于CiteSpace 的前端開發(fā)研究熱點與趨勢*

張崇明 高屹，2

（1.西藏民族大學(xué)；2.西藏光信息處理與可視化技術(shù)重點實驗室，陜西 咸陽 712082）

前端開發(fā)是通過HTML、CSS和JavaScript以及各種衍生技術(shù)、框架和解決方案，向用戶展示網(wǎng)頁和應(yīng)用程序界面。自2005年以來，互聯(lián)網(wǎng)進(jìn)入了Web2.0時代。隨著移動互聯(lián)技術(shù)的普及、應(yīng)用，前端開發(fā)顯著提升了現(xiàn)代web界面的美觀性和功能性，顯著改善了用戶體驗。前端開發(fā)的核心技術(shù)和主流框架是什么？前端開發(fā)的主要應(yīng)用領(lǐng)域是什么？前端開發(fā)的未來研究趨勢是什么？

為了回答上述問題，作者借助CiteSpace可視化軟件定義了從2005年到2021年的時間段，以被中國知網(wǎng)的期刊所收錄的關(guān)于前端開發(fā)為主題的文獻(xiàn)作為分析對象，并將此以圖譜化形式呈現(xiàn)，梳理前端開發(fā)的研究熱點和未來的發(fā)展趨勢和應(yīng)用趨勢，從而為以后的前端開發(fā)的相關(guān)研究提供借鑒。

1 數(shù)據(jù)源和數(shù)據(jù)處理方法

1.1 數(shù)據(jù)源

數(shù)據(jù)源是中國知網(wǎng)數(shù)據(jù)庫，以“前端開發(fā)”為主題詞進(jìn)行檢索，時間區(qū)間為2005年至2021年，得到符合要求的文獻(xiàn)628篇，對相應(yīng)數(shù)據(jù)進(jìn)行處理加工后，以二維表形式存儲。

1.2 研究方法

本文以CiteSpace可視化方法為基礎(chǔ)，對相關(guān)處理后的數(shù)據(jù)進(jìn)行分析比較，以可視化的圖表方式呈現(xiàn)。

CiteSpace是一種各基于JAVA 語言的PR，能夠針對搜索后的文獻(xiàn)數(shù)據(jù)按時間、類別、強度等指標(biāo)進(jìn)行計量分類，并且利用可視化的圖表形成知識圖譜，顯示搜索數(shù)據(jù)的發(fā)展變化情況，以可視化的方法描述科普知識的構(gòu)成、規(guī)律以及分布狀況的方法，被稱之為“科學(xué)知識圖譜”［1］。

2 數(shù)據(jù)分析

2.1 年度文獻(xiàn)量統(tǒng)計分析

按年度統(tǒng)計發(fā)文量可以反應(yīng)在2005—2021年間前端開發(fā)研究領(lǐng)域的熱度，結(jié)果如圖1所示［2］。從圖中可以看出，2005—2021年全年的發(fā)文量整體呈上升趨勢。在2012年前發(fā)文量較少增長也較為緩慢，而在2012年后，前端開發(fā)的年度發(fā)文量快速增加，在2020年達(dá)到15年以來的頂峰，有159篇，截至2021年9月底，已發(fā)表文獻(xiàn)114 篇。這充分得說明了前端開發(fā)的研究熱度也呈現(xiàn)出上升的趨勢。

2.2 作者聚類分析

利用CiteSpace軟件進(jìn)行的作者聚類分析中設(shè)閾值為2，表示統(tǒng)計出發(fā)文數(shù)量在二篇以上的作者，得到了作者的聚類圖譜(見圖2)。在圖表中，作者姓名字體大小和作品的發(fā)表數(shù)量成正比，而作品間的合作關(guān)系用節(jié)點間的連接表達(dá)［3］。從圖2中可知，雖然作者間的協(xié)作人員較多且均是日發(fā)文量約為一篇的作品，但多數(shù)作者都為二人組至三人組，且僅有三組合作人員超過五人的小組，有一個協(xié)作人員超過六人的研究小組，這也表明在前端技術(shù)開發(fā)領(lǐng)域中研究團(tuán)隊數(shù)量較多且規(guī)模也較小。而在該領(lǐng)域，僅劉曉燕、王紅軍、孟瑤的發(fā)文量超過了3篇。

2.3 發(fā)文機構(gòu)分析

在CiteSpace軟件中設(shè)置節(jié)點Types為institution，閾值調(diào)為3，得到發(fā)文機構(gòu)不少于3篇的前端開發(fā)的機構(gòu)圖譜（見圖3）。從圖中我們可以得到發(fā)文量大于3篇的機構(gòu)有甘肅林業(yè)職業(yè)技術(shù)學(xué)院、東莞職業(yè)技術(shù)學(xué)院、河北旅游職業(yè)學(xué)院、河南牧業(yè)經(jīng)濟(jì)學(xué)院、四川信息職業(yè)技術(shù)學(xué)院、遼東學(xué)院信息工程學(xué)院。其中發(fā)文量最多的是甘肅林業(yè)職業(yè)技術(shù)學(xué)院和東莞職業(yè)技術(shù)學(xué)院，發(fā)表的文章總數(shù)為4 篇。從發(fā)文的機構(gòu)我們可以看出前端開發(fā)的研究不局限于信息學(xué)院，這說明研究人員以多學(xué)科的方式發(fā)展。另外，發(fā)文機構(gòu)均為?？圃盒＃f明了在更重視職業(yè)技能培養(yǎng)的?？圃盒?，前端開發(fā)是熱門專業(yè)［4］。另外，在圖中我們可以看到機構(gòu)的名字之間并沒有線連接，這說明機構(gòu)之間沒有合作，都是獨立研究?？梢姡谇岸碎_發(fā)領(lǐng)域我國跨機構(gòu)的研究需要進(jìn)一步增強。

2.4 關(guān)鍵詞分析

2.4.1 關(guān)鍵詞共現(xiàn)分析。關(guān)鍵詞反映了研究的主題問題及熱點問題，通過統(tǒng)計某一時間段內(nèi)具有內(nèi)在聯(lián)系的大量文獻(xiàn)集中討論的熱點問題，找出其規(guī)律和特點［5］。在CiteSpace軟件中，設(shè)置關(guān)鍵詞節(jié)點對關(guān)鍵詞進(jìn)行統(tǒng)計分析，得出關(guān)鍵詞共現(xiàn)圖譜（見圖4）。節(jié)點和字體的大小表示關(guān)鍵字的頻率。中心性的大小被用來測度關(guān)鍵詞的重要性。關(guān)鍵詞頻次高且中心性強，可以作為研究熱點詞［6］。在此基礎(chǔ)上，選取頻度熱點關(guān)鍵詞，分析其頻度與中心性（如表1）。其中，高頻關(guān)鍵詞主要圍繞“前端開發(fā)”展開，“web”和“教學(xué)改革”的中心性高，說明這兩個關(guān)鍵詞很重要。與“web”相關(guān)的關(guān)鍵詞為“前端技術(shù)”“瀏覽器”“數(shù)據(jù)庫”，這些關(guān)鍵詞之間的連線又多又粗。這說明了這幾個關(guān)鍵詞關(guān)系緊密，也是前端開發(fā)領(lǐng)域內(nèi)研究的熱點。與“教學(xué)改革”相關(guān)的關(guān)鍵詞是“課程體系”“課程改革”。這說明了隨著互聯(lián)網(wǎng)和前端開發(fā)的發(fā)展，許多高校為了應(yīng)對技術(shù)的發(fā)展，對教學(xué)方式、課程體系都進(jìn)行了改革，這也說明了前端開發(fā)領(lǐng)域研究的重要性。

表1 前端開發(fā)領(lǐng)域TOP5的關(guān)鍵詞統(tǒng)計

2.4.2 關(guān)鍵詞聚類分析。關(guān)鍵詞聚類分析可以反映該領(lǐng)域最熱門的研究課題。在CiteSpace軟件中，設(shè)置聚類數(shù)量為8，最終得出8個關(guān)于前端開發(fā)高頻關(guān)鍵詞的聚類點。各聚類都由密切聯(lián)系的關(guān)鍵詞組成，設(shè)聚類臨界值為0.5，當(dāng)聚類S值大于臨界值時，說明是合格的聚類，當(dāng)聚類S值超過0.7時則表示聚類結(jié)果是符合預(yù)期要求的［7］。圖4 所示的8個聚類的聚類S值全部超過0.7，因此，聚類結(jié)果具有較高的可靠性。根據(jù)聚類結(jié)果，可以將研究熱點分為二大主題：前端開發(fā)的技術(shù)與應(yīng)用、前端開發(fā)的教育，參見圖5。

前端開發(fā)的技術(shù)與應(yīng)用由“前端開發(fā)”“開發(fā)技術(shù)”“CSS”“json”“軟件開發(fā)”五個聚類所組成。前端開發(fā)的關(guān)鍵就是開發(fā)技術(shù)，包括最基礎(chǔ)的CSS，HTML 和JavaScrip以及所衍生的框架、插件等。其中“CSS”是一組用來控制網(wǎng)頁外觀的規(guī)則，合理運用CSS可以使頁面更加美觀，用戶也會有更加良好的用戶體驗［8］。另外CSS可與DIV 相結(jié)合，這不僅可以使頁面美觀，還會影響頁面重構(gòu)的難度。這一設(shè)計標(biāo)準(zhǔn)與傳統(tǒng)的table相比，在實現(xiàn)同一動畫效果的前提下，CSS+D IV的框架模式可以用更少的代碼實現(xiàn)，為網(wǎng)站節(jié)省大量的帶寬［9］。因此CSS在前端開發(fā)有著十分重要的作用。而“json”作為一種輕量級的數(shù)據(jù)傳輸方式使前端開發(fā)更容易實現(xiàn)前后端的分離。json可以將JavaScript對象中表示的一組數(shù)據(jù)轉(zhuǎn)換為字符串，并在需要的時候?qū)⑺€原為各編程語言所支持的數(shù)據(jù)格式。前端與后端不會相互影響，只有當(dāng)json格式改變時才會影響前端。

自2014 年，手機等移動端的使用率超過了PC 端后，前端開發(fā)在軟件開發(fā)中也有著舉足輕重的作用。Twitter的Mark Otto和Jacob Thornton為了解決PC 端與移動端的頁面不兼容而推出了Bootstrap前端框架［10］。運用Bootstrap框架可以通過自動判斷設(shè)備而對頁面進(jìn)行響應(yīng)式調(diào)整，從而減少重復(fù)性的開發(fā)工作，使開發(fā)的效率大幅提升［11］。這也是目前前端開發(fā)所流行的框架之一。

前端開發(fā)的教育由“教學(xué)改革”“課程體系”“課程改革”三個聚類所組成。在傳統(tǒng)的教學(xué)模式中存在著一些問題，如：教學(xué)內(nèi)容相對陳舊，不能適應(yīng)市場的需求；理論的教學(xué)課時較多，學(xué)生的學(xué)習(xí)應(yīng)用的效果欠佳；課程成績的評定以理論為重，忽視了項目實踐的成績評定等［12］。因此，針對以上的問題，許多學(xué)校對于前端開發(fā)的教學(xué)以及課程進(jìn)行了改革，具體表現(xiàn)：（1）增加教學(xué)和實踐的課時，增強課程內(nèi)容的連貫性。（2）加強校企融合,針對目前企業(yè)對于前端開發(fā)人才的實際要求安排課程內(nèi)容，防止學(xué)生所學(xué)的技術(shù)落后于企業(yè)要求，且要與實踐相結(jié)合，要求學(xué)生獨立完成項目的開發(fā)。（3）以工作過程為依據(jù)，設(shè)計前端課程。如開發(fā)一個網(wǎng)站，要求學(xué)生對于該任務(wù)熟悉其中的每一步過程，從功能需求分析，網(wǎng)站總體設(shè)計，頁面詳細(xì)設(shè)計，網(wǎng)站開發(fā)實現(xiàn)，測試與優(yōu)化以及最后的網(wǎng)站發(fā)布。（4）引入“1+X”教學(xué)模式，為學(xué)生劃定良好的學(xué)習(xí)路線。（5）完善考核評價系統(tǒng)，如筆試與實踐結(jié)合的緊密性，老師對學(xué)生的平時上課表現(xiàn)的評價，平時的考核與期中期末的成績［13］。

2.5 研究趨勢分析

對文獻(xiàn)高頻關(guān)鍵詞進(jìn)行時區(qū)分布分析，結(jié)果如圖6主題路徑圖所示。圖6主題路徑圖直觀反映了特定時間范圍內(nèi)關(guān)鍵詞之間的共現(xiàn)關(guān)系及某一領(lǐng)域的發(fā)展脈絡(luò)與研究趨勢。圓圈代表關(guān)鍵詞所在文章的最早發(fā)表年份，圓圈的大小代表研究的熱力程度，關(guān)鍵詞間的連線代表某一關(guān)鍵詞與其他關(guān)鍵詞存在共現(xiàn)關(guān)系，連線的趨勢代表這一研究方向的發(fā)展脈絡(luò)。2007年，出現(xiàn)頻次高的詞是前端開發(fā)，說明前端開發(fā)領(lǐng)域已經(jīng)得到了學(xué)者的重視且有較高的熱度。而隨著互聯(lián)網(wǎng)的發(fā)展和HTMl5與CSS3的廣泛應(yīng)用、市場的對前端開發(fā)人才需求的進(jìn)一步地加大，促使許多學(xué)校對前端領(lǐng)域相關(guān)課程以及教學(xué)進(jìn)行改革［14］。前端的未來發(fā)展仍將側(cè)重于可視化。

2.6 研究前沿分析

利用CiteSpace突變體檢測算法，能夠探測出某段時間范圍內(nèi)頻次變化率較高的主題詞，即為突變詞。突變詞就是某個關(guān)鍵詞在某一年發(fā)表的文章中頻繁激增，利用CiteSpace軟件的突變詞檢測的功能可以檢測出某一領(lǐng)域頻次變化率較高的突現(xiàn)詞，突發(fā)性節(jié)點加粗代表著其對應(yīng)主題在相應(yīng)時間發(fā)文量突然放大，然后判斷該領(lǐng)域的研究前沿［15］。通過使用CiteSpace軟件，檢測到2005—2021年前端開發(fā)相關(guān)文獻(xiàn)的關(guān)鍵詞，如圖7所示。

根據(jù)關(guān)鍵詞突現(xiàn)的時間演變過程，可以將2005—2021年關(guān)于前端開發(fā)的研究過程按照時間劃分為三個階段。

（1）第一個階段（2005—2008），在這個階段，以前端開發(fā)發(fā)展為主，如數(shù)據(jù)庫、瀏覽器等。其中，數(shù)據(jù)庫的突變值最大，達(dá)到了4.27，且從2005年一直持續(xù)到2010年。在2008年在Opera 9.5、FireFox 3、IE8 beta1以及隨著iPhone的盛行擁有更多用戶的Safari的瀏覽器大戰(zhàn)中，瀏覽器廠商將發(fā)展的重點從獨立不相容的技術(shù)轉(zhuǎn)向了用戶體驗，安全和個性化方面，這促使了web前端開發(fā)的發(fā)展［16］。而于2009年6月在美國加州舉行的Velocity 2009論壇上集中討論了web性能與實踐，其中，Ajax性能的講解，網(wǎng)站性能分析的分享，高效編寫JavaScript的經(jīng)驗，特別是互聯(lián)網(wǎng)巨頭對于性能分析與調(diào)試工具的展示，更使得前端開發(fā)成為發(fā)展的焦點［17］。

（2）第二階段（2012—2018），這一階段主要以前端開發(fā)的主要技術(shù)和應(yīng)用為主，包括工作過程，網(wǎng)頁設(shè)計、CSS3、C 語言、HTML、MVVM和網(wǎng)站制作。前端開發(fā)從簡單靜態(tài)的網(wǎng)頁制作轉(zhuǎn)變?yōu)榫绖討B(tài)，與用戶交互性強的網(wǎng)站開發(fā)。而這一轉(zhuǎn)變過程的前提是前端開發(fā)技術(shù)不斷地發(fā)展。Web前端開發(fā)包括三個要素：HTML、CSS和JavaScript［18］。其中就2008年公布的HTML5來說，它較之與上一代來說，HTML5所提供的平臺更為完整，且操作更為簡單，不必安裝多余的插件，并且它完善了交互功能和多線處理等功能，而更為重要的是HTML5還支持跨平臺開發(fā)，而這些有點正是前端開發(fā)發(fā)展的關(guān)鍵［19］。另外由三個要素所衍生的一些框架也進(jìn)一步增強了前端開發(fā)的方便快捷性，如基于MVVM模式的V ue框架，構(gòu)建動態(tài)應(yīng)用的Angular框架等［20］。另外CSS發(fā)展到了CSS3，可以對頁面的元素進(jìn)行靜態(tài)或是動態(tài)的修飾，且增添了許多新的動畫效果，往往只需要通過CSS3的一行代碼就可以取代之前的復(fù)雜操作，十分簡單易學(xué)［21］。而JavaScript作為一種腳本語言，可以跨平臺，跨瀏覽器運行，且已經(jīng)更新到了ECMA Script6。

（3）第三階段（2018—2021），這一階段主要以前端開發(fā)的教育和課程改革為主，包括教學(xué)設(shè)計，教學(xué)改革和職業(yè)教育。其中“教學(xué)改革”的突變值最大，且時間從2019年持續(xù)到了2021 年。而這一變化出現(xiàn)的原因是由于在2019年1月24 日，國務(wù)院印發(fā)了《國家職業(yè)教育改革實施方案》，要求在職業(yè)院校，應(yīng)用型本科院校啟動“學(xué)歷證書+若干職業(yè)技能等級證書’制度試點工作”，即1+X 制度［22］。而由于市場對前端開發(fā)領(lǐng)域人才的需求增加，且具有入門容易、發(fā)展?jié)摿Υ蟆⑿匠旮叩奶攸c。因此許多職業(yè)類院校在前端開發(fā)領(lǐng)域加大了對學(xué)生的培養(yǎng)，進(jìn)行了教學(xué)模式的改革。

而在職業(yè)教育方面，自2019年高職及中職院校開展普及1+X 職業(yè)技能等級證書制度以來，這要求學(xué)生在畢業(yè)的同時，也要獲取國家承認(rèn)的專業(yè)證書，以保證高職院校的學(xué)生具備一定的專業(yè)實力。而Web前端開發(fā)也被確定為首批的試點，這也為國家和社會培養(yǎng)了許多專業(yè)性強的技能型人才［23］。因此前端開發(fā)的教育也是目前及以后受關(guān)注的研究主題。

3 結(jié)論

綜上，本文通過CiteSpace軟件對2005—2021 年前端開發(fā)領(lǐng)域CNK I的相關(guān)文獻(xiàn)進(jìn)行分析，直觀的展示了前端開發(fā)研究的現(xiàn)狀跟發(fā)展趨勢。目前，對前端開發(fā)的研究主要集中在Web前端開發(fā)和教學(xué)改革方面。網(wǎng)站制作和職業(yè)教育將是未來的發(fā)展趨勢。但由于數(shù)據(jù)庫格式的限制，無法反映文章的共引情況，作者與關(guān)鍵詞的交互關(guān)系未能得到探究，而且不能同時收錄外文文獻(xiàn)進(jìn)行分析，故存在一定的局限。今后的研究中，研究者可以加強跨地域跨單位的合作，更全面深入的進(jìn)行前端開發(fā)的研究。