原文 web開(kāi)發(fā)技術(shù)棧（框架）總結(jié)

Bootstrap-Layui-Amazeui-jQuery-vue-react-AngularJS-ci-Thinkphp-Yii-Laravel-Node-Django-springMVC-apache-nginx-mysql-redis……

天吶，好多……

小編雖說(shuō)出身工業(yè)軟件，但心里一直藏著一個(gè)UI夢(mèng)。近兩年，小編業(yè)余時(shí)間從零開(kāi)始摸索web開(kāi)發(fā)，把web開(kāi)發(fā)常用的技術(shù)和框架大概都摸了摸看了看，趁著五一假期有點(diǎn)時(shí)間，做個(gè)總結(jié)。

本文提到的前端，是指通俗語(yǔ)義下web開(kāi)發(fā)的前端，主要內(nèi)容是視圖層的開(kāi)發(fā)，包括UI布局、用戶交互及后端數(shù)據(jù)請(qǐng)求展示。

本文提到的后端，是指web開(kāi)發(fā)的后端，內(nèi)容包括模塊路由和數(shù)據(jù)庫(kù)存取。注意，這里的后端不是指大數(shù)據(jù)開(kāi)發(fā)領(lǐng)域的Hadoop、Storm那些。

前端

JavaScript(后文統(tǒng)稱為js)、css、HTML是前端開(kāi)發(fā)的語(yǔ)言基礎(chǔ)，如果想能將前端框架用好還是需要將水平提高到大概能用的程度。html負(fù)責(zé)網(wǎng)頁(yè)的內(nèi)容和基本結(jié)構(gòu)，css負(fù)責(zé)UI樣式，js負(fù)責(zé)將用戶請(qǐng)求傳送到后端并將后端數(shù)據(jù)在html頁(yè)面中展示。

前端的框架分兩類(lèi)，UI樣式庫(kù)和js庫(kù)。有些UI樣式為了實(shí)現(xiàn)動(dòng)態(tài)效果，會(huì)使用js庫(kù)如jQuery。

前端開(kāi)發(fā)的編程工作JS為主，還有近幾年出的TypeScript（JS的超集）。

奇怪的是，最近各官網(wǎng)下載的開(kāi)發(fā)包里都不帶jQuery庫(kù)，如有專業(yè)人士路過(guò)請(qǐng)稍作指點(diǎn)。

UI樣式庫(kù)

前端框架中有很大一部分是UI樣式庫(kù)。這些樣式庫(kù)的關(guān)注點(diǎn)是視圖。對(duì)于糾結(jié)（患有強(qiáng)迫癥）的開(kāi)發(fā)者，不建議使用UI樣式框架，真的是哪哪都看著不爽，到最后還不如自己css造輪子來(lái)的爽快。自己css造，不一定好看，但可以滿足強(qiáng)迫癥。

Bootstrap

小編認(rèn)為Bootstrap是一個(gè)非常好的入門(mén)選擇，教程示例非常豐富，顏值也還過(guò)得去。
柵格布局自帶響應(yīng)式，常用的顏色都有類(lèi)可以直接調(diào)用。
Bootstrap中文網(wǎng)：http://www.bootcss.com/

用法示例：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">導(dǎo)航</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">鏈接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">鏈接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">鏈接</a>
      </li> 
    </ul>
  </div>  
</nav>

示例代碼可以看出，引入類(lèi)的方式來(lái)定義控件樣式，使用方便而且語(yǔ)義清晰。

Layui

和Bootstrap差不多的東西，個(gè)人感覺(jué)色系看起來(lái)稍顯寡淡。
Layui官網(wǎng)：https://www.layui.com

Amaze-UI

俗稱妹子UI，也是一款樣式框架。
妹子官網(wǎng)：http://amazeui.org/

Font Awesome

圖標(biāo)字體庫(kù)和CSS框架，畢竟只有圖標(biāo)字體和CSS，所以一般配合其他的樣式框架使用。
Font Awesome官網(wǎng)：http://fontawesome.dashgame.com/

js庫(kù)

js庫(kù)是實(shí)現(xiàn)功能的主要手段。常規(guī)的js庫(kù)中都會(huì)包含DOM（或虛擬DOM）操作、ajax異步get和post請(qǐng)求封裝實(shí)現(xiàn)、頁(yè)面渲染刷新等。

相比原生js，使用庫(kù)優(yōu)點(diǎn)在于方便，缺點(diǎn)在于js庫(kù)文件通常動(dòng)輒數(shù)百kb，在帶寬緊張的環(huán)境會(huì)拖慢頁(yè)面的加載速度。

小編現(xiàn)在喜歡用vue.min.js，輕快又方便。為啥不用vue-cli方式呢？講真，對(duì)于php流個(gè)人業(yè)余全菜開(kāi)發(fā)者來(lái)說(shuō)，npm run dev帶來(lái)的不方便比方便更多些。

這年頭，不用npm都不好意思說(shuō)自己是前端框架，不信請(qǐng)看vue、React、AngularJS，全都是這套玩法。

jQuery

