工作收获总整理
知识点总整理
Vue
- 箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，所以不要在vue实例属性或毁掉函数中用箭头函数
- 在vue里如果要操作DOM，用ref。
- debounce不会延迟input事件，在使用debounce时应用vm.$watch()相应数据变化。
- 传入vue.extend()中的选项data和el要使用函数。
- 【NOTE】名字形式为camelCase的prop用作特性时，需要转为kebab-case。
- Vue事件在冒泡过程中第一次触发回调之后自动停止冒泡，除非回调明确返回true。
- 【NOTE】对象/数组的默认值应当由一个函数返回。
git
- git diff 查看修改内容。
- git log 看历史记录。
- git reset —hard HEAD^ 回退到上一个版本。也可以把暂存区的修改回退到工作区。
- git reset —hard 版本号
- git reflow 查看每一次命令。
- git reset —hard commit_id
- git checkout —文件名 把文件在工作区的修改全部撤销。
情况1：文件自修改后还没有被放到暂存区，撤销修改就回到和版本库一模一样的状态。
情况2： 文件已经添加到暂存区后，又作了修改，撤销修改就回到添加到暂存区后的状态。 - git stash list
- git stash apply 恢复，恢复后stash 内容不删除。用 git stash drop 来删除
- git stash pop 恢复的同时把stash内容也删了。
- git merge —no-ff 分支间的关系更清晰，能看出一个分支拉出去后又合并回来，只会提交一个merge的节点。
css
何时用margin：
- 需要在border外侧添加空白时
- 空白处不需要背景（色）时
- 上下相连的两个盒子之间的空白，需要相互抵消时。【注】margin会相互抵消。
何时用padding：
- 需要在border内侧添加空白时。
- 空白处需要背景（色）时。
- 上下相连的两个盒子之间的空白，希望等于两者之和时。
总结
margin用来隔开元素与元素之间的间距，padding用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干，padding用于元素与内容之间的间隔，让内容与元素之间有一段呼吸距离。
- margin、padding这类属性的参数顺序：上，右，下，左 / 垂直方向，水平方向 / top，水平方向，bottom
- border-radius参数顺序：上左，上右，下右，下左 / 上左下右， 上右下左 / 上左，上右下左，下右
- 单元格没有外边距。默认情况下，边框被表格的border-spacing属性值间隔，也可以通过设置表格的border-collapse属性值为collapse来完全移除间隔。
- 特指度（specificity）：特指度表示一个css选择器表达式的重要程度。
可以通过一个公式来计算出一个数值，数越大，越重要。
“I-C-E”计算公式：I：id，C：class，E：element
即，针对一个css选择器表达式，遇到一个id就往特指度数值中加100，遇到一个class就往特指度数值中加10，遇到一个element就往特指度数值中加1
【NOTE】!important优先级最高，高于上面的一切，选择器最低，低于一切。
简版规则：
1. 包含ID的选择器胜过包含class的选择器，包含class的选择器胜过包含元素的选择器。
2. 不同选择器的特指度比较时，不区分加载的顺序（相同选择器在层叠时，后加载的覆盖前加载的）。
3. 设置的样式高于继承的样式，不用考虑特指度。 - 设置absolute会使得inline元素被“块”化。设置absolute会使得元素已有的float失效。多个悬浮元素后来者居上。
- 通过设置css属性 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);取消掉手机端webkit浏览器 点击按钮或超链接之类的 默认灰色背景色
设置css属性 -webkit-user-select:none; 控制用户不可选择文字
区域性 overflow: scroll | auto 滚动时使用原生效果：-webkit-overflow-scrolling: touch （ios8+，Android4.0+）
JavaScript
- document.write()可用于直接向HTML输出流写内容。但绝不要使用在文档加载之后，这会覆盖该文档
- 闭包由两部分组成：函数，以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。
- setTimeout: 调用setTimeout函数会在一个时间段过去后在队列中添加一个消息。这个时间段作为函数的第二个参数被传入。如果队列中没有其他消息，消息会被马上处理。但是，如果有其他消息，setTimeout消息必须等待其他消息处理完。因此第二个参数仅仅表示最少的时间而非确切的时间。
- reusable function patternL
可以避免new … 的写法
// a.js
export function(settings) {
function render(container) {}
render.publicFn1 = function() {}
render.publicFn2 = function() {}
return render;
}
// b.js
import a from 'a.js'
var ainstance = a(settings)(elem); - 值类型的类型判断用typeof，引用类型的类型判断用instanceof。
- 执行上下文：
- 变量、函数表达式（init：变量声明，默认赋值为undefined）
- this（init：赋值）
- 函数声明（init：赋值）
这三种数据的准备情况称之为执行上下文
如果代码是函数体，在此基础上附加： - 参数
- arguments
- 自由变量的取值作用域
- 函数每被调用一次，都会产生一个新的执行上下文环境。
- 函数在定义的时候（不是调用的时候），就已经确定了函数内部自由变量的作用域。
在函数中this到底去何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了。 - 构造函数的函数名第一个字母大写。（构造函数就是用来new对象的函数）
- this
- 如果函数作为构造函数用，那么其中的this就代表它即将new出来的对象。
- 如果函数作为对象的一个属性时，并且作为对象的一个属性被调用时，函数中的this指向该对象。【NOTE】如果fn函数不作为obj的一个属性被调用，如fn函数被赋值到了另一个变量中，那么this的值就是window。
- 当一个函数被call和apply调用时，this的值就取传入的对象的值。
- 在全局环境下，this永远是window。
- 普通函数在调用时，其中的this也都是window。
- 不仅仅是构造函数的prototype，即便是在整个原型链中，this代表的也都是当前对象的值。
总结：this指向调用该函数的对象。
- setAttribute()的两个参数，都必须是字符串。即对特性attribute只能赋值字符串，而对属性property就可以赋任何类型的值。
- appendChild(), insertBefore()是移动element节点
- 用promise的时候用catch，不要用err hook。这是因为catch可以捕捉到promise中包括hook中的所有异常。
- 需要做字数限制时，汉字作为非直接输入的字符，在输入时监听keydown事件和input事件都会直接触发判断字数逻辑，会截断正在输入的文字。解决方法是监听compositionend（当直接的文字输入时触发），这样当没选中中文时不会进行字数判断。
$('#input').on('compositionend', function(e) {
var len = $(this).val().length;
if (len > 16) {
// 提示超过16字
}
});
Webpack
- 模块加载器的顺序需按照基本—>特殊的顺序使用，否则会报错。(从右往左读)
