JavaScript ES6实现继承

news2024/11/26 16:35:28

1 对象的方法补充

2 原型继承关系图

3 class方式定义类

4 extends实现继承

5 extends实现继承

6 多态概念的理

function 创建的名称如果开头是大写的，那这个创建的不是函数，是创建了类。

 ES6-class类中的内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    var obj = {
      running: function() {},
      eating: () => {},
      swimming() {

      }
    }

    // function Person() {

    // }

    // Person.prototype.running = function() {

    // }

    // 编程: 高内聚低耦合
    class Person {
      // 1.类中的构造函数
      // 当我们通过new关键字调用一个Person类时, 默认调用class中的constructor方法
      constructor(name, age) {
        this.name = name
        this.age = age
      }

      // 2.实例方法
      // 本质上是放在Person.prototype
      running() {
        console.log(this.name + " running~")
      }
      eating() {
        console.log(this.name + " eating~")
      }
    }

    // 创建实例对象
    var p1 = new Person("why", 18)

    // 使用实例对象中属性和方法
    console.log(p1.name, p1.age)
    p1.running()
    p1.eating()

    // 研究内容
    console.log(Person.prototype === p1.__proto__)
    console.log(Person.running) // 不能调用
    console.log(Person.prototype.running) // 可以调用

  </script>

</body>
</html>

ES6-class和function类的区别

可以把class创建的类当做是function创建的类的一种语法糖。但是在直接使用的方面是有不同之处。类里面的方法又叫静态方法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // function定义类
    function Person1(name, age) {
      this.name = name
      this.age = age
    }

    Person1.prototype.running = function() {}
    Person1.prototype.eating = function() {}

    var p1 = new Person1("why", 18)
    console.log(p1.__proto__ === Person1.prototype)
    console.log(Person1.prototype.constructor)
    console.log(typeof Person1) // function

    // 不同点: 作为普通函数去调用
    Person1("abc", 100)

    // class定义类
    class Person2 {
      constructor(name, age) {
        this.name = name
        this.age = age
      }

      running() {}
      eating() {}
    }

    var p2 = new Person2("kobe", 30)
    console.log(p2.__proto__ === Person2.prototype)
    console.log(Person2.prototype.constructor)
    console.log(typeof Person2)

    // 不同点: class定义的类, 不能作为一个普通的函数进行调用
    Person2("cba", 0)

  </script>

</body>
</html>

ES6-对象访问器方法的编写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 针对对象
    // 方式一: 描述符
    // var obj = {
      // _name: "why"
    // }
    // Object.defineProperty(obj, "name", {
    //   configurable: true,
    //   enumerable: true,
    //   set: function() {
    //   },
    //   get: function() {
    //   }
    // })

    // 方式二: 直接在对象定义访问器
    // 监听_name什么时候被访问, 什么设置新的值
    var obj = {
      _name: "why",
      // setter方法
      set name(value) {
        this._name = value
      },
      // getter方法
      get name() {
        return this._name
      }
    }

    obj.name = "kobe"
    console.log(obj.name)

  </script>

</body>
</html>

ES6-类的访问器方法的编写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 1.访问器的编写方式
    // class Person {
    //   // 程序员之间的约定: 以_开头的属性和方法, 是不在外界访问
    //   constructor(name, age) {
    //     this._name = name
    //   }

    //   set name(value) {
    //     console.log("设置name")
    //     this._name = value
    //   }

    //   get name() {
    //     console.log("获取name")
    //     return this._name
    //   }
    // }

    // var p1 = new Person("why", 18)
    // p1.name = "kobe"
    // console.log(p1.name)
    // // console.log(p1._name)

    // var p2 = new Person("james", 25)
    // console.log(p2.name)


    // 2.访问器的应用场景
    class Rectangle {
      constructor(x, y, width, height) {
        this.x = x
        this.y = y
        this.width = width
        this.height = height
      }

      get position() {
        return { x: this.x, y: this.y }
      }

      get size() {
        return { width: this.width, height: this.height }
      }
    }

    var rect1 = new Rectangle(10, 20, 100, 200)
    console.log(rect1.position)
    console.log(rect1.size)

  </script>

