发表于   |   分类于

includes VS. indexOf

  • 返回值类型不同，includes 返回布尔型，indexOf 返回数值，在 if 判断时 includes 更简便
  • 如果数组中有 NaN，要判断数组是否有存在 NaN，indexOf 是无法判断的，必须使用 includes
  • 当数组有空值的时候，includes 会认为空的值是 undefined，而 indexOf 不会
  • 如果要查找某个元素在数组中的位置，该使用 indexOf，如果要判断数组中是否存在某个元素，该使用 includes

import VS. require

require

  • require 是 AMD 规范引入方式
  • require 动态加载，是运行时调用，只能在运行时确定模块的依赖关系及输入/输出，无法进行静态优化，可以出现在任何地方，可以使用通过计算得到的地址
  • require 是赋值过程，require 的结果就是对象、数字、字符串、函数等，再把结果赋值给某个变量，是普通的值拷贝传递
  • 使用 exports、module.exports 导出

import

  • import 是 ES6 的一个语法标准，如果要兼容浏览器必须转化成 ES5 的语法，import 语法会被转码为 require
  • import 静态加载，是编译时调用，必须放在文件开头，支持编译时静态分析，便于 JS 引入宏和类型检验，不能使用通过计算得的到地址
  • import 是解构过程，使用 import 导入模块的属性或者方法是引用传递，read-only，单向传递
  • 使用 export 导出

发表于   |   分类于

离职必须交付的

  • 询问辞职者对以前项目有没有觉得做的不好的、需要重构的，必须重构完测试通过上线，避免别人没办法接手维护
  • 交接人需交接项目如何启动、需哪些环境变量及其值
  • 建议交接人可提供其研发的工具的源码，至少可提供常见问题的处理方式
  • 针对被交接的人，最好给他明确的交接范围，期望达到的接手程度，也需要询问他需要什么、期望交接人做什么吗
  • 根据情况决定是否需要交接文档，如果有需要有人验收交接文档
  • 辞职者需交接其掌握的全部账号，个人相关的无需提供密码，项目相关的需提供密码
    • [注销]个人邮箱
    • [NAS]注销
    • [清除权限]github 账号
    • [清除权限]google drive
    • [清除权限]teambation
    • [清除权限]bearchat
    • [清除权限]basecamp
    • [清除权限]小程序后台
    • [清除权限]官网

发表于   |   分类于

工作

  • 记录每天工作步骤或工作内容，方便工作量评估和后期总结
  • 善于评估是否用一个别人提供的东西还是自己写，跟同事讨论
  • 遇到问题感觉很难进行时，停下手头工作思考是否哪里做的不对，及时修正
  • 善于总结，可以写博客、简书等总结工作和心得，方便以后回顾，监督自己的成长

日常

  • 知道看书的必要性，扩展知识面
  • 个人目标、不要做自己不喜欢的人
  • 发现自己的缺点后逐步改善，定期回顾
  • 善于自我管理，平衡家庭和工作，给自己留出成长的时间

发表于   |   分类于

last-child 与 last-of-type

:last-child 表示其父元素的最后一个子元素，且这个元素是 css 指定的元素，才可以生效，否则无法生效，first-child 同理。:last-of-type 表示其父元素下的最后一个指定类型的元素。

锚点定位偏移

在 <section> 前面再加一个 <a class="target-fix"> 作为暗锚，将这个锚点进行偏移：

1
2
3
4
5
6
7
.target-fix {
    position: relative;
    top: -60px; // 偏移为nav被fixed元素的高度
    display: block;
    height: 0; // 高度为0
    overflow: hidden;
}

选择器的优先级

!important > 内联样式（1000）> ID选择器（100）> 类选择器（10）= 属性选择器（10）= 伪类选择器（10）> 元素选择器（1）= 伪元素选择器（1) > 通配符选择器（0）= 关系选择器（0）= 否定伪类（0）> 继承

当选择器出于同一种特殊性的时候，位于css文件下部的样式会覆盖上面的样式。

Canvas 、SVG、WebGL

Canvas

  • Canvas 通过 JavaScript 来绘制 2D 图形
  • 逐像素进行渲染，依赖分辨率
  • 一旦图形被绘制完成就不会继续得到浏览器的关注，如果其位置发生变化，整个场景也需要重新绘制，包括任何可能已被图形覆盖的对象
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

  • SVG 是一种使用 XML 描述 2D 图形的语言
  • 矢量图，不依赖分辨率，难以表现色彩丰富的逼真图像效果
  • 每个被绘制的图形均被视为对象，如果对象的属性发生变化，浏览器能够自动重现图形
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用

