ront-end-frame-relative

通行的 Javascript 模塊的規(guī)范有哪些？

• CommonJS -- 主要用在服務(wù)器端 node.js

var math = require('./math');
math.add(2,3);

• AMD(異步模塊定義) -- require.js

require(['./math'], function (math) {
 math.add(2, 3);
});

• CMD(通用模塊定義) -- sea.js

var math = require('./math');
math.add(2,3);

• ES6 模塊

import {math} from './math';
math.add(2, 3);

AMD 與 CMD 規(guī)范的區(qū)別？

• 規(guī)范化產(chǎn)出：
• AMD 由 RequireJS 推廣產(chǎn)出
• CMD 由 SeaJS 推廣產(chǎn)出
• 模塊的依賴:
• AMD 提前執(zhí)行，推崇依賴前置
• CMD 延遲執(zhí)行，推崇依賴就近
• API 功能:
• AMD 的 API 默認(rèn)多功能（分全局 require 和局部 require）
• CMD 的 API 推崇職責(zé)單一純粹（沒有全局 require）
• 模塊定義規(guī)則：
• AMD 默認(rèn)一開始就載入全部依賴模塊

 define(['./a', './b'], function(a, b) {
 a.doSomething();
 b.doSomething();
 });

• CMD 依賴模塊在用到時(shí)才就近載入

 define(function(require, exports, module) {
 var a = require('./a');
 a.doSomething();
 var b = require('./b');
 b.doSomething();
 })

requireJS的核心原理是什么？

• 每個(gè)模塊所依賴模塊都會(huì)比本模塊預(yù)先加載

對(duì) Node.js 的優(yōu)點(diǎn)、缺點(diǎn)提出了自己的看法？ Node.js的特點(diǎn)和適用場景？

• Node.js的特點(diǎn)：單線程，非阻塞I/O，事件驅(qū)動(dòng)
• Node.js的優(yōu)點(diǎn)：擅長處理高并發(fā)；適合I/O密集型應(yīng)用
• Node.js的缺點(diǎn)：不適合CPU密集運(yùn)算；不能充分利用多核CPU；可靠性低，某個(gè)環(huán)節(jié)出錯(cuò)會(huì)導(dǎo)致整個(gè)系統(tǒng)崩潰
• Node.js的適用場景：
• RESTful API
• 實(shí)時(shí)應(yīng)用：在線聊天、圖文直播
• 工具類應(yīng)用：前端部署(npm, gulp)
• 表單收集：問卷系統(tǒng)

如何判斷當(dāng)前腳本運(yùn)行在瀏覽器還是node環(huán)境中？

• 判斷 Global 對(duì)象是否為 window，如果不為 window，當(dāng)前腳本沒有運(yùn)行在瀏覽器中

什么是 npm ？

• npm 是 Node.js 的模塊管理和發(fā)布工具

什么是 WebKit ？

• WebKit 是一個(gè)開源的瀏覽器內(nèi)核，由渲染引擎(WebCore)和JS解釋引擎(JSCore)組成
• 通常所說的 WebKit 指的是 WebKit(WebCore)，主要工作是進(jìn)行 HTML/CSS 渲染
• WebKit 一直是 Safari 和 Chrome(之前) 使用的瀏覽器內(nèi)核，后來 Chrome 改用Blink 內(nèi)核

如何測(cè)試前端代碼? 知道 Unit Test，BDD, TDD 么? 怎么測(cè)試你的前端工程(mocha, jasmin..)?

• 通過為前端代碼編寫單元測(cè)試(Unit Test)來測(cè)試前端代碼
• Unit Test：一段用于測(cè)試一個(gè)模塊或接口是否能達(dá)到預(yù)期結(jié)果的代碼
• BDD：行為驅(qū)動(dòng)開發(fā) -- 業(yè)務(wù)需求描述產(chǎn)出產(chǎn)品代碼的開發(fā)方法
• TDD：測(cè)試驅(qū)動(dòng)開發(fā) -- 單元測(cè)試用例代碼產(chǎn)出產(chǎn)品代碼的開發(fā)方法
• 單元測(cè)試框架：

// mocha 示例
describe('Test add', function() {
 it('1 + 2 = 3', function() {
 expect(add(1, 2)).to.be.equal(3);
 });
});
// jasmin 示例
describe('Test add', function () {
 it('1 + 2 = 3', function () {
 expect(add(1, 2)).toEqual(3);
 });
});

介紹你知道的前端模板引擎？

• artTemplate, underscore, handlebars

什么是 Modernizr？ Modernizr 工作原理？

• Modernizr 是一個(gè)開源的 JavaScript 庫，用于檢測(cè)用戶瀏覽器對(duì) HTML5 與 CSS3 的支持情況

