我的总结常用的js知识

nvm

nvm是node的包管理工具。在不同的项目下使用不同的node版本。
下载地址 https://github.com/coreybutler/nvm-windows/releases
nvm install latest ## 安装最新版 node
nvm install <version> ## 安装指定版本
nvm uninstall <version> ## 删除已安装的指定版本
nvm use <version> ## 切换使用指定的版本node
nvm ls ## 列出所有安装的版本
nvm ls-remote ## 列出所有远程服务器的版本
nvm current ## 显示当前的版本
nvm alias <name> <version> ## 给不同的版本号添加别名
nvm unalias <name> ## 删除已定义的别名
nvm reinstall-packages <version> ## 在当前版本 node 环境下，重新全局安装指定版本号的 npm 包
nvm alias default [node版本号] ##设置默认版本

nvm use [version] 报错“exit status 1 乱码” 解决方法---->用管理员权限打开命令提示符

类型检测

hasOwnProperty 此方法无法检查该对象的原型链中是否具有该属性
object.hasOwnProperty(proName)

constructor 属性返回对创建此对象的数组函数的引用属性值是指向创建当前实例的对象的
[].constructor == Array //true
Object.constructor == Object //false
原型链被改变会报错
var arr = [];
arr.__proto__ = String
arr.constructor == Array //false

instanceof 检测这个实例对象是不是这个方法new出来的
[] instanceof Array //true
Number instanceof Number //false
String instanceof String //false
Object instanceof Object //true
Function instanceof Function //true
Function instanceof Object //true
function Foo(){}
Foo instanceof Function //true
Foo instanceof Foo //false
原型链改变会报错
var arr = []
arr.__proto__ = String
arr instanceof Array //false

typeof 用于检测基本类型
typeof undefined;//=> undefined
typeof 'a';//=> string
typeof 1;//=> number
typeof true;//=> boolean
typeof {};//=> object
typeof [];//=> object
typeof function() {};//=> function
typeof null;//=> object

Git 常用命令

//克隆
git clone git@地址

//查看状态
git status

//查看本地和远程分支，当前分支
git branch -a

//创建文件 test.text
touch test.txt

//添加修改到本地仓库
git add .

//本次提交注释
git commit -m "注释内容"

//查看远程仓库
git remote -v

//推送到远程主分支（master）
git push origin master

//创建新的分支(复制master分支内容)
git checkout -b 分支名称

//切换到master分支
git checkout master

//拉取别的分支到master分支合并分支（可能会冲突）
git merge 分支名称

//删除本地分支
git branch -D 分支名

//删除远程分支
git push origin :分支名

//回退上次提交
git reset --hard head^

//查看提交日志(git log)
git reflog

//回退指定的提交（执行git reflog 查看版本号）复制指定的版本号
git reset --hard 版本号

//创建镜像版本

ios日期bug

ios使用如下方法获得NaN，安卓手机则是正常计算
将时间格式中 ‘-’ 换成 ‘/’

new Date("2019/01/01 00:00:00").getTime()

获取url传的参数

var Request = getRequest()

上传图片时为图片添加预览图

jQuery.fn.extend({//上传图片时为图片添加预览图
uploadPreview: function (opts) {
var _self = this,//原生file对象
_this = $(this);//jq file对象
opts = jQuery.extend({//img对象
Img: "zz_i",
Width: 100,
Height: 100,
ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
Callback: function () {}
}, opts || {});
_self.getObjectURL = function (file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file)
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file)
}
return url
};

_this.change(function () {
if (this.value) {
if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
alert("选择文件错误,图片类型必须是" + opts.ImgType.join("，") + "中的一种");
this.value = "";
return false
}
if ($.support.msie) {
debugger
try {
$("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
} catch (e) {
var src = "";
var obj = $("#" + opts.Img);
var div = obj.parent("div")[0];
_self.select();
if (top != self) {
window.parent.document.body.focus()
} else {
_self.blur()
}
src = document.selection.createRange().text;
document.selection.empty();
obj.hide();
obj.parent("div").css({
'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
'width': opts.Width + 'px',
'height': opts.Height + 'px'
});
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src
}
} else {
$("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
}
opts.Callback()
}
})
}
});

