看完 Jamstack 的調(diào)查報(bào)告，我抓住了最新的

看完 Jamstack 的調(diào)查報(bào)告，我抓住了最新的 Web 流行趨勢(shì)

日，Jamstack 社區(qū)發(fā)布了最新調(diào)查報(bào)告。調(diào)查報(bào)告由 Netlify 完成，今年有超過 7000 名社區(qū)開發(fā)人員受訪，是去年的兩倍多，受訪開發(fā)人員大多數(shù)是前端或全棧開發(fā)者。

調(diào)查報(bào)告可以幫助社區(qū)在 Jamstack 生態(tài)蓬勃發(fā)展的同時(shí)更好的了解開發(fā)者的動(dòng)態(tài)，也讓開發(fā)者在枯燥的工作中了解社區(qū)在做的工作和自身行業(yè)動(dòng)態(tài)。

今天帶你走進(jìn)調(diào)查結(jié)果一探究竟，看看有哪些技術(shù)亮點(diǎn)和有趣的事。

主流技術(shù)上的選擇

JavaScript 在 Web 編程領(lǐng)域仍占主導(dǎo)地位，TypeScript 迅速擴(kuò)張

毫無疑問，JavaScript 仍是社區(qū)內(nèi)大多數(shù)開發(fā)人員的主要語言，占比達(dá)到 55%，相比去年的 63% 有所下降。下降的部分，主要流到了 TypeScript，TypeScript 整體使用率有很大的提升，并且滿意度也非常高，一定程度上 TypeScript 擁有最快樂的開發(fā)群體。其他像 Python、Go 等在社區(qū)內(nèi)的開發(fā)者使用率與滿意度上都有所提高，它們也確實(shí)都是正流行的編程語言。

React 地位不可撼動(dòng)，jQuery 仍未消失

社區(qū)向開發(fā)人員詢問了 30 多個(gè)框架的使用情況，React 繼續(xù)在使用率和滿意度上占據(jù)主導(dǎo)地位，長(zhǎng)期以來一直如此。Vue 的滿意度也很高，使用率上只有 React 的一半。曾經(jīng)的三巨頭之一的 Angular 則有些不溫不火。

大型傳統(tǒng)框架框架例如 jQuery 和 Express 并沒有消失，仍有很多人使用，但是滿意度已經(jīng)很低了。小眾框架如 Next.js 有很不錯(cuò)的增長(zhǎng)，對(duì)于 Ember、Dojo 等基數(shù)小且滿意度低的框架，是時(shí)候考慮放棄了。

無服務(wù)器技術(shù)成主流

Jamstack 并非都是客戶端，所以社區(qū)還調(diào)查了服務(wù)器端技術(shù)的流行程度，了解 Jamstack 開發(fā)人員如何使用服務(wù)器端技術(shù)。數(shù)據(jù)顯示大多數(shù)開發(fā)人員對(duì)無服務(wù)器功能很感興趣，Kubernetes 很受歡迎。

代碼編輯器之間的戰(zhàn)斗

老生常談的問題，開發(fā)者永遠(yuǎn)避不開被詢問喜歡哪種編輯器，Vim IDE 之戰(zhàn)也從未停止。Jamstack 社區(qū)的開發(fā)人員更喜歡集成開發(fā)環(huán)境（IDE），基于 Web 的編輯器（如 Github、Glitch）也很受歡迎。

Sketch 失寵，F(xiàn)igma 成設(shè)計(jì)工具唯一選擇

對(duì)于許多 Web 開發(fā)者來說，設(shè)計(jì)也是很重要的一環(huán)。不同于幾年前 Sketch 的獨(dú)霸江湖，在工具上，Jamstack 的設(shè)計(jì)師們顯然更喜歡 Figma，使用率和滿意度都是遠(yuǎn)超其他工具的存在。左下角的其他幾款工具 Sketch、Adobe XD、Framer 多少有點(diǎn)尷尬了。