移動(dòng)端最小觸控區(qū)域是多大？

• 44 * 44 px

移動(dòng)端的點(diǎn)擊事件的延遲時(shí)間是多長，為什么會(huì)有延遲？ 如何解決這個(gè)延時(shí)？

• 移動(dòng)端 click 有 300ms 延遲，瀏覽器為了區(qū)分“雙擊”（放大頁面）還是“單擊”而設(shè)計(jì)
• 解決方案：
• 禁用縮放(對(duì)safari無效)
• 使用指針事件(IE私有特性，且僅IE10+)
• 使用 Zepto 的 tap 事件(有點(diǎn)透BUG)
• 使用 FastClick 插件(體積大[壓縮后8k])

什么是函數(shù)式編程？

• 函數(shù)式編程是一種"編程范式"，主要思想是把運(yùn)算過程盡量寫成一系列嵌套的函數(shù)調(diào)用
• 例如：var result = subtract(multiply(add(1,2), 3), 4);
• 函數(shù)式編程的特點(diǎn)：
• 函數(shù)核心化：函數(shù)可以作為變量的賦值、另一函數(shù)的參數(shù)、另一函數(shù)的返回值
• 只用“表達(dá)式”，不用“語句”：要求每一步都是單純的運(yùn)算，都必須有返回值
• 沒有"副作用"：所有功能只為返回一個(gè)新的值，不修改外部變量
• 引用透明：運(yùn)行不依賴于外部變量，只依賴于輸入的參數(shù)
• 函數(shù)式編程的優(yōu)點(diǎn)：
• 代碼簡潔，接近自然語言，易于理解
• 便于維護(hù)，利于測(cè)試、除錯(cuò)、組合
• 易于“并發(fā)編程“，不用擔(dān)心一個(gè)線程的數(shù)據(jù)，被另一個(gè)線程修改
• 可“熱升級(jí)”代碼，在運(yùn)行狀態(tài)下直接升級(jí)代碼，不需要重啟，也不需要停機(jī)

什么是函數(shù)柯里化Currying)？

• 柯里化：
• 通常也稱部分求值，含義是給函數(shù)分步傳遞參數(shù)，每次遞參部分應(yīng)用參數(shù)，并返回一個(gè)更具體的函數(shù)，繼續(xù)接受剩余參數(shù)
• 期間會(huì)連續(xù)返回具體函數(shù)，直至返回最后結(jié)果。因此，函數(shù)柯里化是逐步傳參，逐步縮小函數(shù)的適用范圍，逐步求解的過程
• 柯里化的作用：延遲計(jì)算；參數(shù)復(fù)用；動(dòng)態(tài)創(chuàng)建函數(shù)
• 柯里化的缺點(diǎn)：
• 函數(shù)柯里化會(huì)產(chǎn)生開銷（函數(shù)嵌套，比普通函數(shù)占更多內(nèi)存），但性能瓶頸首先來自其它原因（DOM 操作等）

什么是依賴注入？

• 當(dāng)一個(gè)類的實(shí)例依賴另一個(gè)類的實(shí)例時(shí)，自己不創(chuàng)建該實(shí)例，由IOC容器創(chuàng)建并注入給自己，因此稱為依賴注入。
• 依賴注入解決的就是如何有效組織代碼依賴模塊的問題

設(shè)計(jì)模式：什么是 singleton, factory, strategy, decorator？

• Singleton(單例) 一個(gè)類只有唯一實(shí)例，這個(gè)實(shí)例在整個(gè)程序中有一個(gè)全局的訪問點(diǎn)
• Factory (工廠) 解決實(shí)列化對(duì)象產(chǎn)生重復(fù)的問題
• Strategy(策略) 將每一個(gè)算法封裝起來，使它們還可以相互替換，讓算法獨(dú)立于使用
• Observer(觀察者) 多個(gè)觀察者同時(shí)監(jiān)聽一個(gè)主體，當(dāng)主體對(duì)象發(fā)生改變時(shí)，所有觀察者都將得到通知
• Prototype(原型) 一個(gè)完全初始化的實(shí)例，用于拷貝或者克隆
• Adapter(適配器) 將不同類的接口進(jìn)行匹配調(diào)整，盡管內(nèi)部接口不兼容，不同的類還是可以協(xié)同工作
• Proxy(代理模式) 一個(gè)充當(dāng)過濾轉(zhuǎn)發(fā)的對(duì)象用來代表一個(gè)真實(shí)的對(duì)象
• Iterator(迭代器) 在不需要直到集合內(nèi)部工作原理的情況下，順序訪問一個(gè)集合里面的元素
• Chain of Responsibility(職責(zé)連) 處理請(qǐng)求組成的對(duì)象一條鏈，請(qǐng)求鏈中傳遞，直到有對(duì)象可以處理