對(duì)于傳統(tǒng)開(kāi)發(fā)者來(lái)說(shuō)，js為主的前端框架與其說(shuō)是框架像是庫(kù)。對(duì)C/C++開(kāi)發(fā)者來(lái)說(shuō)，就像是

#include <stdio.h>
……

jQuery最具特色的操作是 $(“yixzm”) 等價(jià)于 document.getElementById(“yixzm”)，以及ajax，就像這樣：

$.ajax({ url: "/api", context: document.body, success: function(){
    console.log("test");
}});

DOM操作真的很方便。

jQuery官網(wǎng)：http://jquery.com/

vue

只需要用一下下，就會(huì)很爽的庫(kù)。
職業(yè)玩家都使用npm的方式，業(yè)余玩家嘛用用link引入也就可以了。vue對(duì)開(kāi)發(fā)者最大的便利是不用頻繁的DOM操作，數(shù)據(jù)只需要賦值給定義的對(duì)象元素即可同步刷新頁(yè)面內(nèi)容。

據(jù)jsp玩家講，和jsp差不多？據(jù)php玩家講，和 <?php 差不多？

但小編感覺(jué)方便程度上還是差很多的，畢竟請(qǐng)求到的數(shù)據(jù)可以直接進(jìn)頁(yè)面，寫(xiě)在js里怎么看都更好些。

vue-cli模式開(kāi)發(fā)，可以讓js代碼工程化。或許，這時(shí)候的前端工程師需要調(diào)整鄙視鏈層級(jí)。（C >> C++ >> java >> php >> js？）

小編說(shuō)，js主要負(fù)責(zé)請(qǐng)求交互和動(dòng)態(tài)刷新，但有人不講規(guī)矩。比如vue中的vue-element，不僅能處理交互，還能生成UI的組件模塊。

vue-cli模式開(kāi)發(fā)，有個(gè)叫做模板的東西，文件后綴格式如filename.vue，這玩意將每一個(gè)獨(dú)立的HTML模塊連同CSS和JS代碼一起封裝在一個(gè)文件里，用的時(shí)候直接引入，相當(dāng)方便。

用法示例代碼：

<div id="app">
  <ul>
    <template v-for="key in objs">
      <li>{{ obj.txt }}</li>
      <li v-html="obj.html">--------------</li>
    </template>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    objs: [
      { txt: 'yixzm', html: '<h1>yixzm</h1>' },
      { txt: 'dream', html: '<h2>dream</h2>' },
      { txt: 'stone', html: '<h3>stone</h3>' },
    ]
  }
})
</script>

怎么樣？夠方便吧~

v-for 這玩意，小編第一次看到時(shí)被驚呆了，還能這么寫(xiě)頁(yè)面？用起來(lái)好舒服~

vue官網(wǎng)：https://cn.vuejs.org/

React

這玩意和vue的類(lèi)似之處是也能工程化的管理js開(kāi)發(fā)項(xiàng)目。既能引入的方式使用，也能npm方式構(gòu)建項(xiàng)目。

用法示例代碼：

<div id="example"></div>

<script type="text/babel">
function UserGreeting(props) {
  return <h1>歡迎回來(lái)!</h1>;
}

function GuestGreeting(props) {
  return <h1>請(qǐng)先注冊(cè)。</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('example')
);
</script>

通過(guò)示例代碼中的這兩句：

document.getElementById('example')

return <h1>請(qǐng)先注冊(cè)。</h1>;

可以發(fā)現(xiàn)，React的開(kāi)發(fā)渲染風(fēng)格和原生JS相似度很高，和vue區(qū)別很大。

React官網(wǎng)：https://reactjs.org/

AngularJS

AngularJS和vue代碼相似度很高。

<div ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

和vue相比，幾乎就是換了各變量名…… 當(dāng)然，hello world 只是表象，更多區(qū)別還需要深入使用才能感受到。

AngularJS官網(wǎng)：https://angularjs.org/
AngularJS中文網(wǎng)：http://www.angularjs.net.cn/

后端

除了專注視圖活躍在用戶面前的前端框架，還有一些默默在后臺(tái)奉獻(xiàn)的后端框架。web后端框架做的事一般來(lái)說(shuō)，是提供http請(qǐng)求服務(wù)接口，實(shí)現(xiàn)請(qǐng)求路由、數(shù)據(jù)存取、模塊后臺(tái)功能實(shí)現(xiàn)等。

新時(shí)代的前端框架如vue和React，本身自帶路由功能，大家將其叫做前端路由。前端路由一般使用在開(kāi)發(fā)SPA（單頁(yè)應(yīng)用）的場(chǎng)景，路由時(shí)會(huì)異步加載數(shù)據(jù)渲染至頁(yè)面但不會(huì)重新加載整個(gè)頁(yè)面。而后端路由會(huì)重新向服務(wù)端提交請(qǐng)求。

后端框架一句話總結(jié)：存取數(shù)據(jù)分模塊，各種語(yǔ)言都能用。

Php有ci、tp、Yii和laveral，java有springMVC，Python有Django，JS有node，可謂百家爭(zhēng)鳴、百花齊放。