$(file的id).uploadPreview({ Img: 图片的id , Width: 120, Height: 120 });

数字加载效果

表单验证

回到顶部

function scroll_up(Obj){//回到顶部
var a,b,c,$jsObj;
if(Obj.length){
$jsObj = Obj[0];
a = Obj.scrollTop();//滚动条y轴上的距离
b = $jsObj.clientHeight || document.body.clientHeight;//可视区域的高度
c = $jsObj.scrollHeight || document.body.scrollHeight;//可视化的高度与溢出的距离（总高度）
}else{
$jsObj = this;
a = document.documentElement.scrollTop || Obj.scrollTop;//滚动条y轴上的距离
b = document.documentElement.clientHeight || Obj.clientHeight;//可视区域的高度
c = document.documentElement.scrollHeight || Obj.scrollHeight;//可视化的高度与溢出的距离（总高度）
}
var c2 = c/2;

if(a+b >= c2 && c2 >= b){
if(document.getElementById('back_top') == null){
var oDiv = document.createElement('div');
oDiv.style.width = '40px';
oDiv.style.height = '40px';
oDiv.style.borderRadius = '40px';
oDiv.style.background = 'url({skin:imgs/back_top1.png}) no-repeat 0';
oDiv.style.backgroundSize = '40px';
oDiv.style.position = 'fixed';
oDiv.style.zIndex = 9999;
oDiv.style.right = '5px';
oDiv.style.bottom = '80px';
document.body.appendChild(oDiv);
var back_top = document.createAttribute('id');
back_top.nodeValue = 'back_top';
oDiv.setAttributeNode(back_top)
oDiv.onclick = function(){
scrollAnimation(a)
}
}else{
document.getElementById('back_top').style.display = 'block';
}
}else if(a+b <= c2 && document.getElementById('back_top') != null){
document.getElementById('back_top').style.display = 'none';
}

function scrollAnimation(a){
myTimeout()
// debugger
function myTimeout(){
a = parseInt(a - a/10);
if(parseInt(a/2) >= 4 ){
$jsObj.scrollTo(0,a)
setTimeout(myTimeout,10)
}else{
$jsObj.scrollTo(0,0)
}
}

}
}

事件委托

//事件委托 dom结构：#a(#b,#c),只给父级节点绑定事件通过事件冒泡委托给子级元素
var aDiv = document.getElementById('a');

function addEvent(ele,type,callback){
if(ele.addEventListener){
ele.addEventListener(type,callback,false);//默认false(true事件捕获，false事件冒泡)
}else if(ele.attachEvent){//ie浏览器只支持事件冒泡
ele.attachEvent('on'+type,callback);
}
}

function handler(e){
var e = e || window.event;

console.log(e.target.id);
switch(e.target.id){
case 'b':
alert('hi');
break;
case 'c':
alert('hello');
break;
}
alert('word')
}

addEvent(aDiv,'click',handler);

原型链继承

//基类原型链继承
function Person(name,age){//人类基类
this.name = name;
this.age = age;
}

Person.prototype.hi = function(){
console.log('hi my name is'+this.name+'my age is'+this.age);
}

Person.prototype.LEGS_NUM = 2;
Person.prototype.ARMS_NUM = 2;
Person.prototype.walk = function(){
console.log(this.name+'is walking..');
}

function Worker(name,age,workerNum){//工人构造函数
Person.call(this,name,age);//Worker对象执行Person函数
this.workerNum = workerNum;
}
Worker.prototype = Person.prototype;//这样继承会造成基类原型中的方法和构造函数原型的方法同名时基类原型方法会被改变

