工作中的遇到的一些小知识 3

发表于 分类于 Disqus： 本文字数： 4.9k 阅读时长 ≈ 8 分钟

git case sensitive

git本身是大小写敏感的。但在大小写不敏感的系统里，需要用hack方法记录仅修改文件名大小写的改动。

1
2
3
git mv file.txt temp.txt
git mv temp.txt File.txt
git commit -m "Renamed file.txt to File.txt"

webpack的一些经验

DefinePlugin

允许创建一个在编译时可以配置的全局常量。在构建区分环境的包时很有用。

1
2
3
4
5
6
7
new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify("5fa3b9"),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: "1+1",
  "typeof window": JSON.stringify("object")
})

注意：这个插件直接执行文本替换。因此：

  • 如果这个值是一个字符串，它会被当作一个代码片段来使用。
  • 如果这个值不是字符串，它会被转化为字符串(包括函数)。
  • 如果这个值是一个对象，它所有的 key 会被同样的方式定义。
  • 如果在一个 key 前面加了 typeof,它会被定义为 typeof 调用

resolve alias

创建import或require的别名，来确保模块引入变得更简单。例如，一些位于 src/ 文件夹下的常用模块：

1
2
3
4
5
alias: {
    @: path.resolve(__dirname, 'src/'),
    Utilities: path.resolve(__dirname, 'src/utilities/'),
    Templates: path.resolve(__dirname, 'src/templates/')
}

z-index可能的坑

使用前提：z-index只能在position属性值为relative或absolute或fixed的元素上有效。

z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值（如果有）为子元素定义了堆叠顺序（css版堆叠“拼爹”）。向上追溯找不到含有z-index值的父元素的情况下，则可以视为自由的z-index元素，它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值，决定其堆叠顺序。同级元素的z-index值如果相同，则堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。

git submodule

参考：GIT 子模块

最新一个项目里要复用已有的一个git库的代码，具体来说就是要将之前在WebView的内容复刻到PC版完成（这个需求貌似应该还挺常见的）。为了保证代码复用性，选择了git submodule的方法。这也是我此前从没用过的一个命令。

简单来说，是一个 GIT 仓库下面某个文件夹的来源可以跟本库的来源不同，这个文件夹连接着别的库，由别的库负责按本控制和管理。是不是和npm包管理的形式比较像。子模块可以手动添加，也可以在克隆一个主库的时候就直接实体化。具体来说，有四种情况：

  • 克隆库的时候要初始化子模块 => 加上--recursive参数 git clone --recursive git@github.com:shenlvmeng/trace-maker.git
  • 初始化已有库的子模块 => git submodule update --init --recursive
  • 从子模块的源更新该子模块 => git submodule update --recursive --remote
  • 添加一个新的子模块 => git submodule add <git address> <folder address>

已有有git submodule的库内，.gitmodules是下面的样子：

1
2
3
[submodule "wheel"]
    path = wheel
    url = git@github.com:shenlvmeng/wheel.git

npm install

npm install后跟的绝不仅仅只是包名，还可以通过ssh、http的形式引入npm包，唯一的要求是有package.json

1
2
3
4
5
6
7
8
9
10
11
12
npm install (with no args, in package dir)
npm install [<@scope>/]<name>
npm install [<@scope>/]<name>@<tag>
npm install [<@scope>/]<name>@<version>
npm install [<@scope>/]<name>@<version range>
npm install <git-host>:<git-user>/<repo-name>
npm install <git repo url>
npm install <tarball file>
npm install <tarball url>
npm install <folder>

alias: npm i

一个package可以是下面的形式：

  1. 包含package.json的工程文件夹
  2. gzip过的“1”的压缩包
  3. 指向“2”的url
  4. 发布在npm-registry的<name>@<registry>字符串
  5. 发布在npm-registry的<name>@<tag>字符串
  6. 发布在npm-registry的<name>字符串(最新版本)
  7. 一个指向“1”的合法git地址

