小知识点总结

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()等函数，这样就可以轻松实现时间处理和显示。获取时间并拼接，通过获取字符串并拼接，最后利用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

小程序

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()的问题，若为对象数组，一是数组长度太长，二是单个对象太大，最好先对后台返回的数据进行控制，方式返回过多时出现问题

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

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

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

14、执行onload时会执行onshow，因此只要在data中设置一个flag=false，然后在onshow中最外层包if（flag），在onload中setData flag为true

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

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

17、对列表项进行事件绑定，可以利用wx|:for，对模板设置好bindTab=“function”即可

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

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

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

语言：版本，如ES6

性能：

posted @ 2018-08-06 10:31 有蚊子阅读(409) 评论(0) 编辑收藏举报

刷新页面返回顶部

有蚊子

小知识点总结

JavaScript （未完待续。。。）

Vue.js

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

GitHub

CSS

选中文字高亮的css效果：

VSCode

项目管理

其他

微信开发：

mint-ui

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

工具

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

小程序

公告

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