關將至，JavaScript 開發者問卷調查也已經結束了。本次調查收到了超出我想象的回復，我也很高興與你們分享調查結果。

截至目前，有超過 5000 人參與了問卷調查，準確的說是 5350 人，我真的迫不及待想與大家分享詳細這次調查的細節。分享之前先感謝參與調查的每一個人。這是一個 JavaScript 社區的偉大時刻，我真的對未來的事情感到無比激動。

我沒有想到大家這么積極，下次我一定會對表單做一些改進。下次我會先將調查問卷放在 GitHub 上，這樣在調查開始前，社區有一兩個星期的時間來收集問題和選項。這樣，我就可以得到更準確地結果，也可以避免出現“你竟然沒有包含Emacs！”這樣的抱怨。

現在，基于調查結果。我將保持中立的給大家分析結果，這樣大家就可以得出自己的無偏見結論。

1、你寫什么類型的 JavaScript？

有高達 97.4% 的受訪者用 JavaScript 寫 web 瀏覽器端程序，其中有 37% 寫移動端 Web 應用。超過 3000 人（56.6%）也使用 JavaScript 寫服務端。在這些參與調查的人中間，有 5.5% 的人還在一些嵌入式環境中使用 JavaScript，例如 Tessel 或 Raspberry Pi（樹莓派）。

少數受訪者反饋他們還在其他地方使用了 JavaScript，主要有 CLI 和桌面應用的開發。還有少數提到了 Pebble 和 Apple TV。這些都歸類在其他選項中，占總票數的 2.2%。

2、你在哪使用 JavaScript？

不出所料，94.9% 的投票者在工作中使用 JavaScript。但是，也有 82.3% 的投票者在其他項目中使用。其他回復包括教學，好玩，和非盈利目的使用。

3、你寫 JavaScript 多長時間了？

超過 33% 的受訪者有超過 6 年 JavaScript 代碼的編程經驗。除了這些，還有 5.2% 的人 1 年前開始寫JavaScript，12.4% 的人是 2 年前，15.1% 的人是 3 年前。這說明在 5350 個投票者中有 32.7% 的人是近幾年才開始寫 JavaScript 的。

4、如果可以的話，你會使用以下哪種 compile-to-JavaScript 語言？

有高達 85% 的受訪者表示他們將使用 ES6 編譯成 ES5。同時依然有 15% 的人用 CoffeeScript，15.2% 的人用 TypeScript，只有區區 1.1% 的人在使用 Dart。

這是我想進一步探討的問題之一，因為有 13% 的人選擇了“其他”。選擇其他的絕大部分答案是 ClojureScript，eml，Flow，和 JSX。

5、你會選擇以下哪種 JavaScript 編程風格？

絕大多數（79.9%）的 JavaScript 開發者在這個問題上選擇分號。相反，11% 的開發者選擇不使用分號。逗號方面，44.9% 的開發者選擇將逗號放在表達式末尾，然而有 4.9% 的開發者喜歡先寫逗號。縮進方面，65.5% 的開發者喜歡空格，另外 29.1% 的則更喜歡制表符。

6、你使用以下哪些 ES5 特性？

79.2% 的受訪者都使用過數組功能函數，76.3% 的開發者使用嚴格模式，30% 的開發者選擇了 Object.creat，而僅有 28% 的開發者選擇 getters 和 setters。

7、你使用以下哪些 ES6 特性？

值得指出的是，投票表明箭頭函數是使用最多的 ES6 特性，有 79.6%。Let 和 const 加一起一起有77.8% 的得票率，promises 也有 74.4% 的開發者選擇。不出所料，僅有 4% 的參與者使用過 proxies。僅有 13.1% 的用戶表示他們使用 symbols，同時有超過 30% 的人使用 iterators。

8、你寫測試嗎？

有 21.7% 的開發者從不寫任何測試，大部分人偶爾寫測試，34.8% 的人經常寫測試。

9、你運行持續集成測試嗎？

與 CI 類似，許多人不使用 CI 服務器（超過40%）。但 60% 的受訪者有時候會使用 CI，有 32% 的人在 CI 服務器上跑測試。

10、你怎么測試？

59% 的人喜歡使用 PhantomJS 或類似工具運行自動化瀏覽器測試，51.3% 的人還在 Web 瀏覽器上手動測試。有 53.6% 的人會在服務端進行自動化測試。

11、你使用過以下哪個單元測試庫？

似乎大部分投票者選擇的不是 Mocha 就是 Jasmine 來運行 JavaScript 測試用例，Tape 有 9.8% 的投票。

12、你使用過以下哪個代碼質量檢測工具？

似乎受訪者在這個問題上被分為 ESLint 派和 JSHint 派，但是 JSLint 還有幾乎 30% 的人支持，這么多年依然堅挺很是令人驚奇。

13、你是如何處理客戶端依賴問題？

npm 接管了客戶端依賴管理系統的天下，60% 的支持率就是證據。Bower 依然有 20% 的觀眾，而普通的老式 下載和插入則獲得了 13.7% 的選票。

14、你首選的腳本構建方案是什么？