什么是前端工程化？

• 前端工程化就是把一整套前端工作流程使用工具自動(dòng)化完成
• 前端開發(fā)基本流程：
• 項(xiàng)目

HTTP

http狀態(tài)碼有那些？分別代表是什么意思？

 簡單版
 [
 100 Continue 繼續(xù)，一般在發(fā)送post請(qǐng)求時(shí)，已發(fā)送了http header之后服務(wù)端將返回此信息，表示確認(rèn)，之后發(fā)送具體參數(shù)信息
 200 OK 正常返回信息
 201 Created 請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源
 202 Accepted 服務(wù)器已接受請(qǐng)求，但尚未處理
 301 Moved Permanently 請(qǐng)求的網(wǎng)頁已永久移動(dòng)到新位置。
 302 Found 臨時(shí)性重定向。
 303 See Other 臨時(shí)性重定向，且總是使用 GET 請(qǐng)求新的 URI。
 304 Not Modified 自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁未修改過。
 400 Bad Request 服務(wù)器無法理解請(qǐng)求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請(qǐng)求。
 401 Unauthorized 請(qǐng)求未授權(quán)。
 403 Forbidden 禁止訪問。
 404 Not Found 找不到如何與 URI 相匹配的資源。
 500 Internal Server Error 最常見的服務(wù)器端錯(cuò)誤。
 503 Service Unavailable 服務(wù)器端暫時(shí)無法處理請(qǐng)求（可能是過載或維護(hù)）。
 ]

一個(gè)頁面從輸入 URL 到頁面加載顯示完成，這個(gè)過程中都發(fā)生了什么？（流程說的越詳細(xì)越好）

• 注：這題勝在區(qū)分度高，知識(shí)點(diǎn)覆蓋廣，再不懂的人，也能答出幾句，
• 而高手可以根據(jù)自己擅長的領(lǐng)域自由發(fā)揮，從URL規(guī)范、HTTP協(xié)議、DNS、CDN、數(shù)據(jù)庫查詢、
• 到瀏覽器流式解析、CSS規(guī)則構(gòu)建、layout、paint、onload/domready、JS執(zhí)行、JS API綁定等等；
• 詳細(xì)版：
• 瀏覽器會(huì)開啟一個(gè)線程來處理這個(gè)請(qǐng)求，對(duì) URL 分析判斷如果是 http 協(xié)議就按照 Web 方式來處理;
• 調(diào)用瀏覽器內(nèi)核中的對(duì)應(yīng)方法，比如 WebView 中的 loadUrl 方法;
• 通過DNS解析獲取網(wǎng)址的IP地址，設(shè)置 UA 等信息發(fā)出第二個(gè)GET請(qǐng)求;
• 進(jìn)行HTTP協(xié)議會(huì)話，客戶端發(fā)送報(bào)頭(請(qǐng)求報(bào)頭);
• 進(jìn)入到web服務(wù)器上的 Web Server，如 Apache、Tomcat、Node.JS 等服務(wù)器;
• 進(jìn)入部署好的后端應(yīng)用，如 PHP、Java、JavaScript、Python 等，找到對(duì)應(yīng)的請(qǐng)求處理;
• 處理結(jié)束回饋報(bào)頭，此處如果瀏覽器訪問過，緩存上有對(duì)應(yīng)資源，會(huì)與服務(wù)器最后修改時(shí)間對(duì)比，一致則返回304;
• 瀏覽器開始下載html文檔(響應(yīng)報(bào)頭，狀態(tài)碼200)，同時(shí)使用緩存;
• 文檔樹建立，根據(jù)標(biāo)記請(qǐng)求所需指定MIME類型的文件（比如css、js）,同時(shí)設(shè)置了cookie;
• 頁面開始渲染DOM，JS根據(jù)DOM API操作DOM,執(zhí)行事件綁定等，頁面顯示完成。
• 簡潔版：
• 瀏覽器根據(jù)請(qǐng)求的URL交給DNS域名解析，找到真實(shí)IP，向服務(wù)器發(fā)起請(qǐng)求；
• 服務(wù)器交給后臺(tái)處理完成后返回?cái)?shù)據(jù)，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
• 瀏覽器對(duì)加載到的資源（HTML、JS、CSS等）進(jìn)行語法解析，建立相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（如HTML的DOM）；
• 載入解析到的資源文件，渲染頁面，完成。

說說TCP傳輸?shù)娜挝帐炙拇螕]手策略