</body>
</html>

ES6-类的静态方法的编写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    // function Person() {}
    // // 实例方法
    // Person.prototype.running = function() {}
    // // 类方法
    // Person.randomPerson = function() {}

    // var p1 = new Person()
    // p1.running()
    // Person.randomPerson()

    // class定义的类
    var names = ["abc", "cba", "nba", "mba"]
    class Person {
      constructor(name, age) {
        this.name = name
        this.age = age
      }

      // 实例方法
      running() {
        console.log(this.name + " running~")
      }
      eating() {}

      // 类方法(静态方法)
      static randomPerson() {
        console.log(this)
        var randomName = names[Math.floor(Math.random() * names.length)]
        return new this(randomName, Math.floor(Math.random() * 100))
      }
    }

    var p1 = new Person()
    p1.running()
    p1.eating()
    var randomPerson = Person.randomPerson()
    console.log(randomPerson)

  </script>

</body>
</html>

ES6-通过extends实现继承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    // 定义父类
    class Person {
      constructor(name, age) {
        this.name = name
        this.age = age
      }

      running() {
        console.log("running~")
      }
      eating() {
        console.log("eating~")
      }

    }

    class Student extends Person {
      constructor(name, age, sno, score) {
        // this.name = name
        // this.age = age
        super(name, age)
        this.sno = sno
        this.score = score
      }

      // running() {
      //   console.log("running~")
      // }
      // eating() {
      //   console.log("eating~")
      // }

      studying() {
        console.log("studying~")
      }
    }

    var stu1 = new Student("why", 18, 111, 100)
    stu1.running()
    stu1.eating()
    stu1.studying()

    
    class Teacher extends Person {
      constructor(name, age, title) {
        // this.name = name
        // this.age = age
        super(name, age)
        this.title = title
      }

      // running() {
      //   console.log("running~")
      // }
      // eating() {
      //   console.log("eating~")
      // }

      teaching() {
        console.log("teaching~")
      }
    }


  </script>

</body>
</html>

ES6-super关键字的其他用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    class Animal {
      running() {
        console.log("running")
      }
      eating() {
        console.log("eating")
      }

      static sleep() {
        console.log("static animal sleep")
      }
    }

    class Dog extends Animal {
      // 子类如果对于父类的方法实现不满足(继承过来的方法)
      // 重新实现称之为重写(父类方法的重写)
      running() {
        console.log("dog四条腿")
        // 调用父类的方法
        super.running()
        // console.log("running~")
        // console.log("dog四条腿running~")
      }

      static sleep() {
        console.log("趴着")
        super.sleep()
      }
    }

    var dog = new Dog()
    dog.running()
    dog.eating()

    Dog.sleep()

  </script>

</body>
</html>

继承自内置类的用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 1.创建一个新的类, 继承自Array进行扩展
    class HYArray extends Array {
      get lastItem() {
        return this[this.length - 1]
      }

      get firstItem() {
        return this[0]
      }
    }

    var arr = new HYArray(10, 20, 30)
    console.log(arr)
    console.log(arr.length)
    console.log(arr[0])
    console.log(arr.lastItem)
    console.log(arr.firstItem)

    // 2.直接对Array进行扩展
    Array.prototype.lastItem = function() {
      return this[this.length - 1]
    }

    var arr = new Array(10, 20, 30)
    console.log(arr.__proto__ === Array.prototype)
    console.log(arr.lastItem())

    // 函数apply/call/bind方法 -> Function.prototype

  </script>

</body>
</html>