WordPress 繼續(xù)稱霸內(nèi)容管理系統(tǒng)

盡管滿意度很低，WordPress 還是內(nèi)容管理系統(tǒng)明顯的領(lǐng)導(dǎo)者，WordPress 搭配 Netlify 這樣的托管服務(wù)提供商雖然不太常見，但是滿意度更高。Snaity 和 Strapi 都在 2021 年迎來突破。他們?cè)絹碓绞軞g迎，用戶量也在提高。

從應(yīng)用場(chǎng)景了解 Jamstack 為什么這么火

Jamstack 都被什么行業(yè)拿來做什么

不僅僅是技術(shù)前沿行業(yè)，教育、醫(yī)療、金融、廣告、營(yíng)銷、媒體、出版等主要行業(yè)都使用 Jamstack。在 Jamstack 上構(gòu)建完全動(dòng)態(tài)應(yīng)用程序的開發(fā)人員也越來越多。

人們總是對(duì)你正在構(gòu)建網(wǎng)站的用戶感興趣，寫博客？玩電商？還是構(gòu)建企業(yè)應(yīng)用？從調(diào)查結(jié)果來看，前幾名的數(shù)據(jù)非常平均。個(gè)人博客網(wǎng)站仍占比最多，其次是企業(yè)、電商網(wǎng)站、消費(fèi)和信息化軟件，同時(shí)也包括教育、游戲、文檔等多種類型的網(wǎng)站服務(wù)。

Jamstack 開發(fā)人員構(gòu)建了百萬用戶級(jí)的網(wǎng)站

社區(qū)調(diào)查發(fā)現(xiàn)，有 32% 的開發(fā)人員表示他們?cè)趽碛邪偃f用戶的大網(wǎng)站上工作，這可以對(duì) Jamstack 架構(gòu)可擴(kuò)展性提供有力支持。社區(qū)深入挖掘了構(gòu)建這些受歡迎網(wǎng)站的開發(fā)人員的數(shù)據(jù)。發(fā)現(xiàn)他們有不同的開發(fā)優(yōu)先級(jí)，他們更關(guān)注法律合規(guī)性，更重視安全性，更強(qiáng)調(diào)移動(dòng)設(shè)備作為目標(biāo)的重要性。開發(fā)人員在網(wǎng)站開發(fā)速度、站點(diǎn)性能、正常運(yùn)行時(shí)間等因素上也非常重視。

Jamstack 成為不少學(xué)生學(xué)習(xí)部署的工具

社區(qū)從調(diào)查結(jié)果里發(fā)現(xiàn) 2021 年的一個(gè)重大轉(zhuǎn)變，受訪者中學(xué)生比例幾乎翻了一番。這些學(xué)生的經(jīng)驗(yàn)都在 2 年左右，社區(qū)猜測(cè)隨著 Jamstack 不斷成為主流，它已經(jīng)成為不少教育機(jī)構(gòu)教學(xué)新開發(fā)人員用到的技術(shù)手段。后續(xù)會(huì)通過更多的信息來證實(shí)這一效果。但巨大的年輕新開發(fā)者的流入對(duì)社區(qū)和 Jamstack 都是很好的信號(hào)。

疫情影響，遠(yuǎn)程辦公成常態(tài)，不少人因此失業(yè)

受疫情影響，許多開發(fā)人員轉(zhuǎn)向遠(yuǎn)程工作。遠(yuǎn)程辦公使許多人出現(xiàn)失業(yè)的情況，在工作經(jīng)驗(yàn)不足一年的人中，有 12% 的人報(bào)告說在疫情中失去了工作，而不足兩年經(jīng)驗(yàn)的人中也有 10%。如果不包括那些擁有不到兩年經(jīng)驗(yàn)的人，失去工作的開發(fā)人員的比例甚至更高，達(dá)到 40%。

