v-for 与 key 配合使用

• key 需要是惟一的
• 频繁数据变化的数组key 不要绑定 index,会引发不渲染的问题
• 返回值没有 id的用shortid一类的库生成 id 后使用

1
2
3
4
5
6
7
8

import shortid from 'shortid'
const array = [{a:1,b:2}, ...]
const newArray = array.map(item => {
	item._id = shortid.generate()
	return item
})

vm.array = newArray

理解configs/axios.js 配置

• configs/axios.js 中对 axios 做了请求和返回的封装
• configs/axios.js 的默认导出对象是对 cancelToken 的封装
• configs/axios.js 的默认导出对象与原始对象的 api 是有所区别的

html 属性书写

• 优先写 Vue 指令
• Vue 指令按优先级顺序书写
• v-for 不应与 v-if 一起使用
• 绑定属性为字符串的应如此写

1

:type="'Office'"

• 静态的 html 属性放到最后写

举个例子

善用计算属性

• 计算属性节约性能
• 计算属性属于函数式编程可测试

适用场景

1.v-for 中需 v-if 过滤的

2.v-if 中书写大量表达式的

常量提取

• 便于管理
• 便于修改

适用场景

拆解业务胶水代码

• 容易产生混乱的引用关系
• 前后数据依赖难以测试

适用场景


解决方案

• 数组操作多使用 map 等返回新数组的操作, 少用 forEach

• 数组对象也可使用…操作符

• 将复杂的数据处理抽象成独立方法

Mixin 按照规范编写

组件命名和使用

BAD 习惯

1.克隆对象 克隆数组

1

this.$emit('save', JSON.parse(JSON.stringify(this.multipleSelection)))

2.没注释,注释不符合 jsdoc 标准

3.单词拼写错误

现在的项目经常用到 eslint 来控制代码质量和代码格式, 虽然好用但编写 eslint 格式的代码太痛苦
所以今天来讲讲如何在 VSCode 中开启 Vue 自动代码格式化

1
2
3
4
5
6
7

# 先安装几个 nodejs 库

# eslint
npm i -g eslint

# prettier
npm i -g prettier

然后在 VSCode 中做用户设置, 按下 cmd + ,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
  "editor.tabSize": 2,  
  "editor.formatOnSave": true, 
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true, 
  "vetur.format.defaultFormatter.html": "js-beautify-html"
}

在你的项目里配置一个.prettierrc 文件

1
2
3
4
5
6
7
8
9

{
  "eslintIntegration": true,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "arrowParens": "arrowParens"
}

项目里配置一个 .editerconfig

1
2
3
4
5
6
7
8
9

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

你会发现在 VSCode 中保存 Vue 文件时可以自动格式化了,

IDE 大厂微软打造的 VSCode 一经推出就成为了炙手可热的开发工具新贵

归结原因一是性能优秀另一点就是插件丰富

下面我来推荐一下我使用的插件

排名分先后

1.Vetur

Vue 开发的专属插件谁用谁知道
2.vscode-icons
给目录中符合命名规范的文件夹和文件好看的图标
3.EditorConfig for VS Code
使 VSCode 支持 EditorConfig 统一文件编写防止猪队友
4.ESLint
代码不符合 elint 规范时会显示错误
5.Code Spell Checker
检测拼写错误
6.Auto Close Tag
标签自动闭合
7.Auto Rename Tag
标签自动改名
8.Add jsdoc comments
创建符合 jsdoc 规范的注释
9.Bracket Pair Colorizer
括号彩色配对显示
10.Beautify
前端格式化工具,主要用于样式格式化
11.Path Autocomplete
js 代码的路径补全
12.Path Intellisense
html 代码的路径补全
13.Sass
Sass 的语法高亮,补全
14.npm
对 package.json 进行检查

这是一篇快速配置全新Macbook到前端开发环境的文章。我参考了很多配置macbook的文章，在此就不一一致谢了。

触摸板

光标与点按

• 轻拍来点按
• 辅助点按
• 查找
• 三指拖移（配备Force Touch的电脑此选项已被转移至辅助功能 > 鼠标与触摸板）

滚动缩放

• 默认即可

更多手势

• 默认即可

Dock

将默认放在Dock上的app全部脱出，保持最精简

Finder

Finder > 显示

• 显示路径栏

Finder > 偏好设置 > 通用

• 开启新Finder窗口时打开：Home『用户名』目录

Finder > 偏好设置 > 边栏

• 勾选Home『用户名』目录
• 创建工作目录到侧边栏

Finder > 偏好设置 > 高级

• 显示所有文件扩展名（勾选）
• 更改扩展名之前显示警告（不勾选）
• 清倒废纸篓之前显示警告（勾选）
• 安全清倒废纸篓（不勾选）
• 执行搜索时：搜索当前文件夹

系统偏好设置 > 键盘 > 快捷键

• 全键盘控制：所有控制
• 输入源：选择上一个输入源 command空格键
• Spotlight: 显示Spotlight搜索 contral空格键

Xcode

• 快速安装command line tool，在终端中运行：

1