ES6-类的混入mixin的用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // JavaScript只支持单继承(不支持多继承)
    function mixinAnimal(BaseClass) {
      return class extends BaseClass {
        running() {
          console.log("running~")
        }
      }
    }

    function mixinRunner(BaseClass) {
      return class extends BaseClass {
        flying() {
          console.log("flying~")
        }
      }
    }

    class Bird {
      eating() {
        console.log("eating~")
      }
    }

    // var NewBird = mixinRunner(mixinAnimal(Bird))
    class NewBird extends mixinRunner(mixinAnimal(Bird)) {
    }
    var bird = new NewBird()
    bird.flying()
    bird.running()
    bird.eating()

  </script>

</body>
</html>

ES6-ES6中的class转ES5代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    // class Person {
    //   constructor(name, age) {
    //     this.name = name
    //     this.age = age
    //   }

    //   running() {}
    //   eating() {}

    //   static randomPerson() {}
    // }

    // var p1 = new Person()
  </script>
  <script src="./js/es5_code01.js"></script>

</body>
</html>

可以去babel官网打开try out，然后改default。

ES6-Java面向对象的多态理解

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 继承是多态的前提
    // shape形状
    class Shape {
      getArea() {}
    }

    class Rectangle extends Shape {
      constructor(width, height) {
        super()
        this.width = width
        this.height = height
      }

      getArea() {
        return this.width * this.height
      }
    }

    class Circle extends Shape {
      constructor(radius) {
        super()
        this.radius = radius
      }

      getArea() {
        return this.radius * this.radius * 3.14
      }
    }

    var rect1 = new Rectangle(100, 200)
    var rect2 = new Rectangle(20, 30)
    var c1 = new Circle(10)
    var c2 = new Circle(15)

    // 表现形式就是多态
    /*
      在严格意义的面向对象语言中, 多态的是存在如下条件的:
        1.必须有继承(实现接口)
        2.必须有父类引用指向子类对象
    */
    function getShapeArea(shape) {
      console.log(shape.getArea())
    }

    getShapeArea(rect1)
    getShapeArea(c1)

    
    var obj = {
      getArea: function() {
        return 10000
      }
    }

    getShapeArea(obj)
    getShapeArea(123)

  </script>

</body>
</html>

ES6-JS面向对象的多态理解

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // 多态的表现: JS到处都是多态
    function sum(a1, a2) {
      return a1 + a2
    }

    sum(20, 30)
    sum("abc", "cba")
    
    // 多态的表现
    var foo = 123
    foo = "Hello World"
    console.log(foo.split())
    foo = {
      running: function() {}
    }
    foo.running()
    foo = []
    console.log(foo.length)

  </script>

</body>
</html>

ES6-对象字面量的增强写法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    /*
      1.属性的增强
      2.方法的增强
      3.计算属性名的写法
    */

    var name = "why"
    var age = 18

    var key = "address" + " city"

    var obj = {
      // 1.属性的增强
      name,
      age,

      // 2.方法的增强
      running: function() {
        console.log(this)
      },
      swimming() {
        console.log(this)
      },
      eating: () => {
        console.log(this)
      },

      // 3.计算属性名
      [key]: "广州"
    }

    obj.running()
    obj.swimming()
    obj.eating()

    function foo() {
      var message = "Hello World"
      var info = "my name is why"

      return { message, info }
    }

    var result = foo()
    console.log(result.message, result.info)

  </script>

</body>
</html>

