最近这段时间鼓捣了下vue和react

前段时间,在公司的项目中,断断续续的,有尝试使用vue,那时候觉得挺实用,感觉像一个js + html的模板引擎,也没怎么深入研究。

最近急于换工作,面试面试面试,造了不少航母,却没有一家愿意等我去拧螺丝的。前几个星期还是艳阳高照,最近这2周,几乎天天下雨,广州这破天气。面着面着,就发现前端这几年,冒出了挺多东西的,我以前以为,只有 h5 和 css3 ,现在才发现js这边,也有很多,比如,比较知名的vue、react、angular。

迫于知识盲区,这2天我把vue和react文档都过了一遍,发现这2个框架都比较轻量级。vue呢,他主张在html上做标记,然后通过js指令去渲染和处理他。而react呢,他主张把html扔进js代码里,使用js的新标准es6里的新特性jsx。两者都是有用虚拟dom处理渲染,孰轻孰重,就看你自己去衡量了。

好了,今天的小本本就记到这里,给大家分享一个不错的对比分析 https://www.cnblogs.com/Chen-XiaoJun/p/6246946.html ,我也继续去鼓捣一下angular了。

顺便可以看下大佬们的分析对比 https://cn.vuejs.org/v2/guide/comparison.html#React

js缩放上传图片

通过朋友介绍,最近接了个项目。其中有一处的功能,需要将图片上传至微信公众号,并且是压缩过的图片。

第一时间,我想到了用js来处理。通过h5的新特性canvas来缩放图片。然后,把处理好的图片再上传至服务器。

具体代码如下,你还可以去我的github上去找 https://github.com/altwei/study-javascript

html

[code lang=”html”]
<!doctype html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>图片上传</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link type="text/css" rel="stylesheet" href="public/css/style.css">
</head>
<body>

<button>选择图片 – 请使用谷歌浏览器</button>

<div></div>

<script src="public/js/jquery-1.11.1.min.js"></script>
<script src="public/layer_mobile/layer.js"></script>
<script src="public/js/script.js"></script>
<script>
$(‘button’).on(‘click’, function () {
// 创建input
var input = $tag(‘input’, {type: ‘file’, name: ‘file’, multiple: true});
// 触发input
input.click();
// change事件
$(input).on(‘change’, function () {
// 读取图片文件
reader.image(this.files[0], function (image, file) {
// 缩放图片, 获取base64
// var base64 = photo.drawBase64(image, 1920, 1080);
var base64 = photo.drawBase64(image, 800, 450);
// 加入div
$(‘div’).append($tag(‘img’, {src: base64}));
// 初始上传数据
var data = new FormData();
data.append(‘file’, transcode.toBlob(base64), file.name);
// 上传文件
ajax.upload("upload.php", data, function (data) {
console.log(data);
});
});
});
});
</script>
</body>
</html>
[/code]

javascript

