web串口前端

A. web實現串口調試助手

最近受朋友之託試圖用web前端實現串口調試助手，一開始覺得不太有可行性，以前用過的串口調試助手都是客戶端程序。覺得瀏覽器怎麼會有調用電腦上的串口的功能呢。後來朋友找了幾個資料給我，說網上有人實現，他看不懂。我看了之後恍然大悟，原來是用node。如此萬能。

node 實現操作串口的模塊是一個 serialport 的模塊，網上一搜有很多好文，此處記錄一下實現過程中遇到的一些問題以及解決方法。

一開始被忽略的問題 ，我把 node 服務搭在自己的伺服器上，後來返回的串口數組全是一堆令我懵逼的數據。後來想起那是 node 讀取了我的
Linux 伺服器的串口，而不是用戶使用的 pc。

由此引出的兩個問題。第一，node 服務必須搭建在用戶使用的 pc 上，因此用戶使用的電腦必須有 node 環境。第二，用戶 pc 一般是 windows 系統， node 的模塊很多在 Linux 上很容易安裝成功，在 Windows 上安裝比較困難。

首先解決的是第二個問題：在Windows上安裝serialport失敗
解決方法： npm install --global --proction windows-build-tools
參考鏈接1： https://stackoverflow.com/questions/33142357/unable-to-install-node-js-serialport-npm-package-on-windows
參考鏈接2： https://github.com/nodejs/node-gyp#installation

安裝好之後就可以安裝 serialport 模塊了。

解決第一個問題：用戶電腦的 node 環境
解決方法： electron ——使用 JavaScript, HTML 和 CSS 構建跨平台的桌面應用 （官網鏈接： https://electronjs.org/ ）（w3c： https://www.w3cschool.cn/electronmanual/wcx31ql6.html ）
使用 electron 搭建的桌面應用可以像平常我們使用的 exe 應用程序一樣直接運行，不需要搭建環境。

npm install -g electron-prebuilt //提示electron-prebuilt已經更名為electron
npm install -g electron //安裝失敗
使用淘寶鏡像安裝問題解決： cnpm install -g electron
參考鏈接： http://blog.csdn.net/upc_xbt/article/details/53342129