ES6-数组和对象的解构语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    var names = ["abc", "cba", undefined, "nba", "mba"]


    // 1.数组的解构
    // var name1 = names[0]
    // var name2 = names[1]
    // var name3 = names[2]
    // 1.1. 基本使用
    // var [name1, name2, name3] = names
    // console.log(name1, name2, name3)

    // 1.2. 顺序问题: 严格的顺序
    // var [name1, , name3] = names
    // console.log(name1, name3)

    // 1.3. 解构出数组
    // var [name1, name2, ...newNames] = names
    // console.log(name1, name2, newNames)

    // 1.4. 解构的默认值
    var [name1, name2, name3 = "default"] = names
    console.log(name1, name2, name3)


    // 2.对象的解构
    var obj = { name: "why", age: 18, height: 1.88 }
    // var name = obj.name
    // var age = obj.age
    // var height = obj.height
    // 2.1. 基本使用
    // var { name, age, height } = obj
    // console.log(name, age, height)

    // 2.2. 顺序问题: 对象的解构是没有顺序, 根据key解构
    // var { height, name, age } = obj
    // console.log(name, age, height)


    // 2.3. 对变量进行重命名
    // var { height: wHeight, name: wName, age: wAge } = obj
    // console.log(wName, wAge, wHeight)

    // 2.4. 默认值
    var { 
      height: wHeight, 
      name: wName, 
      age: wAge, 
      address: wAddress = "中国"
    } = obj
    console.log(wName, wAge, wHeight, wAddress)

    // 2.5. 对象的剩余内容
    var {
      name,
      age,
      ...newObj
    } = obj
    console.log(newObj)


    // 应用: 在函数中(其他类似的地方)
    //  function getPosition(position)直接把position解构成{ x, y }，方便拿对象里面的参数
    function getPosition({ x, y }) {
      console.log(x, y)
    }

    getPosition({ x: 10, y: 20 })
    getPosition({ x: 25, y: 35 })

    function foo(num) {}

    foo(123)

  </script>

</body>
</html>

补充-手写apply-call函数实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // new Function()
    // foo.__proto__ === Function.prototype
    function foo(name, age) {
      console.log(this, name, age)
    }

    // foo函数可以通过apply/call
    // foo.apply("aaa", ["why", 18])
    // foo.call("bbb", "kobe", 30)

    // 1.给函数对象添加方法: hyapply
    Function.prototype.hyapply = function(thisArg, otherArgs) {
      // this -> 调用的函数对象
      // thisArg -> 传入的第一个参数, 要绑定的this
      // console.log(this) // -> 当前调用的函数对象
      // this.apply(thisArg)

      thisArg.fn = this

      // 1.获取thisArg, 并且确保是一个对象类型
      thisArg = (thisArg === null || thisArg === undefined)? window: Object(thisArg)

      // thisArg.fn = this
      Object.defineProperty(thisArg, "fn", {
        enumerable: false,
        configurable: true,
        value: this
      })
      thisArg.fn(...otherArgs)

      delete thisArg.fn
    }

    // foo.hyapply({ name: "why" }, ["james", 25])
    // foo.hyapply(123, ["why", 18])
    // foo.hyapply(null, ["kobe", 30])


    // 2.给函数对象添加方法: hycall
    Function.prototype.hycall = function(thisArg, ...otherArgs) {
      // 1.获取thisArg, 并且确保是一个对象类型
      thisArg = (thisArg === null || thisArg === undefined)? window: Object(thisArg)

      // thisArg.fn = this
      Object.defineProperty(thisArg, "fn", {
        enumerable: false,
        configurable: true,
        value: this
      })
      thisArg.fn(...otherArgs)

      delete thisArg.fn
    }
    
    foo.hycall({ name: "why", fn: "abc" }, "james", 25)
    foo.hycall(123, "why", 18)
    foo.hycall(null, "kobe", 30)


  </script>

</body>
</html>

