关于Android工程师转成vue的三两事儿(3)--编译器的选择

提及编译工具，其实在刚开始作前端的时候，我仍是稍微的对比了一下当今主流的几个编译软件的。webstorm、vscode、sublime、atom。最后我仍是选择使用了webstorm，考虑到你们在刚学习前端的时候都会在编译器上面考虑好久，就像几个月以前的我同样，考虑来考虑去，时间过去了，技术却没有提升。鉴于我有这样的经历，我将从webstorm、sublime、atom三个主流的软件提及，分别介绍其安装方法、优劣势、以及我在写前端的时候一些小技巧与你们分享（其中的部分技巧是在别人的项目/文章中总结得来）。因为本文档是结合项目作的一些总结，若是存在疑虑，请在留言区域留下您宝贵的意见和建议。

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习惯了，这个编译器将会是我编译前端的首选。 #####一、 安装

#####二、安装插件：打开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，前端项目。本身又没有能力达到一心两用，因此尽可能减小编写代码的一些差别性，有利于本身快速的容易各个领域。 #####一、安装 打开官网

而后打开文件以后按照本身的电脑配置一路next就能够安装了。 #####二、注册 在激活的时候选择 license server； 输入此地址激活： idea.imsxm.com #####三、选择es6语法：

4、 关于在开发前端的技巧

  其实编译器只是你写代码的一个辅助工具罢了，没必要为了选择而去选择，若是你对一个语言足够熟悉的话，甚至用vim、nodepad++等工具都能进行编译的。学习一门语言，基础是底蕴，技巧是捷径，今天我就从js的一些技巧讲起，结合本身的所见、所想，向你们总结个人一些写做心得。

• if ...else简写

  • 普通写法

    if (window.navigator.userAgent.indexOf('AlipayDefined') >=0) {
       type = '阿里支付'
    } else {
       type = '其余支付'
    }
    复制代码

  • 简写：

    type = window.navigator.userAgent.indexOf('AlipayDefined') >= 0 ? "阿里支付" : "其余支付"
    复制代码

• 条件过多：多个if...else...else if

  • 普通写法

    if (type === 1) {
      // 阿里支付
    } else if (type === 2) {
      // 微信支付
    } else if (type === 3) {
       // 百度支付
    }else {
      //其余支付
    复制代码

    }

  • 简写：

    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 整个工程的查找操做

最后我再来啰嗦一句，快捷键并不能提升你的编程技能，只能提高你的编程速度。最终公司考量你的是对基础知识的领会程度和对只是的运用自如的能力。若是你在这一方面下大文章的话，无疑是舍本逐末罢了。就像之前咱们开发Android同样，之前对eclipse的快捷键记的很熟练，然而如今Android用eclipse的已是寥寥无几了。因此编译器是会过时的，可是知识是不会的，领会了知识，快捷键运用只是景上添花罢了。 哇，低头看了一下表，如今又凌晨了 不写了 不写了 老规矩，去洗澡了😅