最近在寫移動端頁面整份，整理了部分學習筆記和應用思考黑界，在昨天的內(nèi)部分享會議基礎上進一步修改以成此版，聊以記錄皂林。
前端開發(fā)的歷史
什么是前端？
前端：針對瀏覽器的開發(fā)蚯撩，代碼在瀏覽器運行
后端：針對服務器的開發(fā)础倍，代碼在服務器運行前后端不分的時代
互聯(lián)網(wǎng)發(fā)展的早期，前后端開發(fā)是一體的胎挎，前端代碼是后端代碼的一部分沟启。早期前后端運作流程分為以下幾步：
1后端收到瀏覽器的請求
2生成靜態(tài)頁面
3發(fā)送到瀏覽器后端?
MVC 的開發(fā)模式
早期的網(wǎng)站開發(fā)，采用的是后端 MVC 模式犹菇。
?Model（模型層）：提供/保存數(shù)據(jù)
?Controller（控制層）：數(shù)據(jù)處理德迹，實現(xiàn)業(yè)務邏輯
?View（視圖層）：展示數(shù)據(jù)，提供用戶界面前端只是后端 MVC 的 V揭芍。
前端工程師的角色那時的前端工程師胳搞，實際上是模板工程師，負責編寫頁面模板。后端代碼讀取模板肌毅，替換變量筷转，渲染出頁面。比如C#的MVC,以及PHP模版悬而。
直到Ajax 技術誕生呜舒，改變了一切。前端不再是后端的模板笨奠，可以獨立得到各種數(shù)據(jù)袭蝗。Ajax 技術促成了 Web 2.0 的誕生。
Web 2.0
?Web 1.0：靜態(tài)網(wǎng)頁般婆，純內(nèi)容展示
?Web 2.0：動態(tài)網(wǎng)頁到腥，富交互，前端數(shù)據(jù)處理從那時起腺兴，前端變得復雜了左电，對前端工程師的要求越來越高。前端 MVC 框架前端通過 Ajax 得到數(shù)據(jù)页响，因此也有了處理數(shù)據(jù)的需求篓足。前端代碼變得也需要保存數(shù)據(jù)、處理數(shù)據(jù)闰蚕、生成視圖栈拖，這導致了前端 MVC 框架的誕生。
前端還有一種天然的方法没陡，可以切換視圖涩哟，那就是 URL。通過 URL 切換視圖盼玄，這就是 Router（路由）的作用贴彼。以 Backbone 為例：
App.Router = Backbone.Router.extend({??
routes: {? ? '': 'index',? ? 'show': 'show'? ? },? index: function () {? ? $(document.body).append("調(diào)用了 Index 路由");? },??
show: function () {? ? $(document.body).append("調(diào)用了 Show 路由"); ?},
});
MVVM 模式
另一些框架提出 MVVM 模式，用 View Model 代替 Controller埃儿。
?Model
?View
?View-Model：簡化的 Controller器仗，唯一作用就是為 View 提供處理好的數(shù)據(jù)，不含其他邏輯童番。
本質(zhì)：view 綁定 view-model精钮，視圖與數(shù)據(jù)模型強耦合。數(shù)據(jù)的變化實時反映在 view 上剃斧，不需要手動處理轨香。
SPA（SPA = Single-page application）
前端可以做到：
?讀寫數(shù)據(jù)
?切換視圖
?用戶交互
這意味著，網(wǎng)頁其實是一個應用程序幼东。2010年后臂容，前端工程師從開發(fā)頁面科雳，變成了開發(fā)”前端應用“（跑在瀏覽器里面的應用程序）。AngularGoogle 公司推出的 Angular 是最流行的 MVVM 前端框架策橘。它的風格屬于 HTML 語言的增強炸渡，核心概念是雙向綁定。
雙向綁定不是很新的技術丽已，但是一種很方便的特性蚌堵，很多托方式編程IDE都是采用雙向綁定機制，WPF沛婴，VueVue.js也有這種特性吼畏。
VueVue.js 是現(xiàn)在很熱門的一種前端 MVVM 框架。它的基本思想與 Angular 類似嘁灯，但是用法更簡單泻蚊，而且引入了響應式編程的概念。Vue 的模板與數(shù)據(jù)也是雙向綁定的丑婿。
JS 代碼：
var journal = new Vue({? el: '#journal',? data: {? ? message: 'Your first entry'? }});
前后端分離
?Ajax -> 前端應用興起
?智能手機 -> 多終端支持
由于這兩個原因性雄，導致前端開發(fā)方式發(fā)生根本的變化。前端不再是后端 MVC 中的 V羹奉，而是單獨的一層秒旋。REST 接口前后端分離以后，它們之間通過接口通信诀拭。后端暴露出接口迁筛，前端消費后端提供的數(shù)據(jù)。后端接口一般是 REST 形式耕挨，前后端的通信協(xié)議一般是 HTTP细卧。
NodeJS
2009年，Node 項目誕生筒占，它是服務器上的 JavaScript 運行環(huán)境贪庙。Node = JavaScript + 操作系統(tǒng) APINode 的意義，自此：
?JavaScript 成為服務器腳本語言翰苫，與 Python 和 Ruby 一樣
?JavaScript 成為唯一的瀏覽器和服務器都支持的語言?前端工程師可以編寫后端程序了前端開發(fā)模式的根本改變
?Node 環(huán)境下開發(fā)
?大量使用服務器端工具
?引入持續(xù)集成等軟件工程的標準流程
全棧工程師
?開發(fā)完成后插勤，編譯成瀏覽器可以運行的腳本，放上 CDN全棧工程師前端工程師正在轉(zhuǎn)變?yōu)槿珬９こ處?/p>
?一個人負責開發(fā)前端和后端
?從數(shù)據(jù)庫到 UI 的所有開發(fā)全棧技能怎樣才能稱為全棧工程師革骨？
?傳統(tǒng)前端技能：HTML、JavaScript析恋、CSS
?一門后端語言：php良哲，java，python助隧，c＃筑凫，node?移動端開發(fā)：iOS / Android / HTML5?其他技能：數(shù)據(jù)庫滑沧、HTTP 等等軟件行業(yè)的發(fā)展動力歷史演變：前后端不分 -> 前后端分離 -> 全棧工程師動力：更加產(chǎn)業(yè)化、大規(guī)模地生產(chǎn)軟件
?效率更高
?成本更低通用性好巍实、能夠快速產(chǎn)出的技術最終會贏滓技，單個程序員的生產(chǎn)力要求越來越高。
為什么 H5 技術會贏得移動端棚潦？
H5 就是一個最好的例子
?開發(fā)速度快：Native 需要重新編譯才能看到結果令漂，H5 是即時輸出
?開發(fā)成本低：Native 需要兩個開發(fā)團隊，H5 只要一個
?快速發(fā)布：iOS丸边、安卓 Native 新版本需要24小時叠必，H5 可以隨時更新
H5例子：
1、http://www.bilibili.com/mobile/video/av6681778.html?from=timeline&isappinstalled=1
2妹窖、http://q.cn2045.com
未來軟件的特點
?聯(lián)網(wǎng)
?高并發(fā)
?分布式
?跨終端現(xiàn)在基于 Web 的前端技術纬朝，將演變?yōu)槲磥硭熊浖耐ㄓ玫?GUI 解決方案。
移動端開發(fā)
移動端開發(fā)方式分類Native：原生 APP骄呼，使用 Java/Objective-C/Swift 開發(fā)
Webapp：在手機瀏覽器上展示的網(wǎng)頁
Hybird：混合應用Native + Html小程序：https://www.zhihu.com/topic/20061410/hot
區(qū)別主要在以下幾方面：開發(fā)成本共苛、更新、性能體驗蜓萄、安裝方式隅茎、跨平臺
移動端Web頁面常用庫：zepto、jquery绕德、hammerjs患膛、scroll、fastclick
例子：
在Xcode上創(chuàng)建一個標準iOS工程耻蛇，創(chuàng)建一個單頁面踪蹬，創(chuàng)建一個 UIWebView并做好全屏布局，使webview加載以下地址：“http://q.cn2045.com”臣咖，查看網(wǎng)頁源碼可以發(fā)現(xiàn)如下發(fā)起頁面跳轉(zhuǎn)的Js代碼：
if(browser.versions.android){
var str = window.demo.getLoginInfo();
if(str!=':'){
var arr = str.split(':');
var loginName=arr[0];
//var pass = localStorage.getItem('qti_pasw');
var pass = arr[1];
login(loginName,pass);
}else{
loginRegisterPage('login');
}
}else if(browser.versions.ios){
loadURL("objc://getLoginInfo");
}
在web view的代理事件中做如下處理：
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
//JS交互
if ([[url scheme] isEqualToString:@"objc"])
{
if ([[url host] isEqualToString:@"getLoginInfo"])
{
//持久化
xxxx
//回調(diào):
if (xxxx)
{
//自動登錄
NSString *np = [NSString stringWithFormat:@"login(%@,%@)",name,pass];
[webView stringByEvaluatingJavaScriptFromString:np];
} else {
//跳轉(zhuǎn)到登錄頁面
[webView stringByEvaluatingJavaScriptFromString:@"login()"];
}
}
｝
網(wǎng)絡安全
網(wǎng)絡7層基礎結構每一層有自己的安全機制構建方法跃捣，這里我們主要從應用層來說。
1夺蛇，技術上疚漆，可以實現(xiàn)HTTP ：加密鏈接，是以安全為目標的HTTP通道刁赦，簡單講是HTTP的安全版娶聘。即HTTP下加入SSL層甚脉，HTTPS的安全基礎是SSL，因此加密的詳細內(nèi)容就需要SSl
2牺氨，邏輯上一般使用token狡耻、映射表等機制，映射表廣泛被用在頁面路由夷狰，接口混淆上：下面是一個示例：調(diào)用一個創(chuàng)建用戶的接口如下：http://127.0.0.1:8089?user/createaccount/username=addd$password=sadwe參考下表之后，接口調(diào)用被替換為：http://127.0.0.1:8089?e3/g3/h6=addd$d7=sadwe
PS:前后端技術學習資源推薦：
1.慕課網(wǎng)
2.阮一峰博客
3.饑人谷