补充-手写apply-call抽取封装

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // new Function()
    // foo.__proto__ === Function.prototype
    function foo(name, age) {
      console.log(this, name, age)
    }

    // foo函数可以通过apply/call
    // foo.apply("aaa", ["why", 18])
    // foo.call("bbb", "kobe", 30)

    // 1.封装思想
    // 1.1.封装到独立的函数中
    function execFn(thisArg, otherArgs, fn) {
      // 1.获取thisArg, 并且确保是一个对象类型
      thisArg = (thisArg === null || thisArg === undefined)? window: Object(thisArg)

      // thisArg.fn = this
      Object.defineProperty(thisArg, "fn", {
        enumerable: false,
        configurable: true,
        value: fn
      })

      // 执行代码
      thisArg.fn(...otherArgs)

      delete thisArg.fn
    }

    // 1.2. 封装原型中
    Function.prototype.hyexec = function(thisArg, otherArgs) {
      // 1.获取thisArg, 并且确保是一个对象类型
      thisArg = (thisArg === null || thisArg === undefined)? window: Object(thisArg)

      // thisArg.fn = this
      Object.defineProperty(thisArg, "fn", {
        enumerable: false,
        configurable: true,
        value: this
      })
      thisArg.fn(...otherArgs)

      delete thisArg.fn
    }


    // 1.给函数对象添加方法: hyapply
    Function.prototype.hyapply = function(thisArg, otherArgs) {
      this.hyexec(thisArg, otherArgs)
    }
    // 2.给函数对象添加方法: hycall
    Function.prototype.hycall = function(thisArg, ...otherArgs) {
      this.hyexec(thisArg, otherArgs)
    }

    foo.hyapply({ name: "why" }, ["james", 25])
    foo.hyapply(123, ["why", 18])
    foo.hyapply(null, ["kobe", 30])
    
    foo.hycall({ name: "why" }, "james", 25)
    foo.hycall(123, "why", 18)
    foo.hycall(null, "kobe", 30)


  </script>

</body>
</html>

补充-手写bind函数的实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    // apply/call
    function foo(name, age, height, address) {
      console.log(this, name, age, height, address)
    }

    // Function.prototype
    // var newFoo = foo.bind({ name: "why" }, "why", 18)
    // newFoo(1.88)

    // 实现hybind函数
    Function.prototype.hybind = function(thisArg, ...otherArgs) {
      // console.log(this) // -> foo函数对象
      thisArg = thisArg === null || thisArg === undefined ? window: Object(thisArg)
      Object.defineProperty(thisArg, "fn", {
        enumerable: false,
        configurable: true,
        writable: false,
        value: this
      })

      return (...newArgs) => {
        // var allArgs = otherArgs.concat(newArgs)
        var allArgs = [...otherArgs, ...newArgs]
        thisArg.fn(...allArgs)
      }
    }

    var newFoo = foo.hybind("abc", "kobe", 30)
    newFoo(1.88, "广州市")
    newFoo(1.88, "广州市")
    newFoo(1.88, "广州市")
    newFoo(1.88, "广州市")

  </script>

</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/742723.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ChatGPT助力校招----面试问题分享(十一)

ChatGPT助力校招----面试问题分享(十一)

1 ChatGPT每日一题&#xff1a;PCB布线&#xff0c;高速信号线走直角的后果 问题&#xff1a;PCB布线&#xff0c;高速信号线走直角的后果 ChatGPT&#xff1a;对于高速信号线来说&#xff0c;最好避免使用直角布线。直角布线会引入反射和信号损耗&#xff0c;从而导致信号完…
阅读更多...
IP网络基础

IP网络基础

文章目录 数据通信基础数据流方向&#xff08;工作模式&#xff09;网络和Internet简介网络&#xff1a;互联网&#xff1a;总结&#xff1a; 协议和标准标准化组织标准化组织——IETF标准的种类 IP网络基本架构 lP网络在现代社会中有着越来越重要的地位。本课程将介绍数据通信…
阅读更多...
详解c++---c++11（上）

详解c++---c++11（上）

目录标题 {}初始化decltype和autonullptr范围forfinal什么是左值和右值左值引用和右值引用右值引用的意义右值引用的使用const右值引用万能引用默认移动构造和移动赋值 {}初始化 在c98中允许使用{}对数组或者结构体元素进行统一的列表初始值设定&#xff0c;比如说下面有个结构…
阅读更多...
使用USB转TTL线连接树莓派4B

使用USB转TTL线连接树莓派4B

一般我们刷完树莓派系统后&#xff0c;都是通过连接鼠标键盘及显示器来进行操作&#xff0c;当我们开启SSH功能后我们才可以通过ssh客户端进行远程访问&#xff0c;那么是否有更方便的方式进行连接&#xff0c;并且不需连接外部设备进行操作呢&#xff1f; 串口通信 当然可以…
阅读更多...
python3+requests+unittest实战系列【一】