xcode-select --install

• 从App store 安装Xcode，不完整安装Xcode某些node包在编译时会报错

Homebrew

Mac的包管理工具，安装前要确保 command line tool安装完成

在终端中输入如下命令：

1

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Fxck GFW

安装你的Shadowsocks翻墙工具

安装Proxychains-ng（终端翻墙）

1

brew install proxychains-ng

配置Proxychains-ng

1
2
3

vi /usr/local/etc/proxychains.conf
#最后一行改为 socks5 ip port
socks5 127.0.0.1 9742

使用Proxychains-ng

1

proxychains4 curl www.twitter.com

Homebrew Cask

不建议使用此君安装图形app，装几个插件即可

文件预览插件

1
2
3
4
5
6
7
8
9

brew cask install qlcolorcode
brew cask install qlstephen
brew cask install qlmarkdown
brew cask install quicklook-json
brew cask install qlprettypatch
brew cask install quicklook-csv
brew cask install betterzipql
brew cask install webp-quicklook
brew cask install suspicious-package

偏好面板

1
2

brew cask install launchrocket  服务管理
brew cask install hosts   host管理

终端

安装iTerm2

安装prezto

Git,Node

命令行中输入：

1
2
3
4
5

brew update
brew install git
brew install node
brew install python
brew install ruby

必备软件

• 开发工具：
  • Google Chrome
  • Sublime Text 3
  • WebStorm
  • Parallels Desktop
  • Photoshop
  • Sketch
• 生产力工具：
  • Alfred 2
  • Dash
  • 1Password
  • Manico
  • Moom
  • Mou
  • MS Office

今天我来讲讲手机分辨率适配

这里讲的适配只是手机在（竖屏）portrait模式下的宽度适配

网路上经常讲的适配方案有如下几种：

1.比较早期的，利用viewport标签适配宽度，剩下的在css中宽高全部用%单位书写。这是一种万金油的写法，设计得当可以适配很多手机，而且不用太过调整。不过需要精确排版和定位时就不行了。

1
2

<meta name="viewport"
    content="width=device-width,maximum-scale=1,user-scalable=no">

2.将页面container宽度限制为320px居中（meta标签同第一种），超出宽度的部分补充背景色。比较偷懒的解决方法，无法充分利用手机屏幕。
3.利用viewport放大比例的。这种方法以320像素宽度为基础，在手机宽度增加后会按比例放大，最高比例会控制在meta中书写的大小上。css中只需按320编写即可。按比例放大在页面调试时可能会有问题。

1
2

<meta name="viewport"
    content="width=320,maximum-scale=1.3,user-scalable=no">

4.使用em单位书写css（meta标签同第一种）。可完美适配，但上下文切换font-size时会有px2em的计算问题，更改设计可能会要人命的，使用sass可以解决
5.使用rem单位书写css（meta标签同第一种）。

以上各种方案我基本都用过，最后选择了第5种rem方案

rem的浏览器支持

主流的设备基本都支持，早期安卓2.x的设备有些用了uc内核的浏览器也是支持的

rem的基本知识

rem，即 root em，W3C上是这样描述rem的『font size of the root element』

rem与px的换算

rem是相对单位 1rem = ?px是随着<html>的font-size属性变化而变化的

浏览器默认<html>为16px，所以1rem = 16px

若如下面代码设置，则1rem = 10px

1
2
3

html{
    font-size:10px;
}

然并卵

虽然设置font-size为10px可以使很多换算为rem单位的值少很多小数位，但webkit内核不支持12px以下的字体渲染，所以这个设置是无效的

8012年更新,pc 端是无法渲染12px 以下文字的,手机端可以

在这里我深深地wtf一下网络上人云亦云的rem相关文章

我的rem解决方案

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
36
37

html {
    font-size: 625%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
/*iphone5*/
@media only screen and (min-width: 320px) {
html {
    /* 320/320 = 1*/
    font-size: 625% !important;
}
}
/*android*/
@media only screen and (min-width: 360px) {
html {
    /* 360/320 = 1.125*/
    font-size: 703.125% !important;
}
}
/*iphone6*/
@media only screen and (min-width: 375px) {
html {
    /* 375/320 = 1.171875  */
    font-size: 732.421875% !important;
}
}
/*iphone6plus*/
@media only screen and (min-width: 414px) {
html {
    /* 414/320 = 1.29375 */
    font-size: 808.59375% !important;
}
}

body {
    font-size: .12rem;
}

恩，我把<html>的font-size从10px提高到100px，然后在<body>中重置到12px。
看上去很完美的方案，如果有意见或建议请给我留言。
当然我也希望大家不要只是简单的cv使用，而是写出自己的适配方案。

今天就写这么多吧，回见！

在安卓微信中开发页面的同学都知道，点击a标签时会有一个非常难看的蓝色边框浮现出来，如下图:

那么如何去掉这个不太招人待见的默认样式呢？代码如下：

1
2
3
4

a {
    outline:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

Hi 这是里德巍的部落格，从今天起朕要写点什么了！

常来看看哦，哈哈！