傳統(tǒng)OFFICE開發(fā)者的網(wǎng)頁開發(fā)知識(shí)-進(jìn)階篇

時(shí)間：2023-07-05 12:09:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-05 12:09:02 來源：網(wǎng)站運(yùn)營

傳統(tǒng)OFFICE開發(fā)者的網(wǎng)頁開發(fā)知識(shí)-進(jìn)階篇：

自我探索歷程

輸出內(nèi)容的一個(gè)好處是可以倒逼自己學(xué)習(xí)新內(nèi)容，在上周連續(xù)輸出了一些關(guān)于WPSJS的概要性知識(shí)同時(shí)，筆者也在自我充電中，增加一些網(wǎng)頁開發(fā)的知識(shí)。




首先說明下，當(dāng)前筆者的現(xiàn)狀：javascript語言入門水平，沒有系統(tǒng)學(xué)習(xí)過前端工程師嘴里常說的三大網(wǎng)頁開發(fā)框架（Vue、React、Angular）。




在自我的學(xué)習(xí)過程中，筆者也是不斷地去嘗試和自我分辨哪些知識(shí)應(yīng)該值得去學(xué)習(xí)，不同人站在不同角度分享出來的東西完全不同。而網(wǎng)頁開發(fā)知識(shí)真的太深太廣，選擇比努力更重要。




在筆者開發(fā)EasyShu圖表插件過程中，僅需要了解圖表庫的知識(shí)，整個(gè)網(wǎng)頁只需一個(gè)節(jié)點(diǎn)來繪制圖表內(nèi)容，所以前面說到的三大框架，肯定對此類需求無用武之地。




對于OFFICE網(wǎng)頁插件的開發(fā)，筆者也一直在思考，究竟哪些值得學(xué)習(xí)，一些前端開發(fā)口中說怎么過時(shí)不值得學(xué)習(xí)，有更好的替代的東西（如jquery過時(shí)論），或者提到我們更高效率地開發(fā)應(yīng)該是基于框架來開發(fā)，這些結(jié)論是否適合當(dāng)下的自己。




誠然，OFFICE開發(fā)我們有天然的優(yōu)勢，是基于OFFICE軟件有UI呈現(xiàn)的基礎(chǔ)上開發(fā)，我們不必像一些專業(yè)網(wǎng)頁開發(fā)工程師那樣，過多地關(guān)注網(wǎng)頁頁面的布局、渲染等事情，數(shù)據(jù)直接可以在OFFICE的界面上呈現(xiàn)，結(jié)合OFFICE提供的各種操作面板，與OFFICE原生內(nèi)容融合為一體。




例如，電子表格的插件開發(fā)，我們數(shù)據(jù)的輸入界面和最終數(shù)據(jù)輸出，都可以用工作表單元格區(qū)域來交互和呈現(xiàn)，比起將數(shù)據(jù)渲染在網(wǎng)頁上，更簡單、用戶交互體驗(yàn)更好（可以用到電子表格的各種字體、樣式、邊框、函數(shù)公式、條件格式、圖表等原生功能進(jìn)行程序美化或用戶自行再加工美化）。




所以，最終其實(shí)我們用到的網(wǎng)頁知識(shí)，僅僅用于和用戶作界面交互時(shí)才用到。而界面交互，就如我們傳統(tǒng)的窗體開發(fā)那樣，僅需存放一些表單控件即可。這些需求，遠(yuǎn)遠(yuǎn)不用考慮過重的網(wǎng)頁框架來支持（有框架可能會(huì)更美觀和開發(fā)更快速一些，但學(xué)習(xí)成本不低）。




基于筆者現(xiàn)有的短淺的網(wǎng)頁知識(shí)見識(shí)，在這里提出一個(gè)可行的輕量化學(xué)習(xí)成本的方案，供大家參考，和附上一些學(xué)習(xí)資源。

使用JQuery+Bootstrap實(shí)現(xiàn)輕量化的網(wǎng)頁開發(fā)

筆者在前面文章里也簡短提及過JQuery，它用于操作網(wǎng)頁對象內(nèi)容非常方便。非常方便對網(wǎng)頁節(jié)點(diǎn)數(shù)據(jù)CSS樣式數(shù)據(jù)進(jìn)行增刪改查，學(xué)習(xí)成本不高，產(chǎn)出非常樂觀。




筆者在開發(fā)EasyShu圖表插件過程中，也大量使用到，例如對圖表的長寬、背景顏色等樣式處理和對圖表多指標(biāo)切換時(shí)網(wǎng)頁上的指標(biāo)選擇清單進(jìn)行運(yùn)行時(shí)生成。這些都用到了JQuery來操作。它更接近于我們的日常處理數(shù)據(jù)的思維，非常易學(xué)易懂。




上述也陳述到我們最大的需求是生成網(wǎng)頁UI控件，將其綁定一些事件與用戶交互，而原生的網(wǎng)頁控件是比較丑陋的，和VBA里的窗體水平相當(dāng)，日?？戳?xí)慣了那些前端人員做的各種好看界面，給自己一點(diǎn)動(dòng)力去提升，也是有必要的。




筆者現(xiàn)在了解到的信息，Bootstrap是一個(gè)用于美化控件UI和布局的輪子，沒有前面三大框架那么重，可能是個(gè)不錯(cuò)的選擇。當(dāng)然JQuery也有其自己的UI控件庫和很多的擴(kuò)展，不妨也可以用它。反正學(xué)習(xí)成本應(yīng)該都不算太高，即學(xué)即用那種。




對Bootstrap的學(xué)習(xí)，也是這兩天的事情，還沒真正使用過，在B站搜索到一個(gè)不錯(cuò)的視頻教程，在此也有大家一起學(xué)習(xí)一起進(jìn)步，也歡迎大家多多補(bǔ)充更好的學(xué)習(xí)資源。




【表嚴(yán)肅】Up主，對前端開發(fā)用到的工具、語言、框架都有一些簡短通俗的入門教程，可快速學(xué)習(xí)和了解一個(gè)大概。

地址：： https://space.bilibili.com/44076852/channel/detail?cid=17877

VSCode-網(wǎng)頁開發(fā)工具IDE最佳選擇

VBA開發(fā)時(shí)，用到的是VBE開發(fā)工具，VSTO開發(fā)時(shí)用到的是VisualStudio，而到了網(wǎng)頁開發(fā)時(shí)，就要用VSCode（當(dāng)然自己喜歡也可以用其他同類型的如ATom之類的）。




當(dāng)前VSCode在前端開發(fā)群體里也是非常火爆，建議大家下載安裝來體驗(yàn)一下，智能提示、自動(dòng)格式化、代碼段輸入等，非常爽。




除了VSCode自身的能力外，VSCode有一個(gè)非常龐大的插件生態(tài)體系，也可以多多了解下，對自己的開發(fā)效率帶來十分顯著的提升。




一些VSCode插件，可自行B站搜索下，有視頻操作感受更直觀，以下為筆者搜索到的幾個(gè)鏈接，可供參考。




https://www.bilibili.com/video/BV1CJ411X7DL

https://www.bilibili.com/video/BV1bN411976C

https://www.bilibili.com/video/BV1kt4y1y7JF