JavaScript （未完待续。。。）
所有对象都有 __proto__ 属性，都指向创造对象的函数对象的 prototype。
上传文件要使用 formdata 包装。
Promise.prototype.catch 方法是 .then(null, rejection) 的别名。这句话来自ruanyifeng ES6的书Promise对象，catch。
-
- // bad
- promise
- .then(function(data) { // success }, function(err) { // error }); // good promise .then(function(data) { //cb // success }) .catch(function(err) { // error });
上面代码中，第二种写法要好于第一种写法，理由是第二种写法可以捕获前面then方法执行中的错误，也更接近同步的写法（try/catch）。因此，建议总是使用catch方法，而不使用then方法的第二个参数。
同一个 EventTarget 注册了多个相同的 EventListener，那么重复的实例会被抛弃。所以这么做不会使得 EventListener 被调用两次，也不需要用 removeEventListener 手动清除多余的EventListener，因为重复的都被自动抛弃了。在jQuery中，click()的重复调用，会导致注册多个click事件。
当使用 addEventListener() 为一个元素注册事件的时候，句柄里的 this 值是该元素的引用。其与传递给句柄的 event 参数的 currentTarget 属性的值一样,而 target 是直接接受事件的子元素。scrollIntoView() 使 div 底部滚动到视窗。大概意思是把滚动条滚动到可视区域。
使用 const 的对象和数组的内容是可以被修改的，但数据结构不可变。内容可变，是因为内存存的对象和数组 是 引用。
在 webpack 里，所有的文件都是模块。loader 的作用就是把文件转换成 webpack 可以识别的模块。webpack和gulp的开发文档写的是真的好，言简意赅，通俗易懂。
关于事件循环，执行下一个 task 之前总会清空 microtask。
npm 新旧版本覆盖可能会造成迷之问题，这个时候可以试试 node_module 整个删掉重装，即删掉文件夹，然后执行cnpm install。
*、/ 和 - 操作符都是数字运算专用的。当这些运算符与字符串一起使用时，会强制转换字符串为数字类型的值。如果想要显示转换可以使用 parseInt
document.title 可以直接修改当前 html 的标题。
利用对象浅拷贝修改对象，指向同一对象的两个变量修改对象的效果一样。这句话很不通顺，不明？？？
脑洞题：1 和 2 只用一次的情况下怎么得到 4 答案：1<<2。
连等赋值从右到左。不建议使用，会出现迷之情况
compositionstart 事件触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）。也就是，它区别于获得焦点事件，它只有真正输入可见字符时，才触发。
void 0（void后面加任何东西）用于生成一个绝对的 undefined（不会被重定义），但跟函数会有副作用
注意 localStorage 保存的只能是字符串，所以是没有 null 的。？？
坑一个
-
- typeof [] === 'object' // true
- typeof null === 'object' // true
-
import 同步，require异步（待补充）
-
new()做了些什么？- var obj = new Base();
- var obj = {};
- obj.__proto__ = Base.prototype;
- Base.call(obj);
-
stage 0 到 4 的含义：
stage 0 is "i've got a crazy idea",
stage 1 is "this idea might not be stupid",
stage 2 is "let's use polyfills and transpilers to play with it",
stage 3 is "let's let browsers implement it and see how it goes",
stage 4 is "now it's javascript". Object.getOwnPropertyNames(obj).length === 0判断obj是不是空对象。getBoundingClientRect()用于获取元素宽高以及距离页面边框距离，十分方便。&&的使用场景：左边为真继续执行右边，如isDog && bark()。||的使用场景：左边为假继续执行右边，如let i = value || defalutValue。- 由于同步请求会导致页面假死，而异步请求虽然不影响页面，但是脚本会忽略他是否回调，继续执行，出现偷跑的情况，一些需要在Ajax请求返回数据后再运行的业务逻辑，会受到影响。因此我们要解决异步请求的顺序问题，ES5可以通过在回调函数里写业务逻辑来解决，而在ES6中提供了一个Promise来解决异步操作的问题，异步操作包括异步请求。
- 当前后端联调需要用到openid时，在chrome浏览器，application => cookies里双击添加 openid ，添加localStorage等
- 不要总寄希望于自适应，它也是相对的，不是万能的，不可能适应所有设备。一个比较理想的解决方案是 rem+vw或vh+flex，此方案优于使用媒体查询
- flex会使得其包含在内的 项 宽度变成包裹状态，会失去一些属性，如width
- 调试接口时，在Network中查看接口的具体情况，查看请求的返回和在header的请求参数。请求不对时，用接口文档的测试器先测试，再找后端问
- 接手新系统的开发和维护时，会比较慢，这与编程能力没有太大关系，随着对新系统熟悉度上升，开发速度会越来越快
- 做项目，就是要快，先实现功能出来，不要一开始就考虑很多优化问题，全局变量该用就用，但是要注意拓展性（耦合性）。
- 我们用样式预处理器，就是为了用变量和嵌套。
- js 一切皆对象，我是说一切，你能想到的一切
- 技术文章，好文章不是天天有的，所以要学会三分钟甄别，先快速阅读，好的仔细看，差的随便看。
- 前端，尽全力做成和UI设计一样的
- 早上到公司第一个任务：列事物清单，对每一件事做工作规划，有条件的话，可以看一些视频文章书本，找一找编程状态
- 关于接口粒度太小，主要是保证灵活性，因为业务需求时时要改，不过缺点是前端会比较重，业务逻辑代码会比较多
- 若有一年的前端开发工作经验，对于各种组件，框架，只要研究说明文档和demo，就可以使用的，我觉得要提高就得研究原生的东西
- 注意，做算法时，要注意到n/0和 n%0问题
- 做项目，编码阶段，一般分为，出效果完成功能，开发环境测试通过，测试环境测试通过
- 为什么要设置根元素为62.5%的字体大小，而不是10px，实际上，浏览器最小字体为12px，因此你设置10px是无效的。关于rem，看https://www.cnblogs.com/colorsed/p/7373346.html
- 想要设置所有子标签(如所有子p标签)的样式，用空格，如div p
- 自定义属性加data前缀，渲染时会自动识别为 用户自定义属性，如果你写一个template，用了src=“${img-src}”,会导致一个出错和浪费一定的载入时间
- 当你做一个列表时，如果一个item（显示的项多，很长，录入一行显示 id 名字 时间 奖品等），显示会溢出。字调小点时，居中，短的项显得两边空，长短项一起时感觉两边长长短短没对齐，不居中，左边是对齐了，显得右边空。太长也没法用多个flex:1，或flex:2和flex:1组合，那就加一个margin-left: 值与前面模块的左边间距相等，也不失为一种解决方案
- 做页面一定最后要做一个步骤，就是和ui设计进行对比，抠细节
- 设置inline-block，然后没有显示出background-color，或者，你发现一行字忽然显示得偏上，这时你要检查 line-height是不是为0或者不合理。
- 页面卡死，一个可能是同步请求，另一个是图片等太大
- 不要在页面body或者html轻易用line-height=0，会引起很多麻烦，例如span显示文字问题，会导致只显示一半
- 刷新去缓存，ctrl+f5
- 做C端，细节要求高，更讲究用户体验的细节处理
- word-break:break-all; 英文强制换行，不换行会使得强制溢出显示一个长英文
- 关于rem https://www.cnblogs.com/colorsed/p/7373346.html
- 解决iso设备 微信 audio自动播放 ：https://www.cnblogs.com/wangchuanyang/p/6288685.html
- chrome浏览器：Control+Shift+P(Windows, Linux) 打开命令菜单，Control+shift+I (Windows, Linux) 来打开Devtools
- 用min-width和max-width，可以避免一些问题，例如，移动端在某些ipad巨屏的自适应问题
-
1、childNodes：获取节点，不同浏览器表现不同；
IE：只获取元素节点；
非IE：获取元素节点与文本节点；
解决方案：if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue
2、children：获取元素节点，浏览器表现相同。
因此建议使用children。
- line-height要比font-size设置大1到2个像素
- 为了安全原因，如果网页直接从文件系统中加载，很多现代浏览器不允许JavaScript发起服务器请求,这是很多前端项目代码无法在桌面直接双击打开的原因，打开会出错
- 布局、样式微调，在chrome开发人员工具F12调，不要在编辑器改一下在刷新一下，效率太低！！
- 调试测试时，应该注意时长清缓存，以避免出现“代码温室”的影响，即由于缓存数据的支撑作用，而掩藏的真正的bug，看起来整个系统完好顺畅，这往往会在生产环境报错
- 给提交按钮添加不可点击控制和样式时，注意，除了提交成功/失败时要去掉提交按钮外，还有考虑填写数据时 不符合要求return时，也要去掉 不可点击（即要恢复点击）
- Zepto自带的tap模块因为有点透等问题
- 使用插件时，要注意传入插件的参数类型，例如layDate的value，我一开始传入string，走了很多弯路，最后发现虽然文档也说传string，如‘2010-12-2’，但是我尝试发现若要传入时间戳类的时间，用Date(时间戳)传入才最终解决了问题。（当然，文档也说支持Date）
- 操作日期的一点经验，所有有关时间增减操作的，一律通过时间戳加减来进行，再搭配new Date()的getTime()等函数，这样就可以轻松实现时间处理和显示。获取时间并拼接，通过获取字符串并拼接，最后利用
vardate =newDate('2014-04-23 18:55:49:123')来生成时间戳。还要记得坑：getMonth()+1 - 如果存在变量会被改变，想在改变失败时恢复值，则用临时变量保存，而不是直接赋特定值，因为你不能穷举所有的特定值
- 按钮禁用，防止重复提交，在最外层ajax成功返回或者失败返回，只要返回，就在回调函数里 解除禁用
- 用百度编辑器setContent出现 ： Cannot set property 'innerHTML' of undefined，错误的原因是没有等UEditor创建完成就使用UEditor的setContent函数了，解决方法：
ueditor.addListener("ready", function () {
ueditor.setContent('str');
});ueditor.ready(function() {
ueditor.setContent('str');
});
- 中奖滚动方案：margin-top、scrollTop、top
- if ...else if...else if...else ：把最常用的情况放在else里，这样，即使出现意外情况，结果也会落到最后的else中，更加保险
- 用jq设置css样式时，注意单位，如top的px
- script放底部时，应该放在body内、
- 做表单最重要是做好表单验证
-
做表单：
数据获取，数据必填项，数据检验(类型和内容)，数据提交（包含：传输正常异常如404，提交成功失败如res.err.code==0） - 前端常见业务技术：列表，表单，导航，搜索
- 显示loading，请求一开始就显示，然后在回调的success和fail中去掉loading，设置buttton的disabled防止重复提交也说是同理。
-
gbTurntable.init({ id: 'turntable', config: function (callback) { // 获取奖品信息 if (prizeList.length == 0) { callback && callback([{ text: '' }, { text: '' }]); } else { callback && callback() } } });
这里callback && callback()的前面一个callback是检测有没有传入正确的回调函数名，没有则不会调用回调函数
- 调用某个方法，就是，拿到指向该方法的指针变量，然后加一个括号
- 小程序的发布有两种，全量和阶段发布，做开发，就是用另外一个小程序号，进行全量发布
- 个人理解，call 和apply ，就是把a.to()的a变为我传入的对象，并借a的一个to()方法过来用，这叫狸猫换太子
<html> <head> </head> <body> </body> <script> var obj = { say: function () { console.log(this) } } obj.say() obj.say.apply(this) </script> </html>
输出：
- 用vw代替rem，grid与flex配合使用
- 用void(0)代替undefined
- 既然用了框架，那就要all in 框架，所有的东西，都用框架实现，不要杂用
- 我的做前端顺序：先做布局，再做数据绑定，最后微调样式
Vue.js
- v-model 会自动 bind 一个值，其变量名为 value。
-
多个特性的元素应该分多行撰写，每个特性一行。以下为 vscode 里 vetur 的设置：
- "vetur.format.defaultFormatterOptions": {
- "js-beautify-html": {
- "wrap_attributes": "force"
- }
- }
- 组件 destroy 时触发自定义指令的 unbind，destory 的时机：diff 之后的 patch,如 v-if，v-for（key不同时，先销毁原来的，再挂载新的（推测））
- 自定义组件 v-model watch 自动匹配（存疑
- 组件的 data 属性要用函数返回的原因：创建实例时如果 data 是一个对象的话，所有实例都会引用同一个对象，而对象返回不会有此问题。在浏览器中可以这么做是因为根实例只有一个。
- .vue 文件中使用
/deep/覆盖子组件 css - 在编程界，所谓的安全，有很多种意思，例如web安全，还有一种更常见，例如：jQuery源码被一个立即执行函数包裹，形成闭包，这样可以让内部变量变得安全，这里的安全，是指不会 对其他地方产生（意料之外的不可控的或无法预料的）影响，通常这种影响有时隐蔽有时明显，往往在他产生隐蔽的影响时会浪费我们大量时间，这种情况有个词形容，叫变量污染！
- scoped 给css提供一个样式命名空间的功能，防止样式污染
- 用vue开发获取选中本项的id，v-for=“index in mydata”时，就直接 select(index)，不用再动态过去本条id，直接写死如select(1) select(1124)等，当然前提是你在这个数组中，有一个属性是真正的id，然后通过为止id来映射真正的id
- 团队内，css命名冲突，用bem解决
- inline-block使得两个脱离文档流的元素(即设置了float)不会重叠
- 单点登录，例如百度首页登录后，我去百度贴吧和百度知道，也会显示已登录状态，多设备登录就是例如微信，手机和个人电脑可以同时登录，收发信息
- 所谓转义，就是 这个符号原来已经表示一种意义了，这是为了表示其他意义，就加一个/来转义，也就是转为其他意义
-
JavaScript toFixed() 方法控制数字小数点位数
GitHub
从 commit 关闭 issues 的方法：commit 信息写 Fixes #33，其他关键字还有 close closes closed fix fixes fixed resolve resolves resolved
git reset --soft HEAD^ 回退一次 commit
CSS
div 的默认宽度是父元素宽的 100%
iso设备，对于非<a> <button>等标签，点击事件是无效的，解决方法是加上cursor：pointer
逐帧动画 animation: animate-name 3s steps(每次循环的帧数) infinite;
@keyframes animate-name{
from{
<!--原位-->
background-position: 0 0;
}
to{
<!--最后一帧-->
background-position: -1540px 0 ;
}
}
"Break out" of a parent's containing width to take the full screen of a page w/this nice utility class:
有关vm之妙，请看：
http://www.cnblogs.com/wengxuesong/archive/2016/05/16/5497653.html
https://aotu.io/notes/2017/04/28/2017-4-28-CSS-viewport-units/
.full-width { ？？
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
行内元素与下一个元素中间有空格（正常排版）,会引起一些诡异的缝隙，常见的例如元素之间有间隔，或看起来空了一行（像加了padding）
pre 标签设置自动换行 white-space: pre-wrap;
隐藏一个元素，同时让这个元素的宽度可获取：设置 overflow: hidden 可以根据元素高度裁剪视区，设置 height: 0; overflow: hidden 虽然文档流中占用了位置，由于高度为 0，最终表现特征达到了我们期望的 display: none。此时该元素 clientHeight、offsetHeight 为 0，但是 scrollHeight 是有值的。scrollHeight 是一个元素没有滚动条时的所有内容高度,当一个元素没有滚动条时 scrollHeight === offsetHeight。
当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
回流必将引起重绘，重绘不一定会引起回流。
文字的垂直居中，让line-height=height（场景：通常在我把文字的容器设置了hieght，这时文字就会上下不居中）
button设置了border后就不再有点击（凹下凸上）的效果
使用伪类时，一定要写content:''
选中文字高亮的css效果：
仅用于firefox和chrome浏览器 ie不支持
*::-moz-selection {color:#fc5;background-color:#0f581a;}
移动端优化常用 CSS 属性：
user-select: none; // 禁止文字被选中
outline:none; // 去除点击外边框,点击无轮廓
-webkit-touch-callout: none; // 长按链接不弹出菜单
-webkit-tap-highlight-color: rgba(0,0,0,0); // 去除点击高亮
@keyframes 的属性要前后对应，否则不形成动画
img 元素图像自适应居中，与 background-size 效果一样
object-fit: cover;
<img /> 标签千万记得写宽高，不然会花式塌陷
flex-grow 所在元素如果未定宽度的话，宽度会被子元素撑开
一个英文单词默认不换行，无论多长，所以要设置 word break
多行文字居中
.mulit_line{
border:1px dashed #cccccc;
padding-left:5px;
}
.mulit_line span{
display:inline-block;
line-height:14px;
vertical-align:middle;
}
safari 中控制惯性滚动 -webkit-overflow-scroll
滚动条样式可能使滚动条强制显示（未确定）
flex 布局不换行加 flex-shrink: 0; 实现 div 不压缩无限并排，可以用于 swiper 等场景。
巧用猫头鹰选择器 *+*
float 自带 display: block
鼠标禁用 .disabled { pointer-events: none; }
注意 :last-child 与 :last-of-type 的区别
::after 表示法是在 CSS3 中引入的，:: 符号是用来区分伪类和伪元素的。支持CSS3的浏览器同时也都支持 CSS2 中引入的表示法 :after。
父元素如果存在 transform 属性，子元素的 position: fixed 属性无效
less 中的 calc 问题：height: calc(~"100% - 50px");
vh 在部分浏览器中包含地址栏部分，小心使用。
要注意到两个属性：box-sizing和display
一个css神器：calc()和vh / vm ，详见https://mp.weixin.qq.com/s/ZLeTRaEP4zrjnZRvk5EESA
当你进行页面优化时，先找到最能提高用户体验的点先优化
rem+vw的好文：http://caibaojian.com/vw-vh.html
VSCode
alt + shift + 鼠标点击 纵向选择
vetur 分号问题: 安装 prettier，然后配置 "prettier.singleQuote":true,"prettier.semi": false
可以使用插件 document this 方便写注释
html tag 属性分行 wrap_attributes:force
选定变量后按 F12 找到定义位置
项目管理
快速迭代开发的项目，每个工作日发布至少一个版本
项目分轻重，重要的项目慢慢打磨（如B、C端），次要的项目保证功能使用（如后台管理系统），合理分配开发时间，若有要求安排酌情安排
如果别人发现一个bug，然后你检查后发现不是bug，你也要装作修复的样子，否则别人会一脸不情愿想证明给你看，你是错的。如果下次还出现一样的问题，你就再解释原因，别人就不会抓着你不放
其他
在组件化编程中，悼念被同名组件浪费了几个钟的 debug 时间[蜡烛]
iOS 的回弹效果，动的是 body 部分，html 是不动的
学习一个语言之前先看规范，当我们已经熟悉掌握一门编程语言时，学习另一门语言，就先学习它的规范，找异同，这样最快
safari 的 formdata 只支持 append，其他方法需要 polyfill
rc 的意思是 run commands
导航栏高度 88px，标签栏高度 98px（iphone5和6常用）
关于 HTTP 304 Not Modified，简单来说，请求内容没有发生变化的时候，根据设置，服务器可能直接取缓存返回
一个很重要的技巧，ctrl+F5去缓存（更新缓存）刷新，适用Chrome，可以减少很多开发不必要的麻烦
微信开发：
做一个Ｃ端项目时，oppo手机出现兼容性问题，整个js炸掉，页面数据加载失败。使用微信PC端查看时，出现同样问题，因此，若解决微信PC端显示的问题，就可能可以解决掉某些真机运行出现
的这个问题。
首先，怎么定位问题，我用的是vConsole，打印的错误：
Uncaught SyntaxError Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
HomeIndexbid=1&campusId=1&code=021bRAZR14r6D71VZ２２S1EerZR1bRAZ6&state=89013
微信配置完成
Uncaught ReferenceError controlMusicTop is not defined
HomeIndexbid=1&campusId=1&code=021bRAZRr6D71VZq011S1EerZR1bRAZ6&state=103713
第一个错误时ES6兼容性问题，注意检查页面是否存在let、=>、const、等ES6语法。
第二个错误是wx.ready()执行时，controlMusicTop 这个方法还没有生成，解决方法是用方法体代替方法名 。
值得注意的是，vConsole引入与调用必须放在页面顶部header，防止因其他js脚本影响vConsole执行。
npm和package.json
管理本地安装 npm 包的最好方式就是创建 package.json 文件，npm init 即可在当前目录创建一个 package.json 文件，输入 npm init 后会弹出一堆问题，嫌麻烦可以直接输入 npm init --yes 跳过回答问题步骤，直接生成默认值的 package.json 文件。
mint-ui
Cell随着浏览器放大倍数的变化，会有时出现线，有时不出现
工具
参考：https://segmentfault.com/a/1190000015758071
小程序
1、注意版本兼容性
2、请求封装为一个方法，包括域名，错误处理等
3、小程序的data数据获取不到？我当时的情况的是用 wx.getStorage 拿数据然后zaisuccess中给它setData，但是console.log()死活获取不到，敲黑板：因为wx.getStorage 的回调方法是异步的！
4、刷新页面后执行 onLoad一次，此后点击导航栏回到页面，都不再执行
5、保存对象用this.obj=obj，而不是setData
6、取数据注意用that和this.data.xxx
7、弹出获取权限的框（允许和拒绝），现在要单独弹，用wx.authorize()，这是很多获取用户信息接口的基础前提，如过去phoneNumber和userInfo。scope 为 "scope.userInfo" 时，无法弹出授权窗口，请使用 <button open-type="getUserInfo"></button>
8、将图片完整显示出来不被压缩，mode="widthFix"+width:100%
9、体验版没数据返回：1 真机测试找不到填写参数的入口 2 体验版可以在后台修改路径时添加参数，但是看不到错误信息 3 排除后发现原来是 域名的问题，没有设置好https的域名
10、VM245:1 invokeWebviewMethod 数据传输长度为 1075593 已经超过最大长度 1048576 ，这里的问题，是setData()的问题，若为对象数组，一是数组长度太长，二是单个对象太大，最好先对后台返回的数据进行控制，方式返回过多时出现问题
WEB项目的BUG，大多来自于如下：
数据：1、数据的录入过滤和格式控制或限定（类型和格式） 2、对视图的意外的影响（显示长度溢出、类型，格式）
显示：兼容性和（自）适应性
语言：版本，如ES6
性能：
