How-to-quick-getting-started-for-Frontend

How-to-quick-getting-started-for-frontend

不經(jīng)意已一年多不專注前端方面的開發(fā)工作，這一年前端方面的技術(shù)又是新天地颠黎，偶然接到內(nèi)部團(tuán)隊(duì)邀請我給他們做一個(gè)前端的講座脆霎，希望能幫助他們快速总处、且深刻了解前端這個(gè)行業(yè)以及行業(yè)內(nèi)的知識，這可真有點(diǎn)讓我為難睛蛛，由于不愛寫PPT鹦马，遂成此文。

[toc]

亂花漸欲迷人眼

2015年前端界可謂熱鬧非凡

Google的Angularjs2正式版遲遲未出忆肾，牽動(dòng)著無數(shù)前端工程師的心荸频。
Facebook的Reactjs像一記猛藥，讓前端工程師High得不能自已客冈。
同時(shí)Facebook的ReactNative讓眾多iOS旭从，Android工程師畏懼。
Web Components 也要跟前面兩位一爭高下场仲。
國內(nèi)的Vue.js 這顆新星也是裊裊升起和悦。

微信也在最近強(qiáng)勢推出應(yīng)用號，種種跡象表明渠缕，Web前端鸽素，特別是移動(dòng)端的Web前端開發(fā)將迎來另一番天地。

近幾年前端發(fā)展概況

2015年

Ecma國際大會(huì)宣布正式批準(zhǔn)ECMA-262第6版亦鳞，即ECMAScript 2015馍忽。ECMAScript6對Web開發(fā)的影響
隨著HTML5的標(biāo)準(zhǔn)在14年10月由W3C發(fā)布為正式推薦標(biāo)準(zhǔn)，15年HTML5的發(fā)展也是飛速向前燕差，2015年有80%的App基于HTML5
Flash在HTML5的沖擊下遭笋，各大廠商和瀏覽器商都陸續(xù)聲明不再使用這一技術(shù)。參考
Nodejs和io.js正式合并谁不。

多年前的JQuery坐梯，Extjs，Dojo刹帕，Requirejs吵血，Seajs如火如荼，現(xiàn)如今也是不溫不火偷溺，技術(shù)迭代如此之快蹋辅，一不小心就迷失了。

萬變不離其中

不論這個(gè)行業(yè)發(fā)展有多迷人挫掏，新出的技術(shù)又是多么的牛逼侦另，三板斧CSS+HTML+Javascript永遠(yuǎn)是鐵打的基石，當(dāng)然隨著行業(yè)發(fā)展尉共，三板斧本身也是在發(fā)展中褒傅，所以對前端新技術(shù)的追求基本上都是在這三者身上，像如日中天的HTML5袄友，CSS3以及JS語言本身的發(fā)展殿托。還有瀏覽器以及Webview這兩個(gè)也非常重要，他們就好比后端工程師要熟悉Unix環(huán)境一個(gè)道理剧蚣。當(dāng)然大部分前端工程師在還不需要過多去琢磨這兩者支竹。

其他的各種吊炸天的技術(shù)框架都是淺嘗，嘗多了發(fā)現(xiàn)他們要解決的核心問題是

前后端分離
Web工程化
Web性能

再抽象就是兩個(gè)問題

工程化
產(chǎn)品性能

因?yàn)榍昂蠖朔蛛x的目的是為了提升開發(fā)效率和維護(hù)效率這應(yīng)該屬于工程的范疇鸠按，而引入工程化的概念核心目的就是提升效率礼搁，為達(dá)目的過程中會(huì)去解耦合，減依賴目尖，管理依賴馒吴，組件化，即插即用等概念瑟曲。

當(dāng)然這類問題不僅僅是前端募书，很大程度上后端很多技術(shù)做很多工作都是致力于去解決這兩類問題。

所以當(dāng)你對這三板斧非常熟悉的時(shí)候测蹲，就能很好的去駕馭前端的亂花漸欲迷人眼，否則就是空談扣甲。

三板斧

HTML：網(wǎng)頁的骨架篮赢。
CSS：網(wǎng)頁多彩的源泉。
Javascript：靈魂琉挖，沒有他只是一副空皮囊

下面就簡單的來介紹這三板斧

HTML

超文本標(biāo)記語言（英文：HyperText Markup Language启泣，HTML）是為“網(wǎng)頁創(chuàng)建和其它可在網(wǎng)頁瀏覽器中看到的信息”設(shè)計(jì)的一種標(biāo)記語言。HTML被用來結(jié)構(gòu)化信息——例如標(biāo)題示辈、段落和列表等等寥茫，也可用來在一定程度上描述文檔的外觀和語義。1982年由蒂姆·伯納斯-李創(chuàng)建矾麻，由IETF用簡化的SGML（標(biāo)準(zhǔn)通用標(biāo)記語言）語法進(jìn)行進(jìn)一步發(fā)展的HTML纱耻，后來成為國際標(biāo)準(zhǔn)芭梯，由萬維網(wǎng)聯(lián)盟（W3C）維護(hù)。

1980年起源于一個(gè)物理學(xué)家的項(xiàng)目弄喘，當(dāng)時(shí)只有少量的標(biāo)簽玖喘，直到1993年的時(shí)候還是大學(xué)生馬克·安德森在他的Mosaic瀏覽器加入<img>標(biāo)記，至此HTML添加了越來越多的標(biāo)簽蘑志。更加豐富起來累奈。

維基百科-HTML

HTML到底是什么

HTML就是標(biāo)記語言，換句話說就是普通文本急但，只不過 瀏覽器 賦予了它神奇力量澎媒。

就像Markdown一樣，也是標(biāo)記語言波桩，他會(huì)被Markdown編輯器賦予優(yōu)美的樣式戒努，同時(shí)在特定網(wǎng)頁或者編輯器上打開的時(shí)候展示出來而已。

瀏覽器如何解析HTML

當(dāng)我們在瀏覽器地址欄輸入網(wǎng)址按下Enter時(shí)候突委，瀏覽器會(huì)發(fā)出一個(gè)HTTP請求柏卤，然后DNS解析找到對應(yīng)的服務(wù)器IP地址，等一系列過程匀油，最終這個(gè)請求會(huì)響應(yīng)帶有標(biāo)記語言的文檔缘缚，可能是.html后綴，也可能是其他敌蚜，反正在Respoonse的頭部會(huì)是content-type:text/html; charset=UTF-8

這個(gè)過程還可以很細(xì)化桥滨，也有很多策略。感興趣戳這里

然后瀏覽器會(huì)解析該特定文本內(nèi)的內(nèi)容弛车，第一句話是類似<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">這句話是告訴瀏覽器該文檔使用的HTML是哪個(gè)版本齐媒，瀏覽器會(huì)用對應(yīng)的方式來渲染，這就是過去IE等瀏覽器會(huì)有諸如

標(biāo)準(zhǔn)模式
怪異模式
準(zhǔn)標(biāo)準(zhǔn)模式
...

現(xiàn)代瀏覽器都采用HTML5的標(biāo)準(zhǔn)頭部<!DOCTYPE html><html lang="zh">就這一步省去了好多瀏覽器兼容的麻煩纷跛。當(dāng)然了喻括，互聯(lián)網(wǎng)產(chǎn)品目前Web前端在PC端的兼容性少很多了，我們可以很大膽的說不兼容IE8及以下贫奠，傳統(tǒng)的企業(yè)Web產(chǎn)品就不評論唬血，很多還在支持陳舊的IE6等，這類不與時(shí)俱進(jìn)的暫不討論唤崭。

