How-to-quick-getting-started-for-Frontend
一轉眼已一年多不專注前端方面的開發工作，這一年前端方面的技術又是新天地，偶然接到內部團隊邀請我給他們做一個前端的講座，希望能幫助他們快速、且深刻了解前端這個行業以及行業內的知識，這可真有點讓我為難，由于不愛寫PPT，遂成此文。
亂花漸欲迷人眼
2015年前端界可謂熱鬧非凡
微信也在最近強勢推出應用號，種種跡象表明，Web前端，特別是移動端的Web前端開發將迎來另一番天地。
近幾年前端發展概況
2015年
多年前的JQuery，Extjs，Dojo，Requirejs，Seajs如火如荼，現如今也是不溫不火，技術迭代如此之快，一不小心就迷失了。
萬變不離其中
不論這個行業發展有多迷人，新出的技術又是多么的牛逼，三板斧CSS+HTML+Javascript永遠是鐵打的基石，當然隨著行業發展，三板斧本身也是在發展中，所以對前端新技術的追求基本上都是在這三者身上，像如日中天的HTML5，CSS3以及JS語言本身的發展。還有瀏覽器以及Webview這兩個也非常重要，他們就好比后端工程師要熟悉Unix環境一個道理。當然大部分前端工程師在還不需要過多去琢磨這兩者。
其他的各種吊炸天的技術框架都是淺嘗，嘗多了發現他們要解決的核心問題是
再抽象就是兩個問題
因為前后端分離的目的是為了提升開發效率和維護效率這應該屬于工程的范疇，而引入工程化的概念核心目的就是提升效率，為達目的過程中會去解耦合，減依賴，管理依賴，組件化，即插即用等概念。
當然這類問題不僅僅是前端，很大程度上后端很多技術做很多工作都是致力于去解決這兩類問題。
所以當你對這三板斧非常熟悉的時候，就能很好的去駕馭前端的亂花漸欲迷人眼，否則就是空談。
桃園三結義
大哥HTML：網頁的骨架
二哥CSS：網頁多彩的源泉
三弟Javascript：靈魂，沒有他只是一副空皮囊
下面就簡單的來介紹這三個好兄弟
大哥HTML
超文本標記語言（英文：HyperText Markup Language，HTML）是為“網頁創建和其它可在網頁瀏覽器中看到的信息”設計的一種標記語言。HTML被用來結構化信息——例如標題、段落和列表等等，也可用來在一定程度上描述文檔的外觀和語義。1982年由蒂姆·伯納斯-李創建，由IETF用簡化的SGML（標準通用標記語言）語法進行進一步發展的HTML，后來成為國際標準，由萬維網聯盟（W3C）維護。
1980年起源于一個物理學家的項目，當時只有少量的標簽，直到1993年的時候還是大學生馬克·安德森在他的Mosaic瀏覽器加入<img>標記，至此HTML添加了越來越多的標簽。更加豐富起來。
維基百科-HTML
HTML到底是什么
HTML就是標記語言，換句話說就是 普通 文本，只不過 瀏覽器 賦予了它神奇力量。
就像Markdown一樣，也是標記語言，他會被Markdown編輯器賦予優美的樣式，同時在特定網頁或者編輯器上打開的時候展示出來而已。
瀏覽器如何解析HTML
當我們在瀏覽器地址欄輸入網址按下Enter時候，瀏覽器會發出一個HTTP請求，然后DNS解析找到對應的服務器IP地址，等一系列過程，最終這個請求會響應帶有標記語言的文檔，可能是.html后綴，也可能是其他，反正在Respoonse的頭部會是content-type:text/html; charset=UTF-8
這個過程還可以很細化，也有很多策略。感興趣戳這里
然后瀏覽器會解析該特定文本內的內容，第一句話是類似<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">這句話是告訴瀏覽器該文檔使用的HTML是哪個版本，瀏覽器會用對應的方式來渲染，這就是過去IE等瀏覽器會有諸如
現代瀏覽器都采用HTML5的標準頭部<!DOCTYPE html><html lang="zh">就這一步省去了好多瀏覽器兼容的麻煩。當然了，互聯網產品目前Web前端在PC端的兼容性少很多了，我們可以很大膽的說不兼容IE8及以下，傳統的企業Web產品就不評論，很多還在支持陳舊的IE6等，這類不與時俱進的暫不討論。
然后遇到script標簽會再次發起HTTP下載對應的Javascript，遇到link會再次發起http請求css文件，最終將這三者水乳交融的產物呈現給大家就是非常nice的頁面。
這個過程可能涉及到瀏覽器重繪和重新渲染。感興趣戳這里
HTML核心
HTML核心就是各類TAG俗稱標簽或者元素，HTML5的標簽總覽
| 文檔類型宣告 | <!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 |
| 分組內容元素 | 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 |
| 嵌入內容元素 | 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 |
| 互動元素 | details、summary、command、menu |
| 腳本元素 | script、noscript |
參考文章
HTML很多新的標簽以及標簽屬性比如audio，vedio，nav，footer等元素都能極大的加快開發效率。
參考文章
HTML展現分類
HTML元素按照展現分為塊元素(block element)和內聯元素(inline element)也叫行內元素。當然還有inline-block
塊級元素
一般是其他元素的容器，能容納其他塊元素和行內元素，塊元素好比個四方塊，里邊用來放其他元素，默認情況下
主要特點
常見的塊級元素有
行內元素
一般都是基于語義級(semantic)的基本元素。內聯元素只能容納文本或者其他內聯元素，常見內聯元素有a和span。
主要特點
元素類型可以通過display屬性指定。
inline-block
inline-block 的元素既具有 block 元素可以設置寬高的特性，同時又具有 inline 元素默認不換行的特性。當然不僅僅是這些特性，比如 inline-block 元素也可以設置 vertical-align 屬性。
簡而言之：inline-block 后的元素就是一個格式化為行內元素的塊容器( Block container )
inline-block前世今生
文檔流和浮動
瀏覽器窗體自上而下分成一行行每行按照從左到右的順序排放，這就是文檔流的排列形式。
有三種情況將使得元素脫離文檔流而存在
浮動元素不占任何正常文檔流空間，而浮動元素的定位還是基于正常的文檔流，然后從文檔流中抽出并盡可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補他原先的空間。
基于文檔流，有以下定位模式
HTML和CSS以及Javascript的關系
HTML就是web頁面的骨架結構，CSS層級表賦予其多彩的樣式，Javascript賦予其豐富行為能力，讓其能動起來。
二哥CSS
CSS是什么
層疊樣式表（英語：Cascading Style Sheets，簡寫CSS），又稱串樣式列表、級聯樣式表、串接樣式表、層疊樣式表、階層式樣式表，一種用來為結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和顏色等）的計算機語言，由W3C定義和維護。目前最新版本是CSS2.1，為W3C的推薦標準。CSS3現在已被大部分現代瀏覽器支持，而下一版的CSS4仍在開發過程中
來自維基百科
CSS核心
CSS核心由多組規則組成，每組規則由selector，property，value即選擇器、屬性、值三者組成 如：
p.tips { // 選擇器font-size: 12px; // property: valuefont-family: sans-serif; }這句話的意思就是所有class為tips的p元素，即<p class="tips">Hello</p>，應用字體為sans-serif，字體大小為12px。
其中class屬性是html元素應用css樣式鏈接屬性。
selector
CSS的選擇器類型非常多，共分為以下幾類
基本選擇器
其中屬性選擇器又有
| [attribute] | 元素有attribute的屬性 |
| [attribute="value"] | 屬性attribute里是value |
| [attribute~="value"] | 屬性attribute里使用空白分開的字符串里其中一個是value |
| [attribute|="value"] | 屬性attribute里是value或者以value-開頭的字符串 |
| [attribute^="value"] | 屬性attribute里最前的是value |
| [attribute$="value"] | 屬性attribute里最后的是value |
| [attribute*="value"] | 屬性attribute里有value出現過至少一次 |
基本選擇器
#btnSave {font-size: 14px;color: #ff8a01; } .btnSave {font-size: 14px; } button {font-size: 14px; } * {font-size: 12px; } a[class="button"] {color: #ff8a01; }偽元素選擇器
偽元素可以選擇不在Document結構中的信息。
例如
p::after { content:" ";background-color:yellow;color:red; }偽類選擇器
虛擬類選擇器指的是為不同的狀態、性質的元素。
主要有以下幾類
例如
a:hover {backgroud-color: #ff8a01; }組合選擇器
還有常見的逗號, 逗號作用是將多個選擇器應用同一組屬性和值，
比如
p, a, span {font-size: 12px; }新的CSS3新支持的選擇器可以戳這里
CSS的選擇器優先級
當同一元素匹配多個選擇器的時候，那么該元素應該應用哪一個樣式呢？優先級如下
來自MDN
盒子模型
區別就在于計算width和height的時候是否加上了padding和border.
CSS支持的屬性
CSS支持的屬性很多，包括背景、顏色、字體、定位、動畫等屬性
詳情參考
三弟Javascript
1995年出生的Javascript最初只用在瀏覽器上做簡單的表單驗證，能在客戶端把不符合規范的邏輯去掉，節省網絡請求和用戶等待時間一下子就廣為流行，與此同時微軟推出JScript，當時的管理者希望這門語言跟同年出來的的Java一樣火，所以取名為Javascript，直到今日還真不負所望，幾乎跟Java一樣火，甚至有過之。
回歸正題
Javascript到底是什么
盡管對這門語言我有著比較深入的琢磨，可想了好久還是不知道該如何向未接觸過它的人來介紹它，想了想還是分兩種人盡量來解釋清楚
無編程經驗
- 腳本語言，可以運行在服務器端和瀏覽器端
- 能做網頁動畫效果
有編程經驗
- 類C語言
- 弱類型
- 面向對象
- 無所不能
Javascript語言特色
純粹的面向對象
javascript一切皆對象，哪怕
console.log(true.toString()); // true console.log("2".length); // 1你可以直接創建一個對象
var obj = {name: "liujiangbei",sayHi: function(name) {console.log("Hello, " + name);} }值得一讀
弱類型
console.log([] == ![]); // true[]==![]相當于[]==false(沒有異議了吧因為![]就是false)
[]==false又是怎么轉化的呢，對于Object類型先轉化成基礎類型Number 0
0==false又將false轉化為Number也是為0
概括就是
- 對于基本類型Boolean，Number，String，三者之間做比較時，總是向 Number進行類型轉換，然后再比較；
- 如果有Object，那么將Object轉化成這三種基本類型（PS：到底轉換成哪一種呢？我猜測會轉化成Number），再進行基本類型比較；
- 對于null和undefined，只有 x，y分別是它們時才相同，其他都為false。
對于類型相同那么==操作符就會直接比較值，不會再進行轉換了！
建議總是使用===而不是用==
函數作用域
var testFn = function() {var abc = "abc";if (abc) {var str = "hello";}console.log(str); }testFn();運行完輸出hello。
說明Javascript是函數級作用域名，跟php一樣，而靜態語言如Java，Golang，C，C++都是塊級作用域。
閉包
/** 閉包：是指有權訪問另一個函數作用域中的變量的【函數！！！】* 創建閉包的常見方式就是在一個函數內部創建另一個函數（通常是匿名函數）*/function createComparisonFun(propertyName){return function(object1,object2){//這兩行代碼是匿名函數的內部代碼，卻訪問了外部函數中的變量propertyName//即使這個內部函數被返回了，而且是在其他地方被調用了，但它仍然可以訪問變量propertyName//之所以還能訪問這個變量，是因為內部函數的作用域鏈包含外部函數如createComparisonFun()的作用域鏈var value1 = object1[propertyName];var value2 = object2[propertyName];if(value1<value2){return -1;}else if(value1>value2){return 1;}else{return 0;}}; };基于prototype繼承
原型和原型繼承
多變的上下文對象
上下文this是初階javascript程序員最容易混淆的地方，總結下來
# 方法調用模式
/*** 方法調用Function* 1、當一個function被保存為一個對象的屬性時，我們稱為method* 2、this綁定到該對象*/ var obj = {val: 0,getVal: function() {console.log(this); //{ value: 0, getVal: [Function] }，充分體現this指的就是obj這個對象console.log(this.toString()); //[object Object]return this.val;} }; console.log(obj.getVal()); //prototype只能用在類型上！！！不能用于對象上！！！# 函數調用模式
/*** 函數調用模式* 1、當一個函數并非一個對象的屬性時，那么就是當一個函數來調用的* 2、this指向全局對象（大膽猜想這種方案是錯的）* 3、解決此方法的方案就是定義一個變量存儲this對象*/ var add = function(a, b) {console.log(this.toString()); //[object global]全局變量啊return a + b; }; console.log(add(2, 4));# 解決函數調用模式中this會指向全局變量的方法
/*** 解決函數調用模式中this會指向全局變量的方法*/ var obj = {val: 4,getVal: function() {return this.val;} }; obj.double = function() { //方法模式，double是obj對象的方法var that = this; //this指的就是obj對象var helper = function() { //函數模式that.val = that.val * 2;};helper(); }; obj.double(); //方法模式調用double console.log(obj.val); //# 構造器調用模式
/*** 構造器調用模式* 1、如果一個函數前面帶上一個new來調用，那么就是構造器調用模式*/ 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調用模式
/*** Apply調用模式(apply/call)* 1、apply讓我們構建一個參數數組傳遞給調用函數，也允許我們選擇this的值*/ var func = function() {console.log(Object.prototype.toString.apply(this));console.log(this.value); //this本來指向全局變量，因為是函數調用模式 };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 valueFunction也是普通類型
Javascript中function也是一個普通數據類型，支持
參數傳遞方式
Javascript中參數的傳遞是值傳遞。
對于基本類型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。實際上，當執行obj.name = James的時候，引用所指向的對象的值已經發生了改變，當在對obj進行覆蓋的時候，obj的值是一個指向局部對象的引用，而這個引用無法對外部的對象產生影響，并且此對象會在函數執行結束之后銷毀。
通俗地理解，傳遞不是引用，而是引用的副本。
Javascript最佳實踐
最佳實踐
一個好漢三個幫
HTML是頁面的骨架，CSS賦予頁面姿彩，JS給頁面注入靈魂。但是她們具體是如何協作的呢？比如最常見的功能，點擊加載更多。
要實現該功能的主要步驟有
那么問題來了
JS如何獲取用戶點擊事件？
用戶點擊的是一個按鈕，翻譯過來就是HTML元素，JS是如何跟HTML他的大哥溝通的呢？這里要接住它們共同的溫床(瀏覽器)提供的一個叫做DOM的東西
什么是DOM？
Document Object Model的歷史可以追溯至1990年代后期微軟與Netscape的“瀏覽器大戰”（browser wars），雙方為了在JavaScript與JScript一決生死，于是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，既有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網頁使用非微軟平臺及瀏覽器無法正常顯示。DOM即是當時蘊釀出來的杰作。
維基百科
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)
DOM節點包括XML DOM、HTML DOM、核心DOM
DOM樹如下
DOM具備的屬性和能力
HTML DOM節點
HTML DOM方法
HTML DOM訪問
HTML DOM Event
其中左邊菜單的內容都需要看一看！
JS獲取按鈕并提前給按鈕綁定單擊事件的代碼如下
var btnLoadMore = document.getElementById("btnLoadMore");btnLoadMore.addEventListen("click", function(e) {// do somethings.. });JS通過獲取HTML DOM元素，可以對HTML DOM元素進行屬性的訪問和更改（CSS樣式只是HTML元素的屬性之一），同時還可以對元素本身作各種更改。還可以提前監聽某DOM元素的各類事件，如
JS如何發起HTTP請求并處理響應數據？
傳說中的Ajax
XMLHttpRequest對象
XMLHTTP是一組API函數集，可被JavaScript、JScript、VBScript以及其它web瀏覽器內嵌的腳本語言調用，通過HTTP在瀏覽器和web服務器之間收發XML或其它數據。XMLHTTP最大的好處在于可以動態地更新網頁，它無需重新從服務器讀取整個網頁，也不需要安裝額外的插件。該技術被許多網站使用，以實現快速響應的動態網頁應用。例如：Google的Gmail服務、Google Suggest動態查找界面以及Google Map地理信息服務。
特意查了一下，以前都只知道用這個對象，但是沒有分清這到底是javascript對象還是瀏覽器接口，現在看來很清晰了，這就是一個瀏覽器接口，用于跟后臺交換數據。
發起請求和處理請求數據
var xhr = createXHR(); if (!xhr) {return "create XMLHttpRequest failed."; } xhr.open(obj.method, obj.url, true); //true表示異步// 監聽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狀態值
Ajax入門推薦
動畫又是如何實現的?
動畫實現的本質在于不斷的變化元素的屬性，1000ms內變化60次肉眼基本就看不出卡頓，大概一幀16.6s
基于此前端動畫的實質都是通過
更改DOM元素的屬性來達到動畫的目的。當然了還有一些動畫是通過動態的gif圖實現的。
通過JS去改變按鈕的顏色
var btnMore = document.getElementById('btnMore'); var colorNum = 0;setInterval(function(){btnMore.style.backgroundColor = "#ff8a0" + colorNum; }, 16);這部分代碼只是偽代碼
或者還可以把setInterval改成setTimeout里邊嵌套setTimeout 兩者區別
通過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; }該樣式就是當鼠標放到div上的時候，在兩秒內寬度增長到300px
建議使用CSS3的動畫屬性來實現動畫，因為CSS3本身對GPU加速做了很多優化，比原生JS使用最質樸的方式實現效果要佳一些。當然這只是相對而言。
如果實現的功能要跟瀏覽器交互呢？
比如做完某某操作之后要關閉瀏覽器或者實現后退功能呢？這個時候又該如何？
BOM對象隆重登場
BOM是browser object model的縮寫，簡稱瀏覽器對象模型
BOM提供了獨立于內容而與瀏覽器窗口進行交互的對象
由于BOM主要用于管理窗口與窗口之間的通訊，因此其核心對象是window
BOM由一系列相關的對象構成，并且每個對象都提供了很多方法與屬性
BOM缺乏標準，JavaScript語法的標準化組織是ECMA，DOM的標準化組織是W3C
BOM最初是Netscape瀏覽器標準的一部分
通俗理解就是提供JS訪問瀏覽器對象的能力，跟XMLHttpRequest類似。
其中
推薦閱讀
至此這三者是如何協作的就大概講了一下。
H5和CSS3
再來簡單的講講如日中天的HTML5和CSS3。
CSS3
CSS3的核心在我的理解中就是提供了
說起來雖然容易，但是其實還是很實用，也不是那么容易掌握的。
HTML5
HTML5提供的核心功能非常實用，主要有
Can-I-use-html5-css3
Geolocation
就是網頁定位，通過Geolocation提供的功能，使得H5頁面可以跟Native功能一樣的定位。
/*** H5定位*/ geo.h5 = function(opt) {if (!opt) return;var timeObj = opt.timeout || {};//H5定位成功回調函數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定位失敗回調--失敗包括超時、或者用戶不允許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第一版就是我做的，當時用的就是H5定位，微信的定位接口開放還在這之后。
LocalStorage
LocalStorage經常會使用，說白了就是在本地存儲一些字符串，用于在不同的網頁之間共享數據，相比cookie沒有時間限制，大小限制在每個域4M左右，完全溝通。另外cookies會在每次發出HTTP請求的時候帶在header上，不僅影響性能，嚴重的有些server端會限制cookie的大小。LocalStorage簡直就是救命稻草
具體使用
Canvas
動畫工程師和網頁游戲工程師的救命稻草。能夠通過JS畫出流暢和高清的動畫效果，不再需要去學習陳舊的flash或者還不成熟的webgl
Avdio和Vedio
一個在網頁上放視頻一個放音樂，目前市面上吊炸天的H5頁面哪個不得來點音樂和視頻。
以上幾個H5新功能是實際產品中運用過并且表現良好。
開發工具
Sublime text 3
Sublime text 是一款輕量級的全平臺文本編輯器，突出的功能就是支持海量插件
官方網站
Plugins
Emmet html代碼利器，比如在Mac輸入html:5然后按ctrl+E就會出現［必裝］
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body></body> </html>JSLint 靜態JS代碼檢測［必裝］
CssLint CSS樣式檢測［必裝］
MarkdownEditing Markdown編輯工具
MarkdownPreview Markdown文檔預覽工具
CSS3 寫CSS3屬性時提示功能
DocBlockr 添加XML形式的備注信息
好文推薦
Sublime快捷鍵
其他編輯器如
都是非常優秀的前端編輯器和IDE
Chrome Devtools
最強大的網頁調試工具 Chrome Developer Tools，諸君一定要好好琢磨
同時Chrome還支持移動端調試，有很多模擬器，包括屏幕類型，等。
調試和調試工具
Charles
主界面
主要設置和注意項目
在iOS手機的設置界面如
設置完了之后點左上角的WiFi返回，然后Charles會彈出是否允許你的手機IP訪問的窗口，然后點擊允許，這樣Charles就能抓包了。
詳細設置參考
支持的主要功能
Fiddler
Filder設置和Charles有類似的地方，請點這里
Mac電腦和iPhone手機
請看神圖
設置Safari的Develop屬性可見，然后用USB連接線鏈接iPhone手機，然后在手機上打開你的站點，然后點擊一下Develop->iPhone6->www.baidu.com就會出現Safari的開發者工具面板
而此時，你的iPhone上的頁面就變成了
就像你用Chrome瀏覽器調試PC端網頁一樣。
神器weire
有人說了我沒有Mac和iPhone怎么辦，不用著急，我已經為你準備好一切，請戳這里
工程和性能
洋洋灑灑寫了好大一篇，為了本文能夠首尾呼應，讓我們還是專注到Web最核心的兩個問題上
工程化
前端開發的工程化要解決的幾個問題
開發階段前后端分離
目前國內在前后端協作上主要的幾類方式
前端工程師切好頁面，交給所謂的后端工程師（其實是業務邏輯處理層并非后端服務）然后這些工程師將HTML標簽和樣式要么換成對應的web框架所需要的模版，要么就直接輸出，再結合html中的樣式和js達到想要的效果。
在整個頁面出來之前需要雙方不停的溝通協作，才能完成。
前后端工程師完全通過resetful接口形式進行對接，前端工程師訪問靜態頁面，然后通過ajax去請求resetful接口解析json，然后展現看起來這種方式前后端分離做得比較干凈，但是這種方式弊端也不少
會無端增加比較多的請求，本來原來有很多數據可以直接輸出到html頁面上，或者使用模版而現在需要通過http請求后再次處理。
前后端工程師在完成靜態部分開發工作后，將page放到web項目的views下，第一頁數據通過業務邏輯處理層將數據通過模版形式輸出到頁面，而后在頁面中的操作如果有跳頁面的話過程如第一頁，否則都是通過ajax來交互。
雖然這種方式耦合還是沒完全解開。溝通成本上較第一種少性能上較第二種好，“后端工程師”可以專注寫他們的邏輯，多數交互都是通過resetful接口進行，少部分需要加載模版和頁面的請求另外溝通一下，需要組織哪些數據需要哪些邏輯溝通成本不大，前端工程師也可以focus在前端工作上。性能也不知發起很多無謂的請求。屬于在目前的方式下比較理性的方式。
在第三種的基礎上，將業務邏輯處理成這部分的工作都交給“前端工程師”來做，這部分工程師需要掌握Nodejs開發，HTML5+CSS3+Javascript常規前端開發，可以簡單地理解為全棧工程師，這樣前端（主要是指業務邏輯層面目前的API）可以實現大部分功能，只需要跟真正的后端服務去做通信即可。
這是最理想的前后端分離方式，目前阿里巴巴有技術團隊在嘗試，溝通成本低，開發統一，都是Javascript為主，唯一的缺陷就是這類人才太少。
綜合看來，目前第三種方案是比較常規的方案。
前端分離
前面講到前后端分離，其實就是在想各種辦法去提升開發效率，而前端本身的一些分離原則則主要是為了后續的維護性著想。
表現和結構分離
意思就是不要再html中使用內嵌樣式<div style="backgroud-color: #ff8a01"></div>這是一個bad case，因為這會給后續維護帶來不便，為什么呢？因為假如這是一個很多地方都用到的樣式，那么后續如果相統一變更一些樣式的時候需要單獨找到這一行，而且在html中夾雜css代碼的整體美感也會打折扣。
行為和表現分離
盡量不要用Javascript去控制元素的樣式，這會導致用戶在修改的時候，通過樣式表無法找到對應的屬性，這樣的話就需要去人肉review你的Javascript代碼來更改。
CSS的編程
傳統的如果頁面有一個統一的桔色按鈕，我們都是通過class來控制，讓所有的地方的button都是用這一種樣式從而來統一控制樣式，每當這個時候你都在想這需要一個變量啊，很遺憾CSS本身并不提供這種編程能力。
那么
sass
less
邊應運而生了，他讓css代碼的維護性也變成可能。
Javascript包管理
傳統的Javascript并沒有包管理的概念，所有的js文件都是放在服務器上某個文件夾，然后通過人肉引入到html之后，所以的依賴其實是認為在維護。
bower
npm
requirejs
seajs
等包管理器以及模塊化管理工具都出現了，以及AMD和CMD規范都出來了。
前端構建
前端構建的工作主要包括
主流的構建工具
gulp基于流式的構建工具，構建過程中支持效率快，同時
grunt老牌的構建工具，
fis百度fex團隊出品，文檔比較齊全且是中文，國內很多人在使用。
推薦使用gulp，本人寫的對static項目進行的構建庫static-gulp，配對的還有對web項目進行的views-gulp 這兩個項目目前可用。
性能
web產品的性能集中體現在三個方面
傳統前端優化大部分的工作還是集中在網絡開銷上邊，比如 Yahoo 第一條規則就是減少網絡請求。而后起之秀們如Reactjs，Angularjs2，WebComponents等都加入了虛擬DOM的概念，試圖讓Webapp具備媲美原生native應用的體驗。而代碼執行效率方面有大量的最佳實踐，無時無刻不在進行中，但是這個方面除非前人犯錯，否則對一個產品很難一下子明顯優化，另一方面硬件設備在不斷變好。
大家好才是真的好
傳統的對web性能優化的點還非常受用，大概分為
網絡方面
減少請求個數
減少請求過程中傳輸的
提升響應速度
請求策略
在網頁全部加在之前，把圖片等資源通過指定src或者backgroud或者
這兩個策略在做SPA的時候經常用到。
網絡方面還有諸如避免404，減少DNS查詢，瀏覽器HTTP請求并發限制等
內容和代碼經驗方面
Yahoo
Webapp優化
優化篇
體驗方面
代碼最佳實踐
天下武功唯快不破
yeoman
看這里看這里
推薦書籍和框架
HTML暫時就不需要推薦書籍了，跟他最相近的就是DOM編程藝術了，其余的屬性和相關的方法查看網頁即可
寫在最后
洋洋灑灑寫了好幾千字，一時間竟不知道該說點啥了，前端是一個涉及面非常廣的工種，不像后端程序環境運行在比較統一的*nix系統，專注到項目本身的工程、性能、可維護等方面即可。而前端不僅僅程序執行環境多樣化，工程、性能同樣是要抓，更多的還要關注交互、展示等體驗甚至要求對美感都有要求。更重要的是前端工程師必須要有一個追求極致的心態，不妥協否則優秀無從談起。
轉載于:https://www.cnblogs.com/liujb/p/How-to-quick-getting-started-for-Frontend.html
總結
以上是生活随笔為你收集整理的How-to-quick-getting-started-for-Frontend的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Apple Watch怎么省电？6招让你
- 下一篇： Linux服务器同步时间