MiTu-小书童

概述

开源软件(Open source software)的源代码对有追求的程序员来说是一无尽的宝藏，此外正确的使用开源软件，可以提高开发软件时的效率、提升软件质量。但是在使用和借鉴开源软件的时候，我们不得不关心一下它对使用者的诸多限制，比较常见的方式即协议授权(licence)，这些协议中明确说明了使用者应该遵循的原则。

现在开源协议众多，大概有 50 多种，下面只对几种常见协议做介绍。
首先看一张总结很好的图【摘自阮一峰】

在 chrome 中打开调试工具，出现如下图提示：

This page includes a password or credit card input in a non-secure context. A warning has been added to the URL bar. For more information, see https://goo.gl/zmWq3m.

提示原因：简单的说，通过 HTTP 协议传递密码是非常不安全的，所以 Google 弹出了这个警告，提示你该是时候把你的网站 升级为HTTPS 了。

人们交流靠各种语言，每行都有每行所谓的“行话”。程序员也不例外，众所周知，程序员都是用代码进行交流的。那么除了在代码中的注释之外，
程序员如何读懂别人的程序呢？
当然，程序员之间也有所谓的“潜规则”。大家都把代码中的变量、函数和类等等用目前常用的匈牙利命名、驼峰式、帕斯卡命名法来进行命名。

匈牙利命名法

匈牙利命名法通过在变量名前面加上相应的小写字母的符号标识作为前缀，标识出变量的作用域，类型等。这些符号可以多个同时使用，顺序是先 m_（成员变量）， 再指针，再简单数据类型，再其他。例如：m_lpszStr, 表示指向一个以 0 字符结尾的字符串的长指针成员变量。

匈牙利命名法关键是：标识符的名字以一个或者多个小写字母开头作为前缀；前缀之后的是首字母大写的一个单词或多个单词组合，该单词要指明变量的用途。
匈牙利命名法中常用的小写字母的前缀：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

前缀              类型
 a              数组 (Array)
 b              布尔值 (Boolean)
 by             字节 (Byte)
 c              有符号字符 (Char)
 cb             无符号字符 (Char Byte，没有多少人用)
 cr             颜色参考值 (ColorRef)
 cx,cy          坐标差（长度 ShortInt）
 dw             Double Word
 fn             函数
 h              Handle（句柄）
 i              整型
 l              长整型 (Long Int)
 lp             Long Pointer
 m_             类的成员
 n              短整型 (Short Int)
 np             Near Pointer
 p              Pointer
 s              字符串型
 sz             以null做结尾的字符串型 (String with Zero End)
 w              Word

驼峰式

驼峰式命名法就是当变量名或函式名是由一个或多个单词连结在一起，而构成的唯一识别字时，第一个单词以小写字母开始；第二个单词的首字母大写或每一个单词的首字母都采用大写字母，例如：myFirstName、myLastName，这样的变量名看上去就像驼峰峰一样此起彼伏，故得名。
驼峰式命名法（Camel-Case）一词来自 Perl 语言中普遍使用的大小写混合格式，而 Larry Wall 等人所著的畅销书《Programming Perl》（O’Reilly 出版）的封面图片正是一匹骆驼。
驼峰式命名法的命名规则可视为一种惯例，并无绝对与强制，为的是增加识别和可读性。

小驼峰法

变量一般用小驼峰法标识。驼峰法的意思是：除第一个单词之外，其他单词首字母大写。譬如
int myStudentCount;
变量 myStudentCount 第一个单词是全部小写，后面的单词首字母大写。

大驼峰法

相比小驼峰法，大驼峰法把第一个单词的首字母也大写了。常用于类名，函数名，属性，命名空间。譬如
public class DataBaseUser;

帕斯卡命名法

帕斯卡命名法其实就是目前说的大驼峰命名法，常用于类名，函数名，属性，命名空间。