然后遇到script標(biāo)簽會(huì)再次發(fā)起HTTP下載對應(yīng)的Javascript拷恨，遇到link會(huì)再次發(fā)起http請求css文件，最終將這三者水乳交融的產(chǎn)物呈現(xiàn)給大家就是非常nice的頁面谢肾。

這個(gè)過程可能涉及到瀏覽器重繪和重新渲染腕侄。感興趣戳這里

HTML核心

HTML核心就是各類TAG俗稱標(biāo)簽或者元素，HTML5的標(biāo)簽總覽

分類	標(biāo)簽
文檔類型宣告	<!DOCTYPE html>
根元素元素	html
META元素	head、 title冕杠、base微姊、link、meta拌汇、style
部件元素	body柒桑、section弊决、nav噪舀、article、aside飘诗、h1与倡、 h2、 h3昆稿、h4纺座、 h5、 h6溉潭、hgroup净响、header、footer喳瓣、address
分組內(nèi)容元素	p馋贤、hr、br畏陕、pre配乓、blockquote倚搬、ol拗盒、ul粱腻、li碌识、dl馒闷、dt穷躁、dd仇让、figure那槽、figcaption蜈膨、div
文本層次語義元素	a屿笼、em、strong丈挟、small刁卜、cite、q曙咽、dfn蛔趴、abbr、time例朱、code孝情、var鱼蝉、samp、kbd箫荡、sub魁亦、sups、i羔挡、b洁奈、mark、ruby绞灼、rt利术、rp、bdo低矮、span
編輯元素	ins印叁、del
嵌入內(nèi)容元素	img、iframe军掂、embed轮蜕、object、param蝗锥、video跃洛、audio、source玛追、canvas税课、map、area
表格元素	table痊剖、caption韩玩、colgroup、col陆馁、tbody找颓、thread、tfoot叮贩、tr击狮、td、th
表單元素	form益老、fieldset彪蓬、legend、label捺萌、button档冬、select、datalist、optgroup酷誓、option披坏、textarea、keygen盐数、output棒拂、progress、meter
互動(dòng)元素	details玫氢、summary帚屉、command、menu
腳本元素	script琐旁、noscript

參考文章

HTML很多新的標(biāo)簽以及標(biāo)簽屬性比如audio涮阔，vedio猜绣，nav灰殴，footer等元素都能極大的加快開發(fā)效率。
參考文章

HTML展現(xiàn)分類

HTML元素按照展現(xiàn)分為塊元素(block element)和內(nèi)聯(lián)元素(inline element)也叫行內(nèi)元素掰邢。當(dāng)然還有inline-block

塊級元素

一般是其他元素的容器牺陶，能容納其他塊元素和行內(nèi)元素，塊元素好比個(gè)四方塊辣之，里邊用來放其他元素掰伸，默認(rèn)情況下

主要特點(diǎn)

獨(dú)占瀏覽器一行
總是在新行上開始
高度、行高以及內(nèi)外邊距都是可控制的怀估。
寬度默認(rèn)100%狮鸭，除非設(shè)定寬度。
它可以容納內(nèi)聯(lián)元素和其他塊元素

常見的塊級元素有

div
p
h1~h6
hr
form
...

行內(nèi)元素

一般都是基于語義級(semantic)的基本元素多搀。內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素歧蕉，常見內(nèi)聯(lián)元素有a和span。

主要特點(diǎn)

和其他元素都在一行上
高康铭，行高及外邊距和內(nèi)邊距不可改變
寬度就是它的文字或圖片的寬度惯退，不可改變
內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素

元素類型可以通過display屬性指定。

inline-block

inline-block 的元素既具有 block 元素可以設(shè)置寬高的特性从藤，同時(shí)又具有 inline 元素默認(rèn)不換行的特性催跪。當(dāng)然不僅僅是這些特性，比如 inline-block 元素也可以設(shè)置 vertical-align 屬性夷野。

簡而言之：inline-block 后的元素就是一個(gè)格式化為行內(nèi)元素的塊容器( Block container )

inline-block前世今生

文檔流和浮動(dòng)

瀏覽器窗體自上而下分成一行行每行按照從左到右的順序排放懊蒸，這就是文檔流的排列形式。

如果不對元素做任何定位相關(guān)的樣式悯搔，非浮動(dòng)塊級元素會(huì)按照從上而下骑丸，行內(nèi)元素從左到右排列，很顯然我們需要去改變它們，這就需要利用浮動(dòng)或者定位
浮動(dòng)塊級元素則按規(guī)定浮在行的一端者娱。若當(dāng)前行容不下抡笼，則另起新行再浮動(dòng)。
內(nèi)聯(lián)元素也不會(huì)獨(dú)占一行黄鳍。幾乎所有元素(包括塊級推姻，內(nèi)聯(lián)和列表元素）均可生成子行，用于擺放子元素框沟。

有三種情況將使得元素脫離文檔流而存在

浮動(dòng)（IE中浮動(dòng)元素也存在于文檔流）
絕對定位
固定定位藏古。

浮動(dòng)元素不占任何正常文檔流空間，而浮動(dòng)元素的定位還是基于正常的文檔流忍燥，然后從文檔流中抽出并盡可能遠(yuǎn)的移動(dòng)至左側(cè)或者右側(cè)拧晕。文字內(nèi)容會(huì)圍繞在浮動(dòng)元素周圍。當(dāng)一個(gè)元素從正常文檔流中抽出后梅垄，仍然在文檔流中的其他元素將忽略該元素并填補(bǔ)他原先的空間厂捞。

基于文檔流，有以下定位模式

相對定位队丝，即相對于元素在文檔流中位置進(jìn)行偏移靡馁，但保留原占位。
絕對定位机久，即完全脫離文檔流臭墨，相對于position屬性非static值的最近父級元素進(jìn)行偏移。
固定定位膘盖，即完全脫離文檔流胧弛，相對于視區(qū)進(jìn)行偏移。

HTML和CSS以及Javascript的關(guān)系

HTML就是web頁面的骨架結(jié)構(gòu)侠畔，CSS層級表賦予其多彩的樣式结缚，Javascript賦予其豐富行為能力，讓其能動(dòng)起來践图。

CSS

CSS是什么

層疊樣式表（英語：Cascading Style Sheets掺冠，簡寫CSS），又稱串樣式列表码党、級聯(lián)樣式表德崭、串接樣式表、層疊樣式表揖盘、階層式樣式表眉厨，一種用來為結(jié)構(gòu)化文檔（如HTML文檔或XML應(yīng)用）添加樣式（字體、間距和顏色等）的計(jì)算機(jī)語言兽狭，由W3C定義和維護(hù)憾股。目前最新版本是CSS2.1鹿蜀，為W3C的推薦標(biāo)準(zhǔn)。CSS3現(xiàn)在已被大部分現(xiàn)代瀏覽器支持服球，而下一版的CSS4仍在開發(fā)過程中

來自維基百科

CSS核心

CSS核心由多組規(guī)則組成茴恰，每組規(guī)則由selector，property斩熊，value即選擇器往枣、屬性、值三者組成如：

p.tips { // 選擇器
    font-size: 12px; // property: value
    font-family: sans-serif;
}

這句話的意思就是所有class為tips的p元素粉渠，即<p class="tips">Hello</p>分冈，應(yīng)用字體為sans-serif，字體大小為12px霸株。

其中class屬性是html元素應(yīng)用css樣式鏈接屬性雕沉。

selector

CSS的選擇器類型非常多，共分為以下幾類

基本選擇器

ID選擇器
類選擇器
元素類型選擇器
萬用選擇器
屬性選擇器

其中屬性選擇器又有

代碼	備注
`[attribute]`	元素有`attribute`的屬性
`[attribute="value"`]	屬性`attribute`里是`value`
`[attribute~="value"`]	屬性`attribute`里使用空白分開的字符串里其中一個(gè)是`value`
`[attribute	="value"]`	屬性`attribute`里是`value`或者以`value-`開頭的字符串
`[attribute^="value"]`	屬性`attribute`里最前的是`value`
`[attribute$="value"]`	屬性`attribute`里最后的是`value`
`[attribute*="value"]`	屬性attribute里有value出現(xiàn)過至少一次