Worker.prototype.say = function(){
console.log(this.name+'say:我是工人')
}

function Student(name,age,className){//学生构造函数
Person.call(this,name,age);//Student对象执行Person函数
this.className = className;
}
// Student.prototype = Person.prototype;//这样继承会造成基类原型被改变
Student.prototype = Object.create(Person.prototype);//新建一个空对象复制基类然后原型在被继承
Student.prototype.constructor = Student;
Student.prototype.hi = function(){
console.log(this.name+'say:"hello"');
}

var xh = new Person('小红',11);
var xq = new Worker('小强',30,120);
var xm = new Student('小明',12,'001');

console.log(Student.prototype.constructor)
xm.hi();
xh.hi();
// xq.hi();
alert(xm.LEGS_NUM)

原生js获取文件上传文件

function addFile() {
document.getElementById('test1').value = "";
var file = document.querySelector('input[type=file]').files[0];//IE10以下不支持
var typeStr="image/jpg,image/png,image/gif,image/jpeg";
if(typeStr.indexOf(file.type)>=0){
document.getElementById('test1').value = file.name;
if (file.size > 2097152) {
alert("上传的文件不能大于2M");
return;
}else{

　　　　upload(path,file)
　　　　}
}else{
alert("请上传格式为jpg、png、gif、jpeg的图片");
}

//ajax上传文件
function upload(path,theFormFile) {

var fd = new FormData();//使用FormData必须使用form标签

fd.append('file1', theFormFile);//上传的文件：键名，键值
var url = path;//接口
url = url ? url : '';
var XHR = null;
if (window.XMLHttpRequest) {
// 非IE内核
XHR = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE内核，这里早期IE版本不同，具体可以查下
XHR = new ActiveXObject("Microsoft.XMLHTTP");
} else {
XHR = null;
}
if (XHR) {
XHR.open("POST", url);
XHR.onreadystatechange = function() {
if (XHR.readyState == 4 && XHR.status == 200) {
var resultValue = XHR.responseText;
var data = JSON.parse(resultValue);
XHR = null;
}
}
XHR.send(fd);
}
};

关于import 引入模块

如果引用相对路径，则直接寻找这个相对路径文件 export 出来的内容。

如果是绝对路径，则会依次寻找 node_modules 对应的地方。

如果路径最终是一个文件夹，则会首先观察文件夹下是否有 package.json ,如果有 package.json 则会去加载 main 字段指向的文件，如果没有 package.json ，则会在这个文件夹下寻找 index 文件并加载。

Nodejs

服务器 npm install http-server -g

关于npm错误 ----> npm ERR! Cannot read property 'resolve' of undefined

npm ERR! A complete log of this run can be found in:

解决方法：卸载nodejs 并清空nodejs安装目录所以文件从新安装

事件
var events = require('events');//事件模块
//var util = require('util');//工具库

//var Person = function(name) {
// this.name = name
//}

//util.inherits(Person, events.EventEmitter);//工具库里的继承可用es6类class代替

var myEmitter = new events.EventEmitter();//注册事件对象

myEmitter.on('someEvent',function(msg){//绑定事件
console.log(msg)
})

myEmitter.emit('someEvent','holl world!')//触发事件

读文件
fs.readFile('路径','utf8',callback(err,data){}) //异步
var a = fs.readFileSync('路径','utf8') //同步
写文件
fs.writeFile('路径','内容',callback) //异步
fs.writeFileSync('路径','内容','utf8') //同步
创建目录
fs.mkdir('目录名称', callback)
删除目录&文件
fs.unlink("删除", callback)

流和管道（输入输出ye是流）

//流可以是可读的、可写的、或者可读可写的。所有的流都是 EventEmitter 的实例

// 流和管道
var fs = require('fs');

var myReadStream = fs.createReadStream(__dirname + '/readMe.txt');//创建可读流
var myWriteStream = fs.createWriteStream(__dirname + '/writeMe.txt');//创建可写流
myReadStream.pipe(myWriteStream);

var writeData = "hello world";
myWriteStream.write(writeData);
myWriteStream.end();
myWriteStream.on('finish', function() {
console.log('finished');
})

myReadStream.setEncoding('utf8');

var data = ""

myReadStream.on('data', function(chunk) {
// data += chunk;
myWriteStream.write(chunk);
})

myReadStream.on('end', function() {
// console.log(data);
})

// 压缩
var crypto = require('crypto');
var fs = require('fs');
var zlib = require('zlib');

var password = new Buffer(process.env.PASS || 'password');
var encryptStream = crypto.createCipher('aes-256-cbc', password);

var gzip = zlib.createGzip();
var readStream = fs.createReadStream(__dirname + "/readMe.txt"); // current file
var writeStream = fs.createWriteStream(__dirname + '/out.gz');

readStream // reads current file
.pipe(encryptStream) // encrypts
.pipe(gzip) // compresses
.pipe(writeStream) // writes to out file
.on('finish', function() { // all done
console.log('done');
});
// 解压
var crypto = require('crypto');
var fs = require('fs');
var zlib = require('zlib');

var password = new Buffer(process.env.PASS || 'password');
var decryptStream = crypto.createDecipher('aes-256-cbc', password);

var gzip = zlib.createGunzip();
var readStream = fs.createReadStream(__dirname + '/out.gz');

readStream // reads current file
.pipe(gzip) // uncompresses
.pipe(decryptStream) // decrypts
.pipe(process.stdout) // writes to terminal
.on('finish', function() { // finished
console.log('done');
});

Promise

获取异步数据，摆脱无限回调地狱

回调函数处理异步
function callback() {
var timeOut = Math.random * 2;//生成一个0-2之间的随机数，如果小于1，打印成功，否失败
if(timeOut<1){
console.log('成功');
}else{
console.log('失败');
}

}
console.log('before setTimeout()');
setTimeout(callback, 1000); // 1秒钟后调用callback函数
console.log('after setTimeout()')

promise处理异步

printNum.then(function(result){//成功调用 result结果
console.log(result)
})
.catch(function(result){//失败调用 result结果
console.log(result)
})

promise对象串联
Promise还可以做更多的事情，比如，有若干个异步任务，需要先做任务1，如果成功后再做任务2，任何任务失败则不再继续并执行错误处理函数。
job1.then(job2).then(job3).catch(handleError);//job1、job2和job3都是Promise对象。

Promise.all
方法返回一个 Promise 实例，此实例在参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。
Promise.all([promise1,promise2...]).then((values)=>{})

Promise.all 传参数
let p1 = wake(3000)
let p2 = wake(2000)

Promise.all([p1, p2]).then((result) => {
console.log(result) // [ '3秒后醒来', '2秒后醒来' ]
}).catch((error) => {
console.log(error)
})

ES7的async await

async是让方法变成异步返回Promise对象
await等待async方法执行完毕也可以接受普通方法和promise对象

function getSomething(){
return 'something';
}

async function testAsync(){
return 'Hello async';
}

async function test(){

//await 因为会阻塞所以函数必须在async 函数体内使用

Ant Design（蚂蚁设计）

https://ant.design/index-cn
阿里团队开发的web前端UI框架
服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验

Taro

使用Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ小程序、快应用、H5、React-Native 等）运行的代码

遇到的问题
1 Taro.request()跨域问题 h5 发请求会报跨域问题，需要使用代理转换请求

例子：config/index.js

h5：添加
devServer: {
host: 'localhost',
port: 10086,
proxy: {
'/api': {
target: 'http://tujia.diandou.com', // 服务端地址
changeOrigin: true
}
}
}
请求：
Taro.request({
url: '/api/ouse',
data: {
user_id: '1'
},
method:'GET',
mode:'no-cors',
header: {
'content-type': 'application/json'
},
success(res){}
}）