cleave.js

一个自动格式化输入框的工具，有npm包、script标签等几种引用形式，还有react的使用方式。

地址：Format your <input/> content when you are typing

object-fit & object-position

这两个CSS属性分别用于指定替换元素在其盒模型内的覆盖大小和对齐方式。使用效果很类似background-size和background-position。替换元素即内容不受CSS视觉格式化控制的元素，如image、iframe、video、textarea等。

这使得本来自己决定模型大小的元素可以受CSS控制决定位置排布和大小。在需要自适应元素大小的场景下很好用，比如用户头像展示等。

唯一的小小缺憾可能是IE11还不支持这两个属性，以及Edge只支持对<img>使用。

移动端触摸默认行为优化

  • user-select: none 禁止用户选择
  • -webkit-touch-callout: none 防止长按contextmenu弹出。类似的还有contextmenu事件里的e.preventDefault()
  • -webkit-tap-highlight-color: transparent 删除可点击元素默认的黑影

上传进度条

利用xhr事件的onprogress事件。

1
2
3
4
5
6
7
8
9
10
11
xhr.onprogress = function (e) {
    if (e.lengthComputable) {
        console.log(e.loaded+  " / " + e.total)
    }
}
xhr.onloadstart = function (e) {
    console.log("start")
}
xhr.onloadend = function (e) {
    console.log("end")
}

不显示滚动条

基于Webkit的浏览器，可以使用CSS的方式隐藏滚动条。

1
2
3
4
5
&::-webkit-scrollbar {
      width: 0;
      height: 0;
      background: transparent;
  }

keyup无法prevent default

keyup fires after the default action.

keydown and keypress are where you can prevent the default.
If those aren’t stopped, then the default happens and keyup is fired.

来源：jquery - javascript prevent default for keyup - StackOverflow

mixin in react

版本16之前，可以用mixin特性。16之后使用高阶组件HOC + ES6 class语法实现。参考。

user-select在Edge浏览器下的适配问题

设置user-select为none在Edge浏览器下会导致input无法输入内容。可以用下面的写法，避免对input标签应用该属性。

1
2
3
*:not(input) {
  user-select: none;
}

参考：html - Can’t type in input field using Microsoft Edge and Safari - StackOverflow

浏览器跨tab通信

最近业务遇到了一个需求：同一浏览器上多tab用户信息同步的问题，所有这个域名下的需要强制一样的用户信息，避免困惑。

跨tab通信主流方案有两种：

  • localStorage，利用window的storage事件，传递信息
  • BroadcastChannel，新的API，通过postMessage和onMessage完成双向通讯
1
2
3
var bc = new BroadcastChannel('test_channel');
bc.postMessage('This is a test message.'); /* send */
bc.onmessage = function (ev) { console.log(ev); } /* receive */

后者还未得到广泛支持，需要前者进行polyfill。

aos

Animation on scroll。michalsnik/aos at master · Animate on scroll library.元素滚动至中的CSS动画，适合实现官网、落地页等效果。

extract-text-webpack-plugin

抽出CSS/Less/Sass等样式作为单独文件，用于那些需要提前加载样式的页面。详细用法见github

坑：

  1. 不支持webpack4.x，报内部错误（2018/07/30） => 使用@next下载最新版
  2. 报错Module build failed: ReferenceError: window is not defined => style-loader在extract-text-webpack-plugin中只做fallback项使用，见issue#503

常见调试技巧

  • 代码中插入debugger可以在该位置触发断点调试
  • console.dir可以打印对象结构，大多数情况和console.log表现一致，在document等DOM元素上表现不同

react组件复用设计思路

  • 当设计的组件为自闭型时，通过传入数据（不要传入功能）props的方式定制组件
  • 当设计的组件在有些场景下需要外部传入功能才能完整时，使用继承的方式实现
  • 在可以拆分出原子组件，且有此必要的时候，使用原子组件拼装业务组件
  • HOC优于mixin