基本選擇器

#btnSave {
    font-size: 14px;
    color: #ff8a01;
}
.btnSave {
    font-size: 14px;
}
button {
    font-size: 14px;
}
* {
    font-size: 12px;
}
a[class="button"] {
    color: #ff8a01;
}

偽元素選擇器

偽元素可以選擇不在Document結(jié)構(gòu)中的信息去件。

:after或者::after 元素之后［常用］
:before或者::before 元素之前［常用］
:first-letter 或 ::first-letter［不常用］
:first-line 或 ::first-line［不常用］

例如

p::after { 
    content:" ";
    background-color:yellow;
    color:red;
}

偽類選擇器

虛擬類選擇器指的是為不同的狀態(tài)坡椒、性質(zhì)的元素。

主要有以下幾類

:link 超鏈接未被訪問［常用］
:visited 超鏈接被訪問過［常用］
:hover 鼠標(biāo)（鼠標(biāo)）在元素上面［常用］
:active 鼠標(biāo)（鼠標(biāo)）在元素上按著［常用］
:focus 焦點(diǎn)在元素上［常用］
:target 元素被URL標(biāo)記（CSS 3新增的類）［不常用］
:lang 向帶有指定lang屬性的元素添加樣式箫攀。［不常用］

例如

a:hover {
    backgroud-color: #ff8a01;
}

組合選擇器

A > B 選擇A下一層的元素B
A ~ B 選擇與A同父層的元素B
A + B 選擇與A相鄰的元素B（不能被任何元素相隔）
A B 包含選擇符

還有常見的逗號, 逗號作用是將多個(gè)選擇器應(yīng)用同一組屬性和值肠牲，

比如

p, a, span {
    font-size: 12px;
}

新的CSS3新支持的選擇器可以戳這里

CSS的選擇器優(yōu)先級

當(dāng)同一元素匹配多個(gè)選擇器的時(shí)候，那么該元素應(yīng)該應(yīng)用哪一個(gè)樣式呢靴跛？優(yōu)先級如下

通用選擇器（*）
元素(類型)選擇器
類選擇器
屬性選擇器
偽類
ID 選擇器
內(nèi)聯(lián)樣式
!important 規(guī)則例外

來自MDN

盒子模型

20094219263340677801

20094219263343777802

區(qū)別就在于計(jì)算width和height的時(shí)候是否加上了padding和border.

CSS支持的屬性

CSS支持的屬性很多，包括背景渡嚣、顏色梢睛、字體、定位识椰、動(dòng)畫等屬性

詳情參考

Javascript

1995年出生的Javascript最初只用在瀏覽器上做簡單的表單驗(yàn)證绝葡，能在客戶端把不符合規(guī)范的邏輯去掉，節(jié)省網(wǎng)絡(luò)請求和用戶等待時(shí)間一下子就廣為流行腹鹉，與此同時(shí)微軟推出JScript藏畅，當(dāng)時(shí)的管理者希望這門語言跟同年出來的的Java一樣火，所以取名為Javascript功咒，直到今日還真不負(fù)所望愉阎，幾乎跟Java一樣火，甚至有過之力奋。

Javascript到底是什么

盡管對這門語言我有著比較深入的琢磨榜旦，可想了好久還是不知道該如何向未接觸過它的人來介紹它，想了想還是分兩種人盡量來解釋清楚

無編程經(jīng)驗(yàn)
1. 腳本語言景殷，可以運(yùn)行在服務(wù)器端和瀏覽器端溅呢。
2. 能做網(wǎng)頁動(dòng)畫效果澡屡。
有編程經(jīng)驗(yàn)
1. 類C語言
2. 弱類型
3. 面向?qū)ο?/li>
4. 無所不能

Javascript語言特色

純粹的面向?qū)ο?/h4>

javascript一切皆對象，哪怕

console.log(true.toString()); // true
console.log("2".length); // 1

你可以直接創(chuàng)建一個(gè)對象

var obj = {
    name: "liujiangbei",
    sayHi: function(name) {
        console.log("Hello, " + name);
    }
}

值得一讀

弱類型

console.log([] == ![]); // true

[]==![]相當(dāng)于[]==false(沒有異議了吧因?yàn)?[]就是false)

[]==false又是怎么轉(zhuǎn)化的呢咐旧，對于Object類型先轉(zhuǎn)化成基礎(chǔ)類型Number 0
0==false又將false轉(zhuǎn)化為Number也是為0

概括就是

對于基本類型Boolean驶鹉，Number，String铣墨，三者之間做比較時(shí)梁厉，總是向 Number進(jìn)行類型轉(zhuǎn)換，然后再比較踏兜；
如果有Object词顾，那么將Object轉(zhuǎn)化成這三種基本類型（PS：到底轉(zhuǎn)換成哪一種呢？我猜測會(huì)轉(zhuǎn)化成Number）碱妆，再進(jìn)行基本類型比較肉盹；
對于null和undefined，只有 x疹尾，y分別是它們時(shí)才相同上忍，其他都為false。

對于類型相同那么==操作符就會(huì)直接比較值纳本，不會(huì)再進(jìn)行轉(zhuǎn)換了窍蓝！
建議總是使用===而不是用==

函數(shù)作用域

var testFn = function() {
  var abc = "abc";
  if (abc) {
    var str = "hello";
  }
  console.log(str);
}

testFn();

運(yùn)行完輸出hello。

說明Javascript是函數(shù)級作用域名繁成，跟php一樣吓笙，而靜態(tài)語言如Java，Golang巾腕，C面睛，C++都是塊級作用域。

閉包

/*
 * 閉包：是指有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的【函數(shù)Ｗ鸢帷Ｈ！】
 * 創(chuàng)建閉包的常見方式就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)（通常是匿名函數(shù)）
 */
 function createComparisonFun(propertyName){
    return function(object1,object2){
        //這兩行代碼是匿名函數(shù)的內(nèi)部代碼佛寿，卻訪問了外部函數(shù)中的變量propertyName
        //即使這個(gè)內(nèi)部函數(shù)被返回了幌墓，而且是在其他地方被調(diào)用了，但它仍然可以訪問變量propertyName
        //之所以還能訪問這個(gè)變量冀泻，是因?yàn)閮?nèi)部函數(shù)的作用域鏈包含外部函數(shù)如createComparisonFun()的作用域鏈
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];
        if(value1<value2){
            return -1;
        }else if(value1>value2){
            return 1;
        }else{
            return 0;
        }
    };
};

基于prototype繼承

constructor-proto-chain