也有不少開發(fā)者獲得了成功，不但工作遠(yuǎn)程化了，有的還搬到了偏遠(yuǎn)地區(qū)，并且表示即使疫情結(jié)束，也不打算再回到辦公司。調(diào)查數(shù)據(jù)還顯示，前端比全棧更有可能去遠(yuǎn)程，DevOps 的遠(yuǎn)程開發(fā)者最多。

總結(jié)：

從報(bào)告中可以看出，JavaScript 和 React 仍然是 Web 開發(fā)主流使用的技術(shù)，TypeScript 的發(fā)展也非常的快。最近幾年不斷有 TypeScript 替代 JavaScript 的聲音出現(xiàn)，TypeScript 作為 JavaScript 的嚴(yán)格超集，更多的是作為 JavaScript 的補(bǔ)充而不是替代品，兩者并行發(fā)展才是合理的未來方向。此外無服務(wù)器架構(gòu)、容器服務(wù)等領(lǐng)域也是開發(fā)者需要關(guān)注的趨勢(shì)。

因疫情遠(yuǎn)程辦公帶來的影響因人而異，所以打鐵還需自身硬，強(qiáng)大的技術(shù)支撐才能應(yīng)對(duì)復(fù)雜的環(huán)境變化。

參考鏈接：

https://jamstack.org/survey/2021/

言

瀏覽器越來越強(qiáng)大，從文字、圖片、到聲音、視頻、動(dòng)畫與游戲都有了豐富的應(yīng)用。H5之后，不僅僅是表現(xiàn)層，數(shù)據(jù)存儲(chǔ)與通訊能力也得到大幅度提高，并逐漸取得共識(shí)，形成了標(biāo)準(zhǔn)。

隨著能力越來越強(qiáng)，從直接編寫html，css，javascript，到通過一些約定的規(guī)則來更好的分組開發(fā)，如基于es6、less、typescript等來開發(fā)，再應(yīng)用一些輔助工具如gulp、webpack等構(gòu)建，形成可模塊化開發(fā)，分工協(xié)作、編譯組合的能力。對(duì)比類似visual studio、Android Studio客戶端的開發(fā)工具，相關(guān)工作流程越來越一致。

編寫html、css（含less）、javascript（含typescript）等
編寫package.json（類似makefile文件）
構(gòu)建（webpack、glup等）

標(biāo)準(zhǔn)能夠讓大家跟隨，從最最樸實(shí)的共識(shí)開始，開放而后茁壯成長(zhǎng)。

規(guī)則與概念很難建立，需要清晰定義邊界，并在執(zhí)行中持續(xù)鞏固……

就目前為止標(biāo)準(zhǔn)化最好的仍然是H5系列，豐富的構(gòu)建工具支持著H5的開發(fā)，這正代表著H5的崛起。

WeUI基于橙色技術(shù)棧開發(fā)

WeUI是騰訊提供的一個(gè)樣式框架，適合應(yīng)用來制作與微信能夠更搭配的公眾號(hào)與小程序。基于MIT許可，提供了常用的如按鈕、進(jìn)度條、導(dǎo)航、對(duì)話框、表單等組件，可簡(jiǎn)化相關(guān)的設(shè)計(jì)工作。

環(huán)境準(zhǔn)備

代碼路徑如下： https://github.com/Tencent/weui

WeUI使用了less來開發(fā)樣式，用Gulp管理工程。我使用的環(huán)境如下：

基本環(huán)境

直接下載weui后，編譯會(huì)報(bào)錯(cuò)。需要修改一些內(nèi)容。如下圖：

修改package.json版本

默認(rèn)weui使用3.9.1版本的gulp來處理，需要將

修改gulpfile.js文件

gulp4.0對(duì)任務(wù)的定義，要求使用serial限定。

安裝weui依賴的包

按照提示分貝安裝如下包

查看相關(guān)的任務(wù)

編譯

編譯時(shí)，提示async要另外處理，可忽略。

修改了下gulpfile.js，確保返回異步結(jié)果。

