摘要：先來(lái)看一張系統(tǒng)前后端架構(gòu)模型圖。一種接口的約定本文用于定義一種統(tǒng)一的接口設(shè)計(jì)方案，希望具有參考價(jià)值。，和都是常見(jiàn)的軟件架構(gòu)設(shè)計(jì)模式，它通過(guò)分離關(guān)注點(diǎn)來(lái)改進(jìn)代碼的組織方式。

相信不少同學(xué)在維護(hù)老項(xiàng)目時(shí)，都遇到過(guò)在深深的 if else 之間糾纏的業(yè)務(wù)邏輯。面對(duì)這樣的一團(tuán)亂麻，簡(jiǎn)單粗暴地繼續(xù)增量修改常常只會(huì)讓復(fù)雜度越來(lái)越高，可讀性越來(lái)越差，有沒(méi)有固定的套路來(lái)梳理它呢？這里分享三種簡(jiǎn)單通用的重構(gòu)方式。 所謂的【面條代碼】，常見(jiàn)于對(duì)復(fù)雜業(yè)務(wù)流程的處理中?！?br>

為了解決傳統(tǒng)Web開(kāi)發(fā)模式帶來(lái)的各種問(wèn)題，我們進(jìn)行了許多嘗試，但由于前/后端的物理鴻溝，嘗試的方案都大同小異。痛定思痛，今天我們重新思考了“前后端”的定義，引入前端同學(xué)都熟悉的NodeJS，試圖探索一條全新的前后端分離模式。

隨著不同終端(Pad/Mobile/PC)的興起，對(duì)開(kāi)發(fā)人員的要求越來(lái)越高，純?yōu)g覽器端的響應(yīng)式已經(jīng)不能滿(mǎn)足用戶(hù)體驗(yàn)的高要求，我們往往需要針對(duì)不同的終端開(kāi)發(fā)定制的版本。為了提升開(kāi)發(fā)效率，前后端分離的需求越來(lái)越被重視，后端負(fù)責(zé)業(yè)務(wù)/數(shù)據(jù)接口，前端負(fù)責(zé)展現(xiàn)/交互邏輯，同一份數(shù)據(jù)接口，我們可以定制開(kāi)發(fā)多個(gè)版本。

這個(gè)話(huà)題最近被討論得比較多，阿里有些BU也在進(jìn)行一些嘗試。討論了很久之后，我們團(tuán)隊(duì)決定探索一套基于NodeJS的前后端分離方案，過(guò)程中有一些不斷變化的認(rèn)識(shí)以及思考，記錄在這里，也希望看到的同學(xué)參與討論，幫我們完善。

由于跨域原因，第三方 Javascript 向后端發(fā)起請(qǐng)求時(shí)不能簡(jiǎn)單的使用 Ajax（XMLHttpRequest）。這篇文章帶你擼一遍第三方 Javascript 開(kāi)發(fā)中可能會(huì)用到的前后端接口協(xié)議。

文章主要介紹了 前端 + 后端如何對(duì)站點(diǎn)進(jìn)行優(yōu)化，并拿出 Google 的前端代碼做了分析。

性能優(yōu)化是老生常談了，從雅虎的 N 條軍規(guī)，前端各種優(yōu)化準(zhǔn)則，到 2010 年 Google IO 上 Steven 提出的高性能建站指南，都在告訴開(kāi)發(fā)者，一個(gè)站點(diǎn)的性能非常重要，如何在有限的帶寬條件下，達(dá)到極限的訪(fǎng)問(wèn)性能，如何讓訪(fǎng)問(wèn)者，無(wú)論是從響應(yīng)速度，視覺(jué)感官，操作流暢度都達(dá)到最佳體驗(yàn), 是目前 Web 技術(shù)上的一個(gè)至關(guān)重要的挑戰(zhàn).

