前言
這里筑夢師,是一名正在努力學(xué)習(xí)的iOS開發(fā)工程師,目前致力于全棧方向的學(xué)習(xí),希望可以和大家一起交流技術(shù),共同進(jìn)步,用簡書記錄下自己的學(xué)習(xí)歷程.
本文閱讀建議
1.一定要辯證的看待本文.
2.本文僅代表個(gè)人片面觀點(diǎn),如有不同觀點(diǎn),還往及時(shí)指出.
3.本文主要是經(jīng)過網(wǎng)站項(xiàng)目的第一輪全方位學(xué)習(xí)以后,對網(wǎng)站項(xiàng)目的整體看法,并對個(gè)人的看法進(jìn)行總結(jié).
4.本文所表達(dá)觀點(diǎn)并不是最終觀點(diǎn),還會更新,因?yàn)楸救诉€在學(xué)習(xí)過程中,有什么遺漏或錯(cuò)誤還望各位指出.
5.本文當(dāng)中的網(wǎng)絡(luò)項(xiàng)目進(jìn)化史,會詳細(xì)的為你闡述當(dāng)前網(wǎng)站和之前的網(wǎng)站趨勢.讓你在進(jìn)行網(wǎng)站項(xiàng)目學(xué)習(xí)之前,擁有整體的概念去進(jìn)行學(xué)習(xí).
6.覺得哪里不妥請?jiān)谠u論留下建議~
7.覺得還行的話就點(diǎn)個(gè)小心心鼓勵(lì)下我吧~
目錄
1.網(wǎng)站項(xiàng)目概述
2.前端前景
3.網(wǎng)站項(xiàng)目進(jìn)化史
4.網(wǎng)站項(xiàng)目學(xué)習(xí)體系
網(wǎng)站項(xiàng)目概述
網(wǎng)站項(xiàng)目大致分為前端+后端開發(fā),學(xué)習(xí)網(wǎng)站項(xiàng)目的開發(fā)與建設(shè),不等同于任何一種單一語言的學(xué)習(xí),例如蘋果App開發(fā)其重心是圍繞著Objective-C語言進(jìn)行開發(fā),只有使用到了其他語言的框架或者第三方庫才會進(jìn)行學(xué)習(xí).
而網(wǎng)站項(xiàng)目開發(fā),需要進(jìn)行前端頁面代碼的編寫,后端服務(wù)器的架設(shè),服務(wù)器腳本語言的編寫等.
隨著互聯(lián)網(wǎng)時(shí)代的發(fā)展,目前的趨勢已經(jīng)是前后端分明,所以各位可以根據(jù)自己的想法選擇性學(xué)習(xí),不一定全都要精通,但一定要都了解,不然出了問題很難解決.
前端前景
- 什么是前端?前端的發(fā)展流程
- 前端的HTML到HTML5 等一些基礎(chǔ)知識,在這里推薦閱讀圖解HTTP和HeadFirst HTML & CSS書籍進(jìn)行了解.我將著重闡述重點(diǎn).
- 14年因?yàn)榕嘤?xùn)機(jī)構(gòu)的興起,大量培訓(xùn)了iOS開發(fā)和安卓開發(fā).導(dǎo)致iOS開發(fā)這個(gè)行業(yè) 在短短兩年時(shí)間,從底部竄到頂部,再摔下來,17年4月,各大培訓(xùn)機(jī)構(gòu)決定停止對iOS和安卓開發(fā)的培訓(xùn),才使得18年的iOS和安卓行業(yè)漸漸回暖,暫居平穩(wěn).
- 15年后半年,因?yàn)閕OS和安卓開發(fā)的集中培訓(xùn),大部分培訓(xùn)機(jī)構(gòu)轉(zhuǎn)戰(zhàn)HTML5前端開發(fā)的培訓(xùn).因?yàn)榧信嘤?xùn)導(dǎo)致H5也行情不穩(wěn).
- 16年后半年,大數(shù)據(jù)行業(yè)的興起.
- 17年的人工智能,機(jī)器學(xué)習(xí),增強(qiáng)現(xiàn)實(shí).
- 那么為什么H5能在培訓(xùn)浪潮中依然堅(jiān)挺?
- 這就要說說H5發(fā)展歷程上的重大事件
- 剛開始火的原因便是因?yàn)楦锩缘腍TML5發(fā)布.
- 初次出現(xiàn)在大眾面前便是Flash被HTML5和CSS3代替.
- HTML5小游戲,見縫插針等.
- 淘寶頁面的混合開發(fā)
- 微信小程序 & 微信公眾號.
- Node.js
- 前端工程化 & 組件化 & 插件化
- 其中兩次爆炸性的發(fā)展 無異于是 小程序的出現(xiàn),和Node.js的出現(xiàn).
- 前端工程師 就由原來 最早的切圖工程師->網(wǎng)頁工程師->大前端工程師
- 而大前端工程師的誕生 還是和移動端脫離不了關(guān)系.
- 大前端工程師一般都要會 網(wǎng)頁開發(fā)+混合開發(fā)+移動端開發(fā)+小程序開發(fā)
- Nodejs開發(fā)目前是一個(gè)拓展技能,但它絕對是大前端發(fā)展的趨勢.
網(wǎng)站項(xiàng)目進(jìn)化史
靜態(tài)網(wǎng)頁
剛開始學(xué)習(xí)網(wǎng)站項(xiàng)目時(shí),都會先從最基礎(chǔ)的HTML+CSS靜態(tài)網(wǎng)頁學(xué)起.
其針對方向?yàn)榱私馐裁词荋TML作為網(wǎng)頁結(jié)構(gòu)標(biāo)簽,CSS負(fù)責(zé)渲染網(wǎng)頁.
交互網(wǎng)頁
靜態(tài)網(wǎng)頁并不能滿足用戶需求,于是交互網(wǎng)頁因此誕生,為了減少服務(wù)器請求次數(shù),以及服務(wù)器負(fù)擔(dān),JavaScript誕生.
JavaScript根據(jù)用戶需求,執(zhí)行不同操作,其中不乏修改網(wǎng)頁結(jié)構(gòu)和渲染樣式的操作.
例如:注冊登錄時(shí),將不合理的請求通過JavaScript攔下來.
發(fā)布網(wǎng)頁
寫好了交互網(wǎng)頁,想讓別人訪問,便需要服務(wù)器進(jìn)行發(fā)布,服務(wù)器是屬于后端開發(fā)工程師掌握的,在大型公司里還會有運(yùn)維工程師,專門負(fù)責(zé)線上服務(wù)器的維護(hù).
通過服務(wù)器配置,將網(wǎng)頁發(fā)布到指定站點(diǎn),用戶訪問指定URL便可請求到你發(fā)布的網(wǎng)頁.
數(shù)據(jù)網(wǎng)頁
別人訪問了你的網(wǎng)頁,可你的網(wǎng)頁并沒有數(shù)據(jù).網(wǎng)頁數(shù)據(jù)不會憑空產(chǎn)生,沒有數(shù)據(jù)的網(wǎng)頁也就沒有靈魂,即便擁有了交互,也是沒有生命的.
數(shù)據(jù)庫是用來存放數(shù)據(jù)的,也是屬于后端開發(fā)工程師掌握的,通過服務(wù)器腳本語言,根據(jù)業(yè)務(wù)需求存儲或讀取數(shù)據(jù)庫中的數(shù)據(jù),分發(fā)給各個(gè)發(fā)送到服務(wù)器請求的客戶端.
客戶端、服務(wù)器惊豺、數(shù)據(jù)傳遞請閱讀圖解HTTP一書.
到這里大致就是一個(gè)基本的網(wǎng)站項(xiàng)目基本要擁有:靜態(tài)網(wǎng)頁/交互網(wǎng)頁、數(shù)據(jù)庫&數(shù)據(jù)、服務(wù)器、服務(wù)器腳本語言文件.
異步請求網(wǎng)頁
在異步請求網(wǎng)頁出現(xiàn)之前,每次每個(gè)發(fā)送的請求,都要返回整個(gè)網(wǎng)頁給客戶端,使得服務(wù)器壓力,以及數(shù)據(jù)傳遞量劇增.
為了解決這個(gè)問題Ajax誕生,Ajax是前端工程師需要掌握的必備技能.根據(jù)業(yè)務(wù)需求刷新部分網(wǎng)頁,例如:登錄注冊時(shí),輸入的用戶名已被注冊,可以直接提示出來,而不是跳轉(zhuǎn)到新的頁面彈出提示.
美觀的網(wǎng)頁
網(wǎng)站僅僅有了功能性是不行的還得有美觀性,不能所有的網(wǎng)站的風(fēng)格都一個(gè)樣子,所以jQuery眼俊、EasyUI等各種第三方封裝好的框架誕生.
jQuery、EasyUI有著大量的成熟的框架,可以直接使用,打造出美觀的網(wǎng)頁.是前端工程師必備的技能.
移動端網(wǎng)頁/響應(yīng)式布局
隨著安卓手機(jī)和蘋果手機(jī)的普及,僅僅開發(fā)電腦端網(wǎng)頁已經(jīng)不能滿足互聯(lián)網(wǎng)公司的需求,還需要開發(fā)移動端的網(wǎng)頁.
為了不讓移動端的網(wǎng)頁再寫一個(gè)項(xiàng)目的代碼,Bootstrap誕生,它是由推特公司開源出來的框架,用來開發(fā)既能在網(wǎng)頁端展示的網(wǎng)頁,也能在移動端完美顯示的網(wǎng)頁.
目前移動端網(wǎng)頁比較多的使用Vue.js進(jìn)行開發(fā),因?yàn)槠渥詭У拇蟛糠侄际翘O果端的控件效果.
小程序/公眾號開發(fā)
隨著微信的用戶量激增,以及其平臺的絕對地位,小程序的免安裝特性,小程序也隨之崛起.
很多中小型公司是不會專門開設(shè)"小程序開發(fā)工程師"的職位的,一般小程序開發(fā)都是由公司里的前端工程師來干.所以也是前端工程師需要掌握的.
目前還沒有接觸到這里,好像是要學(xué)習(xí)wxml和wxss的.
前后端分離網(wǎng)站項(xiàng)目
目前的網(wǎng)站項(xiàng)目趨勢,就是有后端開發(fā)工程師,開發(fā)網(wǎng)站API文檔,通過JSON進(jìn)行數(shù)據(jù)傳遞,前端工程師訪問指定接口,拿到數(shù)據(jù),刷新頁面.
其中前后端分離的項(xiàng)目,并不需要前端工程師會后端技能,但要求雙方都能良好的解決數(shù)據(jù)傳遞等問題.
工程化開發(fā)/Node.js
隨著前端行業(yè)的發(fā)展,JavaScript的發(fā)展,Nodejs誕生,JavaScript不再是只能寫客戶端的腳本語言,而是可以用來寫服務(wù)端語言,也是一個(gè)往全棧發(fā)展的趨勢.
目前沒有接觸工程化開發(fā),個(gè)人了解是有一些基于Nodejs開發(fā)的工程化工具,可以大幅度提升工作效率.更好的體現(xiàn)前后端分離.
其因?yàn)镹odejs的特性和優(yōu)點(diǎn),大大減少了前后端交流成本,用Nodejs直接開發(fā)一整個(gè)網(wǎng)站項(xiàng)目.
在學(xué)習(xí)Nodejs之前還要先學(xué)會ES2015、ES6褐澎、ES7,其都是JavaScript的標(biāo)準(zhǔn),不用頭疼,只是每個(gè)版本更新了更好更容易的寫法.
總結(jié)
就目前個(gè)人看法:目前前端的趨勢就是通過對一些基礎(chǔ)知識的學(xué)習(xí),漸漸向Nodejs靠攏,并圍繞Nodejs進(jìn)行優(yōu)雅的前端開發(fā).
網(wǎng)站項(xiàng)目學(xué)習(xí)體系
下面簡單闡述一下,自己對各個(gè)技能棧的理解.
HTML
- HTML文檔
- 結(jié)構(gòu)標(biāo)簽語言,用來描述整個(gè)網(wǎng)站的結(jié)構(gòu)
- 其由各種不同 各種樣式的HTML標(biāo)簽
CSS
- CSS負(fù)責(zé) 標(biāo)簽選擇器 和樣式渲染
- 負(fù)責(zé)網(wǎng)頁的渲染.
- 通過標(biāo)簽選擇器 選擇HTML標(biāo)簽 進(jìn)行樣式渲染.
JavaScript
- 瀏覽器腳本語言,在瀏覽器運(yùn)行的腳本語言
- 其負(fù)責(zé) 瀏覽器對象BOM和HTML文檔對象DOM 的修改
- 以及 網(wǎng)頁的事件處理, 例如數(shù)據(jù)校驗(yàn), 登錄注冊,刷新,跳轉(zhuǎn)等.
- BOM (瀏覽器對象)
- 通過JS獲取瀏覽器對象,進(jìn)行一些內(nèi)定函數(shù)(方法)的執(zhí)行,例如 添加書簽,
- DOM
- 通過JS獲取HTML文檔對象 ,對網(wǎng)頁中一些不需要再顯示的模塊進(jìn)行刪除,或者增加 刷新 數(shù)據(jù).
HTTP協(xié)議
- HTTP協(xié)議,讓你懂得一個(gè)網(wǎng)站項(xiàng)目的 數(shù)據(jù)是如何使用服務(wù)器進(jìn)行發(fā)布,傳遞,到每個(gè)客戶端進(jìn)行展示.
- 其遵循的規(guī)則以及協(xié)議.
- 一個(gè)網(wǎng)站的主要角色的職能:服務(wù)器 + 服務(wù)器腳本語言 + 數(shù)據(jù)庫 + 網(wǎng)頁/文件等.
- 請求和響應(yīng)
- 服務(wù)端和客戶端
Ajax
- 異步請求
- 其存在的意義是革命性的,可以使網(wǎng)頁局部刷新,而不用頻繁的傳遞整個(gè)頁面,可以根據(jù)網(wǎng)頁功能 業(yè)務(wù)需求,在任何位置 發(fā)送請求
jQuery
- 高效的JavaScript
- 基于JavaScript的框架.可以快速高效的執(zhí)行JavaScript所能執(zhí)行的DOM和BOM操作
- 其還封裝了Ajax,可以更加方便的使用Ajax進(jìn)行異步請求
JSON
- 目前流行的數(shù)據(jù)格式,可以描述復(fù)雜的對象類型,大型數(shù)據(jù)傳遞
JSONP
- 常用于解決跨域獲取數(shù)據(jù)的問題,因?yàn)榉?wù)器不受同源策略的影響,故使用請求js的方式,進(jìn)行跨域請求.
Apache
- 服務(wù)器
- 其主要負(fù)責(zé) 站點(diǎn)配置,文件分發(fā),響應(yīng)請求.
PHP
- 服務(wù)器腳本語言
- 其主要負(fù)責(zé),處理請求, 返回指定的數(shù)據(jù),
- 需要數(shù)據(jù)的進(jìn)行數(shù)據(jù)庫操作,從數(shù)據(jù)庫拿數(shù)據(jù),然后返回?cái)?shù)據(jù)
MySQL
- 數(shù)據(jù)存儲
- 開源免費(fèi)
- 其可以滿足中小型公司,網(wǎng)絡(luò)項(xiàng)目的開發(fā).
API
- 網(wǎng)站API文檔
- 該文檔由后端開發(fā)工程師放出,上面羅列了你請求什么接口,他返回什么數(shù)據(jù).
RESTful API
- 一種設(shè)計(jì)模式
- 將數(shù)據(jù)的操作體現(xiàn)在API上,更能實(shí)現(xiàn)前后端分離,常用于移動端App的API設(shè)計(jì)上,和部分的網(wǎng)頁端API設(shè)計(jì).
路由
- 目前沒有進(jìn)行系統(tǒng)學(xué)習(xí),后期更新這里.
ECMAScript 6
- 其是下一代JavaScript的標(biāo)準(zhǔn)
- 其實(shí)并不用恐懼,我一開始以為學(xué)習(xí)完JavaScript還要學(xué)ES6,好難受,其實(shí)是一個(gè)東西了.
- 在會JavaScript(這里指ES5標(biāo)準(zhǔn))的基礎(chǔ)上,ES6增加了一些功能函數(shù)和簡寫形式函數(shù).可以使你的JavaScript更加高效.
JavaScript高級
- 目前沒有進(jìn)行系統(tǒng)學(xué)習(xí),后期更新這里.
Node.js
- 革命性的存在,其事件處理 I/O的性能等.
- Nodejs使得JavaScript不再是一門只存在于瀏覽器的腳本語言,在Nodejs這兩年社區(qū)和開源插件的開發(fā),已經(jīng)可以成熟的擔(dān)任 前端工程化開發(fā),前端組件化開發(fā),進(jìn)行后臺服務(wù)器開發(fā).
- 也可以將Node.js看成一個(gè)整體,其集成了各種框架插件以后,可以做很多事情
- Express
- 其依賴于Node.js環(huán)境
Vue.js
國內(nèi)開發(fā)的框架,非常流行的移動端網(wǎng)絡(luò)框架.
目前沒有進(jìn)行系統(tǒng)學(xué)習(xí),后期更新這里.
Angular.js
我知道它封裝了jQuery和Ajax.
目前沒有進(jìn)行系統(tǒng)學(xué)習(xí),后期更新這里.
React.js
Facebook開源的框架.
目前沒有進(jìn)行系統(tǒng)學(xué)習(xí),后期更新這里.
總結(jié)
目前還在根據(jù)自己學(xué)習(xí)的東西做一個(gè)小Demo,等到我學(xué)習(xí)到上面沒有提及的知識點(diǎn)以后,我會再更新的.
前端學(xué)習(xí)路漫漫,加油
結(jié)束語
如果您對這篇文章有什么意見或者建議,請?jiān)u論與我討論.
如果您覺得還不錯(cuò)的話~可以點(diǎn)個(gè)喜歡鼓勵(lì)我哦.
如果您想和我一起學(xué)習(xí),請毫不吝嗇的私信我吧~
介個(gè)是我的個(gè)人博客,歡迎參觀哦~
