關於Android工程師轉成vue的三兩事兒(3)--編譯器的選擇

時間 2019-11-30

標籤關於 android 工程師轉成 vue 三兩事兒編譯器選擇欄目 Android 简体版

原文原文鏈接

提及編譯工具，其實在剛開始作前端的時候，我仍是稍微的對比了一下當今主流的幾個編譯軟件的。webstorm、vscode、sublime、atom。最後我仍是選擇使用了webstorm，考慮到你們在剛學習前端的時候都會在編譯器上面考慮好久，就像幾個月以前的我同樣，考慮來考慮去，時間過去了，技術卻沒有提升。鑑於我有這樣的經歷，我將從webstorm、sublime、atom三個主流的軟件提及，分別介紹其安裝方法、優劣勢、以及我在寫前端的時候一些小技巧與你們分享（其中的部分技巧是在別人的項目/文章中總結得來）。因爲本文檔是結合項目作的一些總結，若是存在疑慮，請在留言區域留下您寶貴的意見和建議。html

1、 sublime

首先來講一下sublime，首先爲何要選擇這個東西呢？是我大學室友重點推薦的，另外個人啓蒙書籍強烈的推薦。外加上我本身也以爲操控這個軟件會讓人感受本身很高端，固然最最重要的是沒換電腦以前電腦的配置不太夠，強行運行其餘軟件會讓我那臺老爺機喘不過氣來😊。不扯了，直接開始安裝吧。 #####1.下載安裝：點擊sublime官網前端

#####2. 安裝Package Control：如圖所示，點擊ctrl+～，而後複製下面一串代碼：

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
複製代碼

3. command(ctrl)+shift+p選擇 install Package Control,最後根據須要挑選本身想要的插件，講道理這裏的插件仍是挺全的。

#####3. 輸入<html，就出現html模版了。

#####4. 注意若是你的電腦配置比較低，我仍是建議你使用這個插件或者使用vscode，這兩個對電腦的配置要求不高。而且裏面的插件比較豐富，基本都能知足每個前端開發人員的需求。

2、 atom

關於atom呢，這個得追溯到我當初學markdown得時候。當初在學markdown的時候，當時的老大給我推薦的就是這款編譯器，這個編譯器在外觀，包括編譯的感受上面徹底符合我這種顏值狗的首選。可是當時只是把這個編譯器看成一個markdown的工具而已。直到去年不少前端的語言推薦這款產品，我才真正探究這款編譯器。說實話，要不是我如今使用webstrom習慣了，這個編譯器將會是我編譯前端的首選。 #####一、安裝 vue

#####二、安裝插件：打開File(windows)->Settings->Install，而後在裏面搜索vue，而後就會出現插件而後直接install就好了,另外我還本身安裝了許多樣式效果，能在開發之餘帶來一點樂趣

#####三、atom這款插件。功能強大，樣式很好看、若是我不是提早就接觸過idea類的產品的話。這個將會是個人首選。可是前面也說了，我如今正在同時開發Android和前端。爲了減小編譯器的耦合性，就仍是選擇了webstrom，可是我我的仍是特別推薦這款編譯器的。畢竟是github出品的。

3、 webstrom

最後談一談webstrom，爲何我要使用webstrom呢？看標題也知道，我之前是作Android的。而Android開發有一款工具叫Android studio。而webstrom正是和Android studio一個系列的。甚至我之前開發的一些習慣均可以直接搬到這個上面來。這也是我拋棄能夠裝逼的webstrom和顏值超高的atom的緣由。外加上我如今同時在開發Android，前端項目。本身又沒有能力達到一心兩用，因此儘可能減小編寫代碼的一些差別性，有利於本身快速的容易各個領域。 #####一、安裝打開官網 node

而後打開文件以後按照本身的電腦配置一路next就能夠安裝了。 #####二、註冊在激活的時候選擇 license server；輸入此地址激活： idea.imsxm.com #####三、選擇es6語法：

4、關於在開發前端的技巧