项目中有一个文件，.eslintrc.js，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: 'eslint:recommended',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // check if imports actually resolve
  'settings': {
    'import/resolver': {
      'webpack': {
        'config': 'build/webpack.base.conf.js'
      }
    }
  },
  // add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
  'rules': {
    'accessor-pairs': 2,
    'arrow-spacing': [2, {
      'before': true,
      'after': true
    }]
  }

其中 rules 就是配置规则的

1
2
3

rules: {
  "规则名": [规则值, 规则配置]
}

规则值：

1
2
3

"off"或者0      //关闭规则关闭
"warn"或者1     //在打开的规则作为警告（不影响退出代码）
"error"或者2    //把规则作为一个错误（退出代码触发时为1）

更多详细的说明请移步 configuring，中文接口，点这里

使用 Vue 的脚手架构建项目过程中，其中一个模板是这样写的：

1
2
3
4
5
6
7

<template>
  <div>
    <a href="#">
      <img :src="imgSrc">
    </a>
  </div>
</template>

大致代码如上所示，其实 imgSrc 是一个变量方式引入的图片地址。

遇到的问题是 imgSrc 中的路径并不会被 webpack 编译，还保持着相对路径的状态，最终产生 404 错误。

那该如何解决？

如果使用的是 img 标签

1
2
3
4
5
6

// js 中代码
data () {
    return {
        img: require('path/to/your/source')
    }
}

1
2

<!-- 然后在template中 -->
<img :src="img" />

如果使用的是背景图的方式

1
2
3
4
5
6

// js 中代码
data () {
    return {
        img: require('path/to/your/source')
    }
}

1
2

<!-- html 中代码 -->
<div :style="{backgroundImage:'url(' + img + ')'}"></div>

1
2
3
4

/* 或者直接在css中定义 */
.img {
  background-image: url('path/to/your/source');
}

通过 require 的方式去加载，就能让 webpack 编译并在生产版本中正常展示

Eslint

最初是由 Nicholas C. Zakas 于 2013 年 6 月创建的开源项目。它的目标是提供一个插件化的 javascript 代码检测工具。
对于每一个开发者(尤其是团队项目开发)而言都是非常值得使用的，这样会强制你写出高质量且整洁的代码

VS Code

Visual Studio Code 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

VUE + VSCode + Eslint

在使用 VSCode 编辑器开发 vue 项目时，当使用 vscode 自带的格式化代码，让 vue 项目的代码风格统一，整洁就很有必要了。

折腾了两天，看了好些文档，虽然总感觉并没有真正理解，但好歹也出了点成果

使用 eslint + VSCode 来写 vue 。 每次保存，vscode 就能标红不符合 eslint 规则的地方，同时还会做一些简单的自我修正

首先安装 eslint 插件，上文有官网通道，自己去官方查看安装步骤。

安装并配置完成 ESLint 后，我们继续回到 VSCode 进行扩展设置，点击 首选项 > 设置 打开 VSCode 配置文件，添加如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// eslint
"editor.tabSize": 2,
//根据文件后缀名定义vue文件类型
"files.associations": {
  "*.vue": "vue"
},
"eslint.autoFixOnSave": true, //每次保存的时候将代码按eslint格式进行修复
"eslint.options": {
  "plugins": ["vue"],
  "extensions": [
    ".js",
    ".vue"
  ]
},
//保存时eslint自动修复错误
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "vue",
  "vue-html",
  {
    "language": "vue",
    "autoFix": true
  }
],
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
    "wrap_attributes": "force" // 可以换成上面任意一种value
  }
}

PS：这里有一个不明白的地方，我在没有装 vscode 插件 Beautify 以及 Prettier 插件的时候，引用了上述配置也能生效。。。但建议大家将这两个插件都安装一下。

这样每次保存的时候就可以根据根目录下.eslintrc.js 你配置的 eslint 规则来检查和做一些简单的 fix。每个人和团队都有自己的代码规范，统一就好了

ESLint 和 Prettier 的冲突修复

