分类
javascript

vue(js)转react(ts)

慢慢更新。。。。

定义

定义函数

// vue
methods: {
   fn(){},
}
// react
fn(){};
fb = ()=>{};

父子通信

子组件改父组件的值

vue

// 子组件
this.$emit('change',2);
// 父组件
<father @change="handleChange"></father>

handleChange(e) {
    console.log(e);
}

react

// 子组件
render() {}
this.props.handleChange(k)
// 父组件
fn(k){};
render() {
    return (<children handleChange={fn}></children>)
}

路由

react使用的是react-router-dom

class

如果要在同一个dom中写多个class

// vue
<div :class="['a',active?'b':'c']"></div>
// react
import cls from 'classnames';
return (
  <div className={cls(a,{b:active,c:!active})}></div>
)
分类
javascript

ES6小技巧

解构

const {a, …othters} = params;

当我们不想要某个属性

分类
javascript 总结

约定俗成写代码守则

关于数据字典

数据字典的数据可以先用async获取,方便后面使用

数据字典前端要传后端code,后端不能存name,而是利用code获取name再传给前端

关于流程

如果写流程类的代码,就有节点的概念,每个节点都会有表单操作,每个节点都有它的特殊性去展示不同的页面,因此,节点不能写死,像1,2,3,4,5这样就写死了,建议1,3,5,7,9

关于echarts

记得合并模式,基础配置使用普通合并,后台传过来的数据用代替合并

定义一个resize监听器,改监听器可以用debounce,当监听到时更改resize:true,再监听resize,当它为true时给echars修改this.chart.resize({width: null})最后把resize改成false,resize这个值可放到公共store

每个图标一定要单独做成组件,组件里有一个config.js配置,这样容易复制,要是做在一起,这酸爽。。。。

关于公共组件

适合抽离的公共组件有1.上传 2.找人等常用又容易修改的组件3.严重占据代码量的组件

关于css

写好css很重要,知道在哪写css更重要,曾经在一个流程的vue文件下写css,后来这个流程复制了5遍。。。

css尽量别嵌套太深,不然找都不好找

关于用户体验

弹出框:点击按钮弹出,点击外部框消失或者点击按钮框消失

选择框:可搜索,可删除

分类
javascript

javascript中的继承与原型链

原型链继承

 // 原型链继承
    // 父类元素新增原型方法、原型属性,子类都能访问到
    // 简单,易于实现
    // 缺点:1.无法实现多继承,2.来自原型对象的所有属性被所有子类共享。3.要创建子类实例时,无法向父类构造函数传参
    // 4. 要想为子类新增属性和方法,必须要在Student.prototype = new Person() 之后执行,不能放到构造器中
    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.play = [1,2,3];
        this.setName = function(name) {
            this.name = name;
        };
    }
    Person.prototype.setAge = function(age) {
        this.age = age;
    }
    function Student(price) {
        this.price = price;
        this.setScore = function() {}
    }
    Student.prototype = new Person();
    var s1 = new Student(15000);
    var s2 = new Student(14000);
    s1.setName('zhuishao');
    s1.setAge(24);
    console.log(s1, s2);
qi ye wei xin jie tu 16230327418073 1 - javascript中的继承与原型链

Student.prototype = new Person() 等价于

  • Student.prototype.constuctor = Person;
  • Student.prototype.__proto__=Person.prototype

注意:Student.prototype !== Student.prototype.__proto__ 因为他们指向的地址是不同的

借用构造函数继承

// 借用构造函数继承
    // 解决了原型链继承中子类实例共享父类引用属性的问题
    // 创建子类实例时,可以向父类传递参数
    // 可以实现多继承
    // 缺点1. 实例不是父类的实例,只是子类的实例 2.只能继承父类的属性和方法,不能继承父类的原型属性和方法
    // 3.无法实现函数的复用,每个子类都有父类实例函数的副本,影响性能
    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.setName = function() {}
    }
    Person.prototype.setAge = function() {}
    function Student(name, age, price) {
        Person.call(this, name, age);
        this.price = price
    }
    var s1 = new Student('Tom', 20, 15000);
qi ye wei xin jie tu 16230344824716 - javascript中的继承与原型链

原型链+借用构造函数的组合继承

// 原型链+借用构造函数的组合继承
    // 可以继承实例属性/方法,也可以继承原型属性/方法
    // 不存在引用属性共享问题
    // 可传参,函数可复用

    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.setName = function() {}
    }
    Person.prototype.setAge = function(age) {
        this.age = age;
    }
    function Student(name, age, price) {
        Person.call(this, name, age);
        this.price = price
    }
    Student.prototype = new Person();
    Student.prototype.constructor = Student;

    var s1 = new Student('Tom', 20, 15000);