原型和原型繼承

多變的上下文對象

上下文this是初階javascript程序員最容易混淆的地方常侣，總結(jié)下來

方法調(diào)用模式

/**
 * 方法調(diào)用Function
 * 1、當(dāng)一個(gè)function被保存為一個(gè)對象的屬性時(shí)腔长，我們稱為method
 * 2袭祟、this綁定到該對象
 */
var obj = {
    val: 0,
    getVal: function() {
        console.log(this); //{ value: 0, getVal: [Function] }，充分體現(xiàn)this指的就是obj這個(gè)對象
        console.log(this.toString()); //[object Object]
        return this.val;
    }
};
console.log(obj.getVal());
// prototype只能用在類型上＠谈健＝砣椤您没！不能用于對象上！５ò怼氨鹏！

函數(shù)調(diào)用模式

/**
 * 函數(shù)調(diào)用模式
 * 1、當(dāng)一個(gè)函數(shù)并非一個(gè)對象的屬性時(shí)压状，那么就是當(dāng)一個(gè)函數(shù)來調(diào)用的
 * 2仆抵、this指向全局對象（大膽猜想這種方案是錯(cuò)的）
 * 3、解決此方法的方案就是定義一個(gè)變量存儲(chǔ)this對象
 */
var add = function(a, b) {
    console.log(this.toString()); //[object global]全局變量啊
    return a + b;
};
console.log(add(2, 4));

解決函數(shù)調(diào)用模式中this會(huì)指向全局變量的方法

/**
 * 解決函數(shù)調(diào)用模式中this會(huì)指向全局變量的方法
 */
var obj = {
    val: 4,
    getVal: function() {
        return this.val;
    }
};
obj.double = function() { //方法模式种冬，double是obj對象的方法
    var that = this; //this指的就是obj對象
    var helper = function() { //函數(shù)模式
        that.val = that.val * 2;
    };
    helper();
};
obj.double(); //方法模式調(diào)用double
console.log(obj.val); //

構(gòu)造器調(diào)用模式

/**
 * 構(gòu)造器調(diào)用模式
 * 1镣丑、如果一個(gè)函數(shù)前面帶上一個(gè)new來調(diào)用，那么就是構(gòu)造器調(diào)用模式
 */
var Person = function(name) {
    console.log(this.constructor);
    this.name = name;
};
Person.prototype.getName = function() {
    return this.name;
};
var person = new Person('ALLEN');
console.log(person.getName());

apply/call調(diào)用模式

/**
 * Apply調(diào)用模式(apply/call)
 * 1娱两、apply讓我們構(gòu)建一個(gè)參數(shù)數(shù)組傳遞給調(diào)用函數(shù)莺匠，也允許我們選擇this的值
 */
var func = function() {
    console.log(Object.prototype.toString.apply(this));
    console.log(this.value); //this本來指向全局變量，因?yàn)槭呛瘮?shù)調(diào)用模式
};

var obj1 = {
    value: 'This is the first object\'s value'
};
var obj2 = {
    value: 'This is the second object\'s value'
};
func.apply(obj1); //This is the first object's value
func.apply(obj2); //This is the second object's value

Function也是普通類型

Javascript中function也是一個(gè)普通數(shù)據(jù)類型十兢，支持

作為參數(shù)傳遞給另一個(gè)函數(shù)趣竣。
作為函數(shù)的返回值。

參數(shù)傳遞方式

Javascript中參數(shù)的傳遞是值傳遞旱物。

對于基本類型string, boolean, number, undefied, null一眼就看出是安置傳遞

function test(num) {
    num += 10;
    return num;
}

var num = 10;
console.log(num); //10 外部變量并未受到影響
console.log(test(num)); //20

而對于object, array, function

var testFn = function(abc) {

  if (typeof abc === "object") {
    abc.name = "liujiangbei";
    abc.age = 26;
  }

}

var obj = {
  name: "liujb",
  age: 25
}

testFn(obj);
console.log(obj) // { name: 'liujiangbei', age: 26 }

乍一看遥缕，怎么變了？難道是引用傳遞宵呛？請看下邊

function setName(obj) {
    obj.name = "James";
    obj = new Object();
    obj.name = "Leon"
}
var person = new Object();
person.name = "Jeremy";
setName(person);
console.log(person.name);//James

以上代碼輸出的是James单匣，如果是按引用傳遞，那么以上代碼輸出的是Leon烤蜕。實(shí)際上封孙，當(dāng)執(zhí)行obj.name = "James"的時(shí)候，引用所指向的對象的值已經(jīng)發(fā)生了改變讽营，當(dāng)在對obj進(jìn)行覆蓋的時(shí)候，obj的值是一個(gè)指向局部對象的引用泡徙，而這個(gè)引用無法對外部的對象產(chǎn)生影響橱鹏，并且此對象會(huì)在函數(shù)執(zhí)行結(jié)束之后銷毀。

通俗地理解堪藐，傳遞不是引用莉兰，而是引用的副本。

Javascript最佳實(shí)踐

最佳實(shí)踐

一個(gè)好漢三個(gè)幫

HTML是頁面的骨架礁竞，CSS賦予頁面姿彩糖荒，JS給頁面注入靈魂。但是她們具體是如何協(xié)作的呢模捂？比如最常見的功能捶朵，點(diǎn)擊加載更多蜘矢。

要實(shí)現(xiàn)該功能的主要步驟有

JS獲取用戶點(diǎn)擊事件
夾雜著動(dòng)畫效果
JS發(fā)送http請求到對應(yīng)的server端
JS接收HTTP請求返回的數(shù)據(jù)（json、txt综看、xml等格式）
將數(shù)據(jù)展現(xiàn)
...

那么問題來了

JS如何獲取用戶點(diǎn)擊事件品腹？

用戶點(diǎn)擊的是一個(gè)按鈕，翻譯過來就是HTML元素红碑，JS是如何跟HTML他的大哥溝通的呢舞吭？這里要接住它們共同的溫床(瀏覽器)提供的一個(gè)叫做DOM的東西

什么是DOM？

Document Object Model的歷史可以追溯至1990年代后期微軟與Netscape的“瀏覽器大戰(zhàn)”（browser wars）析珊，雙方為了在JavaScript與JScript一決生死羡鸥，于是大規(guī)模的賦予瀏覽器強(qiáng)大的功能。微軟在網(wǎng)頁技術(shù)上加入了不少專屬事物忠寻，既有VBScript惧浴、ActiveX、以及微軟自家的DHTML格式等锡溯，使不少網(wǎng)頁使用非微軟平臺及瀏覽器無法正常顯示赶舆。DOM即是當(dāng)時(shí)蘊(yùn)釀出來的杰作。

維基百科

The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods. Nodes can also have event handlers attached to them, and once that event is triggered the event handlers get executed. Essentially, it connects web pages to scripts or programming languages.

Document Object Model (DOM)

通俗理解祭饭，就是瀏覽器給JS提供了獲取HTML元素的功能芜茵，獲取到的DOM元素跟HTML元素能"對應(yīng)"起來
再通俗一點(diǎn)，DOM元素就是HTML元素（雖不對倡蝙，但無妨）
HTML DOM定義了所有 HTML元素的對象和屬性九串，以及訪問它們的方法。

DOM節(jié)點(diǎn)包括XML DOM寺鸥、HTML DOM猪钮、核心DOM

DOM樹如下

ct_htmltree

DOM具備的屬性和能力