• 為了準(zhǔn)確無誤地把數(shù)據(jù)送達(dá)目標(biāo)處，TCP協(xié)議采用了三次握手策略。用TCP協(xié)議把數(shù)據(jù)包送出去后，TCP不會(huì)對(duì)傳送 后的情況置之不理，它一定會(huì)向?qū)Ψ酱_認(rèn)是否成功送達(dá)。握手過程中使用了TCP的標(biāo)志：SYN和ACK
• 發(fā)送端首先發(fā)送一個(gè)帶SYN標(biāo)志的數(shù)據(jù)包給對(duì)方。接收端收到后，回傳一個(gè)帶有SYN/ACK標(biāo)志的數(shù)據(jù)包以示傳達(dá)確認(rèn)信息。 最后，發(fā)送端再回傳一個(gè)帶ACK標(biāo)志的數(shù)據(jù)包，代表“握手”結(jié)束。 若在握手過程中某個(gè)階段莫名中斷，TCP協(xié)議會(huì)再次以相同的順序發(fā)送相同的數(shù)據(jù)包

斷開一個(gè)TCP連接則需要“四次握手”：

• 第一次揮手：主動(dòng)關(guān)閉方發(fā)送一個(gè)FIN，用來關(guān)閉主動(dòng)方到被動(dòng)關(guān)閉方的數(shù)據(jù)傳送，也就是主動(dòng)關(guān)閉方告訴被動(dòng)關(guān)閉方：我已經(jīng)不 會(huì)再給你發(fā)數(shù)據(jù)了(當(dāng)然，在fin包之前發(fā)送出去的數(shù)據(jù)，如果沒有收到對(duì)應(yīng)的ack確認(rèn)報(bào)文，主動(dòng)關(guān)閉方依然會(huì)重發(fā)這些數(shù)據(jù))，但是，此時(shí)主動(dòng)關(guān)閉方還可 以接受數(shù)據(jù)
• 第二次揮手：被動(dòng)關(guān)閉方收到FIN包后，發(fā)送一個(gè)ACK給對(duì)方，確認(rèn)序號(hào)為收到序號(hào)+1（與SYN相同，一個(gè)FIN占用一個(gè)序號(hào)）
• 第三次揮手：被動(dòng)關(guān)閉方發(fā)送一個(gè)FIN，用來關(guān)閉被動(dòng)關(guān)閉方到主動(dòng)關(guān)閉方的數(shù)據(jù)傳送，也就是告訴主動(dòng)關(guān)閉方，我的數(shù)據(jù)也發(fā)送完了，不會(huì)再給你發(fā)數(shù)據(jù)了
• 第四次揮手：主動(dòng)關(guān)閉方收到FIN后，發(fā)送一個(gè)ACK給被動(dòng)關(guān)閉方，確認(rèn)序號(hào)為收到序號(hào)+1，至此，完成四次揮手

TCP和UDP的區(qū)別

• TCP（Transmission Control Protocol，傳輸控制協(xié)議）是基于連接的協(xié)議，也就是說，在正式收發(fā)數(shù)據(jù)前，必須和對(duì)方建立可靠的連接。一個(gè)TCP連接必須要經(jīng)過三次“對(duì)話”才能建立起來
• UDP（User Data Protocol，用戶數(shù)據(jù)報(bào)協(xié)議）是與TCP相對(duì)應(yīng)的協(xié)議。它是面向非連接的協(xié)議，它不與對(duì)方建立連接，而是直接就把數(shù)據(jù)包發(fā)送過去！ UDP適用于一次只傳送少量數(shù)據(jù)、對(duì)可靠性要求不高的應(yīng)用環(huán)境

HTTP和HTTPS

• HTTP協(xié)議通常承載于TCP協(xié)議之上，在HTTP和TCP之間添加一個(gè)安全協(xié)議層（SSL或TSL），這個(gè)時(shí)候，就成了我們常說的HTTPS
• 默認(rèn)HTTP的端口號(hào)為80，HTTPS的端口號(hào)為443

為什么HTTPS安全

• 因?yàn)榫W(wǎng)絡(luò)請(qǐng)求需要中間有很多的服務(wù)器路由器的轉(zhuǎn)發(fā)。中間的節(jié)點(diǎn)都可能篡改信息，而如果使用HTTPS，密鑰在你和終點(diǎn)站才有。https之所以比http安全，是因?yàn)樗胹sl/tls協(xié)議傳輸。它包含證書，卸載，流量轉(zhuǎn)發(fā)，負(fù)載均衡，頁面適配，瀏覽器適配，refer傳遞等。保障了傳輸過程的安全性

關(guān)于Http 2.0 你知道多少？

• HTTP/2引入了“服務(wù)端推（server push）”的概念，它允許服務(wù)端在客戶端需要數(shù)據(jù)之前就主動(dòng)地將數(shù)據(jù)發(fā)送到客戶端緩存中，從而提高性能。
• HTTP/2提供更多的加密支持
• HTTP/2使用多路技術(shù)，允許多個(gè)消息在一個(gè)連接上同時(shí)交差。
• 它增加了頭壓縮（header compression），因此即使非常小的請(qǐng)求，其請(qǐng)求和響應(yīng)的header都只會(huì)占用很小比例的帶寬