qi ye wei xin jie tu 16230344824716 1 - javascript中的继承与原型链

组合继承优化

 // 组合继承优化
    // 不会初始化两次实例方法/属性,避免的组合继承的缺点
    // 缺点:没办法辨别实例时子类还是父类创造的,子类和父类的构造函数指向同一个
    function Person(name, age) {
        this.nam = name;
        this.age = age;
        this.setAge = function() {}
    }
    Person.prototype.setAge = function() {
        console.log('111');
    };
    function Student(name, age, price) {
        Person.call(this, name,age);
        this.price = price;
        this.setScore = function() {}
    }
    Person.prototype.sayHello = function() {
        console.log('hello');
    }
    Student.prototype = Person.prototype;
    var s1 = new Student('Tom', 20, 15000);
    console.log(s1);
qi ye wei xin jie tu 16230344824716 2 - javascript中的继承与原型链

组合继承优化2,最完美

function Person(name, age) {
        this.name = name,
            this.age = age
    }
    Person.prototype.setAge = function () {
        console.log("111")
    }
    function Student(name, age, price) {
        Person.call(this, name, age)
        this.price = price
        this.setScore = function () {}
    }
    Student.prototype = Object.create(Person.prototype)//核心代码
    Student.prototype.constructor = Student//核心代码
    var s1 = new Student('Tom', 20, 15000)
    console.log(s1 instanceof Student, s1 instanceof Person) // true true
    console.log(s1.constructor) //Student
    console.log(s1)
qi ye wei xin jie tu 16230344824716 3 - javascript中的继承与原型链

注意:Object.create是创建了只包含原型链不包含对象this的一个对象,所以需要Person.call获取对象本身的方法与属性

分类
javascript

typeof 和 instanceof

typeof作用

返回一个字符串,表示未经计算的操作数的类型

typeof能够分辨哪几种类型

number,boolean,string,undefined,symbol,bigint,object,function

typeof是否可以看做识别基本类型。

基本类型:number,boolean,string,undefined,null,symbol,bigint

  • typeof可以识别object,object不是基本类型
  • typeof可以识别function,function不是基本类型
  • typeof把null识别成了object
  • typeof识别包装类型为object

typeof的特别之处

它可以识别未定义的元素不会报错,可以把包装类辨识为对象。

typeof缺点

把包装类辨识为对象,无法辨识基本类型null,无法辨识引用类型Array,Date,RegExp

使用typeof常见错误

  • typeof null === ‘object’
  • typeof [1,2] === ‘object’
  • typeof new Boolean(1) === ‘object’
  • typeof Boolean(1) === ‘boolean’
  • typeof Boolean === ‘function’
  • typeof new String(’23’) === ‘object’
  • typeof Date() === ‘string’
  • typeof class C {} === ‘function’
  • typeof /a/ === ‘object’
  • typeof Infinity === ‘number’
  • typeof new Function === ‘function’
分类
javascript

FTS迁移代码优化

接口从多变少

从前在写fts的时候会有转办,加签,同意,驳回等接口。每个步骤的转办都不是同一个接口。因此为每个接口都写了一个api和store。现在,需要让接口精简,所有的转办都用同一个接口,但接口地址不同。

以转办举例

  // 转办api
  entrustTask(param) {
    let path = '';
    if (Reflect.has(param, 'path')) {
      path = Reflect.get(param, 'path');
      Reflect.deleteProperty(param, 'path');
    }
    return db.post(path, param);
  },
 // 转办store
    entrustTask(store, param) {
      return db.entrustTask(param);
    },
// 转办调用
this.entrustTask({
                remarks,
                entrustUsers: people.toString(),
                nodeId: this.$route.params.nodeId,
                requestId: this.$route.params.id,
                taskId: this.$route.params.taskId,
                path,
              }).then((req) => {
                this.modal.visible = false;
                this.$message.success(req.msg);
                this.closePage();
              });

使用查表