然后執(zhí)行g(shù)ulp獲得如下結(jié)果。

測(cè)試

此時(shí)會(huì)自動(dòng)打開瀏覽器，也可手工輸入http://127.0.0.1:8081

Zepto.js

http://www.zeptojs.cn/

類似于Jquery的庫，可以充分使用其選擇器，用起來上手較快。

less

http://lesscss.org

支持變量定義，支持文件引入，可以更好的用來分工協(xié)作來編寫好CSS。

gulp

weui使用gulp來完成項(xiàng)目的構(gòu)建。必備的gulp只是還是很有必要。https://gulpjs.com/

Gulp的工作示意圖

# node --version
v14.9.0
# npm --version
6.14.8
# npm install --global gulp-cli
# npx mkdirp my-project
# cd my-project
# npm init
# npm install --save-dev gulp
# gulp --version
CLI version: 2.3.0
Local version: 4.0.2
#

創(chuàng)建gulpfile.js

在根目錄下創(chuàng)建文件

function defaultTask(cb) {
    // place code for your default task here
    cb();
  }
  
  exports.default=defaultTask

應(yīng)用

使用WeUI自然最好是從工程自帶的Exam開始，http://localhost:8081/example/ 如下先做一些簡(jiǎn)單的應(yīng)用介紹。

抽屜列表樣式

從源碼看，這里是WeUI的首頁樣式，一個(gè)抽屜列表樣式，通過gulpfile.js編譯為一個(gè)單頁應(yīng)用。

默認(rèn)使用的是這里的文件

H5代碼

<div class="page">
    <div class="page__hd">
        <h1 class="page__title">
            <img src="./images/logo.png" alt="WeUI" height="21px" />
        </h1>
        <p class="page__desc">WeUI 是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一。</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <ul>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">表單</p>
                    <img src="./images/icon_nav_form.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="button" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Button</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <!--
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="input" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Input</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        -->
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="form" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Form</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="list" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>List</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="slider" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Slider</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="uploader" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Uploader</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">基礎(chǔ)組件</p>
                    <img src="./images/icon_nav_layout.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="article" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Article</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="badge" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Badge</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="flex" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Flex</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="footer" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Footer</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="gallery" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Gallery</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="grid" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Grid</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="icons" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Icons</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="loading" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Loading</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="loadmore" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Loadmore</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="panel" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Panel</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="preview" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Preview</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="progress" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Progress</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">操作反饋</p>
                    <img src="./images/icon_nav_feedback.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="actionsheet" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Actionsheet</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="dialog" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Dialog</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="half-screen-dialog" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Half-screen Dialog</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="msg" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Msg</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="picker" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Picker</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="toast" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Toast</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="top-tips" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>TopTips</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">導(dǎo)航相關(guān)</p>
                    <img src="./images/icon_nav_nav.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="navbar" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Navbar</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="tabbar" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Tabbar</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">搜索相關(guān)</p>
                    <img src="./images/icon_nav_search.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="searchbar" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Search Bar</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_item" data-id="layers">
                    <p class="weui-flex__item">層級(jí)規(guī)范</p>
                    <img src="./images/icon_nav_z-index.png" alt="">
                </div>
            </li>
        </ul>
    </div>
</div>

Javascript代碼