GET和POST的區(qū)別，何時(shí)使用POST？

• GET：一般用于信息獲取，使用URL傳遞參數(shù)，對(duì)所發(fā)送信息的數(shù)量也有限制，一般在2000個(gè)字符
• POST：一般用于修改服務(wù)器上的資源，對(duì)所發(fā)送的信息沒有限制。
• GET方式需要使用Request.QueryString來取得變量的值，而POST方式通過Request.Form來獲取變量的值，也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值。
• 然而，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：
• 無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
• 
  
• 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
• 發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠

說說網(wǎng)絡(luò)分層里七層模型是哪七層

• 應(yīng)用層：應(yīng)用層、表示層、會(huì)話層（從上往下）（HTTP、FTP、SMTP、DNS）
• 傳輸層（TCP和UDP）
• 網(wǎng)絡(luò)層（IP）
• 物理和數(shù)據(jù)鏈路層（以太網(wǎng)）
• 每一層的作用如下：
• 物理層：通過媒介傳輸比特,確定機(jī)械及電氣規(guī)范（比特Bit） 數(shù)據(jù)鏈路層：將比特組裝成幀和點(diǎn)到點(diǎn)的傳遞（幀F(xiàn)rame）
• 網(wǎng)絡(luò)層：負(fù)責(zé)數(shù)據(jù)包從源到宿的傳遞和網(wǎng)際互連（包PackeT）
• 傳輸層：提供端到端的可靠報(bào)文傳遞和錯(cuò)誤恢復(fù)（段Segment）
• 會(huì)話層：建立、管理和終止會(huì)話（會(huì)話協(xié)議數(shù)據(jù)單元SPDU）
• 表示層：對(duì)數(shù)據(jù)進(jìn)行翻譯、加密和壓縮（表示協(xié)議數(shù)據(jù)單元PPDU）
• 應(yīng)用層：允許訪問OSI環(huán)境的手段（應(yīng)用協(xié)議數(shù)據(jù)單元APDU）

講講304緩存的原理

• 服務(wù)器首先產(chǎn)生ETag，服務(wù)器可在稍后使用它來判斷頁面是否已經(jīng)被修改。本質(zhì)上，客戶端通過將該記號(hào)傳回服務(wù)器要求服務(wù)器驗(yàn)證其（客戶端）緩存
• 304是HTTP狀態(tài)碼，服務(wù)器用來標(biāo)識(shí)這個(gè)文件沒修改，不返回內(nèi)容，瀏覽器在接收到個(gè)狀態(tài)碼后，會(huì)使用瀏覽器已緩存的文件
• 客戶端請(qǐng)求一個(gè)頁面（A）。 服務(wù)器返回頁面A，并在給A加上一個(gè)ETag。 客戶端展現(xiàn)該頁面，并將頁面連同ETag一起緩存。 客戶再次請(qǐng)求頁面A，并將上次請(qǐng)求時(shí)服務(wù)器返回的ETag一起傳遞給服務(wù)器。 服務(wù)器檢查該ETag，并判斷出該頁面自上次客戶端請(qǐng)求之后還未被修改，直接返回響應(yīng)304（未修改——Not Modified）和一個(gè)空的響應(yīng)體

HTTP/2 與 HTTP/1.x 的關(guān)鍵區(qū)別

• 二進(jìn)制協(xié)議代替文本協(xié)議，更加簡潔高效
• 針對(duì)每個(gè)域只使用一個(gè)多路復(fù)用的連接
• 壓縮頭部信息減小開銷
• 允許服務(wù)器主動(dòng)推送應(yīng)答到客戶端的緩存中

一個(gè)頁面從輸入 URL 到頁面加載顯示完成，這個(gè)過程中都發(fā)生了什么？

• 01.瀏覽器查找域名對(duì)應(yīng)的IP地址(DNS 查詢：瀏覽器緩存->系統(tǒng)緩存->路由器緩存->ISP DNS 緩存->根域名服務(wù)器)
• 02.瀏覽器向 Web 服務(wù)器發(fā)送一個(gè) HTTP 請(qǐng)求（TCP三次握手）
• 03.服務(wù)器 301 重定向（從 http://example.com 重定向到 http://www.example.com）
• 04.瀏覽器跟蹤重定向地址，請(qǐng)求另一個(gè)帶 www 的網(wǎng)址
• 05.服務(wù)器處理請(qǐng)求（通過路由讀取資源）
• 06.服務(wù)器返回一個(gè) HTTP 響應(yīng)（報(bào)頭中把 Content-type 設(shè)置為 'text/html'）
• 07.瀏覽器進(jìn) DOM 樹構(gòu)建
• 08.瀏覽器發(fā)送請(qǐng)求獲取嵌在 HTML 中的資源（如圖片、音頻、視頻、CSS、JS等）
• 09.瀏覽器顯示完成頁面
• 10.瀏覽器發(fā)送異步請(qǐng)求