现在的方式

 const pathConfig = {
        11: 'new/mqf/wfMarketIssueTrack/rejectDelay',
        12: 'new/mqf/wfMarketIssueApplyClose/rejectTask',
        13: 'new/mqf/wfMarketIssueRespDeptLeaderApproval/rejectTask',
        14: 'new/mqf/wfMarketIssueMgtDeptApproval/rejectTask',
        15: 'new/mqf/wfMarketIssueMgtDeptLeaderApproval/rejectTask',
      };
      this.approveForm.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.loading.reject = true;
          const { remarks } = values;
          this.rejectApproval({
            path: pathConfig[this.$route.params.status],
            nodeId: this.$route.params.nodeId,
            remarks,
            requestId: this.$route.params.id,
            taskId: this.$route.params.taskId,
          }).then((res) => {
            this.$message.success(res.msg);
            setTimeout(window.close, 2000);
          }).catch((error) => {
            this.$message.error(error.meta.message);
            this.loading.reject = false;
          });
        }
      });

曾经的方式

switch (this.$route.params.status) {
                  case '10':
                    this.entrustTaskTaskTrack({
                      remarks,
                      entrustUsers: people.toString(),
                      nodeId: this.$route.params.nodeId,
                      requestId: this.$route.params.id,
                      taskId: this.$route.params.taskId,
                    }).then((req) => {
                      this.modal.visible = false;
                      this.$message.success(req.msg);
                      setTimeout(window.close, 2000);
                    }).catch((error) => {
                      this.$message.error(error.meta.message);
                    });
                    break;
                  case '11':
                    this.entrustTaskDelay({
                      remarks,
                      entrustUsers: people.toString(),
                      nodeId: this.$route.params.nodeId,
                      requestId: this.$route.params.id,
                      taskId: this.$route.params.taskId,
                    }).then((req) => {
                      this.modal.visible = false;
                      this.$message.success(req.msg);
                      setTimeout(window.close, 2000);
                    }).catch((error) => {
                      this.$message.error(error.meta.message);
                    });
                    break;
                  case '12':
                    this.entrustTaskApplyClose({
                      remarks,
                      entrustUsers: people.toString(),
                      nodeId: this.$route.params.nodeId,
                      requestId: this.$route.params.id,
                      taskId: this.$route.params.taskId,
                    }).then((req) => {
                      this.modal.visible = false;
                      this.$message.success(req.msg);
                      setTimeout(window.close, 2000);
                    }).catch((error) => {
                      this.$message.error(error.meta.message);
                    });
                    break;
                  case '13':
                    this.respDeptLeaderEntrustTask({
                      remarks,
                      entrustUsers: people.toString(),
                      nodeId: this.$route.params.nodeId,
                      requestId: this.$route.params.id,
                      taskId: this.$route.params.taskId,
                    }).then((req) => {
                      this.modal.visible = false;
                      this.$message.success(req.msg);
                      setTimeout(window.close, 2000);
                    }).catch((error) => {
                      this.$message.error(error.meta.message);
                    });
                    break;
                  case '14':
                    this.mgtDeptEntrustTask({
                      remarks,
                      entrustUsers: people.toString(),
                      nodeId: this.$route.params.nodeId,
                      requestId: this.$route.params.id,
                      taskId: this.$route.params.taskId,
                    }).then((req) => {
                      this.modal.visible = false;
                      this.$message.success(req.msg);
                      setTimeout(window.close, 2000);
                    }).catch((error) => {
                      this.$message.error(error.meta.message);
                    });
                    break;
                  case '15':
                    this.mgtDeptLeaderEntrustTask({
                      remarks,
                      entrustUsers: people.toString(),
                      nodeId: this.$route.params.nodeId,
                      requestId: this.$route.params.id,
                      taskId: this.$route.params.taskId,
                    }).then((req) => {
                      this.modal.visible = false;
                      this.$message.success(req.msg);
                      setTimeout(window.close, 2000);
                    }).catch((error) => {
                      this.$message.error(error.meta.message);
                    });
                    break;
                  default:
                }

代码质量显而易见的提升了(完)

分类
javascript

颠覆常识的跳出循环

如何跳出二层循环

foo:for(var i=0;i<4;i++) {
        for (var j=0;j<4;j++) {
            if((i*j)>=3){
                console.log('stoping', i,j);
                break foo;
            }
            console.log(i,j);
        }
    }
qi ye wei xin jie tu 16081902748073 - 颠覆常识的跳出循环
分类
javascript

颠覆常识的数组排序

考虑:数组

const arr = [10,0,2];

arr.sort() // 0 10 2

竟然是先转换成String然后再排序的,那这个sort怎么放心用呢?

使用带类数组(TypeArray)

const arr = [10,0,2];

const newarr = […Uint8Array.from(arr).sort()]; // 0 2 10

带类数组构造器家族

Uint8Array // -255-255 Int8Array //0-255

Uint16Array //-65535-65535 Int16Array //0-65535

Uint32Array,Int32Array

Float32Array,Float64Array // 不用加U也可设置负数