HTML DOM節(jié)點(diǎn)
HTML DOM方法
 HTML DOM訪問
 HTML DOM Event

其中左邊菜單的內(nèi)容都需要看一看！

JS獲取按鈕并提前給按鈕綁定單擊事件的代碼如下

var btnLoadMore = document.getElementById("btnLoadMore");

btnLoadMore.addEventListen("click", function(e) {
    // do somethings..
});

JS通過獲取HTML DOM元素胆建，可以對HTML DOM元素進(jìn)行屬性的訪問和更改（CSS樣式只是HTML元素的屬性之一）烤低，同時(shí)還可以對元素本身作各種更改。還可以提前監(jiān)聽某DOM元素的各類事件笆载，如

click
dbclick
mouseover
...

JS如何發(fā)起HTTP請求并處理響應(yīng)數(shù)據(jù)扑馁？

答案就是傳說中的Ajax。

XMLHttpRequest對象

XMLHTTPRequest是一組API函數(shù)集凉驻，可被JavaScript腻要、JScript、VBScript以及其它web瀏覽器內(nèi)嵌的腳本語言調(diào)用涝登，通過HTTP在瀏覽器和web服務(wù)器之間收發(fā)XML或其它數(shù)據(jù)雄家。XMLHTTP最大的好處在于可以動(dòng)態(tài)地更新網(wǎng)頁，它無需重新從服務(wù)器讀取整個(gè)網(wǎng)頁胀滚，也不需要安裝額外的插件趟济。該技術(shù)被許多網(wǎng)站使用乱投，以實(shí)現(xiàn)快速響應(yīng)的動(dòng)態(tài)網(wǎng)頁應(yīng)用。例如：Google的Gmail服務(wù)咙好、Google Suggest動(dòng)態(tài)查找界面以及Google Map地理信息服務(wù)篡腌。

特意查了一下，以前都只知道用這個(gè)對象勾效，但是沒有分清這到底是javascript對象還是瀏覽器接口嘹悼，現(xiàn)在看來很清晰了，這就是一個(gè)瀏覽器接口层宫，用于跟后臺交換數(shù)據(jù)杨伙。

發(fā)起請求和處理請求數(shù)據(jù)

var xhr = createXHR();
if (!xhr) {
 return "create XMLHttpRequest failed.";
}
xhr.open(obj.method, obj.url, true); //true表示異步

// 監(jiān)聽statechange事件
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
   if (xhr.status === 200) {
     obj.succFn(xhr.responseText);
   } else {
     obj.failFn(xhr.responseText);
   }
 } else if (xhr.readyState === 3) {} else {}
};

// send request
if (obj.method.toUpperCase() === 'GET') {
 xhr.send(null);
} else if (method.toUpperCase() === 'POST') {
 var body = objToBody(obj.data);
 xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 xhr.send(body);
}

XMLHttpRequest狀態(tài)值

0: 請求未初始化 create
1: 服務(wù)器連接已建立 open
2: 請求已接收 send
3: 請求處理中比如數(shù)據(jù)比較大，這個(gè)時(shí)候就可以開始提示用戶
4: 請求已完成萌腿，且響應(yīng)已就緒

Ajax入門推薦

常見的動(dòng)畫又是如何實(shí)現(xiàn)的?

動(dòng)畫實(shí)現(xiàn)的本質(zhì)在于不斷的變化元素的屬性限匣，1000ms內(nèi)變化60次肉眼基本就看不出卡頓，大概一幀16.6ms

基于此前端動(dòng)畫的實(shí)質(zhì)都是通過

Javascript本身或
CSS3本身帶的屬性去

更改DOM元素的屬性來達(dá)到動(dòng)畫的目的毁菱。當(dāng)然了還有一些動(dòng)畫是通過動(dòng)態(tài)的gif圖實(shí)現(xiàn)的米死。

通過JS去改變按鈕的顏色

var btnMore = document.getElementById('btnMore');
var colorNum = 0;

setInterval(function(){
    btnMore.style.backgroundColor = "#ff8a0" + colorNum;
}, 16);

這部分代碼只是偽代碼

或者還可以把setInterval改成setTimeout里邊嵌套setTimeout 兩者區(qū)別

通過CSS3去改變屬性

div {
    width: 100px;
    height: 100px;
    background: yellow;
    transition: width 2s;
    -moz-transition: width 2s; /* Firefox 4 */
    -webkit-transition: width 2s; /* Safari and Chrome */
    -o-transition: width 2s; /* Opera */
}

div:hover {
    width: 300px;
}

該樣式就是當(dāng)鼠標(biāo)放到div上的時(shí)候，在兩秒內(nèi)寬度增長到300px

建議使用CSS3的動(dòng)畫屬性來實(shí)現(xiàn)動(dòng)畫贮庞，因?yàn)镃SS3本身對GPU加速做了很多優(yōu)化峦筒，比原生JS使用最質(zhì)樸的方式實(shí)現(xiàn)效果要佳一些。當(dāng)然這只是相對而言窗慎。

如何實(shí)現(xiàn)跟跟瀏覽器交互呢物喷？

比如做完某某操作之后要關(guān)閉瀏覽器或者實(shí)現(xiàn)后退功能呢？這個(gè)時(shí)候又該如何遮斥？

BOM對象隆重登場

BOM是browser object model的縮寫峦失，簡稱瀏覽器對象模型
BOM提供了獨(dú)立于內(nèi)容而與瀏覽器窗口進(jìn)行交互的對象
由于BOM主要用于管理窗口與窗口之間的通訊，因此其核心對象是window
BOM由一系列相關(guān)的對象構(gòu)成术吗，并且每個(gè)對象都提供了很多方法與屬性
BOM缺乏標(biāo)準(zhǔn)尉辑，JavaScript語法的標(biāo)準(zhǔn)化組織是ECMA，DOM的標(biāo)準(zhǔn)化組織是W3C
BOM最初是Netscape瀏覽器標(biāo)準(zhǔn)的一部分

通俗理解就是提供JS訪問瀏覽器對象的能力较屿，跟XMLHttpRequest類似材蹬。

browser_objects

其中

frames就是常見的iframe嵌套別的網(wǎng)頁的
history有返回上一頁功能
location獲得網(wǎng)頁URL
navigator訪問者瀏覽器信息
screen屏幕相關(guān)信息

H5和CSS3粉墨登場

再來簡單的講講如日中天的HTML5和CSS3吝镣，這兩個(gè)東西出來后整個(gè)前端界就注入了新鮮的血液。

CSS3

CSS3的核心在我的理解中就是提供了

多樣化的css選擇器昆庇，代碼編寫起來更方便了末贾。
支持動(dòng)畫的能力

說起來雖然容易，但是其實(shí)還是很實(shí)用整吆，也不是那么容易掌握的拱撵。

HTML5

HTML5提供的核心功能非常實(shí)用辉川，主要有

新的語義化的標(biāo)簽和屬性并且淘汰過時(shí)和冗余的元素和屬性
Geolocation
localStorage
FileApi
Canvas
離線存儲(chǔ)Mainfest
本地?cái)?shù)據(jù)庫
多媒體av
XMLHttpRequest2
...

Can-I-use-html5-css3

Geolocation

就是網(wǎng)頁定位，通過Geolocation提供的功能拴测，使得H5頁面可以跟Native功能一樣的定位乓旗。

/**
 * H5定位
 */