這時(shí)候，C/C++出身的小編秉著不靠天不靠地輪子自己造的精神，對(duì)各框架普遍采取讀源碼試用而不用的態(tài)度。了解、學(xué)習(xí)，但寫(xiě)寫(xiě)東西還是喜歡自己擼。強(qiáng)擼和借鑒（抄襲）有益理解別人的閃光點(diǎn)。

php框架

ci和tp上手極快，Yii和Laravel稍微有點(diǎn)學(xué)習(xí)成本。

ci

ci即優(yōu)雅的CodeIgniter，很mini的一款框架，相對(duì)容易入門(mén)。

CI中文網(wǎng)：https://codeigniter.org.cn/

thinkphp

傳說(shuō)中的培訓(xùn)班神器，據(jù)說(shuō)上手極快？

官網(wǎng)：http://www.thinkphp.cn/

Yii

沒(méi)啥好說(shuō)的，看起來(lái)和ci、tp貌似差不多…… 好久沒(méi)翻Yii源碼，記得貌似是傳統(tǒng)的<?php code ?>的方式寫(xiě)模板？沒(méi)啥特別的映象。

Yii中文網(wǎng)：https://www.yiichina.com/

Laravel

本菜感覺(jué)上手好麻煩，夾雜的東西太多。（正在使用laravel的大神請(qǐng)嘗試?yán)斫庑【幹靥岬降摹安恕弊?#xff09;
Composer安裝模塊效率很高，據(jù)說(shuō)是沖鋒槍？學(xué)習(xí)成本還是蠻高的。

Laravel中文網(wǎng)：https://www.golaravel.com/

Python框架

Django

Python版的Laravel……

Django小編寫(xiě)自動(dòng)化、爬蟲(chóng)的時(shí)候也會(huì)用到，但拿來(lái)寫(xiě)web總感覺(jué)不習(xí)慣…… 誰(shuí)讓Php是世界上最好的語(yǔ)言呢~

Django官網(wǎng)：https://www.djangoproject.com/

Java框架

Spring MVC，額，沒(méi)寫(xiě)過(guò)Java，小編如果說(shuō)這是Java的web開(kāi)發(fā)框架，不知是否有專家會(huì)留言批評(píng)呢？

HTTP服務(wù)

以上后端框架關(guān)注應(yīng)用和數(shù)據(jù)，對(duì)HTTP服務(wù)監(jiān)聽(tīng)關(guān)注的并不多。服務(wù)監(jiān)聽(tīng)工作一般由Apache或者Nginx來(lái)承擔(dān)，負(fù)責(zé)請(qǐng)求響應(yīng)、并發(fā)和數(shù)據(jù)返回。關(guān)于HTTP服務(wù)，小編除了Apache用的比較多，Nginx搭過(guò)幾個(gè)系統(tǒng)外，了解的并不多。所以，小編暫且總結(jié)接觸過(guò)的這三個(gè)。

對(duì)于apache和nginx的比較，網(wǎng)上有很多帖子有講而且很詳細(xì)。比如這篇：Apache和Nginx的區(qū)別 就講的很好

后端流的JS

node-js，額，只用node寫(xiě)過(guò)一個(gè)socket server，沒(méi)啥可總結(jié)的。node寫(xiě)在這里是否合適也有待學(xué)習(xí)。
nodejs中文網(wǎng)：http://nodejs.cn/

apache

老牌的HTTP服務(wù)提供者。在小編寫(xiě)C++的時(shí)代，傳說(shuō)中的LAMP、WAMP猶如迷霧中的燈塔一般，在知識(shí)的海洋里引領(lǐng)著小編。

apache動(dòng)態(tài)請(qǐng)求響應(yīng)效率高，httpd.conf配置也極其方便。

apache官網(wǎng)：http://www.apache.org/

nginx

據(jù)說(shuō)更擅長(zhǎng)靜態(tài)文件響應(yīng)？需要配置反向代理才能正常使用Php、Python等語(yǔ)言開(kāi)發(fā)的工程，小編個(gè)人感覺(jué)有些麻煩，不怎么喜歡用。

nginx官網(wǎng)：http://nginx.org/

數(shù)據(jù)庫(kù)

存數(shù)據(jù)，mysql很方便。redis在內(nèi)存里，數(shù)據(jù)請(qǐng)求時(shí)加載超級(jí)快！

mysql VS redis？

關(guān)系型和非關(guān)系型，索引方便和響應(yīng)快速……
一起用吧，就像硬盤(pán)和內(nèi)存。

不過(guò)，現(xiàn)在mysql一般用MariaDB來(lái)替代。
mariadb官網(wǎng)：https://mariadb.org/
mysql官網(wǎng)：https://www.mysql.com/
redis中文網(wǎng)：http://www.redis.cn/

開(kāi)發(fā)環(huán)境及工具

vscode

這玩意寫(xiě)前端代碼還不錯(cuò)，良心工具。

vscode官網(wǎng)：https://code.visualstudio.com/

……

還有很多，小編這次先總結(jié)這些。

#寫(xiě)在最后

web開(kāi)發(fā)內(nèi)容很多，也很有趣。

小編將求索以圖成長(zhǎng)。