Ajax

• 什么是 Ajax? 如何創(chuàng)建一個(gè)Ajax？
• AJAX(Asynchronous Javascript And XML) = 異步 JavaScript + XML 在后臺(tái)與服務(wù)器進(jìn)行異步數(shù)據(jù)交換，不用重載整個(gè)網(wǎng)頁，實(shí)現(xiàn)局部刷新。
• 創(chuàng)建 ajax 步驟：
• 1.創(chuàng)建 XMLHttpRequest 對(duì)象
• 2.創(chuàng)建一個(gè)新的 HTTP 請(qǐng)求，并指定該 HTTP 請(qǐng)求的類型、驗(yàn)證信息
• 3.設(shè)置響應(yīng) HTTP 請(qǐng)求狀態(tài)變化的回調(diào)函數(shù)
• 4.發(fā)送 HTTP 請(qǐng)求
• 5.獲取異步調(diào)用返回的數(shù)據(jù)
• 6.使用 JavaScript 和 DOM 實(shí)現(xiàn)局部刷新

var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
 if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
 fn.call(this, xhr.responseText);
 }
};
xhr.send(data);

localStorage

瀏覽器本地存儲(chǔ)

• 在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage
• html5中的Web Storage包括了兩種存儲(chǔ)方式：sessionStorage和localStorage
• sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)
• 而localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的

web storage和cookie的區(qū)別

• Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie的大小是受限的，并且每次你請(qǐng)求一個(gè)新的頁面的時(shí)候Cookie都會(huì)被發(fā)送過去，這樣無形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用
• 除此之外，WebStorage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie
• 但是cookie也是不可以或缺的：cookie的作用是與服務(wù)器進(jìn)行交互，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生
• 瀏覽器的支持除了IE７及以下不支持外，其他標(biāo)準(zhǔn)瀏覽器都完全支持(ie及FF需在web服務(wù)器里運(yùn)行)，值得一提的是IE總是辦好事，例如IE7、IE6中的userData其實(shí)就是javascript本地存儲(chǔ)的解決方案。通過簡單的代碼封裝可以統(tǒng)一到所有的瀏覽器都支持web storage
• localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

cookie 和session 的區(qū)別：

• 1、cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上。
• 2、cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙
• 考慮到安全應(yīng)當(dāng)使用session。
• 3、session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪問增多，會(huì)比較占用你服務(wù)器的性能
• 考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE。
• 4、單個(gè)cookie保存的數(shù)據(jù)不能超過4K，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。
• 5、所以個(gè)人建議：
• 將登陸信息等重要信息存放為SESSION
• 
  
• 其他信息如果需要保留，可以放在COOKIE中

描述 cookies、sessionStorage 和 localStorage 的區(qū)別？

• 與服務(wù)器交互：
• cookie 是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過加密）
• cookie 始終會(huì)在同源 http 請(qǐng)求頭中攜帶（即使不需要），在瀏覽器和服務(wù)器間來回傳遞
• sessionStorage 和 localStorage 不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存
• 存儲(chǔ)大小：
• cookie 數(shù)據(jù)根據(jù)不同瀏覽器限制，大小一般不能超過 4k
• sessionStorage 和 localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大
• 有期時(shí)間：
• localStorage 存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)
• sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除
• cookie 設(shè)置的cookie過期時(shí)間之前一直有效，與瀏覽器是否關(guān)閉無關(guān)

Json-XML

XML和JSON的區(qū)別？

• 數(shù)據(jù)體積方面
• JSON相對(duì)于XML來講，數(shù)據(jù)的體積小，傳遞的速度更快些。
• 數(shù)據(jù)交互方面
• JSON與JavaScript的交互更加方便，更容易解析處理，更好的數(shù)據(jù)交互
• 數(shù)據(jù)描述方面
• JSON對(duì)數(shù)據(jù)的描述性比XML較差
• 傳輸速度方面
• JSON的速度要遠(yuǎn)遠(yuǎn)快于XML

JSON 的了解？

• JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式
• 它是基于JavaScript的一個(gè)子集。數(shù)據(jù)格式簡單, 易于讀寫, 占用帶寬小
• JSON字符串轉(zhuǎn)換為JSON對(duì)象:

var obj =eval('('+ str +')');
var obj = str.parseJSON();
var obj = JSON.parse(str);