geo.h5 = function(opt) {
   if (!opt) return;
   var timeObj = opt.timeout || {};
   
   //H5定位成功回調(diào)函數(shù)
   var succ = function(pos) {
       var d = {
           lat: pos.coords.latitude,
           lng: pos.coords.longitude,
           maptype: opt.maptype || "wgs"
       };
       if (isFunc(opt.success)) opt.success(d);
   };

   //h5定位失敗回調(diào)--失敗包括超時(shí)、或者用戶不允許
   var error = function(err) {
       var st = "";
       switch (err.code) {
           case err.TIMEOUT:
               st = "timeout";
               if (isFunc(timeObj.CB)) timeObj.CB(geoFailObj.timeout);
               break;
           case err.POSITION_UNAVAILABLE:
               if (isFunc(opt.error)) opt.error(geoFailObj.position_unavailable);
               st = "position_unavailable";
               break;
           case err.PERMISSION_DENIED:
               if (isFunc(opt.denied)) opt.denied(geoFailObj.permission_denied);
               st = 'permission_denied';
               break;
           case err.UNKNOWN_ERROR:
               if (isFunc(opt.error)) opt.error(geoFailObj.unknow_error);
               st = "unknow_error";
               break;
           default:
               break;
       };
   };

   if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(succ, error, {
           enableHighAccuracy: true,
           timeout: timeObj.cnt || 5000,
           maximumAge: 2000
       });
   }
};

公司的webapp第一版就是我做的集索，當(dāng)時(shí)用的就是H5定位屿愚，微信的定位接口開放還在這之后。

LocalStorage

LocalStorage經(jīng)常會(huì)使用务荆，說白了就是在本地存儲(chǔ)一些字符串妆距，用于在不同的網(wǎng)頁之間共享數(shù)據(jù)，相比cookie沒有時(shí)間限制函匕，大小限制在每個(gè)域4M左右娱据，完全溝通。另外cookies會(huì)在每次發(fā)出HTTP請求的時(shí)候帶在header上盅惜，不僅影響性能中剩，嚴(yán)重的有些server端會(huì)限制cookie的大小。LocalStorage簡直就是救命稻草

具體使用

Canvas

動(dòng)畫工程師和網(wǎng)頁游戲工程師的救命稻草抒寂。能夠通過JS畫出流暢和高清的動(dòng)畫效果结啼，不再需要去學(xué)習(xí)陳舊的flash或者還不成熟的webgl

Avdio和Vedio

一個(gè)在網(wǎng)頁上放視頻一個(gè)放音樂，目前市面上吊炸天的H5頁面哪個(gè)不得來點(diǎn)音樂和視頻蓬推。

以上幾個(gè)H5新功能是實(shí)際產(chǎn)品中運(yùn)用過并且表現(xiàn)良好妆棒。

開發(fā)工具

Sublime text 3

Sublime text 是一款輕量級的全平臺文本編輯器，突出的功能就是支持海量插件

官方網(wǎng)站

Sublime Plugins

安裝Package Control Sublime的包管理器［必裝］
HTML-CSS-JS Prettify 代碼格式化工具［必裝］
Trimmer 移除代碼中的空格［必裝］

Emmet html代碼利器沸伏，比如在Mac輸入html:5然后按ctrl+E就會(huì)出現(xiàn)［必裝］

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

JSLint 靜態(tài)JS代碼檢測［必裝］
CssLint CSS樣式檢測［必裝］
MarkdownEditing Markdown編輯工具
MarkdownPreview Markdown文檔預(yù)覽工具
CSS3 寫CSS3屬性時(shí)提示功能
DocBlockr 添加XML形式的備注信息

好文推薦

Sublime 快捷鍵

Command+D 選詞
Command+L 選中一行
Command+Shift+P 進(jìn)入控制中心
Command+P 搜索頁面和頁面中的方法
...

其他編輯器如

Atom
Webstrom
Visual studio Code
VIM/Emacs流請自行查詢

都是非常優(yōu)秀的前端編輯器和IDE

Chrome Devtools

最強(qiáng)大的網(wǎng)頁調(diào)試工具 Chrome Developer Tools糕珊，諸君一定要好好琢磨

同時(shí)Chrome還支持移動(dòng)端調(diào)試，有很多模擬器毅糟，包括屏幕類型红选，等。

調(diào)試和調(diào)試工具

Charles

主界面

主要設(shè)置和注意項(xiàng)目

保證手機(jī)和電腦在同一局域網(wǎng)內(nèi)姆另。
設(shè)置Charles的代理端口為8888或者其他都可以喇肋。
查看本機(jī)IP地址ifconfig en0找到IP地址

在iOS手機(jī)的設(shè)置界面如

1.pi

設(shè)置完了之后點(diǎn)左上角的WiFi返回，然后Charles會(huì)彈出是否允許你的手機(jī)IP訪問的窗口迹辐，然后點(diǎn)擊允許蝶防，這樣Charles就能抓包了。

詳細(xì)設(shè)置參考

支持的主要功能

抓包 -- 看HTTP請求的明細(xì)明吩，如果是HTTPS需要導(dǎo)入密鑰也是可以的间学，自行折騰。
DNS反向解析 -- 支持從特定域名出發(fā)，將請求跳轉(zhuǎn)到特定IP的機(jī)器低葫，Pre上線使用以及當(dāng)時(shí)微信支付使用详羡。
代理本地文件 -- 支持某個(gè)請求響應(yīng)到本地文件。
Charles是抓包工具嘿悬，不支持像Chrome那樣子實(shí)時(shí)選中元素实柠。

Fiddler

Filder設(shè)置和Charles有類似的地方，請點(diǎn)這里

Mac電腦和iPhone手機(jī)

iPhone手機(jī)一部
Mac電腦一臺

請看神圖

設(shè)置Safari的Develop屬性可見善涨，然后用USB連接線鏈接iPhone手機(jī)斗锭，然后在手機(jī)上打開你的站點(diǎn)泼差，然后點(diǎn)擊一下Develop->iPhone6->www.baidu.com就會(huì)出現(xiàn)Safari的開發(fā)者工具面板

而此時(shí)断序，你的iPhone上的頁面就變成了

2.pi

就像你用Chrome瀏覽器調(diào)試PC端網(wǎng)頁一樣纺腊。

神器weire

有人說了我沒有Mac和iPhone怎么辦，不用著急娶靡，我已經(jīng)為你準(zhǔn)備好一切牧牢，請戳這里

工程和性能

洋洋灑灑寫了好大一篇，為了本文能夠首尾呼應(yīng)姿锭，讓我們還是專注到Web最核心的兩個(gè)問題上

工程化
產(chǎn)品性能

工程化

前端開發(fā)的工程化要解決的幾個(gè)問題

開發(fā)階段前后端分離

目前國內(nèi)在前后端協(xié)作上主要的幾類方式

前端工程師切好頁面塔鳍，交給所謂的后端工程師（其實(shí)是業(yè)務(wù)邏輯處理層并非后端服務(wù)）然后這些工程師將HTML標(biāo)簽和樣式要么換成對應(yīng)的web框架所需要的模版，要么就直接輸出呻此，再結(jié)合html中的樣式和js達(dá)到想要的效果轮纫。

在整個(gè)頁面出來之前需要雙方不停的溝通協(xié)作，才能完成焚鲜。
前后端工程師完全通過resetful接口形式進(jìn)行對接掌唾，前端工程師訪問靜態(tài)頁面，然后通過ajax去請求resetful接口解析json忿磅，然后展現(xiàn)看起來這種方式前后端分離做得比較干凈糯彬，但是這種方式弊端也不少