構建工具的選擇很分散，部分原因應該是我們有太多選擇。Gulp 最流行，有超過 40% 的選票。緊接著是 27.8% 的 npm run，Grunt 有 18.5% 的支持者。

15、你首選的 JavaScript 模塊加載工具是什么？

目前，似乎大部分開發者都在 Browserify 和 Webpack 之間徘徊，而后者高出 7 個百分點。29% 的用戶表示他們在選擇前面兩個提到的工具打包模塊之前，會先使用 Babel。

16、你使用以下哪些庫？

現在回想起來，這是個得益于協同編輯的問題之一。jQuery 得到了超過 50% 的支持，表現依然強勢。Lodash 與 Underscore 在參與投票的 JavaScript 使用者中也占據顯著地位，XHR 微型庫僅獲得了 8% 的票數。

17、你使用以下哪些框架？

React 和 Angular 的遙遙領先并不令人奇怪。有 22.8% 得票的 Backbone 依然處于安全位置。

18、你使用 ES6 嗎。。。

這個問題的答案比較分散，有近 20% 的人幾乎從不使用 ES6，超過 10% 的人只寫 ES6，近 30% 的人廣泛使用，近 40% 的人經常使用。

19、你知道 ES2016 會有什么特性嗎？

大致說來，有一半的投票者不知道 ES2016 將會有什么特性，另外一半對新特性有所了解。

20、你了解 ES6 嗎？

超過 60% 的受訪者了解基本的概念，10% 的人完全不了解 ES6，有超過 25% 的人認為他們對 ES6 非常了解。

21、你認為 ES6 是一個進步嗎？

幾乎有 95% 的受訪者認為 ES6 是 JavaScript 的一個進步。下次碰到 TC39 的會員我得祝賀他們！

22、你首選的編輯器是什么？

又一次，因為選擇太多導致答案很分散。超過一半的受訪者喜歡 Sublime Text，超過 30% 的人喜歡用 Atom 和它的開源克隆版。超過 25% 的票投給了 WebStorm，vi/vim 也有超過 25% 的得票率。

23、你首選的開發操作系統是什么？

Mac 有超過 60% 的投票者使用，Linux 和 Windows 的用戶都接近 20%。

24、你如何搜索可重用代碼，庫和工具？

受訪者最喜歡 Github 和搜索引擎，但通過博客，Twitter 和 npm 網站搜索也占了很大一部分。

25、你參加 JavaScript 社會活動嗎？

有近 60% 的人至少參加過一次會議，74% 的人表示他們喜歡參加聚會。

26、你的 JavaScript 應用支持哪些瀏覽器？

相當分散的答案，但還好大部分受訪者不再考慮 IE6 的使用者了。

27、你會定期了解 JavaScript 的最新特性嗎？

有大概 80% 的受訪者會實時了解最新的 JavaScript 特性。

28、你在哪了解最新的 JavaScript 特性？

不出所料，Mozilla 開發者網絡在文檔和新聞方面處于領先地位。JavaScript 周刊也是一個非常受歡迎的新聞和文章的直接來源，有超過 40% 的支持率。

29、你聽說過以下哪些特性？

超過 85% 的投票者聽說過 ServiceWorker，但我很想知道這些人有沒有使用它！

30、除了 JavaScript，你還主要使用哪些語言？

有太多的語言可供選擇，我肯定會漏那么幾個，但結果不言自明。

謝謝！

最后，感謝每一位參與這次調查的人。本次問卷調查受到了超出我預期的歡迎，期待明年再進行一次類似的調查。我希望，那會是一個更多樣性，也許再少一點偏見的調查。

這次問卷調查你獲得了什么？

、碼云代碼托管

我們開發一個項目需要一個代碼托管平臺，這里選擇碼云。

1）注冊登錄

2）在碼云上新建項目

3）安裝git

4）克隆到本地

git clone 倉庫地址

5）搭建項目環境

6）將代碼上傳到gitee.com的倉庫中

git add .

git commit -m '備注文本'

git push （需要輸入您的帳號（郵箱號）和密碼）

在碼云上建好倉庫后，會出現如下的一個界面：

點擊復制后在本地的文件夾中用上面的git命令建一個本地倉庫，然后再碼云上按照提示生成秘鑰，用于連接本地倉庫，上傳項目代碼到碼云上課參考第六步的命令，下面說在倉庫中搭建項目環境。

二、搭建vue項目環境

1）安裝node.js是必須的，一般node都自帶npm

2）使用npm全局安裝webpack：npm i webpack -g

3）安裝vue-cli腳手架 npm i vue-cli -g（安裝完后，可以用vue -V檢測是否安裝成功）

以上步驟由于是全局安裝，可以在同一臺電腦上安裝一次即可。

4）創建項目文件夾。vue init webpack 項目名稱，然后會出現一些選擇項，可根據自己的需要進行選擇。

5）cd進入文件夾，安裝依賴包：npm i

6）安裝完成后啟動項目：npm run dev

7）在瀏覽器的地址欄中輸入localhost:8080，查看是否啟動成功。

三、在webstorm中創建.vue的代碼模板

