우아한 코드 작성 방법에 대한 몇 가지 생각 - js, vue

1. 코드 최적화 - 코드 중복 감소

 getState(status) {
      switch (status) {
        case 1:
          return "整改中";
        case 2:
          return "已整改";
        case 3:
          return "进行中";
        case 4:
          return "已解除";
        case 5:
          return "持续存在";
      }
    },

 getState(status) {
      const table ={1:'整改中',2:'已整改',3:'进行中',4:'已解除',5:'持续存在'};
      return table[status];
    },

   getComtentName(arg) {
      /**if (arg == 1) {
        return "评论";
      }
      if (arg == 2) {
        return "督办";
      }
      if (arg == 3) {
        return "处置日志";
      }
      if (arg == 4) {
        return "编辑";
      }*/
      const nameInfo={1:'评论',2:'督办',3:'处置日志',4:'编辑'};
      return nameInfo[arg];
    },

둘, 효과를 가로지르는 CSS

css代码

.edit {
  background-image: url(~@images/edit.png);
}
.edit:hover {
  background-image: url(~@images/edit-hover.png);
}





template里面
 <span
                        v-if="ele.submitState !== 1"
                        @click="goDetail(ele.id, 'edit')"
                        title="编辑"
                        class="handle edit"
                      ></span>

<img :src="sysNot" title="系统通知" alt="系统通知" @mouseover="sysNot = sysNotOld" @mouseout="sysNot = sysNot1"
              @click="changeSys" />




下面是script的data中定义

 sysNot: "/static/img/msg.png",
      sysNot1: "/static/img/msg.png",
      sysNotOld: "/static/img/msg-hover.png",

 <img :src="checkedUser" title="切换账号" alt="切换账号" @mouseover="$event.currentTarget.src=checkedUserHover" @mouseout="$event.currentTarget.src=checkedUser"
              @click="changeSys" />

3. 현재 배열에 중복 값이 있는지 확인

 // 判断是否有重复
      const beginLength = repeatJudge.length;
      const endLength = Array.from(new Set(repeatJudge)).length;
      if (beginLength != endLength) {
        return this.$message.warning("审批流程的审批人员选择重复");
      }

4. 사진 도입 시 중복되는 코드 줄이기

원래 코드

   <img
          v-if="item.approveState == 2"
          class="state"
          src="@/images/rejected.png"
          alt=""
        />
        <img
          v-if="item.approveState == 1"
          class="state"
          src="@/images/pass.png"
          alt=""
        />
        <img
          v-if="item.approveState == 3"
          class="state"
          src="@/images/canceled.png"
          alt=""
        />

개선 후

   <img
          class="statusImg"
          :src="approveStateList[pageInfo.approveState]"
          alt=""
        />









data(){return{approveStateList: {
        2: require("@/images/rejected.png"),
        1: require("@/images/pass.png"),
        3: require("@/images/canceled.png")
      }}},

5. es6의 새로운 방법을 사용하여 객체를 탐색합니다.

遍历普通对象var obj = {1:1,2:2};

使用for in 

for(var key in  obj){ 

console.log(key);//输出的是对象的key而不是下标

}

6. 객체를 포함하는 두 배열이 동일한지 비교합니다.

对比两个数组是否相同

var arr1 =[1,5,4,8,0,{q:''},3,5,1,{c:''}];

var arr2 =[{q:''},3,5,1,1,5,4,8,0,{c:''},123456789];

console.log(JSON.stringify(arr1.sort())==JSON.stringify(arr2.sort()))

일곱째, 배열의 객체를 순회합니다.

遍历数组里的对象

let arr =[{1:1},{1:2}];

for( var item of arr) {

console.log(item,item[1])//{1:1},1

}

여덟, 감시 모니터링 사용 시나리오

장면:

목록 페이지에서 세부 정보를 클릭하면 세부 정보 페이지에서 인터페이스가 조정된 것을 보았지만 세부 정보 페이지에서 하위 구성 요소의 렌더링에 문제가 있음을 발견했습니다.조사 결과 부모가 자식을 통과한 것으로 나타났습니다. 인터페이스가 조정되기 전에 하위 구성 요소가 빈 개체를 얻었으므로 문제가 발생했다고 직접 판단했습니다.