python3+requests+unittest实战系列【一】

1.环境准备 python3 pycharm编辑器 2.框架目录展示 &#xff08;该套代码只是简单入门&#xff0c;有兴趣的可以不断后期完善&#xff09; &#xff08;1&#xff09;run.py主运行文件&#xff0c;运行之后可以生成相应的测试报告&#xff0c;并以邮件形式发送&#xff1b;…
阅读更多...
探索现代设备管理系统的功能和优势

探索现代设备管理系统的功能和优势

在现代工业环境中&#xff0c;设备管理对于企业的生产效率和可靠性至关重要。随着科技的不断发展&#xff0c;现代设备管理系统为企业提供了更多的优势和功能&#xff0c;以帮助企业实现设备全生命周期管理和优化运营。本文将探索现代设备管理系统的优势和功能&#xff0c;以帮…
阅读更多...
PicGo搭建Gitee图床

PicGo搭建Gitee图床

文章目录 1、创建Gitee仓库2. 填写仓库信息3、生成私人令牌3.1、点击个人设置3.2、点击私人令牌3.3、生成新令牌3.4、密码验证3.5、记录个人令牌 4、PicGo配置4.1、插件设置&#xff0c;安装gitee插件4.2、PicGo图床配置为gitee并设置详细信息 5、特殊问题5.1、上传失败原因15.…
阅读更多...
Vue3 +Echarts5 可视化大屏——屏幕适配

Vue3 +Echarts5 可视化大屏——屏幕适配

项目基于Vue3 Echarts5 开发&#xff0c;屏幕适配是使用 scale 方案 Echarts组件按需引入&#xff0c;减少打包体积 地图组件封装&#xff08;全国&省份地图按需加载&#xff09; 效果图&#xff1a; 屏幕适配 大屏适配常用的方案有 rem vw/vh 和 scale 。 rem vw/vh …
阅读更多...
C++之虚函数和纯虚函数多态调用区别(一百五十六)

C++之虚函数和纯虚函数多态调用区别(一百五十六)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…
阅读更多...
中值滤波的运用

中值滤波的运用

需求&#xff1a; c#、WPF开发&#xff0c;在界面上画不规则的图形区域&#xff0c;并提取区域内的point 实现方式&#xff1a; 1. 用 InkCanvas控件作为画布&#xff0c;用path画不规则图形 2. 将InkCanvas控件内的内容保存为jpg图片 3. 通过判断区域的颜色&#xff0c;从而得…
阅读更多...
离散化模板（附 区间和 解决方法）

离散化模板（附 区间和 解决方法）

目录 用于解决的问题类型&#xff1a; 作用&#xff1a; 使用到的函数&#xff1a; 常用模板&#xff1a; 例题引入&#xff1a; 题目&#xff1a; 解题思路&#xff1a; 代码详解&#xff1a; 用于解决的问题类型&#xff1a; 对于值域比较大&#xff0c;但个数比较少…
阅读更多...
python爬虫之playWright解密传参

python爬虫之playWright解密传参

参考文章&#xff1a; Python和js实现逆向之加密参数破解_js btoa python_biyezuopinvip的博客-CSDN博客 JS逆向——借助playwright实现逆向_lishuangbo0123的博客-CSDN博客 简单方便的 JavaScript 逆向辅助模拟方法_token 自己整理的代码 from playwright.sync_api impor…
阅读更多...
数组、指针练习题及解析（含笔试题目讲解）（二）

数组、指针练习题及解析（含笔试题目讲解）（二）

接上文&#xff0c;我们继续笔试题目讲解。 目录 笔试题3 笔试题4 笔试题5 笔试题6 笔试题7 面试题8 总结 笔试题3 int main() {int a[4] { 1, 2, 3, 4 };int *ptr1 (int *)(&a 1);int *ptr2 (int *)((int)a 1);printf( "%x,%x", ptr1[-1], *ptr2);…
阅读更多...
postman 携带时间戳及md5加密预处理