解決方法： npm install -g electron-rebuild
以後每次重新運行 electron . 的時候再執行一次 ``./node_moles/.bin/electron-rebuild` 對原生模塊進行rebuild
參考鏈接： https://www.w3cschool.cn/electronmanual/eqsc1qko.html

參考鏈接： http://m.blog.csdn.net/u014563989/article/details/75045052
cnpm install -g electron-packager //安裝打包工具
electron-packager . 可執行文件的文件名 --win --out 打包成的文件夾名 --arch=x64位還是32位 --version版本號 --overwrite --ignore=node_moles

因為打包的時候執行的命令帶有 --ignore=node_moles , 即不將 node_moles 裡面的依賴包打包，所以在打包後的新文件中，進入resource 目錄會發現 node_moles 是一個空文件夾，所以自然找不到依賴包。如果去掉打包時的命令參數 --ignore=node_moles ,則需要非常長的打包時間。我的解決方法是將原來 node_moles 文件夾中的相關的依賴包文件復制進打包後的 node_moles 中，雖然是一個比較無腦的方法，每次打包都要拖動相關文件進去，不過我備份了一個 node_moles 文件夾，下一次打包後就把備份的 node_moles 直接復制進去。

node 模塊 ccap : 用於生成驗證碼圖片，可以在 express 後台
res.send(圖片) ，前端的 img 的 src設置為請求這個介面。
ccap的用法可以參考鏈接： https://cnodejs.org/topic/50f90d8edf9e9fcc58a5ee0b

B. web後端和前端是怎麼連接的

web後端和前端是怎麼連接的

WEB後端和WEB前端可以通過 前端模板引擎 與 後端模板引擎 進行連接。

後端模板引擎：

WEB前端開發人員開發好前端靜態頁面，然後交給WEB後端開發人員，他們再利用後端引擎模板（比如：freemarker）把前端頁面與後端數據進行連接，形參一個動態頁面。

前端模板引擎：

描述成前端模板引擎可能不太對，但是比較好理解吧。當前比較流行的Vue.js、Angular.js、React.js 等MVVM前端框架都自帶了前端模板引擎。

WEB前端人員與WEB後端人員一起協定好數據介面格式（請求地址、數據格式、數據欄位等），然後WEB前端人員與WEB後端人員同時進行項目的開發，WEB前端人員通過AJAX的方式從WEB後端獲取到前端頁面的相關JSON數據，然後通過MVVM前端框架把JSON數據渲染到頁面裡面，最終形成了一個動態頁面。

網站數據處理主要分為三層。

第一，表示層，這部分可以用HTML代碼，CSS/Javascript代碼來實現等。通過前端代碼可以實現網頁的布局和設計。這層又可以稱為顯示層。也就是你用瀏覽器打開能看到的網頁。

第二層，是業務層，這層是負責處理數據的。常用的代碼語言有PHP,JSP，Java等。通過這些後台處理語言的演算法來處理前台傳回的數據。必要的時候進行操作資料庫，然後把結果返回給前端網頁。

第三層，是數據層，這個就是資料庫，用來存儲數據的。通過業務層的操作可以實現增刪改資料庫的操作。

舉個例子就是這樣，比方說你在網頁上填一個表格然後提交會有以下幾種數據傳輸經過：

①你接觸到的是這個網頁是屬於表示層，這個網頁一般由HTML標簽結合CSS/JAVASCRIPT來實現的。 這時候你要先填入數據。

②然後你按提交觸發後台處理機制，這時候數據會傳到後台的代碼進行處理。這部分代碼根據不同網站可以使PHP,JSP，JAVA等。 代碼根據程序員預設的演算法將收到的數據進行處理之後會相應的對資料庫進行操作，存儲數據等。

③成功操作完資料庫之後，業務層的代碼會再向表示層也就是顯示器端傳回一個指令通知你表格填寫成功。

這就是基本的網站數據交換邏輯了

後端會暴露出一個處理數據邏輯的介面（api）,然後哦前端通過js像後端暴露的api發起請求過程可攜帶參數，然後後端接到請求後會返回數據給前端，前端拿到數據後會渲染在頁面上

治安監控的前端是怎麼連接的？

固定攝像機前端有和電源（220V轉12V）全方位像像機前端一根視頻線（和主機採集卡連接）一根電源線220V（連接解碼器）一根通訊線（連接主機上的碼轉）

後端thinkphp和前端vue怎麼協調

hinkphp作為服務端，為客戶端提供數據。而Vue是客戶端的一個JavaScript框架。便於我們對頁面進行處理。
一般情況下，vue通過非同步請求來獲取數據。由於實例化vue時已經將相關的變數、模板等定義好了。
當獲取到thinkphp回傳的數據後，將會自動的把數據對應的呈現在網頁上。

php在web開發中技術含量排第三(jsp,.在前),但由於php簡單,開發周期短,運行速度快,很快就成為中小型網站的首選技術,像CMS全球超過70%都是php的.再說大型網站現在也很少,所以,學習php找工作要容易得多,自己想接私單也容易拿下!
就是這樣的，我剛剛在後盾人知道的那邊有詳細的教學視頻.，可以給你學習

thinkphp作為服務端，為客戶端提供數據。而Vue是客戶端的一個JavaScript框架。便於我們對頁面進行處理。
一般情況下，vue通過非同步請求來獲取數據。由於實例化vue時已經將相關的變數、模板等定義好了。
當獲取到thinkphp回傳的數據後，將會自動的把數據對應的呈現在網頁上。 你看過後很簡單吧以後不會可以向我一樣經常到後盾人找找相關教材看看就會了，希望能幫到你，給個採納吧謝謝(⁄ ⁄•⁄ω⁄•⁄ ⁄)

thinkphp 設計服務端，全restful api的規范就行設計（其實只要返回json或xml就可以），
vue-resouve只是一個請求庫，和jquery 的 ajax 是大同小異的

C. 什麼是web前端

web前端是創建Web頁面或app等前端界面呈現給用戶的過程。
前端開發通過HTML，CSS及JavaScript以及衍生出來的各種技術、框架、解決方案，來實現互聯網產品的用戶界面交互。它從網頁製作演變而來，名稱上有很明顯的時代特徵。在互聯網的演化進程中，網頁製作是Web1.0時代的產物，早期網站主要內容都是靜態，以圖片和文字為主，用戶使用網站的行為也以瀏覽為主。隨著互聯網技術的發展和HTML5、CSS3的應用，現代網頁更加美觀，交互效果顯著，功能更加強大。
(3)web串口前端擴展閱讀
發展歷程
以前會Photoshop和Dreamweaver就可以製作網頁，隨著網站開發難度加到、開發方式多樣，網頁製作更接近傳統的網站後台開發，網頁製作更多被稱為Web前端開發。前端技術包括4個部分：前端美工、瀏覽器兼容、CSS、HTML「傳統」技術與Adobe
AIR、Google
Gears,以及概念性較強的互動式設計，藝術性較強的視覺設計等。
在Web1.0時代，由於網速和終端能力的限制，大部分網站只能呈現簡單的圖文信息，並不能滿足用戶在界面上的需求，對界面技術的要求也不高。隨著硬體的完善、高性能瀏覽器的出現和寬頻的普及，技術可以在用戶體驗方面實現更多種可能，前端技術領域迸發出旺盛的生命力。
2005年以後，互聯網進入Web2.0時代，各種類似桌面軟體的Web應用大量涌現，前端由此發生了翻天覆地的變化。網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟體化的交互形式為用戶提供了更好的使用體驗，這些都是基於前端技術實現的。
隨著手機成為人們生活中不可或缺的一部分，成為人們身體的延伸，人們迎來了體驗為王的時代。移動端的前端技術開發前景寬闊。此外，前端技術還能應用於智能電視、智能手錶甚至人工智慧領域。
參考資料
WEB前端開發——網路

D. web前端主要做的是什麼工作

Web前端可以做的工作，可以分為以下幾點：

1、Web前端是什麼意思

Web前端是網站前台部分，運行在PC端，移動端等瀏覽器上展現給用戶所瀏覽的網頁。

用我們的話來說，前端就是網頁給訪問網站的人看的內容和頁面，Web前端開發意思就是這些內容的製作，也就是代碼的實現。

Web 前端開發三大技術 html，css，js

還運用大量的 js 庫，可以將前端的交互效果做得更加炫酷，除了基本語言，還要掌握各種開發工具的應用。Dreamweaver：，Sublime，HBuilder等都是比較熱門的工具。

前端開發需要掌握的能力很多，知識范圍很廣，要付出的代價很多。不過，前端的前途也是相當光明的，前端現在正在走向工程化發展，無論權是大小公司企業，對前端開發的需求都是越來越大了，也越來越專業了。

3、朗沃教育Web前端課程做什麼

Web 前端除了最基本的 html，css，js 還有大量的技術內容，也會運用到一定的框架，而朗沃教育的 WEB 前端開發一般會學到這些內容。

• HTML/CSS 基礎和高級

• JavaScript 基礎語法和高級應用

• Node 服務端開發

• Web前端框架開發（React 技術棧，Vue 技術棧）

• 移動端開發（React Native，跨端開發框架之微信小程序開發，Flutter，PWA 等）

• 前端運維（Docker 與 Linux 基本操作等）

詳細課程請瀏覽朗沃教育Web前端課程。

WEB前端是什麼？零基礎可以學嗎？初期階段只是了解一些Web前端基礎內容，後面會涉及到一些Web前端交互的內容，再涉及到伺服器的一些知識，最後再學習Web前端的三大框架，再加上一些前端項目。

E. web前端與後端有什麼區別 web前端和後端不一樣的地方在哪

1、Web前端: 顧名思義是來做Web的前端的。我們這里所說的前端泛指Web前端，也就是在Web應用中用戶可以看得見碰得著的東西。包括Web頁面的結構、Web的外觀視覺表現以及Web層面的交互實現。

2、Web後端：後端更多的是與資料庫進行交互以處理相應的業務邏輯。需要考慮的是如何實現功能、數據的存取、平台的穩定性與性能等。

3、前端開發人員：精通JS，能熟練應用JQuery，懂CSS，能熟練運用這些知識，進行交互效果的開發。

4、後端開發人員：會寫Java代碼，會寫sql語句，能做簡單的資料庫設計，會Spring和iBatis，懂一些設計模式等。

F. 如何在web頁面上獲取客戶端的串口數據

web頁面上獲取客戶端的串口數據的方法：

可以寫一個串口代理程序，讀取本地串口，將獲取到的數據存入資料庫。web通過ajax+定時器獲取資料庫中的數據顯示就好了。

如果要交互，可以搞一個讓上面提到的串口程序開一個socket.將串口通信獲取的數據，通過socket發出去，web頁面可以用websocket。

下面一個通過flash操作ardiuno的demo.用的是類似於第二種交互的方法。只不過用的是ActionScript.原理是一樣的。

串列介面是一種可以將接收來自CPU的並行數據字元轉換為連續的串列數據流發送出去，同時可將接收的串列數據流轉換為並行的數據字元供給CPU的器件。一般完成這種功能的電路，我們稱為串列介面電路。

串口通信（Serial Communications）的概念非常簡單，串口按位（bit）發送和接收位元組的通信方式。

注意事項：

戶端的系統數據如果能隨便被web頁面讀取，那大家也不敢隨便打開網頁了，至於說用IE的ActiveX 控制項，這個也沒有前途，IE默認不開啟，現在有IE的也沒什麼人，當然如果是用於特定客戶的話可以了，反正你想幹嘛就幹嘛。

G. WEB開發中「前端」和「後端」的區別

通俗地講，前端乾的工作是用戶可以直接看得見的，而後端開發的工作主要在服務端，用戶不太能直接看到。雖然前端開發和後端開發的工作有巨大的區別，但是他們的工作都是相輔相成的，都是為了更好的用戶體驗。

1、前端開發：

網站的「前端」是與用戶直接交互的部分，包括你在瀏覽網頁時接觸的所有視覺內容--從字體到顏色，以及下拉菜單和側邊欄。這些視覺內容，都是由瀏覽器解析、處理、渲染相關HTML、CSS、Java 文件後呈現而來。前端開發，就是要創造上面提到的網站面向用戶的部分背後的代碼，並通過建立框架，構建沉浸性的用戶體驗。為了實現這個目標，開發需要熟練運用下列語言、框架、工具庫。

2、後端開發：

為了讓伺服器、應用、資料庫能夠彼此交互，後端工程師需要具有用於應用構建的伺服器端語言，數據相關工具，PHP框架，版本控制工具，還要熟練使用 Linux 作為開發和部署環境。後端開發者使用這些工具編寫干凈、可移植、具有良好文檔支持的代碼來創建或更新 Web 應用。但在寫代碼之前，他們需要與客戶溝通，了解其實際需求並轉化為技術目標，制定最有效且精簡的方案來進行實現。

H. web前端和web後端的區別是什麼

web前端和web後端的區別是什麼

這一年來，一直在提前端和後端這樣兩個概念，對於前端後分工的需求也越來越強烈，所以，崗位的分工也根據開發的分工而開始嘗試。

海文國際：web前端和web後端的區別是什麼

Web前端

顧名思義是來做Web的前端的。我們這里所說的前端泛指Web前端，也就是在Web應用中使用者可以看得見碰得著的東西。包括Web頁面的結構、Web的外觀視覺表現以及Web層面的互動實現。

Web後端

後端更多的是與資料庫進行互動以處理相應的業務邏輯。需要考慮的是如何實現功能、資料的存取、平台的穩定性與效能等。

我們再來看看大公司對前後端人員招聘的要求，通過這個角度看看前端、後端的技術要求：

Web前端：

• 精通HTML，能夠書寫語義合理，結構清晰，易維護的HTML結構。

• 精通CSS，能夠還原視覺設計，並兼容業界承認的主流瀏覽器。

• 熟悉JavaScript，了解ECMAScript基礎內容，掌握1~2種js框架，如JQuery

• 對常見的瀏覽器相容問題有清晰的理解，並有可靠的解決方案。

• 對效能有一定的要求，了解yahoo的效能優化建議，並可以在專案中有效實施。

• ……

Web後端：

• 精通jsp，servlet，javabean，JMS，EJB，Jdbc，Flex開發，或者對相關的工具、類庫以及框架非常熟悉，如Velocity，Spring，Hibernate，iBatis，OSGI等，對Web開發的模式有較深的理解

• 熟練使用oracle、sqlserver、MySQL等常用的資料庫系統，對資料庫有較強的設計能力

• 熟悉maven專案配置管理工具，熟悉tomcat、jboss等應用伺服器，同時對在高並發處理情況下的負載調優有相關經驗者優先考慮

• 精通面向物件分析和設計技術，包括設計模式、UML建模等

• 熟悉網路程式設計，具有設計和開發對外API介面經驗和能力，同時具備跨平台的API規范設計以及API高效呼叫設計能力

合肥中軟國際：web前端和web後端的區別是什麼

前端開發主要是靜態使用者介面加上一些動態效果，不涉及資料邏輯!例如：一個登陸頁面：
前端開發只要做好靜態頁面部分，加上滑鼠移入輸入框、移出輸入框的顏色變化;但是輸入使用者名稱、密碼
後登入系統的話要連線資料庫，這個就需要後台開發做邏輯處理了!
在我們實際的開發過程中，我們當前這樣定位前端、後端開發人員。
1)前端開發人員：精通JS，能熟練應用JQuery，懂CSS，能熟練運用這些知識，進行互動效果的開發。
2)後端開發人員：會寫Java程式碼，會寫SQL語句，能做簡單的資料庫設計，會Spring和iBatis，懂一些設計模式等。
前端開發主要是靜態使用者介面加上一些動態效果，不涉及資料邏輯!例如：一個登陸頁面：
前端開發只要做好靜態頁面部分，加上滑鼠移入輸入框、移出輸入框的顏色變化;但是輸入使用者名稱、密碼
後登入系統的話要連線資料庫，這個就需要後台開發做邏輯處理了!
在我們實際的開發過程中，我們當前這樣定位前端、後端開發人員。
1)前端開發人員：精通JS，能熟練應用JQuery，懂CSS，能熟練運用這些知識，進行互動效果的開發。
2)後端開發人員：會寫Java程式碼，會寫SQL語句，能做簡單的資料庫設計，會Spring和iBatis，懂一些設計模式等。
Web後端：
1)精通jsp，servlet，javabean，JMS，EJB，Jdbc，Flex開發，或者對相關的工具、類庫以及框架非常熟悉，如Velocity，Spring，Hibernate，iBatis，OSGI等，對Web開發的模式有較深的理解
2)練使用oracle、sqlserver、mysql等常用的資料庫系統，對資料庫有較強的設計能力
3)熟悉maven專案配置管理工具，熟悉tomcat、jboss等應用伺服器，同時對在高並發處理情況下的負載調優有相關經驗者優先考慮
4)精通面向物件分析和設計技術，包括設計模式、UML建模等
5)熟悉網路程式設計，具有設計和開發對外API介面經驗和能力，同時具備跨平台的API規范設計以及API高效呼叫設計能力
4首先，我們在前端缺乏積累，沒有沉澱，專業的前端技術的積累是從去年才開始的，同時，在前端也缺乏支撐與高手，所以，走起來比較困難。同時，前端人員培養的較少，一個原因是對前端了解太少，另外一個原因就是對前端與後端的工作比例估計不足。所幸，我們在這一年也在前端有了很快的進步，培養了幾個優秀的開發人員，有意識的解決了前端的使用者體驗，這都是可喜的。今年，需要更進一步，專業化。
5其次，我們在後端發展的不夠寬，後端的知識體系已經比較完善，但是，很多應用點都沒有涉及到。同時，對現有技術框架的理解都不夠深入，太浮躁。我們目前的設計團隊在解決網際網路高並發、大資料量的存取上經驗與能力都還不足，需要正視這些問題。後端技術的發展需要更加的精進，以解決實際存在的問題為主。

web前端和後端的區別是什麼

前端開發和後端開發的區別在於
1、前端開發主要做的是使用者所能看到的前端展示介面
2、後端開發主要做的是邏輯功能等模組，是使用者不可見的
3、前端開發用到的技術包括但不限於 5 css3 javascript jquery
Bootstrap Node.js AngularJs等技術
4、後端開發 以java為例 主要用到的 是包括但不限於Struts spring springmvc Hibernate Http協議 Servlet Tomcat伺服器 等技術

web前端和web後端的區別詳細分析

web前端和web後端的區別詳細分析：
Web前端：
1. 精通HTML，能夠書寫語義合理，結構清晰，易維護的HTML結構。
2. 精通CSS，能夠還原視覺設計，並兼容業界承認的主流瀏覽器。
3. 熟悉JavaScript，了解ECMAScript基礎內容，掌握1~2種js框架，如JQuery。
4. 對常見的瀏覽器相容問題有清晰的理解，並有可靠的解決方案。
5. 對效能有一定的要求，了解yahoo的效能優化建議，並可以在專案中有效實施。
Web後端：
1. 精通jsp，servlet，java bean，JMS，EJB，Jdbc，Flex開發，或者對相關的工具、類庫以及框架非常熟悉，如Velocity，Spring，Hibernate，iBatis，OSGI等，對Web開發的模式有較深的理解。
2. 熟練使用oracle、sqlserver、mysql等常用的資料庫系統，對資料庫有較強的設計能力。
3. 熟悉maven專案配置管理工具，熟悉tomcat、jboss等應用伺服器，同時對在高並發處理情況下的負載調優有相關經驗者優先考慮。
4. 精通面向物件分析和設計技術，包括設計模式、UML建模等。
5. 熟悉網路程式設計，具有設計和開發對外API介面經驗和能力，同時具備跨平台的API規范設計以及API高效呼叫設計能力。
創客學院職業課程web前端包括了零基礎web前端開發從入門到精通視訊教程培訓,其移動開發前端課程整合了HTML5開發、CSS3基礎課程、PHP培訓教程、HTML5例項原始碼及其移動前端互動JavaScript+JQuery+Ajex課程學習,通過HTML5例項教程講解，讓從零開始學習web前端的開發者短期內快速掌握web開發技能。

別思考那麼多了，現在的前端後端哪還分得那麼清楚，你選哪個兩邊都得學，現在感覺更適合稱為Web工程師，共同解決Web方向上的問題。

優逸客介紹web前端開發和web後端的區別

現在學習web前端，5開發還是不錯的選擇，缺口大，前景好。，當然學習要靠自覺性，堅持學習，就能成功、

移動前端和web前端的區別是什麼

移動前端指的是手機等移動裝置的介面，也就是說是pc端與wap端的區別，而一般常說的前端大部分指的是web前端了，兩者在開發設計所用的語言上也有區別，移動端原生APP，也就是完全使用移動裝置系統語言寫的客戶端，iPhone iPad就是純Object-C，安卓就是純JAVA。wap或者pc的網頁前端都是瀏覽器里開啟的，用純HTML+CSS+JS。兆隆IT雲學院這種web前端學習課程基本上就是以HTML，js，jQuery這些知識為基礎重點，然後附以移動端語言學習的。

ui與web前端的區別是什麼？

WEB前端傾向於程式碼編寫和相容性以及布局設計還有前端程式碼框架,css,js,xml等技術。

1、UI前端主要負責系統/app，UI介面設計，以及程式碼實現，主要工作偏向於設計web前端：主要講ui提供的設計圖，編碼成靜態，實現所有特效；並負責所有互動的對接，對js要求較高，部分企業會要求一些後台介面的開發工作，因此對後台開發語言也有一定的要求，在前端中算是比較全能型的開發人員。

2、網頁前端這個算是web前端，和ui前端的國度，不需要設計UI，但是需要對頁面的實現，以及互動的實現，對CSS,JS要求較高，算是UI前端和web前端的中間的過渡項一樣。

uid設計和web前端的區別是什麼

UI是做設計，介面設計那類，一般用Photoshop、Illustrator、Fireworks、CorelDRAW、Flash，而WEB前端開發是敲程式碼的，用+js+css Sql SERVER或ACCESS或MYSQL等。CGWANG教學還是比較有特色的

I. 什麼是web前端

web（World Wide Web）即全球廣域網，也稱為萬維網，它是一種基於超文本和HTTP的、全球性的、動態交互的、跨平台的分布式圖形信息系統。是建立在Internet上的一種網路服務，為瀏覽者在Internet上查找和瀏覽信息提供了圖形化的、易於訪問的直觀界面，其中的文檔及超級鏈接將Internet上的信息節點組織成一個互為關聯的網狀結構。

J. WEB前端是什麼，學完可以做哪些工作

第一，企業官方網站的開發與維護。這個應該是最簡單的了，基本上是純靜態頁面的展示，就算有交互模塊，應該也是比較簡單的那種，甚至純 js 使用類似於 oop 的方式就能夠很輕松完成，基礎好的話，甚至可以不依賴 jquery 或者 zepto。

第二，門戶類型網站的開發與維護。例如像搜狐一樣的門戶網站，但是我不確定這種業務線是否還在招人，相對來說也不難，但是如果想開發得好，實現高可維護性和擴展性，還是很考驗開發人員的抽象能力。可以留意看看，這種網站一般分成很多個模塊，每個模塊的展現結構是非常類似的。如何做到可復用性強，對產品需求變更迭代時更加友好，那就很考驗開發人員前端三大語言的設計模式了。

第三，電商網站。例如京東和淘寶，裡面不僅有對用戶友好的展現方式，合乎邏輯的交互方式，還會涉及到網站、商品的色彩設計、排版設計、交互設計，雖然可能都由設計師來出方案，但是前端開發同學可以從中學到很多東西。此外，除了單純的展現，你需要考慮更多的東西了。例如，不同端的字體展現，響應式布局，圖片大小，靜態資源緩存，CDN部署，ajax動態數據交互。這些還都是偏純展現的。還會有涉及到個人信息填寫、支付款項、密碼輸入等等，會涉及到一系列的前端安全問題，這部分也是很鍛煉人的。

第四，後台管理系統。一般這個是給內部人員使用的，所以可以不用考慮太多的兼容性，直接要求統一使用谷歌瀏覽器或者火狐。這時候要考慮更多地是如何與後端進行數據交互的問題。小公司還好，後台基本沒有精力做微服務，API的設計也不會趨近於原子粒度，基本前端需要什麼數據，那就有後台的API統一提供，前端只管展現，而且將交互做得好一點就行了。如果是大公司又不一樣了，如果後台做了微服務，而且API的設計粒度很小，那前端為了保持介面的統一，可能就需要加一塊 node 中間層，來聚合不同介面的數據，然後統一返回給前端。還有就是會涉及到敏感許可權校驗、角色許可權控制、介面讀寫許可權分離與控制等等，也是一大塊的學問。

第五，H5的活動營銷頁、紅包落地頁、明星投票頁等等一系列與營銷活動相關的移動端頁面。這些需要你的 CSS 功底非常扎實，常常要寫一些動態效果、動畫效果，越生動越吸引用戶參與。另外同樣考驗你對不同機型不同移動瀏覽器的兼容性問題，還有響應式布局。數據交互層面的話，一般不會太多，但是一定會有打點上報，用來分析頁面性能。還有一些要根據不同的營銷參數、渠道參數來展現不同的內容，或者上報不同的數據，這里就要對 url 、緩存的處理有相應的能力。當然了，這塊頁面是很注重頁面白屏時間和性能的，有能力的團隊會考慮SSR直出頁面。

第六，移動端視頻播放頁面。最近短視頻崛起，但是很多短視頻 app 中的頁面是 web 前端頁面，這樣做的原因是 app 過審麻煩且時間周期長，業務需要快速迭代和修復的情況下，前端責無旁貸。那麼這時候考驗的是你對視頻的操作能力，對流式播放技術和能力的掌握。此外，視頻掛件、貼紙、彈幕、互動、美顏、變老挑戰等等，都是現在短視頻必備的能力。

第七，微信小程序。噢，不，應該是小程序。微信、支付寶、網路等大企業，先後推出了小程序，當然身為前端開發的我們是必須掌握的一門技巧，雖然不是新的語言，但代碼組織方式、調試方式、底層原理，也是值得關注和學習。

第八，造輪子寫工具、寫框架，搭建基礎設施。公司逐漸發展壯大以後，會面臨一個問題，那就是如何將前端基礎設施做起來。基礎設施對前端的工程搭建與發展來說，太重要了。技術的選型、代碼風格的制定，代碼模塊的積累沉澱，項目的打包構建與部署，持續集成與持續交付，單元測試與UI自動化測試，錯誤日誌上報與可視化，打點日誌上報與可視化，成員間代碼協作與代碼評審等等。這些對一個業務步入正軌的公司或者團隊來說，太重要了。這是前端工程的基石，業務快速迭代的奠基，必須重視起來。