<script type="text/javascript">
    $(function(){
        var winH=$(window).height();
        var categorySpace=10;

        $('.js_item').on('click', function(){
            console.log($(this),$(this).data('id'));
            var id=$(this).data('id');
            window.pageManager.go(id);
        });
        $('.js_category').on('click', function(){
            var $this=$(this),
                $inner=$this.next('.js_categoryInner'),
                $page=$this.parents('.page'),
                $parent=$(this).parent('li');
            var innerH=$inner.data('height');

            if(!innerH){
                $inner.css('height', 'auto');
                innerH=$inner.height();
                $inner.removeAttr('style');
                $inner.data('height', innerH);
            }

            if($parent.hasClass('js_show')){
                $parent.removeClass('js_show');
            }else{
                $parent.siblings().removeClass('js_show');

                $parent.addClass('js_show');
                if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
                    var scrollTop=this.offsetTop + this.offsetHeight + innerH - winH + categorySpace;

                    if(scrollTop > this.offsetTop){
                        scrollTop=this.offsetTop - categorySpace;
                    }

                    $page.scrollTop(scrollTop);
                }
            }

            var winH=$(window).height();
            var $foot=$('body').find('.page__ft');
            if($foot.length < 1) return;

            if($foot.position().top + $foot.height() < winH){
                $foot.addClass('j_bottom');
            }else{
                $foot.removeClass('j_bottom');
            }
        });
    });
</script>

依賴文件

<html>
<head>
    ...
    <link rel="stylesheet" href="../style/weui.css"/>
    <link rel="stylesheet" href="./example.css"/>
    ...
</head>
<body>
...
<script src="./zepto.min.js"></script>
<script src="./example.js"></script>
...
</body>
</html>

更新測(cè)試一把

先修改gulpfile.js
參考WeUI創(chuàng)建index.html與home.html
編輯home.html

/**
 * 增加study的html數(shù)據(jù)
 */
gulp.task('build:study:html', function() {
    return gulp
    .src('src/study/index.html', option)
    .pipe(
        tap(function(file) {
            var dir=path.dirname(file.path);
            var contents=file.contents.toString();
            contents=contents.replace(
                /<link\s+rel="import"\s+href="(.*)">/gi,
                function(match, $1) {
                    var filename=path.join(dir, $1);
                    var id=path.basename(filename, '.html');
                    var content=fs.readFileSync(filename, 'utf-8');
                    return (
                        '<script type="text/html" id="tpl_' +
                        id +
                        '">\n' +
                        content +
                        '\n</script>'
                    );
                },
            );
            file.contents=new Buffer(contents);
        }),
    )
    .pipe(gulp.dest(dist))
    .pipe(browserSync.reload({ stream: true }));
});

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>WeUI</title>
    <link rel="stylesheet" href="../style/weui.css"/>
    <link rel="stylesheet" href="../example/example.css"/>
</head>
<body ontouchstart>
    <div class="weui-toptips weui-toptips_warn js_tooltips">錯(cuò)誤提示</div>

    <div class="container" id="container"></div>

    <link rel="import" href="./home.html">
    
    
    <script src="../example/zepto.min.js"></script>
    <script src="../example/example.js"></script>
</body>
</html>

<div class="page">
    <div class="page__hd">
        <h1 class="page__title">
            <img src="./images/logo.png" alt="WeUI" height="21px" />
        </h1>
        <p class="page__desc">Hello world WeUI, This is the first day to study.</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <ul>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">表單</p>
                    <img src="./images/icon_nav_form.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="button" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Button</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <!--
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="input" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Input</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        -->
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="form" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Form</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="list" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>List</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
           
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">搜索相關(guān)</p>
                    <img src="./images/icon_nav_search.png" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="searchbar" href="javascript：">
                            <div class="weui-cell__bd">
                                <p>Search Bar</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_item" data-id="layers">
                    <p class="weui-flex__item">層級(jí)規(guī)范</p>
                    <img src="./images/icon_nav_z-index.png" alt="">
                </div>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        var winH=$(window).height();
        var categorySpace=10;

        $('.js_item').on('click', function(){
            var id=$(this).data('id');
            window.pageManager.go(id);
        });
        $('.js_category').on('click', function(){
            var $this=$(this),
                $inner=$this.next('.js_categoryInner'),
                $page=$this.parents('.page'),
                $parent=$(this).parent('li');
            var innerH=$inner.data('height');

            if(!innerH){
                $inner.css('height', 'auto');
                innerH=$inner.height();
                $inner.removeAttr('style');
                $inner.data('height', innerH);
            }

            if($parent.hasClass('js_show')){
                $parent.removeClass('js_show');
            }else{
                $parent.siblings().removeClass('js_show');

                $parent.addClass('js_show');
                if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
                    var scrollTop=this.offsetTop + this.offsetHeight + innerH - winH + categorySpace;

                    if(scrollTop > this.offsetTop){
                        scrollTop=this.offsetTop - categorySpace;
                    }

                    $page.scrollTop(scrollTop);
                }
            }

            var winH=$(window).height();
            var $foot=$('body').find('.page__ft');
            if($foot.length < 1) return;

            if($foot.position().top + $foot.height() < winH){
                $foot.addClass('j_bottom');
            }else{
                $foot.removeClass('j_bottom');
            }
        });
    });