WebGL

  • 基于 Canvas 的 3D 框架，主要用来做 3D 展示、动画、游戏

CSS Modules

CSS 模块化的解决方案有很多，但主要有三类：

  • 命名约定，代表 BEM、OOCSS、AMCSS、SMACSS
  • CSS in JS，代表 styled-components
  • 使用JS 来管理样式模块，代表是 CSS Modules

CSS Modules 是所有的 class 的名称和动画的名称默认属于本地作用域的 CSS 文件。所以 CSS Modules 不是一个官方的规范，也不是浏览器的一种机制，它是一种构建步骤中的一个进程，通过构建工具的帮助，可以将 class 的名字或者选择器的名字作用域化。有了 CSS Modules，就可以确保所有的样式能够服务于单个组件：集中在一个地方；只应用于那个组件，其他组件不适用。这样设计的目的在于解决 CSS 中的全局作用域问题。

Webpack 自带的 css-loader 组件，自带了 CSS Modules，通过简单的配置即可使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
          }
        }
      ]
      }
  ],
  ...
}

BFC 块级格式化上下文

BFC(Block Formatting Context) 块级格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。可以用来解决两相邻元素间距发生重叠、清除浮动等问题。

形成 BFC 的条件

  • 浮动元素，float 除 none 以外的值
  • 定位元素，position 为 absolute 或 fixed
  • 非块盒的块容器，display 为 inline-block 或 table-cell 或 table-caption
  • overflow 除 visible 以外的值（hidden，auto，scroll)

BFC 的特性

  • 内部的 Box 会在垂直方向上一个接一个的放置
  • BFC 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素
  • 垂直方向的距离由 margin 决定，属于同一个 BFC 的相邻 Box 的 margin 会发生重叠
  • 元素的 margin box 的左边与包含块 border box 的左边相接触，存在浮动也是如此
  • BFC 的区域不会与 float 的元素区域重叠
  • 计算 BFC 的高度时，浮动元素也参与计算

发表于   |   分类于

一定要语义化，所有命名使用有意义的英文单词，复数加 s，一定不要拼写错误，尽量不要缩写，可以借助 IDE 插件进行检查，如 Code Spell Checker，使用统一的风格，哪里用 camelCase，哪里用 kebab-case，保持一致，减少写注释。

火星科技Web前端编码规范

环境变量

  • 使用环境变量加载与部署相关的配置，永远也不要把它们作为常量写入代码，密钥和其它有价值的信息应该与代码库分离
  • 使用 dotenv 配置环境变量

命名规则

  • Vue 风格指南
  • Vue.js 组件编码规范
  • Airbnb JavaScript Style Guide
  • 公用组件使用 PascalCase
  • 页面使用 kebab-case 或者 camelCase
  • 方法名、变量使用 camelCase
  • 数据相关的文件以 _data 结尾
  • create 表示从无到有, 产生了新的东西
  • add 通常是把一个东西添加到另一个东西，比如 add to cart, 通常产生的是一个关系，而不是一个具体的东西
  • new 通常是 ui 用的
  • update 是修改内容, 产生新的值
  • change 是替换，一个换另一个
  • edit 通常用于 ui
  • remove 是移走, 消失的往往是关系
  • delete 是删除，真的把东西给消失掉了
  • 方法名称 handleXXX 形式，如 handleClick
  • 如果是不使用的变量，如方法中的参数，可以命名为 _

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
- components
    - AdvSearch
        - index.js
        - AdvSearch.vue
        - AdvSearch.less
- views
    - home
        - home.less
        - home.vue
        - components
            - homeHeader.vue
            - homeHeader.less