그것을 해결하는 방법은 하위 구성 요소를 호출하는 판단을 지연시키는 타이머를 설정합니까? 아니요, 아니요, 이 트릭은 인터넷 속도가 나쁠 때 작동하지 않습니다.

하위 구성 요소가 세부 인터페이스를 다시 조정합니까? 필요 없음

시계를 사용하여 모니터링하십시오.

vue2的watch监听用法

  watch:{

    'detail':{// 引号加不加都无所谓，detail监听的是data或props里命名的值

      immediate: true,//初次获取到值就执行

      deep: true,// 深度监听对象

      handler(){ //执行我们想要的操作

this.powerCN = this.judgeType();

      }

    }

  },

아홉, null 값 병합 연산자의 사용 시나리오에 대해??

항상 ??보다 ||가 더 실용적이라고 느끼며, 값이 0, false, ''일 때 뒤로 갈 수 있고, 언젠가 어떤 id가 존재하는지 알아낼 때까지, id나 status가 0일 때, |Skip에서 직접 사용하며 0??1이 0||1보다 낫고 이전 값이 null이거나 정의되지 않은 것으로 판단될 때만 뒤로 이동합니다.

10. 선택적 연결 연산자

옵셔널 체인 오퍼레이터 는 정말 사용하기 좋은데 제가 수락한 vue-cli2로 빌드한 오래된 프로젝트는 이것을 사용할 수 없습니다. 온라인 검색을 권장합니다. 플러그인을 설치하고 구성하면 사용할 수 있습니다.

실제로 대부분의 vue2 및 vue3 프로젝트는 이제 별도의 구성 없이 선택적 체인 연산자를 사용할 수 있습니다.

코드 중복성이 줄어들고 최근에는 객체가 존재하는지 확인한 다음 호출하는 것도 가능하다는 사실을 발견했습니다.

일레븐, es9 신규 추가

1. 비동기 반복

await可以和for...of循环一起使用，以串行的方式运行异步操作

async function process(array) {

for await (let i of array) {

// doSomething(i);

}}

2. Array.flat()과 Array.flatMap()

flat()

[1, 2, [3, 4]].flat(Infinity); // [1, 2, 3, 4]

flatMap()

[1, 2, 3, 4].flatMap(a => [a**2]); // [1, 4, 9, 16]

3. 논리 연산자 및 대입식

논리 연산자 및 대입 표현식, 새로운 기능은 논리 연산자(&&, ||, ??)와 대입 표현식을 결합하는 반면 JavaScript의 기존 복합 대입 연산자는 다음과 같습니다.

a ||= b

//等价于

a = a || (a = b)



a &&= b

//等价于

a = a && (a = b)



a ??= b

//等价于

a = a ?? (a = b)

4. 숫자 구분 기호

숫자 구분 기호, 숫자 사이에 시각적 구분 기호를 만들고 _ 밑줄을 사용하여 숫자를 구분하여 숫자를 더 읽기 쉽게 만들 수 있습니다.

const money = 1_000_000_000;

//等价于

const money = 1000000000;



1_000_000_000 === 1000000000; // true

5. Object.assign 메서드(객체 병합)

//Object.assign 静态方法 提取对象所有的属性及方法,方法合并为一个对象 返回一个新对象

var newObj = Object.assign({a:'a'},{b:'b'},{c:'c'})

console.log(newObj);  //返回值为 {a:'a',b:'b',c:'c'}

6. 스프레드 연산자(…)

매개변수 객체의 순회 가능한 모든 속성을 꺼내 현재 객체에 복사하는 데 사용됩니다.

// 1、拷贝对象（深拷贝）

let p1 = { name: "Amy", age: 15 }

let someone = { ...p1 }

console.log(someone)  //{name: "Amy", age: 15}

12. 템플릿 템플릿은 개체를 통해 직접 반복됩니다.


    <div v-for="item,key,index in test" :key='key'><span>{
   
   {key}}</span></div>





test:{

        "2023-06-29": [

            {

                "id": 60162,

                "hintId": "542473209950375956",

                "createTime": "2023-06-29T06:07:35.000+0000",

                "commentName": "河北省人力资源部操作员",

                "orgId": "212942",

                "orgName": "中国人寿河北省分公司",

                "deptId": "90176",

                "deptName": "人力资源部",

                "content": "河北省人力资源督办",

                "commentType": 2

            }

        ]

    }

변환 후 Object.entries(this.coverList)를 반복할 수도 있습니다.