问题杂记汇总
- 实用杂记
- 杂记
- 通过github安装vue devtool
- axios的post请求提交form upload的数据,后台无法接收
- Async+await
- 理解数据库索引
- z-index设置很大也不置顶
- CSS hack
- 基于webpack的项目,动态添加图片
- HTML识别IE浏览器的版本
- IE8及以下不支持JQuery
- IE9及以下不支持CSS高级选择器等
- React跳转传值
- 节点操作方法
- 判断对象类型
- settimeout传参
- CSS3新特性
- line-height
- CSS 浮动
- CSS解决上层遮罩下层的点击事件
- html页面引用js的文件里有import,报错:The server responded with a non-JavaScript MIME type
- 获取浏览器的宽度
- 浏览器缓存
- 浏览器存储
- 浏览器加载、解析、渲染的过程
- React 推荐阅读
- 多线程的上下文切换
- NPM库
- Chrome插件
- Vscode的emmet失效,代码不能自动补全
实用杂记
chrome跨域,在chrome属性中加上:
方法① --enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files --args --disable-web-security --user-data-dir –allow-file-access-from-files
方法②–disable-web-security --user-data-dir=C:\MyChromeDevUserData
chrome 应用程序无法启动,因为应用程序的并行配置不正确:
实际有效方法:
(chrome安装目录下)
“C:\Program Files\Google\Chrome\Application\43.0.2357.65\Installer”文件夹下有一个“chrome.7z”压缩包,解压后,打开解压文件后的chrome即可重新启用chrome,并且数据都在。
网络其他方法:
①(服务中)windows modules installer设置手动-启用,并启用。
②百度搜索并安装Microsoft Visual C++ (版本选择合适的)
MongoDB windows启动
- 启动cmd,进入mongodb安装目录(bin目录下存有mongod.exe、mongo.exe)
- G:\MongoDB\bin mongod --dbpath G:\MongoDB\data
(配置数据路径) - 启动另一cmd,进入mongodb安装目录后,输入:
G:\MongoDB\bin mongo.exe - 完成
MongoDB ——save()返回undefined
save回调是异步操作,需要放在await中执行(async函数中)
参考
React中的componentWillMount和componentDidMount何时请求数据
React中组件实时获取父组件的异步数据
一个页面中,页面函数只会在需要的时候和第一次加载的时候调用,而render中的操作每一次都会调用,componentWillReceiveProps(nextProps,preProps)生命周期函数,频度比render低,但基本能满足父组件数据异步更新的刷新,会获取即将的属性值与本身属性值。
杂记
通过github安装vue devtool
axios的post请求提交form upload的数据,后台无法接收
Async+await
理解数据库索引
z-index设置很大也不置顶
CSS hack
基于webpack的项目,动态添加图片
基于webpack的项目,动态添加图片
webpack和图片引入的一些问题
方法:
require()
import
HTML识别IE浏览器的版本
<!–[if !IE]><!–> 除IE外都可识别<!–<![endif]–>
<!–[if IE]> 所有的IE可识别 <![endif]–>
<!–[if IE 6]> 仅IE6可识别 <![endif]–>
<!–[if lt IE 6]> IE6以下版本可识别 <![endif]–>
<!–[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]–>
<!–[if IE 7]> 仅IE7可识别 <![endif]–>
<!–[if lt IE 7]> IE7以下版本可识别 <![endif]–>
<!–[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]–>
<!–[if IE 8]> 仅IE8可识别 <![endif]–>
<!–[if IE 9]> 仅IE9可识别 <![endif]–>
IE8及以下不支持JQuery
加入一下代码,即可
<!--IE8只能支持jQuery1.9-->
<!--[if lte IE 8]>
<script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<![endif]-->
IE9及以下不支持CSS高级选择器等
加入一下代码即可
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
React跳转传值
父组件:
this.props.history.push({ pathname: “/PutForwardSubmit”, state: { vcode } });
子组件取值:
this.props.location.state.vcode
节点操作方法
判断对象类型
方法:Object.prototype.toString.call()
栗子:
let nums=[1,2,3,3];
console.log(Object.prototype.toString.call(nums);)
//[object Array]
console.log(nums.prototype.toString())
settimeout传参
现有如下JavaScript代码:
function printApple(apple){
console.log(apple, "is a kind of healthy fruit");
}
var apple = "apple";
setTimeout("printApple(apple)", 5000);
则在执行setTimeout时,会报 apple is not defined,那么应该如何传参数呢?
1、 匿名函数
setTimeout(function(){
console.log(apple, "is a kind of healthy fruit");
}, 5000);
2、Function.prototype.bind()
setTimeout(printApple.bind(null, apple), 5000);
3、第三个参数作为 setTimeout() 内部函数的参数,其实setTimeout()可以接受多个参数:setTimeout(yourFunctionReference, 5000, param1, param2, paramN);
var apple = "apple";
setTimeout(printApple, 5000, apple);
由于IE10以前的版本,不支持为setTimeout()和setInterval()方法传递第三个参数,所以在IE10以前的版本使用时,要添加以下代码:
if (document.all && !window.setTimeout.isPolyfill) {
var __nativeST__ = window.setTimeout;
window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
var aArgs = Array.prototype.slice.call(arguments, 2);
return __nativeST__(vCallback instanceof Function ? function () {
vCallback.apply(null, aArgs);
} : vCallback, nDelay);
};
window.setTimeout.isPolyfill = true;
}
if (document.all && !window.setInterval.isPolyfill) {
var __nativeSI__ = window.setInterval;
window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
var aArgs = Array.prototype.slice.call(arguments, 2);
return __nativeSI__(vCallback instanceof Function ? function () {
vCallback.apply(null, aArgs);
} : vCallback, nDelay);
};
window.setInterval.isPolyfill = true;
}
CSS3新特性
line-height
张鑫——line-height与vertical-height
CSS 浮动
- 清除浮动解决高度坍塌
- 创建BFC达到了清除浮动影响的目的
CSS解决上层遮罩下层的点击事件
在上层元素的css中增加:pointer-events:none;
html页面引用js的文件里有import,报错:The server responded with a non-JavaScript MIME type
//需要加type="module"
<script type="module">
import {Test} from "data:application/javascript,const%20Mod={this.abc=123};export%20{Mod};";
console.log(Test);
</script>
获取浏览器的宽度
浏览器缓存
浏览器缓存——把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中。
强制缓存:缓存过期,重新拉取资源。
对比缓存:缓存未过期,发送请求对比,以确定是否需要更新,若需要更新则重新向服务器拉取资源,若无需更新,则返回304,读取缓存。
浏览器存储
- cookie
存储用于附加在请求头中发送给服务器,容量4k以下,设过期时间 - sessionStorage
在浏览器页面被关闭时,数据被清除,5M及以上 - localStorage
即时关闭浏览器也不清除,无过期时间,除非手动清除数据,5M及以上
浏览器加载、解析、渲染的过程
React 推荐阅读
多线程的上下文切换
NPM库
- props-type(强检验数据类型)
- antd-mobile(Mobile UI库)
- utility(基于MD5的安全加密实现库)
- socket.io(基于websocket协议的双向通信库)
- socket.io-client (基于websocket协议的双向通信库-客户端)
Chrome插件
- Web maker(直接在网页编写html、css、js代码)
- React DevTool
下载,解压,丢入即可
Vscode的emmet失效,代码不能自动补全
当前工作区没有得到配置
简单说就是要将vscode的用户配置覆盖到当前工作区的配置即可