Web前端问题（报错、疑问等）汇总

cnpm安装的依赖没有写进package.json中

原因：cnpm install xxx
解决：（结尾处加-S）

cnpm i xxx -S

vue项目路由出现message: "Navigating to current location (XXX) is not allowed"的问题

原因：在路由中添加了相同的路由
解决：重写路由的push方法

const routerPush = Router.prototype.push;
Router.prototype.push = function push (location) {
  return routerPush.call(this, location).catch(error => error);
}

vue项目报错TypeError: Right-hand side of ‘instanceof’ is not callable

原因：组件里props对象定义的类型有问题
解决：props里定义属性,type属性有7种（String、Numer、Function、Boolean、Object、Array、Symbol）

vue项目中点击按钮，路由多了个?号

原因：form 表单，点击了button 按钮，触发了它的默认事件，就是触发了提交这个行为
解决（两种）：
1、删除静态页面的form
2、使用@click.prevent 阻止默认事件（推荐)

<button @click.prevent="login">登录</button>

Vue.use和Vue.prototype.$xxx有血缘关系吗?

Vue.use是要运行install对应的函数
Vue.prototype.$xxx只不过是JS函数原型的特性：函数原型上的属性/方法，在函数实例化后，可以在任意实例上读取

JS中Object.getOwnPropertyNames()与Object.keys(obj)的区别

Object.getOwnPropertyNames返回的是对象所有自己的属性
Object.keys(obj)则返回的是所有可枚举属性，也就是属性下的enumerable: false

const obj = {};
Object.defineProperties(obj, {
    property1: { enumerable: true, value: 1 },
    property2: { enumerable: false, value: 2 }
});
console.log(Object.keys(obj)); // ["property1"]
console.log(Object.getOwnPropertyNames(obj)); // ["property1", "property2"]

CSS 高度塌陷

原因：
1、如果父元素只包含浮动元素，且父元素未设置高度和宽度，那么它的高度就会塌缩为零，也就是所谓的“高度塌陷”
2、如果父级元素包含背景或者边框，那么溢出的元素就不像父级元素的一部分了
解决（四种）：

方案一：给父元素一个固定的高度
	（缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，不推荐使用）

方案二：给父元素添加属性overflow: hidden
	（优点：浏览器支持好，简单）
	（缺点：当子元素有定位属性时，设置overflow: hidden;容器以外的部分会被裁剪掉）

方案三：在子元素的末尾添加一个空的div，并设置下方样式
div { clear: both;height: 0;overflow: hidden; }
	（优点：所有浏览器都支持，并且容器溢出不会被裁剪）
	（缺点：在页面中添加无意义的div，容易造成代码冗余）

方案四：万能清除浮动法
在父元素中内容的最后添加一个伪元素来实现第三种方案的功能，具体设置样式如下
父元素::after { content: "";height: 0;clear: both;display: block; }
	（优点：不会造成代码冗余，剩余代码性能优化，推荐使用）

iOS Safari浏览器上overflow: scroll元素无法滑动

原因：iOS safari会将overflow: scroll的元素识别为一个单独的ScrollView，并予以一个-webkit-overflow-scrolling属性为auto。而safari中的网页本身就是一个大的ScrollView，在脱离文档流的定位时，子元素的高度如果没有在ScrollView建立之前确定，就不会触发内部滑动，而会触发外部滑动
分析：
1、父元素不脱离文档流时，无此bug
2、父元素在不指定-webkit-overflow-scrolling: touch时必定出现无法滑动的问题
3、当内部元素为正常的html元素时，无此bug
4、当为父元素重新设置overflow属性时，可能会导致safari重建ScrollView而bug消失（之前版本的实验室用这种方法解决的，但新海外版不能用这种方法修复，所以是可能）
解决（四种）：
1、必须为所有在移动端的overflow: scroll元素增加属性-webkit-overflow-scrolling: touch
2、当父元素可不脱离文档流时不要脱离文档流
3、在子元素iframe加载完成后可异步将父元素的overflow: scroll属性重写（此方法可能不成功）
4、如以上没有解决，则给予子元素一个min-height，大小不限（略大于效果最好），帮助safari建立ScrollView（最有效）