• JSON對(duì)象轉(zhuǎn)換為JSON字符串：

var last=obj.toJSONString();
var last=JSON.stringify(obj);

都看到這了轉(zhuǎn)發(fā)一下唄，關(guān)注并私信回復(fù)“前端資源”有小驚喜哦

欲善其事，必先利其器。

初創(chuàng)團(tuán)隊(duì)需要將好鋼用在刀刃上，綜合各方資源，節(jié)省成本，集中人力來處理核心業(yè)務(wù)。這個(gè)階段是摸索方向的時(shí)期，低成本和高效率非常重要。無論是生產(chǎn)力工具，還是開發(fā)中用到的第三方工具與開源組件，都能幫助初創(chuàng)團(tuán)隊(duì)大大提升效率。

1. 協(xié)同辦公和生產(chǎn)力工具

· 郵箱：推薦 Gmail （Google Apps），免費(fèi)版有10個(gè)用戶；QQ企業(yè)郵箱之類的也可以用。

· Dropbox: https://www.dropbox.com/ 太有名了，不用多介紹，安全可靠

· 網(wǎng)盤：百度網(wǎng)盤

· Trello：Trello 小型項(xiàng)目管理和協(xié)同等都?jí)蛴昧恕?/p>

· 拉勾網(wǎng)：拉勾網(wǎng)-最專業(yè)的互聯(lián)網(wǎng)招聘平臺(tái) 專門面向互聯(lián)網(wǎng)領(lǐng)域的招聘網(wǎng)站

· 北郵人bbs：北郵人論壇-北郵人的溫馨家園 互聯(lián)網(wǎng)行業(yè)發(fā)帖比較管用

· cocoachina：http://www.cocoachina.com/bbs/thread.php?fid-26.html

2. 用戶體驗(yàn)

· 最美應(yīng)用：【最美應(yīng)用】 收集功能、交互和視覺設(shè)計(jì)優(yōu)秀的應(yīng)用

· IOS 圖標(biāo)：iOS Icon Gallery iOS 的 App 圖標(biāo)收集，非常好的設(shè)計(jì)參考

· iOS 7 人機(jī)界面指南（界面設(shè)計(jì)基礎(chǔ)部分）ISUX原創(chuàng)翻譯

· Android 用戶界面設(shè)計(jì)規(guī)范 Google 官方版本

· Android 4.0 設(shè)計(jì)規(guī)范中文版 騰訊 CDC 翻譯

· Windows Phone 界面設(shè)計(jì)規(guī)范中文版 微軟官方中文版

3.問卷調(diào)查

· 調(diào)查派：調(diào)查派 - 簡單，好用的在線調(diào)查系統(tǒng) 同時(shí)支持網(wǎng)站與移動(dòng)設(shè)備，有免費(fèi)版本與付費(fèi)版本

· 金數(shù)據(jù)：金數(shù)據(jù) - 免費(fèi)好用的表單設(shè)計(jì)和數(shù)據(jù)收集分享工具 正在體驗(yàn)中問卷星：提供了功能強(qiáng)大的編輯問卷、收集數(shù)據(jù)、統(tǒng)計(jì)分析和樣本服務(wù)功能，能夠全方位滿足企業(yè)在問卷調(diào)查工作當(dāng)中的需求。另外還提供了收費(fèi)的專業(yè)版，功能更為豐富。

· 番茄表單：具備基礎(chǔ)性的問卷編輯功能，基本能夠滿足企業(yè)制作問卷的需求，企業(yè)可以通過微信等社交平臺(tái)或是網(wǎng)站嵌入的方式發(fā)布問卷，平臺(tái)還詳細(xì)統(tǒng)計(jì)了調(diào)查結(jié)果，不過平臺(tái)暫不支持樣本服務(wù)。

· 騰訊問卷：提供了強(qiáng)大的編輯問卷與統(tǒng)計(jì)分析功能，豐富的題型與多維度的統(tǒng)計(jì)圖表能夠滿足用戶需求，還專門針對(duì)機(jī)構(gòu)和企業(yè)用戶提供了免費(fèi)的專業(yè)版。不過騰訊問卷的系統(tǒng)無法通過郵件和短信方式跟蹤跟蹤目標(biāo)群體作答情況。

4. 云服務(wù)

· 七牛云存儲(chǔ)：云存儲(chǔ)首頁 - 七牛云存儲(chǔ) 最美應(yīng)用目前正在使用七牛的服務(wù)

· 阿里云：阿里云-打造數(shù)據(jù)分享第一平臺(tái) 除去Amazon，阿里云/盛大云在國內(nèi)算是老牌，但網(wǎng)絡(luò)上的負(fù)面消息也很多。

· 百度云：百度開放云平臺(tái)