代码

  • 前端统一使用一个 IDE，尽量统一配置，文件要经常格式化
  • 确定使用 yarn 还是 npm 装包后只用一个，不要混着用，可以借助代码审核机制 pull request
  • 删除无用的文件、注释代码、未使用的引用
  • 尽量不要自己拼接字符串和格式转换，使用 classsnames、query-string、numerical、lodash、date-fns、moment.js 等第三方工具
  • 验证尽量使用 validator 等第三方工具
  • 页面中使用封装好的组件进行布局，如 Layout、Row、Column、Container，当需要做页面适配的时候，只需修改这些公用组件，其它地方是不需要处理的
  • 即使有默认值也最好写上，万一以后改了默认值就不用修改代码了
  • 标签引用顺序保持一致，template、script、style
  • 引用时绝对路径引用和相对路径引用分开，中间加空行；如果是引用到目录，以斜杠结尾 import AdvSearch from 'components/AdvSearch/'；引用文件和正式代码中间加空行
  • 单引号、双引号使用场景
  • 结尾都写分号，分行的对象属性结尾都写逗号
  • 组件的文件夹下，用 index 文件进行默认导出
  • 多个地方引用的常量，通过 config 文件进行配置，统一从 config 文件引用，常量用全大写
  • 引用有使用 @ 的，还有写完整路径的，主要是 api 文件夹下
  • style 写成内联还是用 class 引用
  • 注释符号后有一个空格，英文单词和汉字中间有空格
  • + 等符号前后都有空格
  • 图片如果比较大使用 img.top 压缩，也可以使用打包工具压缩
  • public 中的文件，是不会经过编译的，打包后复制一遍，public 建议放一些外部第三方文件，src/assets 放自己的文件

配置

  • eslint、tslint、stylelint 配合 prettier，配置 js、css 等代码检查工具
  • husky、lint-staged 在提交 commit 前进行格式化

commit

  • 动宾短语，如 添加 xx，修正 xx，更新 xx，删除 xx
  • 完成一个完整的功能时尽早提交，不要提这个功能无关的代码
  • 装包或配置相关的代码单独提交，只提交一个功能相关的代码
  • 除非已沟通过，否则不要提交别人的代码
  • 可以使用 rebase 命令修正前面的 commit
  • git commit --fixup commitID
  • git rebase -i --autosquash HEAD~3

changelog

1
2
3
4
5
6
7
8
9
## 1.1.1 - 2018-11-21
### 新增
- 新增市场活动功能
### 修改
- 修改导航栏样式

发表于   |   分类于

配置的三个级别

local 针对当前仓库，优先级最高
global 针对当前用户，优先级其次
system 针对系统，优先级最低

四种对象

git 使用40个16进制字符的 SHA-1 Hash 来唯一标识对象，git 有4种对象：

  • blob 文本文件，二进制文件，链接文件，是在代码提交到 Stage 区时根据内容生成的二进制文件
  • tree 目录结构，包括 tree 和 blob，在进行提交时把 Stage 区中的 blob 对象封装在 tree 中
  • commit 存储一次提交的信息，指向一个 tree
  • tag 指向固定的历史提交，可以当做是 commit 的别名

git 只关心文件的内容，如果2个文件有同样的内容，它们会指向同一个 blob 对象，文件名等其它信息会存储在 tree 对象中。

git hash-object [file-name] 查看文件的 hash 码
git cat-file -p [id] 显示仓库中对象的类型、大小和内容信息

工作流程

working directory 工作区，日常编辑代码的地方，维护着一个树形结构
git repository 本地仓库，commit 指向的一个树形结构
staging area 暂存区，.git/index 文件，工作区与本地仓库中间的缓存，维护的是虚拟的树形结构，代表的是需要提交的工作的状态

工作区是我们能看到的区域，我们在工作区修改增加代码，完成编辑后，用 git add 将工作区文件添加到暂存区，然后利用 git commit 提交文件到本地仓库。分支就是 commit 的引用，在这些分支上工作会产生各自的历史，分支切换就是 HEAD 引用的移动以及暂存区和工作区的还原，tag 指向一个固定的 commit。

命令

git add 工作区到暂存区
git commit 暂存区到和本地仓库
git rm [file-name] 删除暂存区和工作区的文件
git rm --cached [file-name] 删除暂存区的文件
git mv [old-name] [new-name] 重命名或移动暂存区和工作区的文件
git status 查看工作区和暂存区的区别
git stash save "name" 将工作区放入 stash 栈中
git stash save -a "name" 将工作区和暂存区放入 stash 栈中
git stash pop --index stash@{0} 还原工作区和暂存区
git stash apply --index stash@{0} 还原工作区和暂存区，不删除 stash 中的索引
git stash drop stash@{0} 删除 stash 栈中的索引
git stash clear 清除 stash 栈中的全部索引
git merge --abort 放弃当前合并操作