其實編譯器只是你寫代碼的一個輔助工具罷了，沒必要爲了選擇而去選擇，若是你對一個語言足夠熟悉的話，甚至用vim、nodepad++等工具都能進行編譯的。學習一門語言，基礎是底蘊，技巧是捷徑，今天我就從js的一些技巧講起，結合本身的所見、所想，向你們總結個人一些寫做心得。git

if ...else簡寫

普通寫法es6

if (window.navigator.userAgent.indexOf('AlipayDefined') >=0) {
   type = '阿里支付'
} else {
   type = '其餘支付'
}
複製代碼

簡寫：github

type = window.navigator.userAgent.indexOf('AlipayDefined') >= 0 ? "阿里支付" : "其餘支付"
複製代碼

條件過多：多個if...else...else if

普通寫法web

if (type === 1) {
  // 阿里支付
} else if (type === 2) {
  // 微信支付
} else if (type === 3) {
   // 百度支付
}else {
  //其餘支付
複製代碼

}編程

簡寫：vim

switch (type) {
  case 1:
    // 阿里支付
    break;
  case 2:
    // 微信支付
    break;
  case 3:
    // 百度支付
    break;
  default:
    // 其餘支付
    break;
}
複製代碼

#####縮短求值簡寫: 有時候在使用某些變量的時候，老是要考慮到該變量是不是空，是否未定義等等：

普通寫法

let data = this.tabledata
   if (data !== null && data !== undefined && data !== "") {
     // dosomething
   }
複製代碼

簡寫：

const data = this.tabledata  || 'new';
複製代碼

#####判斷if裏面爲真：可是這裏會有點坑

普通寫法

if (data !== true) {
   // dosomething
}
複製代碼

簡寫：

// 可是若是data的值是1的時候依然會運行裏面的，這是我在開發的時候遇到的bug
if (data) {
  // dosomething
}
if (!data) {
  // dosomething
}
複製代碼

#####變量的賦值：

普通寫法
```
var x =0;
var y=1;
複製代碼
```
簡寫：
```
var x=0,y=1;
複製代碼
```

#####循環：

普通寫法

for (var i = 0; i < datas.length; i++)
複製代碼

簡寫：
```
for (var index of datas)
複製代碼
```

縮短求值

普通寫法

let host;
if (process.env.DB_HOST) {
  host = process.env.DB_HOST;
} else {
  host = '0.0.0.0';
}
複製代碼

簡寫

const dbHost = process.env.DB_HOST || '0.0.0.0';
複製代碼

方法改爲箭頭函數

普通寫法

setTimeout(function () {
  console.log("timeout===>>>")
},1000)
list.forEach(function (item) {
  console.log(item);
})
// vue
test: function () {
}
function calcCircumference(diameter) {
  return Math.PI * diameter
}
複製代碼

簡寫

setTimeout(() => {
  console.log("time out=>>")
}, 1000)
list.forEach( item => {
  console.log(item)
})
// vue
test () {
}
calcCircumference = diameter => (
    Math.PI * diameter;
}
複製代碼

find方法

普通寫法

const peoples = [
  { type:"student", name: "xiaohong"},
  { type:"teacher", name: "laojiang"},
  { type: "assitant", name: "xiaozhang"}
]
function findStu(name) {
  for(let i=0;i<peoples.length;i++) {
    if (peoples[i].type === "student" && peoples[i].name === name) {
      return peoples[i];
    }
  }
}
複製代碼

簡寫

let people = peoples.find(people=>people.type === "student" && people.name === name)
複製代碼

清空數組
- 普通寫法：使用此種作法，只是將一個變量引用到另一個數組，其餘引用不受影響。先前的數據引用依舊在內存中，可能會形成內存泄漏
```
var list = [1, 2, 3, 4];
function clear() {
 list = [];
}
複製代碼
```
- 技巧：刪除數組內的全部全部東西
```
var list = [1, 2, 3, 4];
function clear() {
 list.length = 0;
}
複製代碼
```

