整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
關(guān)將至，JavaScript 開發(fā)者問(wèn)卷調(diào)查也已經(jīng)結(jié)束了。本次調(diào)查收到了超出我想象的回復(fù)，我也很高興與你們分享調(diào)查結(jié)果。
截至目前，有超過(guò) 5000 人參與了問(wèn)卷調(diào)查，準(zhǔn)確的說(shuō)是 5350 人，我真的迫不及待想與大家分享詳細(xì)這次調(diào)查的細(xì)節(jié)。分享之前先感謝參與調(diào)查的每一個(gè)人。這是一個(gè) JavaScript 社區(qū)的偉大時(shí)刻，我真的對(duì)未來(lái)的事情感到無(wú)比激動(dòng)。
我沒(méi)有想到大家這么積極，下次我一定會(huì)對(duì)表單做一些改進(jìn)。下次我會(huì)先將調(diào)查問(wèn)卷放在 GitHub 上，這樣在調(diào)查開始前，社區(qū)有一兩個(gè)星期的時(shí)間來(lái)收集問(wèn)題和選項(xiàng)。這樣，我就可以得到更準(zhǔn)確地結(jié)果，也可以避免出現(xiàn)“你竟然沒(méi)有包含Emacs！”這樣的抱怨。
現(xiàn)在，基于調(diào)查結(jié)果。我將保持中立的給大家分析結(jié)果，這樣大家就可以得出自己的無(wú)偏見結(jié)論。
1、你寫什么類型的 JavaScript？
有高達(dá) 97.4% 的受訪者用 JavaScript 寫 web 瀏覽器端程序，其中有 37% 寫移動(dòng)端 Web 應(yīng)用。超過(guò) 3000 人（56.6%）也使用 JavaScript 寫服務(wù)端。在這些參與調(diào)查的人中間，有 5.5% 的人還在一些嵌入式環(huán)境中使用 JavaScript，例如 Tessel 或 Raspberry Pi（樹莓派）。
少數(shù)受訪者反饋他們還在其他地方使用了 JavaScript，主要有 CLI 和桌面應(yīng)用的開發(fā)。還有少數(shù)提到了 Pebble 和 Apple TV。這些都?xì)w類在其他選項(xiàng)中，占總票數(shù)的 2.2%。
2、你在哪使用 JavaScript？
不出所料，94.9% 的投票者在工作中使用 JavaScript。但是，也有 82.3% 的投票者在其他項(xiàng)目中使用。其他回復(fù)包括教學(xué)，好玩，和非盈利目的使用。
3、你寫 JavaScript 多長(zhǎng)時(shí)間了？
超過(guò) 33% 的受訪者有超過(guò) 6 年 JavaScript 代碼的編程經(jīng)驗(yàn)。除了這些，還有 5.2% 的人 1 年前開始寫JavaScript，12.4% 的人是 2 年前，15.1% 的人是 3 年前。這說(shuō)明在 5350 個(gè)投票者中有 32.7% 的人是近幾年才開始寫 JavaScript 的。
4、如果可以的話，你會(huì)使用以下哪種 compile-to-JavaScript 語(yǔ)言？
有高達(dá) 85% 的受訪者表示他們將使用 ES6 編譯成 ES5。同時(shí)依然有 15% 的人用 CoffeeScript，15.2% 的人用 TypeScript，只有區(qū)區(qū) 1.1% 的人在使用 Dart。
這是我想進(jìn)一步探討的問(wèn)題之一，因?yàn)橛?13% 的人選擇了“其他”。選擇其他的絕大部分答案是 ClojureScript，eml，F(xiàn)low，和 JSX。
5、你會(huì)選擇以下哪種 JavaScript 編程風(fēng)格？
絕大多數(shù)（79.9%）的 JavaScript 開發(fā)者在這個(gè)問(wèn)題上選擇分號(hào)。相反，11% 的開發(fā)者選擇不使用分號(hào)。逗號(hào)方面，44.9% 的開發(fā)者選擇將逗號(hào)放在表達(dá)式末尾，然而有 4.9% 的開發(fā)者喜歡先寫逗號(hào)。縮進(jìn)方面，65.5% 的開發(fā)者喜歡空格，另外 29.1% 的則更喜歡制表符。
6、你使用以下哪些 ES5 特性？
79.2% 的受訪者都使用過(guò)數(shù)組功能函數(shù)，76.3% 的開發(fā)者使用嚴(yán)格模式，30% 的開發(fā)者選擇了 Object.creat，而僅有 28% 的開發(fā)者選擇 getters 和 setters。
7、你使用以下哪些 ES6 特性？
值得指出的是，投票表明箭頭函數(shù)是使用最多的 ES6 特性，有 79.6%。Let 和 const 加一起一起有77.8% 的得票率，promises 也有 74.4% 的開發(fā)者選擇。不出所料，僅有 4% 的參與者使用過(guò) proxies。僅有 13.1% 的用戶表示他們使用 symbols，同時(shí)有超過(guò) 30% 的人使用 iterators。
8、你寫測(cè)試嗎？
有 21.7% 的開發(fā)者從不寫任何測(cè)試，大部分人偶爾寫測(cè)試，34.8% 的人經(jīng)常寫測(cè)試。
9、你運(yùn)行持續(xù)集成測(cè)試嗎？
與 CI 類似，許多人不使用 CI 服務(wù)器（超過(guò)40%）。但 60% 的受訪者有時(shí)候會(huì)使用 CI，有 32% 的人在 CI 服務(wù)器上跑測(cè)試。
10、你怎么測(cè)試？
59% 的人喜歡使用 PhantomJS 或類似工具運(yùn)行自動(dòng)化瀏覽器測(cè)試，51.3% 的人還在 Web 瀏覽器上手動(dòng)測(cè)試。有 53.6% 的人會(huì)在服務(wù)端進(jìn)行自動(dòng)化測(cè)試。
11、你使用過(guò)以下哪個(gè)單元測(cè)試庫(kù)？
似乎大部分投票者選擇的不是 Mocha 就是 Jasmine 來(lái)運(yùn)行 JavaScript 測(cè)試用例，Tape 有 9.8% 的投票。
12、你使用過(guò)以下哪個(gè)代碼質(zhì)量檢測(cè)工具？
似乎受訪者在這個(gè)問(wèn)題上被分為 ESLint 派和 JSHint 派，但是 JSLint 還有幾乎 30% 的人支持，這么多年依然堅(jiān)挺很是令人驚奇。
13、你是如何處理客戶端依賴問(wèn)題？
npm 接管了客戶端依賴管理系統(tǒng)的天下，60% 的支持率就是證據(jù)。Bower 依然有 20% 的觀眾，而普通的老式 下載和插入則獲得了 13.7% 的選票。
14、你首選的腳本構(gòu)建方案是什么？
構(gòu)建工具的選擇很分散，部分原因應(yīng)該是我們有太多選擇。Gulp 最流行，有超過(guò) 40% 的選票。緊接著是 27.8% 的 npm run，Grunt 有 18.5% 的支持者。
15、你首選的 JavaScript 模塊加載工具是什么？
目前，似乎大部分開發(fā)者都在 Browserify 和 Webpack 之間徘徊，而后者高出 7 個(gè)百分點(diǎn)。29% 的用戶表示他們?cè)谶x擇前面兩個(gè)提到的工具打包模塊之前，會(huì)先使用 Babel。
16、你使用以下哪些庫(kù)？
現(xiàn)在回想起來(lái)，這是個(gè)得益于協(xié)同編輯的問(wèn)題之一。jQuery 得到了超過(guò) 50% 的支持，表現(xiàn)依然強(qiáng)勢(shì)。Lodash 與 Underscore 在參與投票的 JavaScript 使用者中也占據(jù)顯著地位，XHR 微型庫(kù)僅獲得了 8% 的票數(shù)。
17、你使用以下哪些框架？
React 和 Angular 的遙遙領(lǐng)先并不令人奇怪。有 22.8% 得票的 Backbone 依然處于安全位置。
18、你使用 ES6 嗎。。。
這個(gè)問(wèn)題的答案比較分散，有近 20% 的人幾乎從不使用 ES6，超過(guò) 10% 的人只寫 ES6，近 30% 的人廣泛使用，近 40% 的人經(jīng)常使用。
19、你知道 ES2016 會(huì)有什么特性嗎？
大致說(shuō)來(lái)，有一半的投票者不知道 ES2016 將會(huì)有什么特性，另外一半對(duì)新特性有所了解。
20、你了解 ES6 嗎？
超過(guò) 60% 的受訪者了解基本的概念，10% 的人完全不了解 ES6，有超過(guò) 25% 的人認(rèn)為他們對(duì) ES6 非常了解。
21、你認(rèn)為 ES6 是一個(gè)進(jìn)步嗎？
幾乎有 95% 的受訪者認(rèn)為 ES6 是 JavaScript 的一個(gè)進(jìn)步。下次碰到 TC39 的會(huì)員我得祝賀他們！
22、你首選的編輯器是什么？
又一次，因?yàn)檫x擇太多導(dǎo)致答案很分散。超過(guò)一半的受訪者喜歡 Sublime Text，超過(guò) 30% 的人喜歡用 Atom 和它的開源克隆版。超過(guò) 25% 的票投給了 WebStorm，vi/vim 也有超過(guò) 25% 的得票率。
23、你首選的開發(fā)操作系統(tǒng)是什么？
Mac 有超過(guò) 60% 的投票者使用，Linux 和 Windows 的用戶都接近 20%。
24、你如何搜索可重用代碼，庫(kù)和工具？
受訪者最喜歡 Github 和搜索引擎，但通過(guò)博客，Twitter 和 npm 網(wǎng)站搜索也占了很大一部分。
25、你參加 JavaScript 社會(huì)活動(dòng)嗎？
有近 60% 的人至少參加過(guò)一次會(huì)議，74% 的人表示他們喜歡參加聚會(huì)。
26、你的 JavaScript 應(yīng)用支持哪些瀏覽器？
相當(dāng)分散的答案，但還好大部分受訪者不再考慮 IE6 的使用者了。
27、你會(huì)定期了解 JavaScript 的最新特性嗎？
有大概 80% 的受訪者會(huì)實(shí)時(shí)了解最新的 JavaScript 特性。
28、你在哪了解最新的 JavaScript 特性？
不出所料，Mozilla 開發(fā)者網(wǎng)絡(luò)在文檔和新聞方面處于領(lǐng)先地位。JavaScript 周刊也是一個(gè)非常受歡迎的新聞和文章的直接來(lái)源，有超過(guò) 40% 的支持率。
29、你聽說(shuō)過(guò)以下哪些特性？
超過(guò) 85% 的投票者聽說(shuō)過(guò) ServiceWorker，但我很想知道這些人有沒(méi)有使用它！
30、除了 JavaScript，你還主要使用哪些語(yǔ)言？
有太多的語(yǔ)言可供選擇，我肯定會(huì)漏那么幾個(gè)，但結(jié)果不言自明。
謝謝！
最后，感謝每一位參與這次調(diào)查的人。本次問(wèn)卷調(diào)查受到了超出我預(yù)期的歡迎，期待明年再進(jìn)行一次類似的調(diào)查。我希望，那會(huì)是一個(gè)更多樣性，也許再少一點(diǎn)偏見的調(diào)查。
這次問(wèn)卷調(diào)查你獲得了什么？
、碼云代碼托管
我們開發(fā)一個(gè)項(xiàng)目需要一個(gè)代碼托管平臺(tái)，這里選擇碼云。
1）注冊(cè)登錄
2）在碼云上新建項(xiàng)目
3）安裝git
4）克隆到本地
git clone 倉(cāng)庫(kù)地址
5）搭建項(xiàng)目環(huán)境
6）將代碼上傳到gitee.com的倉(cāng)庫(kù)中
git add .
git commit -m '備注文本'
git push （需要輸入您的帳號(hào)（郵箱號(hào)）和密碼）
在碼云上建好倉(cāng)庫(kù)后，會(huì)出現(xiàn)如下的一個(gè)界面：
點(diǎn)擊復(fù)制后在本地的文件夾中用上面的git命令建一個(gè)本地倉(cāng)庫(kù)，然后再碼云上按照提示生成秘鑰，用于連接本地倉(cāng)庫(kù)，上傳項(xiàng)目代碼到碼云上課參考第六步的命令，下面說(shuō)在倉(cāng)庫(kù)中搭建項(xiàng)目環(huán)境。
二、搭建vue項(xiàng)目環(huán)境
1）安裝node.js是必須的，一般node都自帶npm
2）使用npm全局安裝webpack：npm i webpack -g
3）安裝vue-cli腳手架 npm i vue-cli -g（安裝完后，可以用vue -V檢測(cè)是否安裝成功）
以上步驟由于是全局安裝，可以在同一臺(tái)電腦上安裝一次即可。
4）創(chuàng)建項(xiàng)目文件夾。vue init webpack 項(xiàng)目名稱，然后會(huì)出現(xiàn)一些選擇項(xiàng)，可根據(jù)自己的需要進(jìn)行選擇。
5）cd進(jìn)入文件夾，安裝依賴包：npm i
6）安裝完成后啟動(dòng)項(xiàng)目：npm run dev
7）在瀏覽器的地址欄中輸入localhost:8080，查看是否啟動(dòng)成功。
三、在webstorm中創(chuàng)建.vue的代碼模板
如果使用別的IDE可以上網(wǎng)查找一下創(chuàng)建模板方法，在webstorm中：File->settings->editor->File Code and Templates->新建（name為vue，extension為vue），輸入以下內(nèi)容：
<template>
</template>
<script type="text/ecmascript-6">
export default {
}
</script>
<style lang="stylus" rel="text/stylus" scoped>
</style>
四、整理項(xiàng)目下的文件夾
項(xiàng)目幾乎所有的工作實(shí)在src文件夾中完成的的，所以先整理src文件夾中的文件。
src:工作目錄
assets:放資源文件處（一般放css/js/styl/img等）
components:所有的組件放在該文件夾下，除了App.vue（頂層組件）
router:配置路由處
App.vue:項(xiàng)目的入口文件，也是router出口處
main.js:全局配置
1）assets和components下的原有文件刪除，在components文件夾下創(chuàng)建一個(gè)home文件夾表示根網(wǎng)頁(yè)，然后在它下面創(chuàng)建home.vue會(huì)自動(dòng)生成我們前面創(chuàng)建的模板。
<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文件內(nèi)容。由于剛才我們刪除了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
安裝完后，重啟項(xiàng)目。
五、引入需要的全局文件reset.css、fastclick.js以及項(xiàng)目中需要的小圖標(biāo)
在網(wǎng)上或者自己寫一個(gè)css樣式初始化文件，然后放在assets->css目錄下，由于全局配置在main.js文件中，所以再在main.js中引入：import './assets/css/reset.css'。
移動(dòng)設(shè)備上的瀏覽器默認(rèn)會(huì)在用戶點(diǎn)擊屏幕大約延遲300毫秒后才會(huì)觸發(fā)點(diǎn)擊事件，這是為了檢查用戶是否在做雙擊。為了能夠立即響應(yīng)用戶的點(diǎn)擊事件，才有了FastClick。
安裝：npm i fastclick -S
安裝完成后在main.js中引入：
import FastClick from 'fastclick'
// 使用
FastClick.attach(document.body);
引入項(xiàng)目中需要用到的小圖標(biāo)：
在阿里巴巴矢量圖標(biāo)庫(kù)中搜索自己需要的小圖標(biāo)，然后添加到購(gòu)物車中，最后將購(gòu)物車中的所有圖標(biāo)下載到本地，供項(xiàng)目調(diào)用。將下載好的圖標(biāo)文件放到如下的文件中：
然后再main.js中引入：import './assets/css/iconfont.css'。
六、分析項(xiàng)目結(jié)構(gòu)創(chuàng)建基本組件
在分析完成項(xiàng)目的基本結(jié)構(gòu)后，開始一一創(chuàng)建組件。
1、創(chuàng)建header組件
在Home.vue中引入并使用Header組件：
import HomeHeader from './pages/Header'
components:{
HomeHeader
}
<home-header/>
接下來(lái)寫header部分的結(jié)構(gòu)和樣式：
在移動(dòng)端的開發(fā)中用的一般是相對(duì)的一個(gè)值rem，所以在寫樣式和結(jié)構(gòu)之前，先在reset.css中寫一個(gè)初始的全局font-size:50px;
樣式中的scoped不能忽略，它表示這是一個(gè)局部樣式，只作用于當(dāng)前的css。header部分一般為44px。Flex是Flexible Box的縮寫，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。誰(shuí)的flex為1就表示誰(shuí)是彈性的。
2、創(chuàng)建swiper組件
1） 在home目錄下的pages目錄下新建swiper.vue，然后在Home.vue中引入swiper.vue組件。
2）項(xiàng)目中的輪播效果我們用插件來(lái)寫：
進(jìn)入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);
復(fù)制swiper結(jié)構(gòu)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中的數(shù)據(jù)需要?jiǎng)討B(tài)渲染，所以需要將html改寫，數(shù)據(jù)mock：
Vue 的開發(fā)利用了 NodeJS 的便利性，通過(guò) npm 可以獲取很多第三方的代碼，同時(shí)，npm 也是開發(fā)時(shí)的命令工具入口。
注：以后將 NodeJS 均稱作 node
安裝 node
去搜索 nodejs ，然后下載系統(tǒng)版本對(duì)應(yīng)的安裝包，然后安裝。
npm 基本用法
npm 即 node Package Manager，其實(shí)這是一個(gè) javascript 包的管理工具，并不限用 node 的包。
在 node 安裝成功后，會(huì)自動(dòng)安裝上 npm ，此時(shí)的 npm 可能不是最新的版本，你可以通過(guò)命令來(lái)安裝最新的 npm
npm i npm@latest -g
常用命令如下:
npm init <project>
創(chuàng)建一個(gè)名為 project 的 node 項(xiàng)目
npm install <package>[@<version>] [--save|--save-dev]
向當(dāng)前項(xiàng)目安裝包 package；install 表示安裝命令，可以縮寫成 i ；@<version> 是要安裝的版本號(hào)，留空表示安裝最新版本；--save 是指要安裝的包記錄寫入 package.json 文件中的依賴節(jié)點(diǎn)(dependencies)；--save-dev 功能同 --save，但會(huì)將記錄寫入開發(fā)依賴節(jié)點(diǎn)(devDependencies)，表示此包是開發(fā)時(shí)使用的，并不是產(chǎn)品上使用的。平時(shí)在安裝包時(shí)，若沒(méi)有特別需要，只需要 npm i <package> 就可以了
npm run <command> 執(zhí)行 package.json 中 scripts 節(jié)點(diǎn)下的命令。在使用 Vue 的時(shí)候，會(huì)常常用到 npm run dev 或 npm run serve
當(dāng)然，也可以使用 yarn 作為包管理工具(這也是 Vue 官方推薦的工具)，其用法此處略過(guò)
Vue cli 是 Vue 官方提供的一整套腳手架，用于創(chuàng)建和管理 Vue 項(xiàng)目。通過(guò)以下命令來(lái)安裝
npm i @vue/cli -g
安裝后，可以通過(guò)以下命令測(cè)試安裝結(jié)果
vue --version
此時(shí)應(yīng)該會(huì)顯示當(dāng)前的 vue cli 版本號(hào)。
本質(zhì)上，Vue 并不挑開發(fā)工具，即使是輕量如 nodepad++ 也能勝任。但是，使用 IDE 能得到極大的便利，包括靜態(tài)錯(cuò)誤檢查以及智能提示。、
WebStorm 本應(yīng)該是首選的 IDE，不過(guò)是收費(fèi)的，而且安裝包也很大，相比之下 VS Code 就更加平民化了。
好吧，去搜索 vs code ，然后安裝吧。安裝好后，還需要安裝 Vetur 插件以支持 Vue 語(yǔ)法，以及 ESLint 插件，以支持靜態(tài)檢查。
代碼格式化快捷鍵： Shift+Alt+F ，后面會(huì)用到的
Vue 提供了瀏覽器上的開發(fā)插件，用于審查 Vue 的組件，數(shù)據(jù)，事件以及性能等。
目前此插件支持 Chrome, Firefox, Electron.
本節(jié)完
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
