1. 程式人生 > >如何成為合格的web前端程序員?只要學會這幾點!

如何成為合格的web前端程序員?只要學會這幾點!

web前端 json oci 交流 機制 有著 返回 綁定 擴展

做了那麽多年Web編程,仔細想想, 其實本質上就那點事兒, 你抓住了幾個重點問題, 學起來一點都不難。

技術分享圖片

1. 理解瀏覽器/服務器結構

(B/S)B/S 是從 90年代的客戶端/服務器端發展而來, 共同點都是由一個(或一組)服務器來服務多個客戶端。

差別在於
首先,C/S結構的客戶端可能是由不同語言編寫的,例如VB,Delphi, PowerBuilder等, B/S結構中瀏覽器成為了一個通用的客戶端, 程序以Web的方式呈現,不需要安裝,服務器端的升級就意味著所有客戶端的升級,這和C/S相比是個翻天覆地的變化。

其次,B/S的訪問協議也標準化為HTTP(s) ,而不是原來各種各樣的私有協議。

最後,B/S結構中的服務器面向全球用戶訪問,而不像C/S那樣僅僅是局域網, 所以壓力更大, 挑戰更大。

2. Web頁面是怎麽組成的?

簡單來說就是HTML + CSS + Javascript , 我們看到的Web界面就是由這三者組成。

HTML負責結構, CSS負責展現, 而Javascript負責行為。

我們說的前端開發也主要是做這一塊, 對於前端工程師,需要能理解DOM 模型,以及如何通過javascript(例如JQuery等框架)來操作DOM模型。

3. 瀏覽器和服務器是怎麽打交道的?

當然是HTTP ! HTTP說穿了就是瀏覽器和服務器聊天是的一種約定, 這個約定確保雙方互相理解。

完整的HTTP是非常復雜的,《HTTP權威指南》一書厚達700多頁。

其實我們最常用, 也是最重要的也就那麽幾點:

(1) GET 和 POST

GET從服務器端獲取數據, POST 向服務器端發送數據(由此引出圖片上傳問題)

(2) HTTP是個沒有狀態的協議,需要通過額外的機制來維持狀態(例如登錄狀態), 常用的方法就是cookie。

(3) 理解HTTP 狀態碼

(4) 理解 同步 vs 異步(由此引出AJAX,以及JQuery等框架)

4. URL 和 代碼的映射

理解url 和 代碼之間的關聯, 例如 www.xxx.com?action=login 這樣的url 是怎麽和後端的業務代碼關聯起來的?

這樣的規則是在哪裏定義的? 用代碼、註解還是配置文件?

後端的業務代碼該如何組織? 相信現在不會有人把業務邏輯都寫到Servlet當中了, 所以需要很多MVC 框架像Struts , SpringMVC 來組織代碼,讓系統清晰易懂。

5. 數據的驗證、轉換和綁定

如何保證瀏覽器發過來的數據是符合要求的?

例如不能為空、不超過8個字符、兩個密碼必須相等…. , 出錯了得給出錯誤提示。

瀏覽器發過來的數據都是形如username=liuxin&password=123456這樣簡單的文本, 但是後臺程序卻有著豐富的數據類型,什麽String, Date ,Integer等等。 所以需要把文本變成指定語言的類型。

類型轉換以後, 後端的業務代碼怎麽才能有效的使用呢?

最簡單的就是弄一個key : value 這個樣的Map 出來, 業務代碼直接用map.get(key) 即可。

高級一點的可以把頁面發來的數據直接綁定到對象的屬性上, 並且支持數組,嵌套等復雜的結構。

例如user.name=liuxin&user.password=123456 可以綁定到一個叫User的對象, 其中有兩個屬性userName和password。

6. Web安全

如何防止***利用SQL 註入,跨站腳本***, 跨站請求偽造等手段來***系統?

7. 數據庫訪問

這一塊是比較麻煩的, 畢竟面向對象(OO)世界和關系(Relational)數據庫之間存在著天然的鴻溝。

對於簡單的應用, 直接寫點JDBC就夠用了,只需要掌握Connection, Statement , Resultset這三個基礎。

復雜點的需要用O/R Mapping 框架來搞定,例如 Hibernate, MyBatis ,還有RoR的ActiveRecord。

這其中比較棘手的就是表之間的關聯, 就是所謂的一對多, 一對一, 多對多這樣的關系, 如何在面向對象的世界裏描述。

擴展開去,還需要處理連接池, 事務,鎖 等各種煩人問題。

8. 用什麽技術來生成Web頁面?

這裏說的Web頁面就是第2點中的頁面,包括HTML, CSS, Javascript。

能不能直接用Servlet的PrintWriter 直接輸出HTML ? 當然可以,只是以後就沒有人看懂了。

現在用來創建Web頁面的技術多如牛毛:例如 JSP, Velocity, Freemaker, Groovy 等等, 他們都有一個共同點: 模板技術。

說白了就是有一個HTML的模板, 裏邊可以嵌入代碼, 這個模板在運行時(例如在Tomcat當中)就可以根據輸入的不同而生成不同內容的Web界面了。

無論哪種模板,都需要面對一個重要問題:如何展示從業務邏輯層發送來的數據? 這一步驟其實和第5步中的數據綁定有密切關系。因為這一步需要確定諸如user.name , user.password這樣的字段名稱。

9. 如何把對象變成XML或者JSON字符串?

由於AJAX以及手機端的存在,對於一個URL的請求, 他們要求的返回值通常不是HTML頁面, 而是XML或者JSON數據, 此時需要有框架把對象轉化成相應的字符串。

搞定了Web這些基礎的東西,在公司裏做一個Web程序員應該不在話下了, 接下來需要學習的就是像高並發,緩存,搜索,分布式等高級的內容了。

自己是從事了五年的前端工程師,不少人私下問我,2019年前端該怎麽學,方法有沒有?

沒錯,年初我花了一個多月的時間整理出來的學習資料,希望能幫助你快速學習前端,拿高薪offer!

這裏推薦一下我的前端學習交流群:731771211,裏面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效,遊戲,插件封裝,設計模式】到移動端HTML5的項目實戰的學習資料都有整理,送給每一位前端小夥伴。2019最新技術,與企業需求同步。好友都在裏面學習交流,每天都會有大牛定時講解前端技術!

點擊:加入

如何成為合格的web前端程序員?只要學會這幾點!