· 盛大云：盛大云計(jì)算

· 阿里云云監(jiān)控云盾：阿里云-打造數(shù)據(jù)分享第一平臺(tái) 阿里云監(jiān)控與云盾是購買云服務(wù)后的配套服務(wù)。

· 監(jiān)控寶：監(jiān)控寶-中國最好的網(wǎng)站監(jiān)控神器 云智慧旗下網(wǎng)站 監(jiān)控寶功能類似于阿里云監(jiān)控，安全寶功能類似于阿里云盾，但功能上都更強(qiáng)大一些。

5. 第三方郵件發(fā)送服務(wù)

· SendCloud：SendCloud-專業(yè)的觸發(fā)郵件發(fā)送平臺(tái)，為開發(fā)者解決郵件發(fā)送難題！

· Amazon SES：AWS | Amazon Simple Email Service (SES)

· Mailgun：Transactional Email API Service for Developers

6. 更多資源

· 知乎：知乎 - 與世界分享你的知識(shí)、經(jīng)驗(yàn)和見解

· 產(chǎn)品設(shè)計(jì)與用戶體驗(yàn)專欄（這是我自己的）：http://zhuanlan.zhihu.com/design

· Github：GitHub · Build software better, together.

· Stackoverflow：Stack Overflow

· iOS社區(qū)Cocoachina：CocoaChina 蘋果開發(fā)中文站

· Android社區(qū)eoe：eoe Android開發(fā)者社區(qū)_Android開發(fā)論壇_Android開發(fā)

· CSDN：CSDN.NET - 全球最大中文IT社區(qū)，為IT專業(yè)技術(shù)人員提供最全面的信息傳播和服務(wù)平臺(tái)

· ITeye：ITeye Java編程 Spring框架 Ajax技術(shù) agile敏捷軟件開發(fā) ruby on rails實(shí)踐

· 開源中國：開源中國 - 找到您想要的開源項(xiàng)目，分享和交流

· Html5：HTML5中國：中國最大的HTML5中文門戶

· 開源中國開源項(xiàng)目列表：開源項(xiàng)目大全 用好開源，省時(shí)省力

· WordPress：http://wordpress.com/ 快速搭起網(wǎng)站

7.免費(fèi)互助推廣平臺(tái)

· 個(gè)推：國內(nèi)最主流的大數(shù)據(jù)推送技術(shù)服務(wù)商之一，合作伙伴包括新浪微博、墨跡天氣、網(wǎng)易新聞、滴滴出行等在內(nèi)的50萬App。其免費(fèi)版本功能較全，包含了推送和數(shù)據(jù)分析兩大部分內(nèi)容，同時(shí)提供了20萬條／秒的推送速度。不過個(gè)推的免費(fèi)版不適用于游戲、金融和私有云客戶，并且App的用戶量不能超過500萬。

· 極光推送：是一個(gè)免費(fèi)幫助用戶推送消息的工具。用戶注冊(cè)帳號(hào)之后選擇創(chuàng)建應(yīng)用，上傳應(yīng)用名稱及應(yīng)用包后（iOS應(yīng)用需要上傳iOS開發(fā)證書及證書密碼）即可完成創(chuàng)建。用戶想要推送消息只需要選擇應(yīng)用，填寫完推送內(nèi)容后點(diǎn)擊頁面最下方的“立即發(fā)送”即可。不過免費(fèi)用戶不支持按照用戶分群推送，且不支持接入API進(jìn)行數(shù)據(jù)分析。

· 活動(dòng)盒子：主要為企業(yè)的有獎(jiǎng)活動(dòng)營銷提供便利，它不僅可以免費(fèi)為企業(yè)創(chuàng)建H5活動(dòng)，提供活動(dòng)獎(jiǎng)品，還可以對(duì)活動(dòng)后續(xù)的數(shù)據(jù)進(jìn)行統(tǒng)計(jì)。企業(yè)用戶選擇自己滿意的活動(dòng)模板之后，可以對(duì)活動(dòng)的細(xì)節(jié)進(jìn)行進(jìn)一步設(shè)置，比如活動(dòng)名稱、舉辦的時(shí)間、商家logo、活動(dòng)獎(jiǎng)品等信息。制作完成后，用戶可將該H5分享至各大平臺(tái)進(jìn)行活動(dòng)營銷。

· 風(fēng)暴ASO：是一個(gè)免費(fèi)做APP數(shù)據(jù)分析的平臺(tái)，為企業(yè)推廣優(yōu)質(zhì)的APP。（ASO的作用是提升APP在各類應(yīng)用市場排行榜和搜索結(jié)果排名的過程，利用APP商店的搜索規(guī)則和排名規(guī)則讓APP更容易被用戶搜索或看到。）