使用更簡單的相似indexOf的包含判斷方式

通用作法

var someText = 'JavaScript rules';
if (someText.indexOf('JavaScript') !== -1) {
}
// 或者
if (someText.indexOf('JavaScript') >= 0) {
}
複製代碼

技巧

// es6
'something'.includes('thing'); // true 
// 或與操做，在網上看到的，可是暫時用的是es6 主要用上面兩種
var someText = 'text';
!!~someText.indexOf('tex'); // someText 包含 "tex" - true
!~someText.indexOf('tex'); // someText 不包含 "tex" - false
~someText.indexOf('asd'); // someText 不包含 "asd" - false
~someText.indexOf('ext'); // someText 包含 "ext" - true
String.prototype.includes()
複製代碼

5、webstrom快捷鍵

談到快捷鍵，這真是一個好東西，由於這個東西要是用的好能讓你的開發事半功倍，因爲我本身又一些Android studio開發的經驗，外加上前面的不少語法技巧在webstrom裏面都會有提示（這也是我選擇這個編譯器的一個初衷），而後我就在最後簡單的介紹我經常使用到的一些快捷鍵： ⌘——Command ⌃ ——Control ⌥——alt ⇧——Shift ⇪——Caps Lock fn——功能鍵就是fn Command+alt+T 用 (if..else, try..catch, for, etc.)包住 Command+/ 註釋/取消註釋的行註釋 Command+alt+/ 註釋/取消註釋與塊註釋 alt+↑ 向上選取代碼塊 alt+↓ 向下選取代碼塊 Command+alt+L 格式化代碼 tab,shift+tab 調整縮進 Control+alt+I 快速調整縮進 Command+C 複製 Command+X 剪切 Command+V 粘貼 Command+shift+V 從剪貼板裏選擇粘貼 Command+D 複製代碼副本 Command+delete 刪除當前行 Control+Shift+J 清除縮進變成單行 shift+回車快速換行 Command+回車換行光標還在原先位置 Command+shift+U 大小寫轉換 Command+shift+[,Command+shift+] 文件選項卡快速切換 Command+加號,Command+減號收縮代碼塊 Command+shift+加號，Command+shift+減號收縮整個文檔的代碼塊 Command+W 關閉當前文件選項卡 alt+單擊光標在多處定位 Control+shift+J 把下面行的縮進收上來 shift + F6 高級修改，可快速修改光標所在的標籤、變量、函數等 alt+/ 代碼補全 Command+O 跳轉到某個類 Command+shift+O 跳轉到某個文件 Control+←,Control+→ 轉到上/下一個編輯器選項卡 F12 打開以前打開的工具窗口（TODO、終端等） Command+L 跳轉行 Command+alt+←,Command+alt+→ 向前向後導航到代碼塊交接處（通常是空行處） Command+shift+delete 導航到上一個編輯位置的位置 Command+B 跳轉到變量聲明處 Control+J 獲取變量相關信息（類型、註釋等，註釋是拿上一行的註釋） Command+Y 小浮窗顯示變量聲明時的行 Command+[,Command+] 光標如今的位置和以前的位置切換 Command+F12 文件結構彈出式菜單 alt+H 類的層次結構 F2,shift+F2 切換到上\下一個突出錯誤的位置 Command+↑ 跳轉到導航欄 alt+shift+C 打開最近修改列表 Command+F 搜索 Command+R 替換 Command+G 查找下一個 Command+shift+G 查找下一個 Command+shift+F 按路徑搜索 Command+shift+R 按路徑替換 Command+F7 向聲明的地方搜索並選中 Command+shift+F7 打開搜索框進行搜索 Command+alt+F7 打開小浮窗顯示搜索列表 F5 複製文件到某個目錄 F6 移動文件到某個目錄 Command+delete 安全刪除 shift+F6 重命名 Command+切換項目 Command+shift+ 反向切換項目 Command+shift+A 整個工程的查找操做