v1.2更新说明

[ckinmind]

v1.2更新说明

• 修改imageDatas的处理方式
• 使用对象解构赋值的写法，减少代码量，增强可读性
• 修改变量命名，增强可读性

[ckinmind]

1. 修改获取图片初始数据方法

/* 利用自执行函数，将图片名信息转为图片路径信息 */
let imageDatas = ( (arr) => {
    for (let i = 0, j = arr.length; i < j; i++) {
        let singleImagesData = arr[i];
        singleImagesData.imageUrl = require('../images/' + singleImagesData.fileName);
        arr[i] = singleImagesData;
    }
    return arr;
})(imageJsonDatas);

修改为

let imageDatas = imageJsonDatas.map((image) => {
    image.imageUrl = require('../images/' +  image.fileName);
    return image;
});

[ckinmind]

2. 一些小的写法的改变

 let imgsArrangeArr = this.state.imgsArrangeArr;

//修改为

 let { imgsArrangeArr } = this.state;

使用对象解构赋值语法来减少代码量，增强可读性

let Constant = this.Constant,
     centerPos = Constant.centerPos,
     hPosRange = Constant.hPosRange,
     vPosRange = Constant.vPosRange;

// 修改为

let   { centerPos, hPosRange, vPosRange } = this.Constant;

[ckinmind]

3. 修改变量的命名，使之可读性更好

 this.Constant = {
            centerPos: {  // 中心图片位置
                left: 0,
                right: 0
            },
            hPosRange: { // 水平方向的取值范围，包括左右扇区
                leftSecX: [0, 0],
                rightSecX: [0, 0],
                y: [0, 0]
            },
            vPosRange: { //垂直方向，只包括上扇区
                x: [0, 0],
                topY: [0, 0]
            }
        };

修改为

   this.Constant = {
            centerPos: {  // 中心图片位置
                left: 0,
                right: 0
            },
            leftSection: {  // 左扇区，x和y临界值
                x: [0,0],
                y: [0,0]
            },
            rightSection: { // 右扇区，x和y临界值
                x: [0,0],
                y: [0,0]
            },
            topSection: {   // 上扇区，x和y临界值
                x: [0, 0],
                y: [0, 0]
            }
        };

[luzhonjun]

项目不能start

[ckinmind]

@luzhonjun 能告知报错信息吗

[luzhonjun]

npm i 时缺少的依赖我补上了，然后start时，控制台报错：找不到GET http://localhost:8000/assets/app.js
我也把index中引用app.js的路径改成src="./assets/app.js"了啊
ps：我也是初学，请多指教。。。