在用 Prettier 格式化的时候，可以能会和 ESLint 定义的校验规则冲突，比如 Prettier 字符串默认是用双引号而 ESLint 定义的是单引号的话这样格式化之后就不符合 ESLint 规则了。所以要解决冲突就需要在 Prettier 的规则配置里也配置上和 ESLint 一样的规则，这里贴下 ESLint 和 Prettier 的配置文件。

• .eslintrc.js 配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

module.exports = {
  root: true,
  parser: "babel-eslint",
  parserOptions: {
    sourceType: "module"
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: "eslint:recommended",
  // required to lint *.vue files
  plugins: ["html"],
  // check if imports actually resolve
  settings: {
    "import/resolver": {
      webpack: {
        config: "build/webpack.base.conf.js"
      }
    }
  },
  // add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
  rules: {
    "accessor-pairs": 2,
    "arrow-spacing": [
      2,
      {
        before: true,
        after: true
      }
    ]
  }
};

• .prettierrc 配置文件

1
2
3
4
5
6
7

{
  "eslintIntegration": true,
  //使用单引号
  "singleQuote": true,
  //结尾不加分号
  "semi": false
}

这样把 ESLint 和 Prettier 冲突的规则配置一致,格式化之后就不会冲突了。

命令式自动修复

1

npm run lint -- --fix

命令行工具有几个选项，你可以通过运行 eslint -h 查看所有选项

项目中引入 Eslint 进行团队开发，配置好之后，报错提示如下：

1

http://eslint.org/docs/rules/no-unneeded-ternary  Unnecessary use of boolean literals in conditional expression  

文档的意思是 禁止不必要的嵌套

源代码：

1

this.btnStatus = this.btnStatus === true ? false : true

然后点开对应的链接就发现问题所在了~

链接中的内容 (就不翻译直接引入了。。。)

It’s a common mistake in JavaScript to use a conditional expression to select between two Boolean values instead of using ! to convert the test to a Boolean. Here are some examples:

1
2
3
4
5
6
7
8
9
10
11

// Bad
var isYes = answer === 1 ? true : false

// Good
var isYes = answer === 1

// Bad
var isNo = answer === 1 ? false : true

// Good
var isNo = answer !== 1

Another common mistake is using a single variable as both the conditional test and the consequent. In such cases, the logical OR can be used to provide the same functionality. Here is an example:

1
2
3
4
5

// Bad
var foo = bar ? bar : 1

// Good
var foo = bar || 1

所以。。。

修改源代码之后的结果：

1

this.btnStatus = this.btnStatus !== true

报错/警告 问题解决了~

最近在移动端 H5 项目开发中，经常在 chrome 的控制台看到如下提示：

1

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

首先，之所以报错是因为引入了 FastClick（为了解决 300ms 的 click 延迟）

于是 Google 了一番，找到这篇文章，有了详细解释
https://developers.google.cn/web/updates/2017/01/scrolling-intervention

简而言之：

由于浏览器必须要在执行事件处理函数之后，才能知道有没有掉用过 preventDefault() ，这就导致了浏览器不能及时响应滚动，略有延迟。

所以为了让页面滚动的效果如丝般顺滑，从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive: true。浏览器忽略 preventDefault() 就可以第一时间滚动了。

举例：

1
2

wnidow.addEventListener('touchmove', func) 效果和下面一句一样
wnidow.addEventListener('touchmove', func, { passive: true })

这就导致了一个问题：

如果在以上这 3 个元素的 touchstart 和 touchmove 事件处理函数中调用 e.preventDefault() ，会被浏览器忽略掉，并不会阻止默认行为。

测试：

1
2
3
4
5
6
7
8

body {
  margin: 0;
  height: 2000px;
  background: linear-gradient(to bottom, red, green);
}

// 在 chrome56 中，照样滚动，而且控制台会有提示，blablabla
window.addEventListener('touchmove', e => e.preventDefault())