关将至，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：