日常记录

日常记录

前端

概念总结

es6模块与commonjs 区别总结

CommonJS模块是运行时加载,ES6模块是编译时输出接口
CommonJS模块输出的是一个值的复制,ES6模块输出的是值的只读引用
CommonJS加载的是整个模块,即将所有的方法全部加载进来,ES6可以单独加载其中的某个方法
CommonJS中this指向当前模块,ES6中this指向undefined
CommonJS默认非严格模式,ES6的模块自动采用严格模式

随手记

阻止拖拽

在最近的项目中,需要使用mousemovemousedownmouseup实现对图片的移动,需要先阻止图片的默认拖拽效果。

!!! warning
使用元素上的draggable="false"的方式来解决这个问题,但是在firefox上无效

!!! info
阻止dragstart事件的默认行为。

1
2
3
ele.addEventListener('dragstart', e => {
e.preventDefault();
})

NaN必须使用Number.isNaN判断,不能使用 ===

vue在初始化时挂载顺续

  • 创建元素顺序:从内层元素(el指定的元素的子元素) -> 最外层元素
  • 挂载元素顺序:最外层元素执行完patch后,它的上一次元素将它挂载到自己身上,然后继续执行patch(注意!!!除了el指定的根元素组件外,其它组件的patch都是在上层组件的patch中调用的(递归))
  • 触发mounted钩子时机:当所有的元素都挂载完毕后(最终都间接或直接连接到根组件),从最外层元素开始,依次执行(后进先出),同层的先进先出。
  • 触发beforeMount钩子时机:调用patch之前。

导入字体库时,unicode转义字符需要使用innerHTML或vue中的v-html插入,也可以直接写在html文件中。不能使用textContent和innerText插入。

场景 10进制 16进制 实体名称 字符
html &#60; &lt; <
css \3c <
js \u003c <
  • css中使用 \ + 16进制,例如: 伪元素,content: '\3c';在html中会被转译为对应unicode字符&#60;
  • html中使用 &# + 10进制 + 英文分号也可以使用实体名称& + 实体名称 + 英文分号 例如:&#60;&lt;都是<
  • js中使用\u + 16进制的字符串 例如:\u003c表示<

设置position: absolute,position: fixed需要同时设置宽高,或者靠内容撑开。设置position: relativeposition: sticky宽会自适应100%只需要设置高度,或者靠内容撑开。

!!! warning
这里说的撑开不是撑开设置position父元素,是撑开自己

font-face加载的时间:定义一个@font-face并不会立刻开始下载字体,而是在渲染树生成之后,浏览器发现渲染树中有非空的(设置display: none也不会加载)使用了font-face的字体才开始下载(IE9+会下载空节点)。

!!! info 解决方法
1. 使用js的webfontloader模块,预加载字体文件。
2. 在给一个在渲染树上非空的的元素设置该font-family,但不知道是否加载完成。不过能做到预加载。

使用jdbc连接mariadb时,需要先给用户设置一个密码

1
2
use mysql;
alter user 'root'@'localhost' identified by '123456';