[code lang=”javascript”]
/**
* 异步请求
* @type {{loading: boolean, get: ajax.get, post: ajax.post, upload: ajax.upload, request: ajax.request}}
*/
var ajax = {
loading: false,
/**
* ajax get
* @param url
* @param callback
*/
get: function (url, callback) {
this.request({url: url, type: ‘get’}, callback);
},
/**
* ajax post
* @param url
* @param data
* @param callback
*/
post: function (url, data, callback) {
this.request({url: url, data: data}, callback);
},
/**
* ajax upload
* @param url
* @param formData
* @param callback
* @param progress
*/
upload: function (url, formData, callback, progress) {
var options = {
url: url,
data: formData,
processData: false,
contentType: false,
xhr: function () {
var xhr = new window.XMLHttpRequest();
if (typeof progress != ‘undefined’) {
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percent = parseInt(evt.loaded / evt.total * 100, 10);
progress(percent);
}
}, false);
}
return xhr;
}
};
this.request(options, callback);
},
/**
* ajax request
* @param options
* @param callback
* @returns {boolean}
*/
request: function (options, callback) {
//防止重复提交
if (ajax.loading) {
return false;
}
ajax.loading = true;
//添加遮罩层
lay.mask();
//合并ajax参数
var params = $.extend({
type: ‘POST’, //请求方式
timeout: 5000, //请求超时时间(毫秒)
async: true, //使用异步请求
cache: true, //使用缓存
dataType: ‘json’, //返回的数据类型
contentType: ‘application/x-www-form-urlencoded’, //发送的数据类型
processData: true, //转化成一个查询字符串
success: function (data, textStatus) {
ajax.loading = false;
console.log(data);
console.log(textStatus);
callback && callback(data);
//关闭所有layer
layer.closeAll();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
ajax.loading = false;
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
alert(‘系统出错:’ + textStatus);
//关闭所有layer
layer.closeAll();
}
}, options || {});
//开始ajax请求
$.ajax(params);
}
};
/**
* layer弹窗
* @type {{time: number, hint: lay.hint, mask: lay.mask, alert: lay.alert, confirm: lay.confirm}}
*/
var lay = {
time: 3,
/**
* 提示
* @param msg
*/
hint: function (msg) {
layer.open({
content: msg,
skin: ‘msg’,
time: this.time
});
},
/**
* 遮罩层 loading
*/
mask: function () {
layer.open({
type: 2,
shadeClose: false,
content: ‘加载中’
});
},
/**
* 警告提示
* @param msg
*/
alert: function (msg) {
layer.open({
content: msg,
btn: ‘确认’
});
},
/**
* 确认提示
* @param msg
* @param callback
*/
confirm: function (msg, callback) {
layer.open({
content: msg ? msg : ‘确认无误?’,
btn: [‘确认’, ‘取消’],
yes: function (index) {
layer.close(index);
callback && callback();
}
});
}

};
/**
* 读取文件/读取图片文件
* @type {{file: reader.file, image: reader.image}}
*/
var reader = {
/**
* 读取文件
* @param file
* @param callback
* @param type
*/
file: function (file, callback, type) {
var reader = new FileReader();
switch (type) {
case ‘ArrayBuffer’:
reader.readAsDataURL(file);
break;
case ‘Text’:
reader.readAsText(file);
break;
case ‘DataURL’:
default:
reader.readAsDataURL(file);
break;
}
reader.onload = function () {
callback(this.result, file)
};
},
/**
* 读取图片文件
* @param file
* @param callback
*/
image: function (file, callback) {
this.file(file, function (base64, file) {
$tag(‘img’, {src: base64}).onload = function () {
callback(this, file);
};
});
}
};
/**
* 数据转码
* @type {{toDataUrl: transcode.toDataUrl, toBlob: transcode.toBlob, toFile: transcode.toFile}}
*/
var transcode = {
/**
* Blob或File转为DataURL
* @param file
* @param callback
*/
toDataUrl: function (file, callback) {
switch (file.toString()) {
case ‘[object Blob]’:
case ‘[object File]’:
reader.file(file, callback);
break;
default:
callback && callback();
break;
}
},
/**
* DataURL转为Blob
* @param dataUrl
* @returns {Blob}
*/
toBlob: function (dataUrl) {
var arr = dataUrl.split(‘,’), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n–) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type: mime, filename: ‘fuck’});
},
/**
* DataURL转为File
* @param dataUrl
* @param filename
* @returns {File}
*/
toFile: function (dataUrl, filename) {
var arr = dataUrl.split(‘,’), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n–) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type: mime});
}
};
/**
* 图片处理
* @type {{draw: photo.draw, drawBase64: photo.drawBase64}}
*/
var photo = {
/**
* 绘制图片, 返回canvas
* @param image
* @param setWidth
* @param setHeight
* @returns {HTMLElement}
*/
draw: function (image, setWidth, setHeight) {
setWidth = setWidth === undefined ? image.width : setWidth;
setHeight = setHeight === undefined ? image.height : setHeight;
// 等比例缩放
if (image.width > setWidth) {
setHeight = image.height / image.width * setWidth;
}
if (image.height > setHeight) {
setWidth = image.width / image.height * setHeight;
}
// 绘制图片
var canvas = $tag(‘canvas’, {width: setWidth, height: setHeight});
canvas.getContext(‘2d’).drawImage(image, 0, 0, setWidth, setHeight);
return canvas;
},
/**
* 绘制图片, 返回base64
* @param image
* @param setWidth
* @param setHeight
* @param imageType
* @param imageQuality
* @returns {string | *}
*/
drawBase64: function (image, setWidth, setHeight, imageType, imageQuality) {
// 图片类型
if (imageType === undefined) {
imageType = ‘image/jpeg’;
}
// 图片质量( image/jpeg 或 image/webp )
if (imageQuality === undefined) {
imageQuality = 0.9;
}
base64 = this.draw(image, setWidth, setHeight).toDataURL(imageType, imageQuality);
return base64;
}
};

/**
* 创建html标签
* @param tagName
* @param attr
* @param append
* @returns {HTMLElement}
*/
function $tag(tagName, attr, append) {
var tag = document.createElement(tagName);
attr && $(tag).attr(attr);
append && $(tag).append(append);
return tag;
}
[/code]

php

[code lang=”php”]
<?php $tmp_name = isset($_FILES[‘file’]) ? $_FILES[‘file’][‘tmp_name’] : ”; if ($tmp_name) { $save = ‘./uploads/’ . uniqid() . basename($_FILES[‘file’][‘name’]); if (copy($tmp_name, $save)) { $result = array( ‘status’ => 1,
‘info’ => ‘上传成功’,
);
} else {
$result = array(
‘status’ => 0,
‘info’ => ‘上传失败’,
);
}
} else {
$result = array(
‘status’ => 0,
‘info’ => ‘没有上传文件’,
);
}

echo json_encode($result);
[/code]