如果使用別的IDE可以上網查找一下創建模板方法，在webstorm中：File->settings->editor->File Code and Templates->新建（name為vue，extension為vue），輸入以下內容：

<template>

</template>

<script type="text/ecmascript-6">

export default {

}

</script>

<style lang="stylus" rel="text/stylus" scoped>

</style>

四、整理項目下的文件夾

項目幾乎所有的工作實在src文件夾中完成的的，所以先整理src文件夾中的文件。

src:工作目錄

assets:放資源文件處（一般放css/js/styl/img等）

components:所有的組件放在該文件夾下，除了App.vue（頂層組件）

router:配置路由處

App.vue:項目的入口文件，也是router出口處

main.js:全局配置

1）assets和components下的原有文件刪除，在components文件夾下創建一個home文件夾表示根網頁，然后在它下面創建home.vue會自動生成我們前面創建的模板。

<template>

<div class="home">

home

</div>

</template>

<script type="text/ecmascript-6">

export default {}

</script>

<style lang="stylus" rel="text/stylus" scoped>

</style>

2）修改routes下的index.js文件內容。由于剛才我們刪除了assets和components下的原有文件，所以在index.js中將路徑和名稱修改正確。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home/home'
Vue.use(Router)
export default new Router({
 routes: [
 {
 path: '/',
 name: 'Home',
 component: Home
 }
 ]
})

3）修改App.vue文件

<template>
 <div id="app">
 <router-view/>
 </div>
</template>
<script>
export default {
 name: 'App'
}
</script>
<style lang="stylus" rel="text/stylus" scoped>
#app {
}
</style>

4）由于文件中的css打算用stylus去寫，所以先安裝stylus

cnpm i stylus stylus-loader -S

安裝完后，重啟項目。

五、引入需要的全局文件reset.css、fastclick.js以及項目中需要的小圖標

在網上或者自己寫一個css樣式初始化文件，然后放在assets->css目錄下，由于全局配置在main.js文件中，所以再在main.js中引入：import './assets/css/reset.css'。

移動設備上的瀏覽器默認會在用戶點擊屏幕大約延遲300毫秒后才會觸發點擊事件，這是為了檢查用戶是否在做雙擊。為了能夠立即響應用戶的點擊事件，才有了FastClick。

安裝：npm i fastclick -S

安裝完成后在main.js中引入：

import FastClick from 'fastclick'

// 使用

FastClick.attach(document.body);

引入項目中需要用到的小圖標：

在阿里巴巴矢量圖標庫中搜索自己需要的小圖標，然后添加到購物車中，最后將購物車中的所有圖標下載到本地，供項目調用。將下載好的圖標文件放到如下的文件中：

然后再main.js中引入：import './assets/css/iconfont.css'。

六、分析項目結構創建基本組件

在分析完成項目的基本結構后，開始一一創建組件。

1、創建header組件

在Home.vue中引入并使用Header組件：

import HomeHeader from './pages/Header'
components:{
 HomeHeader
}
<home-header/>

接下來寫header部分的結構和樣式：

在移動端的開發中用的一般是相對的一個值rem，所以在寫樣式和結構之前，先在reset.css中寫一個初始的全局font-size:50px;

樣式中的scoped不能忽略，它表示這是一個局部樣式，只作用于當前的css。header部分一般為44px。Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。誰的flex為1就表示誰是彈性的。

2、創建swiper組件

1） 在home目錄下的pages目錄下新建swiper.vue，然后在Home.vue中引入swiper.vue組件。

2）項目中的輪播效果我們用插件來寫：

進入http://github.com搜索vue-swiper

安裝swiper模塊：npm install vue-awesome-swiper --save

在main.js中全局引入：

import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper);

復制swiper結構HTML：

<swiper :options="swiperOption">

<swiper-slide>I'm Slide 1</swiper-slide>

<swiper-slide>I'm Slide 2</swiper-slide>

<swiper-slide>I'm Slide 3</swiper-slide>

<swiper-slide>I'm Slide 4</swiper-slide>

<swiper-slide>I'm Slide 5</swiper-slide>

<swiper-slide>I'm Slide 6</swiper-slide>

<swiper-slide>I'm Slide 7</swiper-slide>

<div class="swiper-pagination" slot="pagination"></div>

</swiper>

swiper的邏輯處理：

data(){
 return{
 swiperOption:{
 pagination: {
 el: '.swiper-pagination'
 },
 loop:true,
 autoplay: {
 delay: 3000,
 stopOnLastSlide: false,
 disableOnInteraction: false
 }
 }

c. 樣式：

<style lang="stylus" rel="text/stylus" scoped>
 .swiper
 height: 0
 background-color: #ccc
 padding-bottom: 26.666%
 img
 width: 100%
 height: 100%
 >>> .swiper-pagination-bullet
 width: 6px
 height: 6px
 background-color: #fff
 opacity: 0.2
 >>> .swiper-pagination-bullet-active /* 樣式穿透 */
 opacity: 1
 background: #e4e7ea
</style>

d.由于HTML中的數據需要動態渲染，所以需要將html改寫，數據mock：