基于HTML5技術(shù)的校企互聯(lián)平臺開發(fā)

王蒙 郁慧琴 王玉貴

【摘 ?要】產(chǎn)學(xué)研合作主要是將學(xué)校、企業(yè)以及各科研機(jī)構(gòu)有效地聯(lián)系起來，實(shí)現(xiàn)生產(chǎn)要素的充分調(diào)用，從而達(dá)到效益最大化的目標(biāo)。論文在對產(chǎn)學(xué)研合作深度分析后，在對現(xiàn)有產(chǎn)學(xué)研網(wǎng)絡(luò)平臺的總結(jié)比較基礎(chǔ)上，根據(jù)以上要點(diǎn)，結(jié)合使用各種技術(shù)，開發(fā)了一個(gè)基于HTML5技術(shù)的校企互聯(lián)產(chǎn)學(xué)研平臺。

【Abstract】Industry-university-research cooperation is mainly to effectively connect schools， enterprises and various scientific research institutions， realize the full mobilization and use of production factors， so as to achieve the goal of maximum benefits. After the in-depth analysis of the industry-university-research cooperation， based on the summary and comparison of the existing industry-university-research network platforms， according to the above key points， combined with the use of various technologies， this paper develops the industry-university-research platform of school-enterprise interconnection based on HTML5 technology.

【關(guān)鍵詞】產(chǎn)學(xué)研;校企互聯(lián);HTML5

【Keywords】industry-university-research; school-enterprise interconnection; HTML5

【中圖分類號】TP311.5 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 【文獻(xiàn)標(biāo)志碼】A ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 【文章編號】1673-1069（2020）10-0170-03

1 引言

為了更好地把握產(chǎn)學(xué)研需求，為客戶帶來更為舒心便捷的服務(wù)，本文重點(diǎn)在用戶體驗(yàn)系統(tǒng)和運(yùn)營管理等方面進(jìn)行了創(chuàng)新。以HTML5開發(fā)技術(shù)為基礎(chǔ)，以促進(jìn)高校科技成果轉(zhuǎn)化為核心，利用各種新渠道為客戶營造更加舒適便捷的服務(wù)體驗(yàn)。本平臺主要針對高校教師和企業(yè)客戶，其以HTML5與JavaScript技術(shù)為基礎(chǔ)，搭建了一個(gè)操作簡單、功能實(shí)用、溝通快捷的響應(yīng)式網(wǎng)站平臺，旨在更好地促進(jìn)高校和企業(yè)順暢溝通合作，使得企業(yè)能夠精準(zhǔn)快捷地獲取所需技術(shù)、高校科技成果能夠合理充分地應(yīng)用到實(shí)踐當(dāng)中，省去中間煩瑣的流程，減少實(shí)用型科技成果的流失。

2 利用HTML5開發(fā)本項(xiàng)目的優(yōu)勢

2.1 解決跨瀏覽器的問題

在應(yīng)用HTML5之前，各瀏覽器廠商為獲取更大的效益都制定了自己專屬的標(biāo)準(zhǔn)，同一個(gè)頁面在不同的瀏覽器上往往呈現(xiàn)出不同的頁面效果，這極大地降低了用戶的體驗(yàn)。本項(xiàng)目以其優(yōu)越的跨平臺性能，能夠贏得優(yōu)質(zhì)的用戶體驗(yàn)。

2.2 用戶至上原則

基于HTML5標(biāo)準(zhǔn)開發(fā)的網(wǎng)站，始終把用戶體驗(yàn)放在第一位，這也符合開發(fā)本網(wǎng)站的需求。利用HTML5開發(fā)的網(wǎng)站，頁面效果加載更為流暢，用戶可以更好更快地瀏覽所需的信息，從而避免了因下載、更新等一系列煩瑣流程而帶來的煩惱。

2.3 用戶信息安全

為確保用戶信息安全，HTML5引入了一種新的基于來源的安全模型，該模型針對不同的API（Application Programming Interface，應(yīng)用程序編程接口）都可通用。使用這個(gè)模型，不需要借助任何不安全的hack就能跨域進(jìn)行安全對話，在很大程度上提升了用戶信息的安全性。

2.4 化繁為簡的優(yōu)勢

作為當(dāng)下流行的通用標(biāo)記語言，HTML5將復(fù)雜的代碼簡單化，嚴(yán)格遵循“簡單至上”的原則，甚至創(chuàng)建了新的簡化字符集聲明以迎合用戶需求，以不同瀏覽器自帶的原生能力替代復(fù)雜的JavaScript代碼等。為了避免造成誤解，HTML5杜絕任何歧義模糊的語句出現(xiàn)，其細(xì)致嚴(yán)格的規(guī)范，為維護(hù)人員帶來了諸多便利，大大降低了平臺后期的維護(hù)難度[1]。

