前端語言的歷史
以下為html,css,js的歷史簡略概要狱意。
HTML
為了使歐洲各國的核物理學家能通過計算機網(wǎng)絡(luò)及時溝通傳遞信息進行合作研究，Tim Berners-Lee博士開發(fā)出了第一臺web服務(wù)器和web客戶端盈厘，并命名為
WWW（World Wide web，萬維網(wǎng)）
在發(fā)明萬維網(wǎng)的同時么鹤，他也創(chuàng)建了 HTML（Hyper Text Markup Language案狠，超文本標記語言），并推薦了將近20個用來編寫網(wǎng)頁的元素卷雕，就是我們現(xiàn)在說的標簽节猿。
W3C（World Wide web Consortinm，萬維網(wǎng)聯(lián)盟）成為了 HTML 后續(xù)標準的制定者漫雕。
W3C 希望 web 完全建立在 XML 規(guī)則上滨嘱，著手開發(fā) XHTML 2.0，這個版本與之前差別更加巨大浸间，導致與現(xiàn)有的網(wǎng)頁都不兼容太雨，甚至與以前版本的 HTML 也不兼容。
HTML5
一股反抗勢力在
W3C組織內(nèi)壯大魁蒜，他們希望那些支持創(chuàng)建web應(yīng)用的特性能得到更多的關(guān)注囊扳，并以這個目標來擴展HTML吩翻，2004年他們建立了自己的組織：WHATWG（web Hypertext Application Technology Working Group，web超文本應(yīng)用技術(shù)工作組）宪拥，這是官網(wǎng)*WHATWG的大部分工作被分為：web Form 2.0和web Apps 1.0仿野，都是基于HTML規(guī)范擴展的，這兩個規(guī)范被合并之后她君，簡單的稱為HTML5規(guī)范
CSS
CSS（Cascading Style Sheets脚作，層疊樣式表）的發(fā)展史比較簡單，這門語言的主要作用就是為文檔中的標簽添加大小缔刹、顏色球涛、定位等特性⌒８洌“層疊”的意思是可以多次寫一個標簽的樣式亿扁，但是以一定的規(guī)則順序來決定應(yīng)用哪一句樣式語言。
CSS3
CSS3是CSS（層疊樣式表）技術(shù)的升級版本鸟廓，于1999年開始制訂从祝，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型引谜、列表模塊牍陌、超鏈接方式、語言模塊员咽、背景和邊框毒涧、文字特效、多欄布局等模塊贝室。
JavaScript
JavaScript（簡稱“JS”） 是一種具有函數(shù)優(yōu)先的輕量級契讲，解釋型或即時編譯型的編程語言。雖然它是作為開發(fā)Web頁面的腳本語言而出名的滑频，但是它也被用到了很多非瀏覽器環(huán)境中捡偏，JavaScript 基于原型編程、多范式的動態(tài)腳本語言误趴，并且支持面向?qū)ο?/a>霹琼、命令式和聲明式（如函數(shù)式編程）風格。
ES6
JavaScript的標準是ECMAScript 凉当。截至 2012 年枣申，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標準看杭。2015年6月17日忠藤，ECMA國際組織發(fā)布了ECMAScript 的第六版，該版本正式名稱為 ECMAScript 2015楼雹，但通常被稱為ECMAScript 6 或者ES6模孩。
瀏覽器
早期網(wǎng)景和微軟的瀏覽器戰(zhàn)爭尖阔，以微軟用 windows 操作系統(tǒng)捆綁 IE 的形式取得勝利而告終。而兩家公司置 W3C 文檔標準于不顧榨咐，互相不兼容對方瀏覽器介却，造成了如今網(wǎng)頁開發(fā)需要處理棘手的兼容性問題，并讓 IE 遺臭萬年块茁，甚至現(xiàn)代瀏覽器也存在不同的差異性齿坷。
2008年 Google Chrome 谷歌瀏覽器的推出，第二次瀏覽器大戰(zhàn)開始数焊，緊接著網(wǎng)景的后代 Firefox 火狐瀏覽器推出永淌，IE 被圍殺，又加上高速增長的移動互聯(lián)網(wǎng)佩耳，IE 正在被徹底邊緣化遂蛀。
后端眼中的前端
每一個程序員應(yīng)該都聽說過程序員鄙視鏈，做c的看不起做c++的干厚，做c++看不起做java的李滴，做java看不起做.net的，這些所有都看不起搞前端的蛮瞄，可以說悬嗓，前端程序員應(yīng)該處于程序員鄙視鏈的底端。
前端在行業(yè)中裕坊，之所以被鄙視的原因，完全是因為燕酷，入門簡單籍凝，早期的前端俗稱美工、切圖仔苗缩，每天的工作就是切圖饵蒂、寫寫html、寫寫css酱讶，在java亦或者c語言開發(fā)者眼中退盯，就是渲染一下網(wǎng)頁，沒多大難度泻肯。
大部分后端還停留在jsp,php等前后端沒分離的思想渊迁，覺得前端只要改改樣式展示數(shù)據(jù)，沒啥難度灶挟。隨口就來句:"這個你改下琉朽，很難嗎?" ??
就算是有過對前端了解的后端，也不會特別深入稚铣，只是知道不再是以前寫jquery的時代了箱叁，對于前端的全貌并不了解墅垮。
前端的今天
自從2009年node的出現(xiàn)，前端的發(fā)展出現(xiàn)了爆炸式飛躍耕漱，進入了大前端時代算色。
前端工程化、自動化
隨著前端開發(fā)復(fù)雜度的日益增加螟够，各種優(yōu)秀的組件框架也遍地開花灾梦。同時，我們面臨業(yè)務(wù)規(guī)模的快速發(fā)展和工程師團隊的不斷擴張齐鲤。目前來說斥废，Web業(yè)務(wù)日益復(fù)雜化和多元化，現(xiàn)在隨便找個前端項目给郊，都已經(jīng)不是過去的拼個頁面+搞幾個jQuery插件就能完成的了牡肉。工程復(fù)雜了就會產(chǎn)生許多問題，我們希望能在日常開發(fā)中制訂一個規(guī)范化的前端工作流淆九，很好地規(guī)范統(tǒng)一項目的模塊化開發(fā)和前端資源统锤，讓代碼的維護和互相協(xié)作更加容易更加方便，令前端開發(fā)自動化成為一種習慣炭庙。
構(gòu)建前端項目的幾個階段
第一階段：庫/框架選型
基本上現(xiàn)在沒有人完全從0開始做網(wǎng)站饲窿，三大框架：React/Vue/Angular等框架橫空出世，解放了不少生產(chǎn)力焕蹄，合理的技術(shù)選型可以為項目節(jié)省許多工程量這點毋庸置疑逾雄。
除了主流框架，還有許多UI框架來提高開發(fā)效率腻脏，如：bootstrap鸦泳、antd、element UI永品，ionic等做鹰。
第二階段：構(gòu)建、管理工具
選型之后基本上就可以開始敲碼了鼎姐，不過光解決開發(fā)效率還不夠钾麸。復(fù)雜的項目往往需要有大量的項目包/庫的依賴、多人的協(xié)作炕桨，各類環(huán)境的調(diào)試饭尝。對代碼進行壓縮、校驗谋作、管理芋肠，之后再以頁面為單位進行簡單的資源合并（ps:以上排序不分排名先后）。
npm遵蚜、yarn對項目依賴進行管理帖池；
git對代碼進行版本控制奈惑；
gulp、grunt優(yōu)化項目構(gòu)建流睡汹。
第三階段：JS/CSS模塊化開發(fā)
分而治之是軟件工程中的重要思想肴甸，是復(fù)雜系統(tǒng)開發(fā)和維護的基石，這點放在前端開發(fā)中同樣適用囚巴。在解決了基本開發(fā)效率運行效率問題之后原在，前端團隊開始思考維護效率，模塊化是目前前端最流行的分治手段彤叉。
JS模塊化方案很多庶柿，AMD/CommonJS/UMD/ES6 Module等，對應(yīng)的框架和工具也一大堆秽浇，如：webpack浮庐、Parcel；
CSS模塊化開發(fā)基本都是在less柬焕、sass审残、stylus等預(yù)處理器的import/mixin特性支持下實現(xiàn)的。
第四階段：規(guī)范化
模塊化和組件化確定了開發(fā)模型斑举，而這些東西的實現(xiàn)就需要規(guī)范去落實搅轿。規(guī)范化其實是工程化中很重要的一個部分，項目初期規(guī)范制定的好壞會直接影響到后期的開發(fā)質(zhì)量：
目錄結(jié)構(gòu)的制定
編碼規(guī)范
前后端接口規(guī)范
前端輸入輸出數(shù)據(jù)文檔
文檔規(guī)范
組件管理
Git分支管理
Commit描述規(guī)范
定期CodeReview
視覺圖標規(guī)范
JavaScript 為什么需要 lint
JavaScript 本身設(shè)計上存在許多缺陷[3]富玷，代碼不嚴謹也可能就會觸發(fā)神奇的錯誤璧坟。例如 == 和 === 的混用，可能會產(chǎn)生類型不一致引起的 Bug赎懦，經(jīng)驗不足的開發(fā)者很難察覺出異常沸柔。
因此我們需要通過jsLint、esLint铲敛、tsLint等代碼規(guī)范。
前端還能做到什么
上面講述了前端開發(fā)需要構(gòu)建一個前端工程所需要的一些知識会钝，那么下面再來看下前端還能做些什么伐蒋。
服務(wù)端
上面提到有部分后端同學，覺得服務(wù)端業(yè)務(wù)邏輯是復(fù)雜的迁酸，所以比前端難先鱼。
但實際上我們有node，同樣可以作為服務(wù)端語言奸鬓。（當然沒有哪個好的說法焙畔，完全看業(yè)務(wù)場景進行最優(yōu)的選型）
常用的node框架有：express、koa
可能不少人對nodejs做服務(wù)端表示質(zhì)疑串远，這是知乎中阿里node大佬的一篇文章宏多，也許可以多少改變一下你們的看法儿惫。
https://www.zhihu.com/question/37379084
移動端開發(fā)
移動應(yīng)用開發(fā)的方式，目前主要有三種：
Native App： 本地應(yīng)用程序（原生App）
Web App：網(wǎng)頁應(yīng)用程序（移動web）
Hybrid App：混合應(yīng)用程序（混合App）
我們可以通過react native伸但、flutter等框架開發(fā)原生App肾请，而不是必須用Android/Swift。
可以通過h5直接實現(xiàn)web app
可以通過WeX5更胖、PhoneGap铛铁、Cordova等來實現(xiàn)hybrid App
微信小程序
我們可以用mpVue、Taro等框架來寫小程序却妨。
桌面應(yīng)用
桌面應(yīng)用的開發(fā)如今的前端也能占有一席
Electron 基于 Chromium 和 Node.js, 讓你可以使用 HTML, CSS 和 JavaScript 構(gòu)建應(yīng)用饵逐。
Electron 兼容 Mac、Windows 和 Linux彪标，可以構(gòu)建出三個平臺的應(yīng)用程序倍权。
ps:代表桌面應(yīng)用如vsCode，為微軟基于typescript和electron開發(fā)捐下。
TypeScript
TypeScript是一種由微軟開發(fā)的自由和開源的編程語言账锹。它是JavaScript的一個超集，而且本質(zhì)上向這個語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο蟆?br> TypeScript的設(shè)計目的是解決JavaScript的“痛點”：弱類型和沒有命名空間坷襟，導致很難模塊化奸柬，不適合開發(fā)大型程序。另外它還提供了一些語法糖來幫助大家更方便地實踐面向?qū)ο蟮木幊獭?/p>
前端也能做AI
隨著AI技術(shù)的普及婴程，前端也能插上一腳廓奕。再TensorFlow、ConvNetJS幫助下創(chuàng)建機器學習模型档叔。
webVR/webGL
在線虛擬實現(xiàn)桌粉，前端依然有所表現(xiàn)。three.js衙四，aframe等眾多優(yōu)秀技術(shù)铃肯。
aframe事例：https://aframe.io/examples/showcase/sky/
游戲
在瀏覽器中，基于HTML5技術(shù)的游戲引擎传蹈，我們可以用JS寫出各種游戲押逼。
不知道各位有沒有發(fā)現(xiàn)chrome瀏覽器里自帶的恐龍快跑小游戲呢?
chrome://dino/仔細找找，有驚喜惦界。
動畫
隨著互聯(lián)網(wǎng)普及挑格，用戶對頁面的體驗要求提高，各類動態(tài)效果的實現(xiàn)沾歪。在瀏覽器中通過css3漂彤、js實現(xiàn)動畫也不是什么難事。不在是曾經(jīng)flash的時代了，比起flash的耗性能挫望，不安全立润，適配性問題，如今的前端完全可以更好地實現(xiàn)士骤。
貼一個css3動畫例子：https://www.html5tricks.com/demo/pure-css3-horse-run/index.html
前端還需要知道什么
除了上面敘述的技術(shù)知識范删，前端還需要知道哪些?
PWA
PWA（Progressive Web App）是一種理念，使用多種技術(shù)來增強web app的功能拷肌，可以讓網(wǎng)站的體驗變得更好到旦，能夠模擬一些原生功能，比如通知推送巨缘。在移動端利用標準化框架添忘，讓網(wǎng)頁應(yīng)用呈現(xiàn)和原生應(yīng)用相似的體驗。
PWA并不是單指某一項技術(shù)若锁，你更可以把它理解成是一種思想和概念搁骑，目的就是對標原生app，將Web網(wǎng)站通過一系列的Web技術(shù)去優(yōu)化它又固，提升其安全性仲器，性能，流暢性仰冠，用戶體驗等各方面指標乏冀，最后達到用戶就像在用app一樣的感覺。
PWA中包含的核心功能及特性如下：
Web App Manifest
Service Worker
Cache API 緩存
Push&Notification 推送與通知
Background Sync 后臺同步
響應(yīng)式設(shè)計
SEO
搜索引擎優(yōu)化洋只，又稱為SEO辆沦，即Search Engine Optimization，它是一種通過分析搜索引擎的排名規(guī)律识虚，了解各種搜索引擎怎樣進行搜索肢扯、怎樣抓取互聯(lián)網(wǎng)頁面、怎樣確定特定關(guān)鍵詞的搜索結(jié)果排名的技術(shù)担锤。搜索引擎采用易于被搜索引用的手段蔚晨，對網(wǎng)站進行有針對性的優(yōu)化，提高網(wǎng)站在搜索引擎中的自然排名肛循，吸引更多的用戶訪問網(wǎng)站蛛株，提高網(wǎng)站的訪問量，提高網(wǎng)站的銷售能力和宣傳能力育拨，從而提升網(wǎng)站的品牌效應(yīng)。
瀏覽器兼容性
雖然如今chrome瀏覽器已經(jīng)占據(jù)了霸主地位欢摄，但是我們?nèi)匀恍枰酪恍┢渌麨g覽器的兼容性問題熬丧，需要了解這些瀏覽器使用的內(nèi)核，了解我們的前端項目在不同瀏覽器中可能出現(xiàn)的不同效果和問題怀挠。(萬惡的IE)
網(wǎng)站安全
最典型的如XSS析蝴、CSRF攻擊等害捕。
XSS攻擊通常指的是通過利用網(wǎng)頁開發(fā)時留下的漏洞，通過巧妙的方法注入惡意指令代碼到網(wǎng)頁闷畸，使用戶加載并執(zhí)行攻擊者惡意制造的網(wǎng)頁程序尝盼。這些惡意網(wǎng)頁程序通常是JavaScript，但實際上也可以包括Java佑菩、 VBScript盾沫、ActiveX、 Flash 或者甚至是普通的HTML殿漠。攻擊成功后赴精，攻擊者可能得到包括但不限于更高的權(quán)限（如執(zhí)行一些操作）、私密網(wǎng)頁內(nèi)容绞幌、會話和cookie等各種內(nèi)容蕾哟。
設(shè)計工具
作為前端，我們需要實現(xiàn)達到預(yù)期的頁面效果莲蜘，要能夠使用 PhotoShop谭确，Sketch 或 Figma 等設(shè)計工具，精確還原設(shè)置稿票渠。
前端與后端
環(huán)境不同
前端：代碼主要在客戶端（pc逐哈、手機、pad）運行庄新。
后端的代碼主要在服務(wù)端（某臺機房服務(wù)器等）運行鞠眉。
思考的方向是與用戶交互不同
前端的首要目的是讓用戶覺得用起來更舒服，考慮界面布局择诈、交互效果械蹋、頁面加載速度等等，主要是偏向用戶看得見的部分羞芍，客戶端（pc哗戈、手機、pad）上瀏覽web荷科。
后端更多是考慮業(yè)務(wù)邏輯唯咬、數(shù)據(jù)庫表結(jié)構(gòu)設(shè)計、服務(wù)器配置畏浆、負載均衡胆胰、數(shù)據(jù)的存儲、跨平臺API設(shè)計等等刻获，更多的是考慮用戶看不到的部分蜀涨，保證業(yè)務(wù)邏輯處理數(shù)據(jù)的嚴謹，保證數(shù)據(jù)吞吐的性能。
穩(wěn)定性不同
前端主要怕設(shè)計稿的頻繁變更厚柳，布局樣式氧枣、交互效果的需求變更；
后端主要怕業(yè)務(wù)邏輯變更别垮，或者當使用規(guī)模增大之后的穩(wěn)定性;
語言不同
前端：html便监、css、js
后端:java碳想、php烧董、C#、python...
追求
前端：前端工程師會把精力放在html5移袍，css3解藻，jquery，ES6 7葡盗，typescript螟左，bootstrap，angularjs觅够，reactjs胶背，vuejs，webpack喘先，less/sass钳吟，gulp，nodejs窘拯，模塊化红且，組件化，設(shè)計模式涤姊，瀏覽器兼容性暇番，性能優(yōu)化等等。
后端：對于以Java工程師為代表的后臺開發(fā)思喊，基本上大部分精力會放在諸如Java基礎(chǔ)壁酬，設(shè)計模式，Jvm原理恨课，spring+springmvc原理及源碼舆乔，linux，mysql事務(wù)隔離與鎖機制剂公，mongodb希俩，http/tcp，多線程纲辽，分布式架構(gòu)颜武，彈性計算架構(gòu)贫母，微服務(wù)架構(gòu)，java性能優(yōu)化盒刚，以及相關(guān)的項目管理等等。
Javascript 和 JAVA
Java是一種真正地面向?qū)ο蟮恼Z言绿贞，即使是開發(fā)簡單的程序因块，也必須設(shè)計對象。
Javascript是一種腳本語言籍铁，它可以用來制作與網(wǎng)絡(luò)無關(guān)的涡上，實現(xiàn)與用戶交互的復(fù)雜軟件。它是一種基于對象(Object Based)和事件驅(qū)動(Event Driver)的編程語言拒名。因而它本身提供了非常豐富的內(nèi)部對象供設(shè)計人員使用吩愧。
強變量和弱變量
兩種語言所采用的變量是不一樣的。
Java采用強類型變量增显，即所有變量在編譯之前必須作聲明雁佳。
String y;
x=1234;
x=4321;
JavaScript中，采用弱類型同云，即變量在位用前不需作聲明糖权，而由解釋器在運行時檢查其數(shù)據(jù)類型.
let x=1234;
let y="4321";
typescript的出現(xiàn)使得可以對變量進行聲明,單本質(zhì)上還是弱類型語言：
let x:string = "1234";
let y:number = 1234;
class
java的class是類。
js里沒有類的概念,js的繼承是依靠原型鏈完成的炸站，js的class本質(zhì)上還是對象星澳。ES6提供了更接近傳統(tǒng)語言的寫法，引入了Class（類）這個概念旱易，作為對象的模板禁偎。通過class關(guān)鍵字，可以定義類阀坏∪缗基本上，ES6的class可以看作只是一個語法糖全释。
JS 中沒有內(nèi)部類装处，但 JS 可以在 function（方法）中定義類。
es6類的繼承：
class Father {
constructor(){}
money(){
console.log("10000塊");
}
}
// 子類Son使用 extends 繼承父類Father
class Son extends Father {}
var ss = new Father();
ss.money();
// 10000塊
作用域
java的作用域后端同學肯定比我熟浸船，跳過妄迁。
JavaScript作用域es5及之前，只有全局變量和局部變量李命，以函數(shù)作為作用域登淘。
es6之后有了塊級作用域{}。
箭頭函數(shù) 與 lambda表達式
在JDK8和ES6的語言發(fā)展中封字，在Java的lambda表達式和JavaScript的箭頭函數(shù)這兩者有著千絲萬縷的聯(lián)系黔州；
箭頭函數(shù)（arrow function）耍鬓，就是C#中的lambda表達式，據(jù)說Java8也把它加入了流妻。但不管怎樣牲蜀，JS正在從其它語言吸納優(yōu)秀的特性（比如yield, class, 默認參數(shù)等等），且不論這些特性好壞绅这，這件事本身就是極好的涣达。
只是Java用->箭頭，C#用的箭頭與JS一樣：=>证薇，這個箭頭叫“l(fā)ambda運算符”度苔，行話讀作”goes to”
JavaScript 箭頭函數(shù) ：
const fun = function(x, y) {
return (x + y);
}
const fun = (x, y) => x + y;
——————————————
分享結(jié)束