</script>

gulp build:study:html
# 然后 瀏覽器訪問 http://127.0.0.1:8081

目錄結(jié)構(gòu)如上

表單

基礎(chǔ)組件

操作反饋

導(dǎo)航相關(guān)

搜索相關(guān)

層級(jí)規(guī)范

總結(jié)

WeUI構(gòu)造了可以較好與微信兼容的樣式，但是部分放到了Example里，如果要使用需要將example.css的，需要結(jié)合zepto.js和example.js一起完成交互。但是足夠幫助寫出一個(gè)相對(duì)不錯(cuò)的H5應(yīng)用。

但即便如此，也依稀看出產(chǎn)品意識(shí)的確不夠，形到而意不到。萬事果然最佳是相稱，意到而形不致，也是眼高手低。

改進(jìn)點(diǎn)

https://github.com/gaussgao/weui-study.git

明確設(shè)計(jì)概念
給出應(yīng)用使用手冊(cè)
給出二次開發(fā)指引
增加必備的導(dǎo)航樣式

了解web前后端的區(qū)別，首先必須得清楚什么是web前端和web后端。

首先：web的本意是蜘蛛網(wǎng)和網(wǎng)的意思，在網(wǎng)頁設(shè)計(jì)中我們稱為網(wǎng)頁的意思。現(xiàn)廣泛譯作網(wǎng)絡(luò)、互聯(lián)網(wǎng)等技術(shù)領(lǐng)域。表現(xiàn)為三種形式，即超文本(hypertext)、超媒體(hypermedia)、超文本傳輸協(xié)議(HTTP)等。

一、超文本（hypertext）

一種全局性的信息結(jié)構(gòu)，它將文檔中的不同部分通過關(guān)鍵字建立鏈接，使信息得以用交互方式搜索。它是超級(jí)文本的簡(jiǎn)稱。　

二、超媒體（hypermedia）

超媒體是超文本（hypertext）和多媒體在信息瀏覽環(huán)境下的結(jié)合。它是超級(jí)媒體的簡(jiǎn)稱。用戶不僅能從一個(gè)文本跳到另一個(gè)文本，而且可以激活一段聲音，顯示一個(gè)圖形，甚至可以播放一段動(dòng)畫。

Internet采用超文本和超媒體的信息組織方式，將信息的鏈接擴(kuò)展到整個(gè)Internet上。Web就是一種超文本信息系統(tǒng)，Web的一個(gè)主要的概念就是超文本連接，它使得文本不再象一本書一樣是固定的線性的。而是可以從一個(gè)位置跳到另外的位置?？梢詮闹蝎@取更多的信息?？梢赞D(zhuǎn)到別的主題上。想要了解某一個(gè)主題的內(nèi)容只要在這個(gè)主題上點(diǎn)一下，就可以跳轉(zhuǎn)到包含這一主題的文檔上。正是這種多連接性把它稱為Web。

三、超文本傳輸協(xié)議（HTTP）

Hypertext Transfer Protocol超文本在互聯(lián)網(wǎng)上的傳輸協(xié)議