3 平臺框架與搭建思路

3.1 平臺框架

本平臺在對各種現(xiàn)有產(chǎn)學(xué)研平臺的總結(jié)比較基礎(chǔ)上，從用戶體驗(yàn)出發(fā)，主要應(yīng)用技術(shù)有Bootstrap框架、HTML5語言，結(jié)合JavaScript進(jìn)行項(xiàng)目開發(fā)。項(xiàng)目建設(shè)包括UI設(shè)計(jì)及后臺模塊。具體包括角色切換功能、科技中心、需求中心、專家中心、定位系統(tǒng)、通訊功能、分享系統(tǒng)、用戶二維碼等。平臺框架如表1所示。

3.2 搭建思路

眾所周知，互聯(lián)網(wǎng)最大的特性和優(yōu)勢就是能夠?qū)崿F(xiàn)資源的海量存儲及廣泛共享。因此，利用互聯(lián)網(wǎng)這些良好的特性搭建一個(gè)優(yōu)質(zhì)的交流平臺，將企業(yè)與高校密切地聯(lián)系起來，就可為高校的各項(xiàng)科研成果提供一個(gè)良好的孵化平臺，從而促進(jìn)各項(xiàng)科技成果的轉(zhuǎn)化。在產(chǎn)學(xué)研合作過程中，高校和科研機(jī)構(gòu)能夠?yàn)槠髽I(yè)發(fā)展提供所需要的技術(shù)支持，企業(yè)能夠?yàn)榇龠M(jìn)自身轉(zhuǎn)型升級所需的科研技術(shù)提供發(fā)展平臺，二者社會分工不同。為更好地提升用戶體驗(yàn)，本文進(jìn)行了細(xì)致的規(guī)劃，具體規(guī)劃如圖1所示。

①簡化平臺開發(fā)中的界面設(shè)計(jì)。根據(jù)用戶角色不同（高校用戶或企業(yè)用戶）進(jìn)行不同的界面設(shè)計(jì)。②減少科技成果的轉(zhuǎn)化時(shí)間。根據(jù)用戶所處的行業(yè)不同，按照用戶的需求，進(jìn)行供需的智能匹配。③建立完善的分享傳播系統(tǒng)。根據(jù)網(wǎng)站、微博、微信的用戶量廣、信息流通渠道多等的特點(diǎn)，打通社會化營銷渠道，提高宣傳的滲透度。④通過會員制度進(jìn)行和實(shí)現(xiàn)用戶行為記錄分析，建立用戶數(shù)據(jù)庫。此外，可以通過二維碼技術(shù)，實(shí)現(xiàn)從線下到線上的無縫連接，以提升社會化營銷的效果。⑤利用HTML5的新特性，實(shí)現(xiàn)精準(zhǔn)定位。使用該網(wǎng)站，可以搜索地點(diǎn)或可以利用GPS定位用戶所在地，為用戶提供更精準(zhǔn)的高校科研服務(wù)或企業(yè)需求的信息。⑥實(shí)現(xiàn)供需智能匹配。一是根據(jù)高校提交的科技成果服務(wù)，或者企業(yè)提供的科技成果需求，進(jìn)行智能匹配推送，方便用戶快速找到感興趣的服務(wù)或需求;二是用戶也可以根據(jù)行業(yè)類別劃分，查看不同行業(yè)的供需信息;三是可通過關(guān)鍵詞查找用戶感興趣的供需信息。⑦專家查找功能。根據(jù)高校教師擅長的領(lǐng)域，進(jìn)行專家資格審核認(rèn)證;企業(yè)可通過行業(yè)、地區(qū)、搜索等多種形式，查找相關(guān)領(lǐng)域的專家，以便溝通。⑧溝通、點(diǎn)評功能。教師和企業(yè)雙方，均可相互發(fā)送消息進(jìn)行溝通，并且可對對方提供的供需信息進(jìn)行點(diǎn)評。⑨建立信息分享系統(tǒng)。可通過微信、微博、二維碼等形式，將供需信息分享到其他平臺，便于擴(kuò)大影響力和提升知名度，促進(jìn)科技成果的轉(zhuǎn)化。

4 平臺具體設(shè)計(jì)與功能優(yōu)化

4.1 平臺具體設(shè)計(jì)

