zoukankan      html  css  js  c++  java
  • react+es6+redux相关编写规范及经验记录

    const list = [
    {
    id: '1',
    name: '张三',
    age: 25
    },
    {
    id: '2',
    name: '李四',
    age: 26
    }
    ]

    少查询,只要能在页面、或者状态树中获取到的,就不要去调用api查
    熟悉自己的上下文环境
    错误写法:
    if(data){
    /*
    好长一段代码
    */
    if(data && data.name){

    }
    }


    const和let掌握,const能看出来这个变量在程序中是没有被重新赋值的
    const a = yield sdfssdf
    b.name = a.name

    避免重复使用变量计算
    错误写法:
    order.create_time = new Date().getTime()
    order.pay_time = new Date().getTime()

    order?moment(order.create_time).format('hh:ss'):''
    order?moment(order.pay_time).format('hh:ss'):''
    建议:
    const time = new Date().getTime()
    order.create_time = time
    order.pay_time = time

    if(order){
    //
    }

    能少循环的尽量少循环
    例如:
    list.filter(item => item.age !== 25)
    const person = list.find(item => item.id === '2')
    简写:
    let person;
    list.filter(item => {
    if(item.id === '2'){
    person = item
    }
    return item.age !== 25
    })

    if判断
    false: null,undefined,0,NAN, '', ..., 除了这些都是true,{},[]
    错误写法
    a = null
    if(a !== null || a !== undefined){
    // ...
    }
    if(a !== 0){
    // ...
    }
    正确:
    if(a)


    switch替换if
    超过三个if...else就用switch语句,
    switch是通过找一个case的地址去找到对应条件执行,ifelse是遍历所有条件知道找到,在判断分支多的情况下switch效率高
    如果数量特别大,建议用object的方式
    const obj = {
    '1': function(){
    // ...ds
    },
    '2': function(){
    // ...ds
    }
    }
    obj[order.status]()

    定义函数传参数时,如果超过三个参数的时候用对象
    例如:
    const getPerson = (name, age, id, address)=>{
    console.log(name, age, id, address)
    }
    getPerson('张三', 25, '1', '银川')
    建议:
    getPerson({
    name: '张三',
    age: 25,
    id: '1'
    })
    const getPerson = (data)=>{
    console.log(data.name, data.age, data.id, data.address)
    }


    各种for循环方法需要了解,并熟练掌握
    处理每一项数据
    list.forEach(item
    console.log(item)
    })

    list.map(item=>{
    item.createTime = new Date()
    return 1
    })
    forEach()
    find()
    findIndex()
    filter()
    sort()
    Object.keys({})
    Object.values({})
    Object.assign({})

    不是所有的状态数据都需要放到状态树上,只有在各组件之间都需要用到的属性才放到状态树上


    接口应该放到config中,不能直接写死在前端saga中
    const res = yield axios.post('http://10.10.61.45:8071/get_patient', queryBody);

    不能写死的字典项
    const statusDict = {
    '2': '候诊中',
    '3': '已就诊'
    }

    statusDict = {
    waiting: '2',
    visted: '3'
    }
    dict[item.status]
    if(item.status === )

    错误写法:
    if(item.status === '2'){
    // ...
    item.text = '候诊中'
    }
    {
    where:{
    status: '2'
    }
    }
    正确写法:
    if(item.status === statusDict.waiting){
    // ...
    }

    {
    where:{
    status: statusDict.waiting
    }
    }

    多层对象必须判断
    data.person.name

    调试的一个经验:
    我们在saga中如果要修改到数据库时,尽量在数据处理完成后,确保无误再调用
    const updateObj = {
    id: '1',
    age: 25,
    name: '张三'
    }
    console.log(updateObj,'updateObjupdateObj')
    return
    const triage = yield axios.patch('/api/Persons', updateObj)

    immutable 常用
    const a = Map({
    id:'123',{
    id1: '1'
    })
    const b = List([{
    id: '1',
    name: '张三',
    age: 25
    },
    {
    id: '2',
    name: '李四',
    age: 26
    }])

    b.get(0)
    a.getIn(['id','id1',';;;','ll'])
    a.id.id1

    b = {
    id:'1'
    name: 'zahngsan'
    }
    a.set('id','2') setIn(['id','id1'],'2')
    merge(a,b)

    养成写注释的习惯,代码是写给人看的

    重复代码超过两遍就要单独封装了

    命名规范问题,不要太长了


    做东西不是我给你们说什么就做什么,首先你自己要有一个想法,最后东西完成以后你应该考虑如果是你自己用这个功能用的体验好吗

  • 相关阅读:
    Java-列出所有系统属性
    Java-一个数组中的元素复制到另一个数组
    Java-将字符串转为数字
    Java单例模式简单实现
    Spring注解@Component、@Repository、@Service、@Controller
    VisualGDB系列2:VisualGDB对Linux平台的支持特性
    VisualGDB系列1:VisualGDB总体概述
    Docker入门(七):部署app
    Docker入门(六):Stacks
    Docker入门(五):Swarms
  • 原文地址:https://www.cnblogs.com/jlj9520/p/11803894.html
Copyright © 2011-2022 走看看