postman 携带时间戳及md5加密预处理

// 获取全局变量 uid postman.getGlobalVariable(“uid”) sid postman.getGlobalVariable(“sid”) //设置当前时间戳 postman.setGlobalVariable(“time”,Math.round(new Date().getTime())); time postman.getGlobalVariable(‘time’) //设置KEY_WORD为全局变量 post…
阅读更多...
C# SolidWorks 二次开发 -从零开始创建一个插件(1)

C# SolidWorks 二次开发 -从零开始创建一个插件(1)

学习内容:从零开始定制一个SolidWorks插件 作为了一个职业的二次开发人员&#xff0c;我曾经创建插件"无数"。但从未像今天这篇文章这样&#xff0c;从空项目开始&#xff0c;之前的文章中我有介绍&#xff0c;要么使用SolidWorks API模板&#xff0c;要么使用了第三…
阅读更多...
小马哥JAVA实战营-JDBC

小马哥JAVA实战营-JDBC

小马哥是一个非常牛逼的技术大牛&#xff0c;最近在看他的课&#xff0c;感兴趣也可以关注一波小马哥&#xff08;不是引流&#xff0c;是真的很推荐&#xff09;&#xff1a; 小马哥B站 JDBC规范文档 jdbc规范文档下载链接 JDBC的主要特征 面向数据表行列编程驱动程序需要…
阅读更多...
《3.linux应用编程和网络编程-第8部分-3.8.网络基础》 3.8.1.网络通信概述 3.8.3.网络通信基础知识2

《3.linux应用编程和网络编程-第8部分-3.8.网络基础》 3.8.1.网络通信概述 3.8.3.网络通信基础知识2

进程间通信&#xff1a; 管道 、 信号量、 共享内存&#xff0c; 技术多&#xff0c;操作麻烦 线程就是解决 进程间 通信 麻烦的事情&#xff0c;这是线程的 优势 3.8.1.网络通信概述 3.8.1.1、从进程间通信说起&#xff1a;网络域套接字socket&#xff0c;网络通信其实就是位…
阅读更多...
2023.7月最新版idea安装Jrebel实现热部署，可解决后端启动等待时间过长问题

2023.7月最新版idea安装Jrebel实现热部署，可解决后端启动等待时间过长问题

2023.7最新版idea热部署配置 一 下载jrebel插件二 激活我使用的方法 三 配置方式1 设置自动编译2 设置 compiler.automake.allow.when.app.running3 勾选项目&#xff0c;然后以Rebel方式启动 4 Settings查看Activation情况四 报错解决1 启动失败 2 端口被占用 五 总结 一 下载…
阅读更多...
JS 的 new 到底是干什么的？

JS 的 new 到底是干什么的？

大部分讲 new 的文章会从面向对象的思路讲起&#xff0c;但是我始终认为&#xff0c;在解释一个事物的时候&#xff0c;不应该引入另一个更复杂的事物。 今天我从「省代码」的角度来讲 new。 --------------------------- 想象我们在制作一个策略类战争游戏&#xff0c;玩家…
阅读更多...
网络编程【网络编程基本概念、 网络通信协议、IP地址 、 TCP协议和UDP协议】(一)-全面详解（学习总结---从入门到深化）

网络编程【网络编程基本概念、 网络通信协议、IP地址 、 TCP协议和UDP协议】(一)-全面详解（学习总结---从入门到深化）

目录 网络编程基本概念 网络通信协议 IP地址 TCP协议和UDP协议 网络编程基本概念 计算机网络 计算机网络是指将地理位置不同的具有独立功能的多台计算机及其 外部设备&#xff0c;通过通信线路连接起来&#xff0c;在网络操作系统&#xff0c;网络管理软 件及网络通信协议的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023