第一，用戶可通過密碼，也可通過短信驗(yàn)證碼快捷登錄。如果忘記密碼，可通過手機(jī)短信驗(yàn)證碼的方式重置密碼。第二，用戶登錄后，根據(jù)用戶的信息，若判斷出用戶為高校角色，則自動展示高校版頁面，主要展示類別如下：①默認(rèn)展示企業(yè)信息;②按領(lǐng)域展示企業(yè)信息;③按應(yīng)用行業(yè)展示企業(yè)信息;④按成熟度展示企業(yè)信息;⑤按地區(qū)展示企業(yè)信息;⑥按周、按月、按累計(jì)等多種方式，展示企業(yè)信息;⑦按發(fā)布時(shí)間展示企業(yè)信息。第三，用戶登錄后，根據(jù)用戶的信息，若判斷出用戶為企業(yè)角色，則自動展示企業(yè)版頁面，主要展示類別如下：①專家、機(jī)構(gòu)頁面快捷導(dǎo)航;②專家信息展示;③按行業(yè)展示專家列表;④推薦機(jī)構(gòu)參考;⑤專家詳情介紹;⑥專家推薦服務(wù);⑦相關(guān)專家推薦。第四，詳細(xì)信息展示界面：①介紹信息的基本情況;②詳細(xì)介紹信息內(nèi)容，包含方案描述、技術(shù)優(yōu)勢、適用對象等;③企業(yè)用戶將鼠標(biāo)放在所需產(chǎn)品上方，可快速顯示該技術(shù)的適用情況、瀏覽量、咨詢量、快速聯(lián)系技術(shù)方等;④高校用戶將鼠標(biāo)放在企業(yè)介紹上方，可快速顯示該企業(yè)的詳細(xì)信息及其所屬類別。第五，用戶反饋界面：①用戶可將使用軟件過程中遇到的問題，提交反饋;②后臺將會接收用戶提交的數(shù)據(jù)，根據(jù)用戶提出的訴求進(jìn)行升級優(yōu)化;③聯(lián)系對接，可通過手機(jī)、微信等方式聯(lián)系客戶，并可通過微信分享到朋友圈。

4.2 功能優(yōu)化

4.2.1 優(yōu)化選擇結(jié)構(gòu)

在網(wǎng)站結(jié)構(gòu)設(shè)計(jì)中，if語句和switch語句都可以用來設(shè)計(jì)多重選擇結(jié)構(gòu)，相較而言，switch語句可以更方便地應(yīng)用于多個(gè)分支的控制流程，在特定的環(huán)境下switch結(jié)構(gòu)的執(zhí)行效率可以遠(yuǎn)遠(yuǎn)高于if結(jié)構(gòu)[2]。例如，在網(wǎng)站登錄模塊界面，我們采用switch語句設(shè)計(jì)多重選擇結(jié)構(gòu)。考慮到大多數(shù)情況，普通用戶數(shù)量是遠(yuǎn)大于管理員和網(wǎng)站維護(hù)人員的數(shù)量的，大部分登錄者都是普通用戶，因此，我們完全可以利用switch的結(jié)構(gòu)優(yōu)勢將普通用戶這個(gè)最可能出現(xiàn)的條件放在前面，這樣就可以在很大程度上降低程序的檢測次數(shù)，自然就提升了選擇結(jié)構(gòu)的執(zhí)行效率，這在大批量數(shù)據(jù)檢測中效果是非常明顯的。

4.2.2 優(yōu)化運(yùn)算性能

在性能優(yōu)化方面，我們使用查表法訪問數(shù)據(jù)來替代if或switch查找結(jié)構(gòu)，將一些事先計(jì)算好的結(jié)果，存儲在常量數(shù)組中，這樣運(yùn)行時(shí)就可節(jié)省計(jì)算開銷，尤其是在條件數(shù)目非常巨大的環(huán)境中，使用查表法訪問數(shù)據(jù)比使用if或switch結(jié)構(gòu)查找速度更快，效率更高。使用查表法消除所有條件判斷，由于沒有條件判斷，當(dāng)候選值的數(shù)量增加時(shí)，基本上也不會增加額外的性能開銷，這樣就可提高頁面加載速度，從而為用戶提供更加舒適便捷的服務(wù)體驗(yàn)。

4.2.3 設(shè)置延遲執(zhí)行

在瀏覽網(wǎng)頁時(shí)，經(jīng)常會遇到網(wǎng)頁加載出錯、加載時(shí)間過長等問題，這是因?yàn)榛贖TML5搭建的網(wǎng)頁基本框架，布局在標(biāo)簽之后，而標(biāo)簽中又包含了大量的JavaScript腳本或文件。這就意味著基于HTML5搭建的網(wǎng)頁基本框架必須等到標(biāo)簽中JavaScript代碼全部被解析完成后，才可解析。而在網(wǎng)頁解析標(biāo)簽中的JavaScript代碼時(shí)，如果遇到加載失敗項(xiàng)時(shí)，整個(gè)頁面也將無法顯示。因此，要解決這個(gè)問題，就需要用到