會(huì)無端增加比較多的請求，本來原來有很多數(shù)據(jù)可以直接輸出到html頁面上葱她，或者使用模版而現(xiàn)在需要通過http請求后再次處理撩扒。
前后端工程師在完成靜態(tài)部分開發(fā)工作后，將page放到web項(xiàng)目的views下吨些，第一頁數(shù)據(jù)通過業(yè)務(wù)邏輯處理層將數(shù)據(jù)通過模版形式輸出到頁面搓谆，而后在頁面中的操作如果有跳頁面的話過程如第一頁，否則都是通過ajax來交互豪墅。

雖然這種方式耦合還是沒完全解開泉手。溝通成本上較第一種少性能上較第二種好，“后端工程師”可以專注寫他們的邏輯偶器，多數(shù)交互都是通過resetful接口進(jìn)行螃诅，少部分需要加載模版和頁面的請求另外溝通一下啡氢，需要組織哪些數(shù)據(jù)需要哪些邏輯溝通成本不大，前端工程師也可以focus在前端工作上术裸。性能也不知發(fā)起很多無謂的請求。屬于在目前的方式下比較理性的方式亭枷。
在第三種的基礎(chǔ)上袭艺，將業(yè)務(wù)邏輯處理成這部分的工作都交給“前端工程師”來做，這部分工程師需要掌握Nodejs開發(fā)叨粘，HTML5+CSS3+Javascript常規(guī)前端開發(fā)猾编，可以簡單地理解為全棧工程師，這樣前端（主要是指業(yè)務(wù)邏輯層面目前的API）可以實(shí)現(xiàn)大部分功能升敲，只需要跟真正的后端服務(wù)去做通信即可答倡。

這是最理想的前后端分離方式，目前阿里巴巴有技術(shù)團(tuán)隊(duì)在嘗試驴党，溝通成本低瘪撇，開發(fā)統(tǒng)一，都是Javascript為主港庄，唯一的缺陷就是這類人才太少倔既。

綜合看來，目前第三種方案是比較常規(guī)的方案鹏氧。

前端分離

前面講到前后端分離渤涌，其實(shí)就是在想各種辦法去提升開發(fā)效率，而前端本身的一些分離原則則主要是為了后續(xù)的維護(hù)性著想把还。

表現(xiàn)和結(jié)構(gòu)分離

意思就是不要再html中使用內(nèi)嵌樣式<div style="backgroud-color: #ff8a01"></div>這是一個(gè)bad case实蓬，因?yàn)檫@會(huì)給后續(xù)維護(hù)帶來不便，為什么呢吊履？因?yàn)榧偃邕@是一個(gè)很多地方都用到的樣式安皱，那么后續(xù)如果相統(tǒng)一變更一些樣式的時(shí)候需要單獨(dú)找到這一行，而且在html中夾雜css代碼的整體美感也會(huì)打折扣率翅。

行為和表現(xiàn)分離

盡量不要用Javascript去控制元素的樣式练俐，這會(huì)導(dǎo)致用戶在修改的時(shí)候，通過樣式表無法找到對應(yīng)的屬性冕臭，這樣的話就需要去人肉review你的Javascript代碼來更改腺晾。

CSS的編程

傳統(tǒng)的如果頁面有一個(gè)統(tǒng)一的桔色按鈕，我們都是通過class來控制辜贵，讓所有的地方的button都是用這一種樣式從而來統(tǒng)一控制樣式悯蝉，每當(dāng)這個(gè)時(shí)候你都在想這需要一個(gè)變量啊，很遺憾CSS本身并不提供這種編程能力托慨。

那么

sass
less

邊應(yīng)運(yùn)而生了鼻由，他讓css代碼的維護(hù)性也變成可能。

Javascript包管理

傳統(tǒng)的Javascript并沒有包管理的概念，所有的js文件都是放在服務(wù)器上某個(gè)文件夾蕉世，然后通過人肉引入到html之后蔼紧，所以的依賴其實(shí)是認(rèn)為在維護(hù)。

bower
npm
requirejs
seajs

等包管理器以及模塊化管理工具都出現(xiàn)了狠轻，以及AMD和CMD規(guī)范都出來了奸例。

前端構(gòu)建

前端構(gòu)建的工作主要包括

壓縮代碼
1. css+js+html代碼壓縮
2. 圖片壓縮
3. 字體壓縮
代碼編譯如less，sass之類的或者typescript＋coffeescript
合并代碼
環(huán)境替換

gulp基于流式的構(gòu)建工具向楼，構(gòu)建過程中支持效率快查吊，同時(shí)
grunt老牌的構(gòu)建工具，
fis百度fex團(tuán)隊(duì)出品湖蜕，文檔比較齊全且是中文逻卖，國內(nèi)很多人在使用。

推薦使用gulp昭抒，本人寫的對static項(xiàng)目進(jìn)行的構(gòu)建庫static-gulp评也，配對的還有對web項(xiàng)目進(jìn)行的views-gulp 這兩個(gè)項(xiàng)目目前可用。

產(chǎn)品性能

web產(chǎn)品的性能集中體現(xiàn)在三個(gè)方面

網(wǎng)絡(luò)開銷方面
瀏覽器渲染DOM
代碼執(zhí)行效率

傳統(tǒng)前端優(yōu)化大部分的工作還是集中在網(wǎng)絡(luò)開銷上邊戈鲁，比如 Yahoo 第一條規(guī)則就是減少網(wǎng)絡(luò)請求仇参。而后起之秀們?nèi)?code>Reactjs，Angularjs2婆殿，WebComponents等都加入了虛擬DOM的概念诈乒，試圖讓W(xué)ebapp具備媲美原生native應(yīng)用的體驗(yàn)。而代碼執(zhí)行效率方面有大量的最佳實(shí)踐婆芦，無時(shí)無刻不在進(jìn)行中怕磨，但是這個(gè)方面除非前人犯錯(cuò)，否則對一個(gè)產(chǎn)品很難一下子明顯優(yōu)化消约，另一方面硬件設(shè)備在不斷變好肠鲫。

根據(jù)當(dāng)年的Yahoo性能優(yōu)化黃金法則

網(wǎng)絡(luò)方面

減少請求個(gè)數(shù)

代碼合并
圖片sprite
字體合并
icon少用圖片，多用矢量圖組合字體

減少請求過程中傳輸?shù)?/h4>

代碼壓縮

圖片壓縮

字體壓縮

啟用gzip

減少cookie大小

提升響應(yīng)速度

使用CDN
添加expire
添加Etag
Ajax緩存
Ajax用GET

請求策略

組件預(yù)加載（提前加載）
延遲加載（純粹的懶加載或粮，條件加載）

在網(wǎng)頁全部加在之前导饲，把圖片等資源通過指定src或者backgroud或者<img/>
這兩個(gè)策略在做SPA的時(shí)候經(jīng)常用到。

網(wǎng)絡(luò)方面還有諸如避免404氯材，減少DNS查詢渣锦，瀏覽器HTTP請求并發(fā)限制等

內(nèi)容和代碼經(jīng)驗(yàn)方面

減少DOM元素?cái)?shù)量
樣式表放頁面頂部
JS放頁面底部
少用濾鏡和陰影毛玻璃等效果
保證所有組件都小于25K
不要使用html縮放圖片

Yahoo
Webapp優(yōu)化
 優(yōu)化篇