相信很多小伙伴都用過(guò) MVP 模式，之前也一直在糾結(jié) MVP 是什么，真正的 MVP 模式的寫(xiě)法是什么，其實(shí)后來(lái)想明白了，只要按照 MVP 的設(shè)計(jì)，里面怎么變化都是正常的，設(shè)計(jì)模式也不是一成不變的，要根據(jù)實(shí)際情況靈活的使用

隨著互聯(lián)網(wǎng)高速發(fā)展，公司對(duì)項(xiàng)目開(kāi)發(fā)周期不斷縮短，我們面對(duì)各種需求，使用原有對(duì)接方式，各端已經(jīng)很難快速應(yīng)對(duì)各種需求，更難以提高效率。于是，我們不得不重新制定對(duì)接規(guī)范、開(kāi)發(fā)邏輯以便快速上線(xiàn)項(xiàng)目。 盡可能的縮小溝通的成本，開(kāi)最少的會(huì)，確定大部分的事。 花最少的時(shí)間寫(xiě)文檔，保證90%的…

原文地址：Building account systems 原文作者：Mike Hearn 譯文出自：掘金翻譯計(jì)劃 本文永久鏈接：https://github.com/xitu/gold-...…

柵格就是網(wǎng)格，我們很小就會(huì)接觸到網(wǎng)格，比如小時(shí)候的方格本作文本，畫(huà)的表格等等，利用表格進(jìn)行分類(lèi)排版。UI中的柵格系統(tǒng)就是對(duì)各個(gè)平臺(tái)的網(wǎng)格布局進(jìn)行系統(tǒng)化，比如網(wǎng)頁(yè)的網(wǎng)格定義，APP的網(wǎng)格定義。 柵格化系統(tǒng)是設(shè)計(jì)的一個(gè)基本原則，能夠有規(guī)律的排版頁(yè)面的布局，在CSS的Bootstra…

Virtual DOM / reconciliation algorithm, React 如此流行到底有哪些原因呢？

由于篇幅有限、框架眾多，在分析之前，我們從版本更新頻度和社區(qū)活躍度來(lái)進(jìn)行初步的篩選。已經(jīng)出現(xiàn)了比較久的Backbone和Knockout, 目前流行度正在持續(xù)衰退，說(shuō)明市場(chǎng)已經(jīng)做出了選擇，市面上出現(xiàn)了更有競(jìng)爭(zhēng)力的替代品; 還有aurelia這類(lèi)的新涌現(xiàn)者，需要等待時(shí)間的檢驗(yàn)。

相信前后端分離這個(gè)詞，早已流傳甚廣，大家一些自己的理解，但可能有些人的觀(guān)點(diǎn)有稍許偏差：我們要搞 SPA，全AJAX，那才是前后端分離了。 我們來(lái)聊聊什么是前后端分離。 先來(lái)看一張WEB系統(tǒng)前后端架構(gòu)模型圖。 從圖中可以清晰的看到，前后端的界限是按照瀏覽器和服務(wù)器的劃分。那么我們…

之前一篇文章中的信息架構(gòu)應(yīng)該如何梳理，當(dāng)我們嘗試分析一款移動(dòng)端 app 的時(shí)候，我們應(yīng)該如何進(jìn)行思考之類(lèi)的問(wèn)題。

那么今天，我將從大家經(jīng)常用到的百度外賣(mài)（iOS v4.4.1）說(shuō)開(kāi)去，闡述我自己分析一款 app 時(shí)候的思維邏輯和過(guò)程，當(dāng)然我說(shuō)的不一定對(duì)，希望能給新手朋友們一些思路。

六張圖描述mvvm雙向綁定實(shí)現(xiàn)過(guò)程

如何寫(xiě)一份用戶(hù)體驗(yàn)好、開(kāi)發(fā)喜歡看、靠譜的需求文檔呢？筆者將從以下幾個(gè)方面展開(kāi)闡述。

