小知识点总结

时间 2019-11-14

标签知识总结繁體版

原文原文链接

JavaScript （未完待续。。。）

全部对象都有 __proto__ 属性，都指向创造对象的函数对象的 prototype。javascript

上传文件要使用 formdata 包装。css

Promise.prototype.catch 方法是 .then(null, rejection) 的别名。这句话来自ruanyifeng ES6的书Promise对象，catch。html

// 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事件。vue

当使用 addEventListener() 为一个元素注册事件的时候，句柄里的 this 值是该元素的引用。其与传递给句柄的 event 参数的 currentTarget 属性的值同样,而 target 是直接接受事件的子元素。scrollIntoView() 使 div 底部滚动到视窗。大概意思是把滚动条滚动到可视区域。java

使用 const 的对象和数组的内容是能够被修改的，但数据结构不可变。内容可变，是由于内存存的对象和数组是引用。node

在 webpack 里，全部的文件都是模块。loader 的做用就是把文件转换成 webpack 能够识别的模块。webpack和gulp的开发文档写的是真的好，言简意赅，通俗易懂。webpack

关于事件循环，执行下一个 task 以前总会清空 microtask。git

npm 新旧版本覆盖可能会形成迷之问题，这个时候能够试试 node_module 整个删掉重装，即删掉文件夹，而后执行cnpm install。web

*、/ 和 - 操做符都是数字运算专用的。当这些运算符与字符串一块儿使用时，会强制转换字符串为数字类型的值。若是想要显示转换可使用 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巨屏的自适应问题
一、childNodes：获取节点，不一样浏览器表现不一样；

　　IE：只获取元素节点；

　　非IE：获取元素节点与文本节点；

　　解决方案：if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue

二、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()等函数，这样就能够轻松实现时间处理和显示。获取时间并拼接，经过获取字符串并拼接，最后利用var date = new Date('2014-04-23 18:55:49:123')来生成时间戳。还要记得坑：getMonth()+1
若是存在变量会被改变，想在改变失败时恢复值，则用临时变量保存，而不是直接赋特定值，由于你不能穷举全部的特定值
按钮禁用，防止重复提交，在最外层ajax成功返回或者失败返回，只要返回，就在回调函数里解除禁用
用百度编辑器setContent出现： Cannot set property 'innerHTML' of undefined，错误的缘由是没有等UEditor建立完成就使用UEditor的setContent函数了，解决方法：
1. ueditor.addListener("ready", function () { ueditor.setContent('str'); });
2. 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随着浏览器放大倍数的变化，会有时出现线，有时不出现

工具

前端png图片压缩神器：https://tinypng.com/

参考：https://segmentfault.com/a/1190000015758071

小程序

一、注意版本兼容性

二、请求封装为一个方法，包括域名，错误处理等

三、小程序的data数据获取不到？我当时的状况的是用 wx.getStorage 拿数据而后zaisuccess中给它setData，可是console.log()死活获取不到，敲黑板：由于wx.getStorage 的回调方法是异步的！

四、刷新页面后执行 onLoad一次，此后点击导航栏回到页面，都再也不执行

五、保存对象用this.obj=obj，而不是setData

六、取数据注意用that和this.data.xxx

七、弹出获取权限的框（容许和拒绝），如今要单独弹，用wx.authorize()，这是不少获取用户信息接口的基础前提，如过去phoneNumber和userInfo。scope 为 "scope.userInfo" 时，没法弹出受权窗口，请使用 <button open-type="getUserInfo"></button>

八、将图片完整显示出来不被压缩，mode="widthFix"+width:100%

九、体验版没数据返回：1 真机测试找不到填写参数的入口 2 体验版能够在后台修改路径时添加参数，可是看不到错误信息 3 排除后发现原来是域名的问题，没有设置好https的域名

十、VM245:1 invokeWebviewMethod 数据传输长度为 1075593 已经超过最大长度 1048576 ，这里的问题，是setData()的问题，若为对象数组，一是数组长度太长，二是单个对象太大，最好先对后台返回的数据进行控制，方式返回过多时出现问题

十一、wx.showModal({ }) 先后两个时间挨太近时，会发生重叠

十二、想在开发工具中用参数，修改编译模式便可（编译按钮左边，添加编译模式，这是第一种二维码方式，第二种方式，就是sence=“参数”，不论多少参数，通通用key=value&key1=value1 encode编码成 “参数”），此时，已受权的纪录会被清除，所以会从新弹出受权对话框

1三、不一样店铺有相同小程序码可是参数不一样，直接在微信右上角扫码，进入小程序后，可实现进入不一样店铺。即便我刚刚扫了上一家店铺，而且小程序处于onHide状态，我再扫别的店铺的二维码，仍是会执行onload并拿到另外一家店铺的参数，而不是直接执行onshow并显示上一家店铺。

1四、执行onload时会执行onshow，所以只要在data中设置一个flag=false，而后在onshow中最外层包if（flag），在onload中setData flag为true

1五、小程序拨打电话：wx. makePhoneCall(Object object)

1六、获取input的值，利用form组件来进行

1七、对列表项进行事件绑定，能够利用wx|:for，对模板设置好bindTab=“function”便可

WEB项目的BUG，大多来自于以下：

数据：一、数据的录入过滤和格式控制或限定（类型和格式）二、对视图的意外的影响（显示长度溢出、类型，格式）

显示：兼容性和（自）适应性

语言：版本，如ES6

性能：

小知识点总结

JavaScript （未完待续。。。）

Vue.js

JavaScript toFixed() 方法控制数字小数点位数

GitHub

CSS

选中文字高亮的css效果：

VSCode

项目管理

其余

微信开发：

mint-ui

Cell随着浏览器放大倍数的变化，会有时出现线，有时不出现

工具

前端png图片压缩神器：https://tinypng.com/

小程序

　　Cell随着浏览器放大倍数的变化，会有时出现线，有时不出现