vue更新数组和对象

https://cn.vuejs.org/v2/guide/list.html#数组更新检测

更改数组对象

let items=this.formValidate.items;
items.map((item,index)=>{if(item.id===this.currentRowId){item=Object.assign({},item,{subject:subjectVal})this.$set(this.formValidate.items, index, item)}
})复制代码

问题汇总

https://juejin.im/post/59fa9257f265da43062a1b0e

修改hosts

C:\Windows\System32\drivers\etc\hosts(可将文件移到其他地方修改)

css技巧

https://github.com/jawil/blog/issues/29

store有多个类型

[types.unPayTypes.SetCopyDetail](state,newState){let type=newState.type;state.unPayCopyDetail=Object.assign({},state.unPayCopyDetail,{[type]:newState});
},复制代码

[types.unPayTypes.GetCopyDetailAsync](dispatch,payload){let promise=getCopyDetail(payload.uppIds);new PromiseAction().commit(promise,item=>{item.type=payload.type;dispatch.commit(types.unPayTypes.SetCopyDetail,item);});
},复制代码

promise async
http://cnodejs.org/topic/5640b80d3a6aa72c5e0030b6

es6的promise和async函数

缓存代理

// 处理计算的函数: 求数组中元素的和
const sum = (list) => list.reduce((v, i) => v + i, 0)// 代理对象
const proxySum = (function () {// 缓存对象var cache = {}return function () {// 已缓存的标识符let flag = Array.prototype.join.call(arguments, '-')if (flag in cache) {// 返回缓存console.log('返回缓存数据')return cache[flag]}console.log('第一次计算')return cache[flag] = sum.apply(this, arguments)}
})()console.log(proxySum([1,2,3,4,5,6,7,8,9,10])) // 第一次计算 55
console.log(proxySum([1,2,3,4,5,6,7,8,9,10])) // 返回缓存数据 55复制代码

图片懒加载

window.onload = function () {// 图片懒加载函数const myImage = (function (src) {let imgNode = document.createElement('img')document.body.appendChild(imgNode)return {setSrc (src) {imgNode.src = src}}})()// 代理对象const proxyImage = (function () {const img = new Image();img.onload = function () {// 加载真正的图片myImage.setSrc(this.src)}return {set (url) {myImage.setSrc('./1.jpeg') // 本地的loading图片img.src = url}}})()setTimeout(() => {proxyImage.set('https://publish-pic-cpu.baidu.com/4d09f82c-db73-468c-8e5f-9656876891f2.jpeg@f_webp,q_90,w_230')}, 5000)}复制代码

单例模式

https://github.com/1657413883/The-Road-of-FE/blob/master/docs/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F.md

class Person {constructor (name) {this.name = name}sayName () {console.log(this.name)}
}let getSingle =  (function () {let person = nullreturn function (name) {console.log(person)return person || (person = new Person(name))}
})()const p1 = getSingle('kobe')
p1.sayName() // 'kobe'const p2 = getSingle('kobe2')
p2.sayName() // 'kobe'复制代码

迭代器

const createIteraor = list => {let index = 0return {next: () => {return index < list.length ? {value: list[index++], done: false} : {value: undefined, done: true}}}
}let i = createIteraor([1,2,3])
console.log(i.next()) // { value: 1, done: false }
console.log(i.next()) // { value: 2, done: false }
console.log(i.next()) // { value: 3, done: false }
console.log(i.next()) // { value: undefined, done: true }复制代码

vscode打开多窗口

ctrl+shift+n

jquery promise

$.when($.ajax("..."), $.ajax("..."))
　.done(function(){ alert("Success"); })
　.fail(function(){ alert("Error"); });

图片上传

<link rel="stylesheet" type="text/css" href="js/file-upload/webuploader.css">
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/file-upload/webuploader.js"></script>复制代码

var uploader = WebUploader.create({auto: true,swf: '/file-upload/Uploader.swf',server: 'https://fileupload.sellercube.com/api/upload',pick: '#filePicker',accept: {title: 'Images',extensions: 'gif,jpg,jpeg,bmp,png',mimeTypes: 'image/*'}})uploader.on( 'fileQueued', function( file ) {var $li = $('<div id="' + file.id + '" class="file-item thumbnail">' +'<span class="delete-bar"><i class="delete"></i></span>'+'<img>' +//'<div class="info">' + file.name + '</div>' +'</div>'),$img = $li.find('img');$('#fileList').append( $li );uploader.makeThumb( file, function( error, src ) {if ( error ) {$img.replaceWith('<span>不能预览</span>');return;}$img.attr( 'src', src );}, 100, 100 );});// 文件上传过程中创建进度条实时显示。uploader.on( 'uploadProgress', function( file, percentage ) {var $li = $( '#'+file.id ),$percent = $li.find('.progress span');// 避免重复创建if ( !$percent.length ) {$percent = $('<p class="progress"><span></span></p>').appendTo( $li ).find('span');}$percent.css( 'width', percentage * 100 + '%' );});// 文件上传成功，给item添加成功class, 用样式标记上传成功。uploader.on( 'uploadSuccess', function( file ,response) {$( '#'+file.id ).addClass('upload-state-done').attr('data-file',response.Data[0]);});// 文件上传失败，显示上传出错。uploader.on( 'uploadError', function( file ) {var $li = $( '#'+file.id ),$error = $li.find('div.error');// 避免重复创建if ( !$error.length ) {$error = $('<div class="error"></div>').appendTo( $li );}$error.text('上传失败');});// 完成上传完了，成功或者失败，先删除进度条。uploader.on( 'uploadComplete', function( file ) {$( '#'+file.id ).find('.progress').remove();});复制代码