本文用于定義一種統(tǒng)一的RESTful接口設(shè)計(jì)方案，希望具有參考價(jià)值。本文所描述的方案比較學(xué)院派（死板），在上一家公司提出沒(méi)有被采納，在所了解到的有限的若干家聲稱(chēng)采用了RESTful風(fēng)格的公司里，發(fā)現(xiàn)他們也偏離甚遠(yuǎn)，而在書(shū)本以及網(wǎng)上大部分介紹RESTful的資料里，卻都是這樣的方…

總結(jié)起來(lái)，大體優(yōu)化思路就是：緩存/預(yù)加載/并行，緩存一切網(wǎng)絡(luò)請(qǐng)求，盡量在用戶(hù)打開(kāi)之前就加載好所有內(nèi)容，能并行做的事不串行做。這里有些優(yōu)化手段需要做好一整套工具和流程支持，需要跟開(kāi)發(fā)效率權(quán)衡，視實(shí)際需求優(yōu)化。

總結(jié)一下移動(dòng)端遇見(jiàn)的坑。

什么是響應(yīng)式？響應(yīng)式的頁(yè)面在不同的屏幕有不同的布局，換句話(huà)說(shuō)，使用相同的html在不同的分辨率有不同的排版。如下圖所示： 響應(yīng)式布局是為了解決適配的問(wèn)題，傳統(tǒng)的開(kāi)發(fā)方式是PC端開(kāi)發(fā)一套，手機(jī)端再開(kāi)發(fā)一套，而使用響應(yīng)式布局只要開(kāi)發(fā)一套就好了。因?yàn)樗怯玫耐瑯觝tml，所以它的JS…

本文首發(fā)于掘金專(zhuān)欄，發(fā)布于廖柯宇的獨(dú)立博客，轉(zhuǎn)載請(qǐng)保留原文鏈接。 MVC，MVP和MVVM都是常見(jiàn)的軟件架構(gòu)設(shè)計(jì)模式（Architectural Pattern），它通過(guò)分離關(guān)注點(diǎn)來(lái)改進(jìn)代碼的組織方式。不同于設(shè)計(jì)模式（Design Pattern），只是為了解決一類(lèi)問(wèn)題而總結(jié)出…

前端性能優(yōu)化可以分為三個(gè)level：靜態(tài)資源優(yōu)化、接口訪(fǎng)問(wèn)優(yōu)化、頁(yè)面渲染速度優(yōu)化，在操控門(mén)檻上依次遞增，優(yōu)化效果上越發(fā)沒(méi)有這么明顯，所以很多小團(tuán)隊(duì)只會(huì)做到了第一個(gè)level追求極致的前端性能體驗(yàn)，提升自己的level，come on ~ 目錄 一、靜態(tài)資源優(yōu)化 二、接口訪(fǎng)問(wèn)優(yōu)化…

設(shè)計(jì)一套良好的 API 接口。 原文地址：服務(wù)端指南 | 良好的 API 設(shè)計(jì)指南 博客地址：http://blog.720ui.com/ 版本號(hào) 在 RESTful API 中，API 接口應(yīng)該盡量兼容之前的版本。但是，在實(shí)際業(yè)務(wù)開(kāi)發(fā)場(chǎng)景中，可能隨著業(yè)務(wù)需求的不斷迭代，現(xiàn)有的…

最常用的 15 個(gè)架構(gòu)原則

分析 snabbdom 源碼，手把手實(shí)現(xiàn)一個(gè) Virtual DOM 庫(kù)。

本文大多數(shù)的內(nèi)容基本都是從多篇博客或相關(guān)文章中進(jìn)行篩選，提煉出來(lái)，原本我也想用我匱乏的語(yǔ)言來(lái)描述，但是發(fā)現(xiàn)別人已經(jīng)總結(jié)的更好了，所以...我還是乖乖的站在巨人的肩膀上吧~~

設(shè)計(jì)模式