體驗(yàn)方面

使用touch事件
觸碰區(qū)域盡量足夠大
盡量使用CSS3動(dòng)畫
使用GPU加速
...

代碼最佳實(shí)踐

http://coderlmn.github.io/code-standards/
https://yuguo.us/weblog/15-best-javascript-practice/
https://leohxj.gitbooks.io/front-end-database/content/preference/javascript-best-practise.html

天下武功唯快不破

yeoman
看這里看這里

寫在最后

洋洋灑灑寫了好幾千字，一時(shí)間竟不知道該說點(diǎn)啥了冗尤，前端是一個(gè)涉及面非常廣的工種听盖，不像后端程序環(huán)境運(yùn)行在比較統(tǒng)一的*nix系統(tǒng)胀溺，專注到項(xiàng)目本身的工程、性能皆看、可維護(hù)等方面即可仓坞。

而前端不僅僅程序執(zhí)行環(huán)境多樣化，工程悬蔽、性能同樣是要抓扯躺，更多的還要關(guān)注交互、展示等體驗(yàn)甚至要求對美感都有要求蝎困。更重要的是前端工程師必須要有一個(gè)追求極致的心態(tài)，時(shí)刻從用戶體驗(yàn)的角度出發(fā)考慮倍啥、不妥協(xié)否則優(yōu)秀無從談起禾乘。

最后編輯于：2017.11.27 05:57:25

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市虽缕，隨后出現(xiàn)的幾起案子始藕，更是在濱河造成了極大的恐慌，老刑警劉巖氮趋，帶你破解...
沈念sama閱讀 221,198評論 6贊 514
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件伍派，死亡現(xiàn)場離奇詭異，居然都是意外死亡剩胁，警方通過查閱死者的電腦和手機(jī)诉植，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,334評論 3贊 398
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來昵观，“玉大人晾腔，你說我怎么就攤上這事“∪” “怎么了灼擂？”我有些...
開封第一講書人閱讀 167,643評論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長觉至。經(jīng)常有香客問我剔应，道長，這世上最難降的妖魔是什么语御？我笑而不...
開封第一講書人閱讀 59,495評論 1贊 296
?港島之戀（遺憾婚禮）
正文為了忘掉前任峻贮，我火速辦了婚禮，結(jié)果婚禮上沃暗，老公的妹妹穿的比我還像新娘月洛。我一直安慰自己，他們只是感情好孽锥，可當(dāng)我...
茶點(diǎn)故事閱讀 68,502評論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布嚼黔。她就那樣靜靜地躺著细层，像睡著了一般。火紅的嫁衣襯著肌膚如雪唬涧。梳的紋絲不亂的頭發(fā)上疫赎，一...
開封第一講書人閱讀 52,156評論 1贊 308
城市分裂傳說
那天，我揣著相機(jī)與錄音碎节，去河邊找鬼捧搞。笑死，一個(gè)胖子當(dāng)著我的面吹牛狮荔，可吹牛的內(nèi)容都是我干的胎撇。我是一名探鬼主播，決...
沈念sama閱讀 40,743評論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼殖氏，長吁一口氣：“原來是場噩夢啊……” “哼晚树！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起雅采，我...
開封第一講書人閱讀 39,659評論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤爵憎，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后婚瓜，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體宝鼓，經(jīng)...
沈念sama閱讀 46,200評論 1贊 319
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,282評論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年巴刻，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了愚铡。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 40,424評論 1贊 352
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡冈涧，死狀恐怖茂附，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情督弓，我是刑警寧澤营曼，帶...
沈念sama閱讀 36,107評論 5贊 349
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站愚隧，受9級特大地震影響蒂阱，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜狂塘，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,789評論 3贊 333
男人毒藥：我在死后第九天來索命
文/蒙蒙一录煤、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧荞胡，春花似錦妈踊、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,264評論 0贊 23
一樁弒父案廊营，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽歪泳。三九已至，卻和暖如春露筒，著一層夾襖步出監(jiān)牢的瞬間呐伞，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,390評論 1贊 271
情欲美人皮
我被黑心中介騙來泰國打工慎式，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留伶氢，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,798評論 3贊 376
代替公主和親
正文我出身青樓瘪吏，卻偏偏與公主長得像癣防，于是被迫代替她去往敵國和親。傳聞我的和親對象是個(gè)殘疾皇子掌眠，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,435評論 2贊 359

How-to-quick-getting-started-for-Frontend

亂花漸欲迷人眼

萬變不離其中

三板斧

HTML

HTML到底是什么

瀏覽器如何解析HTML

HTML核心

HTML展現(xiàn)分類

塊級元素

行內(nèi)元素

inline-block

文檔流和浮動(dòng)

HTML和CSS以及Javascript的關(guān)系

CSS

CSS是什么

CSS核心

selector

基本選擇器

偽元素選擇器

偽類選擇器

組合選擇器

CSS的選擇器優(yōu)先級

盒子模型

CSS支持的屬性

Javascript

Javascript到底是什么

Javascript語言特色

純粹的面向?qū)ο?/h4> javascript一切皆對象，哪怕 console.log(true.toString()); // true console.log("2".length); // 1 你可以直接創(chuàng)建一個(gè)對象 var obj = { name: "liujiangbei", sayHi: function(name) { console.log("Hello, " + name); } } 值得一讀

弱類型

函數(shù)作用域

閉包

基于prototype繼承

多變的上下文對象

方法調(diào)用模式

函數(shù)調(diào)用模式

解決函數(shù)調(diào)用模式中this會(huì)指向全局變量的方法

構(gòu)造器調(diào)用模式

apply/call調(diào)用模式

Function也是普通類型

參數(shù)傳遞方式

Javascript最佳實(shí)踐

一個(gè)好漢三個(gè)幫

JS如何獲取用戶點(diǎn)擊事件品腹？

什么是DOM？

DOM樹如下

DOM具備的屬性和能力

JS獲取按鈕并提前給按鈕綁定單擊事件的代碼如下

JS如何發(fā)起HTTP請求并處理響應(yīng)數(shù)據(jù)扑馁？

XMLHttpRequest對象

發(fā)起請求和處理請求數(shù)據(jù)

XMLHttpRequest狀態(tài)值

常見的動(dòng)畫又是如何實(shí)現(xiàn)的?

通過JS去改變按鈕的顏色

通過CSS3去改變屬性

如何實(shí)現(xiàn)跟跟瀏覽器交互呢物喷？

BOM對象隆重登場

H5和CSS3粉墨登場

CSS3

HTML5

Geolocation

LocalStorage

Canvas

Avdio和Vedio

開發(fā)工具

Sublime text 3

Sublime Plugins

Sublime 快捷鍵

其他編輯器如

Chrome Devtools

調(diào)試和調(diào)試工具

Charles

主界面

主要設(shè)置和注意項(xiàng)目

Fiddler

Mac電腦和iPhone手機(jī)

請看神圖

神器weire

工程和性能

工程化

純粹的面向?qū)ο?/h4>
javascript一切皆對象，哪怕

`console.log(true.toString()); // true console.log("2".length); // 1`

你可以直接創(chuàng)建一個(gè)對象

`var obj = { name: "liujiangbei", sayHi: function(name) { console.log("Hello, " + name); } }`

值得一讀

減少請求過程中傳輸?shù)?/h4>

代碼壓縮

圖片壓縮

字體壓縮

啟用gzip

減少cookie大小