vue更新数组和对象-CSDN博客

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 = null
  return 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 = 0
	return {
		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();
    });复制代码