查看与对比历史记录

git show 显示 git 对象
git log [--oneline] [--decorate] [--graph] [--all] 查看历史记录
git diff [--color-worlds] [--word-diff] 查看工作区与暂存区的区别
git diff [file-name] 查看工作区与暂存区指定文件的区别
git diff --cached 查看暂存区与本地仓库的区别
git diff [提交hash码或者HEAD] 查看工作区与本地仓库的区别
git diff 提交区hash码A 提交区hash码B 查看两个不同提交的区别
git diff 分支A的某个hash码 分支B的某个hash码 两个不同分支间比较

撤销修改

git checkout [file-name] 从暂存区或本地仓库恢复文件，回到最近一次 git commit 或 git add 的状态
git checkout . 从暂存区或本地仓库恢复所有文件，撤销工作区修改，不改变暂存区
git checkout [commit 引用] [file-name] 还原工作区和暂存区
git reset [file-name] 撤销暂存区文件
git reset . 撤销所有暂存区文件，清空暂存区文件，不改变工作区
git reset [commit 引用] [file-name] 还原暂存区
git clean -n [-X|x] 查看执行 git clean 会清除的文件
git clean -f 清除未跟踪的文件，不包括 gitignore 中指定的文件
git clean -x -f 清除所有未跟踪文件，包括 gitignore 中指定的文件
git clean -X -f 保留 gitignore 之外的文件，清除 gitignore 中指定的文件
git revert [commit 引用] 产生一个新的提交来撤销以前的提交

commit 引用可能是 commitID、branch、HEAD、tag。

重写历史记录

git commit 和 git rebase 参考Git-基础2
git reflog 查看 HEAD 引用的历史
git reset --hard HEAD@{n} 回到指定的历史提交，还原暂存区和工作区
git reset --mixed HEAD@{n} 回到指定的历史提交，只还原暂存区，为默认参数
git reset --soft HEAD@{n} 回到指定的历史提交，不原暂存区和工作区

gitignore 文件

  • 以’#’开始的行，被视为注释
  • 以斜杠“/”开头表示目录
  • 以星号“*”通配多个字符
  • 以问号“?”通配单个字符
  • 以方括号“[]”包含单个字符的匹配列表
  • 以叹号“!”表示不忽略(也就是跟踪)匹配到的文件或目录
  • git check-ignore -v [file|folder] 查找 gitignore 文件中匹配该文件的规则

发表于   |   分类于

BEM – Blocks, ELements and Modifiers

1
2
3
4
5
6
// Block
.container {}
// Element, depends upon the block
.container__btn {}
// Modifier, changes the style of the block
.container--rounded {}

rscss

OOCSS

发表于   |   分类于

我们的项目中，master、develop 为受保护分支，master 对应生产环境，develop 对应测试环境，不能直接在该分支上提交代码。开发某个特性时，需要从 develop 分支拉出一条 feature 分支，例如 feature-1 与 feature-2，在这些分支上并行地开发具体特性。当特性开发完毕后，提交 pull request 到 develop 分支，所有前端进行 code review，如果有问题进行 Request changes，如果没问题点击 Approve，审核没问题后才合并到 develop 分支，并自动部署到测试环境。测试过程中如果发现 bug，从 develop 拉出新的分支修改发现的 bug。当测试没问题需要发布新版本时，需要从 develop 分支上拉出一条 release 分支，例如 release-1.0.0，更新 CHANGELOG.md 文件和 package.json、package-lock.json 的 version，提交 pull request 到 master 和 develop 分支，进行合并，并自动发布到生产环境和测试环境。release 的 pull request，到 develop 和 master 上都用 “Create a merge commit” ，其它提交到 develop 的 pull request，都用 “Squash and merge” 合并。Squash and merge 方式可能会产生一些问题。

当生产环境发现紧急 bug 时，直接从对应的 master 拉出一条 hotfix 分支（例如 hotfix-1.0.1），在该分支上做 bug 修复，并提交 pull request 到 develop 和 master 分支，进行合并。

如果 develop 分支发生变化时，有正在开发的 feature 分支，需要执行 rebase 操作以保证是基于最新的 develop 分支。

对于版本号我们也有要求，使用 Semver（Semantic Version）版本命名规范，格式为：x.y.z，其中，x 用于有重大重构时才会升级，y 用于有新的特性发布时才会升级，z 用于修改了某个 bug 后才会升级。