目前，web該詞匯又引申為“環(huán)球網(wǎng)”，而且，在不同的領(lǐng)域，有不同的含義。就拿“環(huán)球網(wǎng)”的釋義來說，對(duì)于普通的用戶來說，web僅僅只是一種環(huán)境——互聯(lián)網(wǎng)的使用環(huán)境、氛圍、內(nèi)容等；而對(duì)于網(wǎng)站制作、設(shè)計(jì)者來說，它是一系列技術(shù)的復(fù)合總稱(包括網(wǎng)站的前臺(tái)布局、后臺(tái)程序、美工、數(shù)據(jù)庫領(lǐng)域等等的技術(shù)概括性的總稱)。

Web前端: 顧名思義是來做Web的前端的。我們這里所說的前端泛指Web前端，也就是在Web應(yīng)用中用戶可以看得見碰得著的東西。包括Web頁面的結(jié)構(gòu)、Web的外觀視覺表現(xiàn)以及Web層面的交互實(shí)現(xiàn)。

Web后端：后端更多的是與數(shù)據(jù)庫進(jìn)行交互以處理相應(yīng)的業(yè)務(wù)邏輯。需要考慮的是如何實(shí)現(xiàn)功能、數(shù)據(jù)的存取、平臺(tái)的穩(wěn)定性與性能等。

當(dāng)然啦，跟朋友一般，我都是這樣解釋的，在你的機(jī)子上看到的界面，安裝的程序。給用戶看的，操作的就是前端；而你看不到的，幫你保存網(wǎng)絡(luò)游戲數(shù)據(jù)，保存應(yīng)用數(shù)據(jù)，處理數(shù)據(jù)的就是后端（服務(wù)器）。比如說：我們?cè)谟玫念^條就是前端，而保存這個(gè)問題，還有把這個(gè)問題推送給你的就是后端。

web前端分為網(wǎng)頁設(shè)計(jì)師、網(wǎng)頁美工、web前端開發(fā)工程師。

首先網(wǎng)頁設(shè)計(jì)師是對(duì)網(wǎng)頁的架構(gòu)、色彩以及網(wǎng)站的整體頁面代碼負(fù)責(zé)；網(wǎng)頁美工只針對(duì)UI這塊的東西，比如網(wǎng)站是否做的漂亮；web前端開發(fā)工程師是負(fù)責(zé)交互設(shè)計(jì)的，需要和程序員進(jìn)行交互設(shè)計(jì)的配合。

web前端需要掌握的有腳本技術(shù)javascript DIV+CSS現(xiàn)下最流行的頁面搭建技術(shù)，ajax和jquery以及簡(jiǎn)單的后端程序等。后端的話可供開發(fā)的語言有 asp、php、jsp、.NET 這些后端開發(fā)語言的話搭建環(huán)境都不一樣

實(shí)際的開發(fā)過程中，前端、后端開發(fā)人員的定位如下：

1）前端開發(fā)人員：精通JS，能熟練應(yīng)用JQuery，懂CSS，能熟練運(yùn)用這些知識(shí)，進(jìn)行交互效果的開發(fā)。

2）后端開發(fā)人員：會(huì)寫Java代碼，會(huì)寫SQL語句，能做簡(jiǎn)單的數(shù)據(jù)庫設(shè)計(jì)，會(huì)Spring和iBatis，懂一些設(shè)計(jì)模式等。

四、如何學(xué)習(xí)呢？

下面是小編整理的一整套系統(tǒng)的web前端學(xué)習(xí)教程。

領(lǐng)取方法：

關(guān)注 “小編”后，私信回復(fù)“前端”

覺得文章不錯(cuò)可以分享給好友！

在線咨詢

上一篇：Delphi基礎(chǔ)教程圖文版之?dāng)?shù)據(jù)類型(子界)
下一篇：復(fù)雜煩惱嗎！5個(gè)多用途HTML模板為你解決一半的工程

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

看完 Jamstack 的調(diào)查報(bào)告，我抓住了最新的