weixin_30394333

前端学习:JS(面向对象)代码笔记

前端学习：JS面向对象知识学习（图解）

创建类和对象

创建对象方式1调用Object函数

<body>
body>
<script type="text/javascript">

        //新建英雄:刘备
        var hero=new Object();
        hero.name='刘备';
        hero.blood=100;
        hero.weapon='双股剑';
        hero.attack=function(){
            return this.name+'使用'+this.weapon+'发起了攻击';
        };
        
        alert(hero.attack());
        
        
        var hero2=new Object();
        hero2.name='关羽';
        hero2.blood=100;
        hero2.weapon='青龙偃月刀';
        hero2.attack=function(){
            return this.name+'使用'+this.weapon+'发起了攻击';
        };
        
        alert(hero2.attack());
        
script>

View Code

创建对象方式2使用字面形式

<body>
body>
<script type="text/javascript">

         var stu1={
              name:'张三',
              age:28,
              sex:'男',
              show: function(){
                  return '我的名字是:'+this.name+'\n我的性别是:'+this.sex+'\n我的年龄是:'+this.age;
              }
         };
         
         alert( stu1.show()  );
         
         var stu2={
                 name:'李四',
                 age:18,
                 sex:'女',
                 show: function(){
                     return '我的名字是:'+this.name+'\n我的性别是:'+this.sex+'\n我的年龄是:'+this.age;
                 }
         };
            
         alert( stu2.show()  );
        
script>

View Code

创建对象方式3使用工厂函数创建多个对象

<body>
body>
<script type="text/javascript">

         //形参
         var createPerson=function(name,age,sex){
                 var person = new Object();
                 person.name=name;
                 person.age=age;
                 person.sex=sex;
                 person.show=function(){
                     return '我的名字是:'+this.name+'\n我的性别是:'+this.sex+'\n我的年龄是:'+this.age;
                 }
                 return person;
         };
         
         
         var p1=createPerson('张三',18,'男');
         var p2=createPerson('李四',19,'男');
         var p3=createPerson('王五',20,'男');
         
         alert(p1.show());
         alert(p2.show());
         alert(p3.show());


script>

View Code

创建对象方式4调用构造函数创建对象

<body>
body>
<script type="text/javascript">

        //定义一个Person类
        function Person(name,age,sex){
             //this代表的是当前对象
             
             //当前对象的名字=需要设置的名字
             this.name=name;
             this.age=age;
             this.sex=sex;
             
             this.show=function(){
                 return '我的名字是:'+this.name+'\n我的性别是:'+this.sex+'\n我的年龄是:'+this.age;
             }
             
        }

        //创建三个对象
        var p1=new Person('张三',27,'男');
        var p2=new Person('李四',28,'男');
        var p3=new Person('王五',29,'男');
        
        
        alert(p1.show());
        alert(p2.show());
        alert(p3.show());
        
        console.log(p1.show===p2.show);
        console.log(p1.show===p3.show);
         

script>

View Code

静态成员和实例成员

<body>
body>
<script type="text/javascript">

        //静态成员    类名.成员名  
        /*
        var MyMath={
             PI:3.1415,
             MAX:function(){
                 return 9999;
             },
             MIN:function(){
                 return 1;
             }
        };
        
        
        console.log(MyMath.PI);
        console.log(MyMath.MAX());
        console.log(MyMath.MIN());
        */                
        //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        
        //实例成员   对象名.成员名 
        function Student(name,age,sex){
            
            this.name=name;
            this.age=age;
            this.sex=sex;
            
            this.show=function(){
                return 'name='+name+'\nage='+age+'\nsex='+sex;
            }
        }
        
        //通过Student类的构造函数创建一个具体的实例对象
        var stu1=new Student('小红帽',18,'女');
        var stu2=new Student('大灰狼',28,'男');
        
        
        console.log('姓名:'+stu1.name );
        console.log('姓名:'+stu2.show()  );     
        
script>

View Code

原型

使用全局函数

<body>
  
body>
<script type="text/javascript">

            function Student(name,age,sex){
                
                this.name=name;
                this.age=age;
                this.sex=sex;
                this.show=show;
                
            }
            //全局函数
            var show=function(){
                return 'name='+name+'\nage='+age+'\nsex='+sex;
            };
            
            var stu1=new Student("DICK",22,"男");
            var stu2=new Student("DICK",22,"男");
            
            //比较的是这两个对象中show方法保存的内存地址
            console.log(stu1.show===stu2.show);      //true

script>

View Code

使用构造函数的原型解决方法的重复创建问题

<body>
  
body>
<script type="text/javascript">

            //得到一个结论:以后我们在定义一个类的函数的时候,不要定义在该类的构造函数中,应该
            //定在该类的构造函数的原型中,这样更加高效一些.
         

            //Student类的构造函数
            function Student(name,age,sex){
                
                this.name=name;
                this.age=age;
                this.sex=sex;
                
            }
            
            //向Student类的构造函数的原型中插入show方法
            Student.prototype.show=function(){
                return '在原型中生成的:   name='+this.name+'\nage='+this.age+'\nsex='+this.sex;
            };
    
            
            var stu1=new Student("DICK",22,"男");
            var stu2=new Student("KING",22,"男");
            
            console.log(stu1.show());
            console.log(stu2.show());
            
            //比较的是这两个对象中show方法保存的内存地址
            console.log(stu1.show===stu2.show);      //true
            

script>

View Code

对象的原型

<body>
body>
<script type="text/javascript">

            //Student类的构造函数
            function Student(name,age,sex){
                
                this.name=name;
                this.age=age;
                this.sex=sex;
                this.eat=function(){
                    console.log('我在构造函数中吃东西');
                }            
                
            }
            
            Student.prototype.eat=function(){
                console.log('我在构造函数的原型中吃东西');
            }    
            
            //构造方法的原型      Student.prototype 
            //对象的原型          对象名.__proto__
            var stu=new Student("KING",22,"男");
            
            //我们发现构造方法的原型和对象的原型指向的是同一个地址 
            //console.log(stu.__proto__===Student.prototype);
            
            
            
            //当构造函数中和构造函数的原型中同时定义了同一个方法,这个时候会调用构造函数中的eat方法.
            stu.eat();
            
script>

View Code

属性的查找规则

<body>
body>
<script type="text/javascript">
        //Student类的构造函数
        function Student(name,age,sex){
            
            this.name=name;
            this.age=age;
            this.sex=sex;
            
        }
        
        //在Student类的构造函数的原型中存入属性
        Student.prototype.txt='xxx';
        
        var stu1=new Student("KING",22,"男");
        //该段代码并没有修改掉原型中txt的值,是在在stu1对象中新建了一个txt属性=abc
        //stu1.txt='abc';
        Student.prototype.txt='ABC';
        var stu2=new Student("KING",22,"男");
        
        console.log('stu1='+stu1.txt);    //abc
        console.log('stu2='+stu2.txt);    //xxx    
        
script>

View Code

在原型中写入多个方法属性-精简写法

<body>
body>
<script type="text/javascript">

     /*
     function Person(){
         
     }
     Person.prototype.eat=function(){
         console.log('eat');
     }
     
     Person.prototype.run=function(){
         console.log('run');
     }
     
     Person.prototype.sleep=function(){
         console.log('sleep');
     }
     
     Person.prototype.from='地球 ';
     
     var p1=new Person();
     p1.eat();
     p1.run();
     p1.sleep();
     */

     function Person(){
         
     }
     Person.prototype={
            from: '地球',
            eat: function(){
                 console.log('eat');
            },
            run: function(){
                    console.log('run');
               },
               sleep: function(){
                 console.log('sleep');
            }
     };
     
     var p1=new Person();
     p1.eat();
     p1.run();
     p1.sleep();
     alert(p1.from);
 
script>

View Code

原生对象的原型

<body>
body>
<script type="text/javascript">
        //Array类的对象
        var arr=[];  
        
        console.log(Array.prototype===Array.prototype);   //true
        //          对象的原型      构造函数的原型    
        console.log(arr.__proto__===Array.prototype);     //true
        
        console.log(Object.prototype===Array.prototype);  //false   
        
script>

View Code

拓展原生对象中原型的方法

<body>
body>
<script type="text/javascript">
        var arr=[21,22,43,67,12,34,20,10];
        console.log('排序前:  '+arr);
        arr.sort();
        console.log('排序后:  '+arr);
        
        //求出数组中所有的偶数的和
        //拓展Array类构造函数的原型中的方法: getSum()
        
        Array.prototype.getSum=function(){
            var sum=0;   
            for(var i=0;i<this.length;i++){
                if(this[i]%2==0){
                    sum+=this[i];
                }
            }
            return sum;
        }
        
        //错误的写法！！！！！！
        /*
        Array.prototype={
              getSum:function(){
                  var sum=0;   
                for(var i=0;i*/        
        
        console.log(arr.getSum());
        
script>

View Code

案例：随机生成方块

案例前的练习

Demo01（JS插入与使用）

<body>

body>
<script type="text/javascript" src="index1.js">script>
<script type="text/javascript" src="index2.js">script>
<script type="text/javascript" src="index3.js">script>
<script type="text/javascript">

       console.log(num1);
       console.log(num2);
       console.log(num3);
       fn1();
       fn2();
       fn3();
script>

View Code

index1.js

var num1=111;

function fn1(){
    alert('执行了fn1方法');
};

View Code

index2.js

var num2=222;

function fn2(){
    alert('执行了fn2方法');
};

View Code

index3.js

var num3=333;

function fn3(){
    alert('执行了fn3方法');
};

View Code

index（自调用函数）

<body>
body>

<script type="text/javascript" src="student.js">script>
<script type="text/javascript" src="superuser.js">script>


<script type="text/javascript">

        var stu={
            name:'张三',
            age:20,
            sex:'男孩子'
        };
            
            
        var stu1=new Student(stu);
        alert(stu1.show());


        
        
        
script>

View Code

student.js

//自调用函数
(function(){
    /*
    function Student(name,age,sex){
        this.name=name;
        this.age=age;
        this.sex=sex;
    };
    */
    
    
    function Student(options){
        options=options||{};
        this.name=options.name||'学生';
        this.age=options.age||18;
        this.sex=options.sex||'女';
        
        
    };
    
    Student.prototype.show=function(){
        return "name="+this.name+"\tage="+this.age+"\tsex="+this.sex;
    };

    
    //向外界暴露Student类的构造函数
    window.Student=Student;
    

})();

View Code

superuser.js

(function(){
    
    //超级管理员
    function SuperUser(name,age,sex){
        this.name=name;
        this.age=age;
        this.sex=sex;
    };

    SuperUser.prototype.show=function(){
        return "name="+this.name+"\tage="+this.age+"\tsex="+this.sex;
    };

View Code

随机生成方块

index.html

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<style type="text/css">
       div{
           height: 600px;
           width:600px;
           background-color: #C0C0C0;
       }
style>
head>

<body>
    <div id="container">
    div>
body>

<script type="text/javascript" src="tools.js">script>
<script type="text/javascript" src="box.js">script>
<script type="text/javascript" src="main.js">script>

html>

View Code

box.js

//自调用函数
(function(){
    
    //新建一个Box类
    function Box(map,options){
        options=options||{};
        this.height=options.height||20;
        this.width=options.width||20;
        this.x=options.x||0;
        this.y=options.y||0;
        this.backgroundColor=options.backgroundColor||'red';
        
        
        
        //新建一个div标签
        this.div=document.createElement('div');
        map.appendChild(this.div);
        this.map=map;
        
        //新建div的标签并且设置样式
        this.init();
    
    };
    

    Box.prototype.init=function(){
        
        var div=this.div;
        //设置div的样式
        div.style.backgroundColor=this.backgroundColor;
        div.style.height=this.height+'px';
        div.style.width=this.width+'px';
        div.style.x=this.x+'px';
        div.style.y=this.y+'px';
        //让我们新建的格子脱离文档流
        div.style.position='absolute';
        
        
        //随机生成小格子的X轴和Y轴的坐标
        this.Random();
        
        
        
    };
    
    
    Box.prototype.Random=function(){
        
    this.div.style.left=Tools.getRandom(1,this.map.offsetWidth/this.width-1)*this.width+'px';
        this.div.style.top=Tools.getRandom(1,this.map.offsetHeight/this.height-1)*this.height+'px';
        var r=Tools.getRandom(0,255);
        var g=Tools.getRandom(0,255);
        var b=Tools.getRandom(0,255);
        this.div.style.backgroundColor='rgb('+r+','+g+','+b+')';
        
        
    }
    

    //对外暴露Box的构造函数
    window.Box=Box;

    
})();

View Code

main.js

(function(){
    
    
    var elements=[];
    var container=document.getElementById('container');
    for(var i=0;i<10;i++){
        var box=new Box(container);
        elements.push(box);
    }
    setInterval(function(){
        
        for(var i=0;ielements[i].Random();
        }
    },1000);
    
    
})();

View Code

tools.js

var Tools={
    //随机生成[0,600]之间随机数整数
    getRandom:function(min,max){
          min = Math.ceil(min);
          max = Math.floor(max);
          return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
    }        
        
};

View Code

案例：贪吃蛇

更新中。。。

因为后面蛇的死亡和删除没有做好，之后找时间补充完整。。。

index.html

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<style type="text/css">

       *{
           margin: 0px;
           padding: 0px;
       }
       #map{
            height: 800px;
            width: 800px;
            background-color: #C0C0C0;
       }
style>
head>

<body>
      <div id="map">
      div>
body>
<script type="text/javascript" src="tools.js">script>
<script type="text/javascript" src="food.js">script>
<script type="text/javascript" src="snake.js">script>
<script type="text/javascript" src="game.js">script>
<script type="text/javascript" src="main.js">script>



html>

View Code

food.js

(function(){
    
    
    //保存生成的食物的数组
    var elements=[];
    
    //新建食物类的构造函数
    function Food(map,options){
        
        options=options||{};
        this.height=options.height||20;
        this.width=options.width||20;
        this.x=options.x||0;
        this.y=options.y||0;
        this.backgroundColor=options.backgroundColor||'red';
        
        //新建一个食物div
        this.div=document.createElement('div');
        map.appendChild(this.div);
        this.map=map;
        //将新建的食物存进食物数组中
        elements.push(this.div);
        
        
        //渲染食物的样式
        this.render();
    }
    
    
    
    Food.prototype.render=function(){
        
        this.div.style.height=this.height+'px';
        this.div.style.width=this.width+'px';
        this.div.style.backgroundColor=this.backgroundColor;
        this.div.style.position='absolute';
        this.random(map);
    }
    
    
    //给食物随机生成坐标
    Food.prototype.random=function(map){
        
        this.div.style.left=Tools.getRandom(0,map.offsetWidth/this.width-1)*this.width+'px';
        this.div.style.top=Tools.getRandom(0,map.offsetHeight/this.height-1)*this.height+'px';
        
    };
    
    
    
    //删除食物数组中之前生成的食物
    function remove(){
        for(var i=elements.length-1;i>=0;i--){
            elements.splice(elements[i],1);
        }
    }
    
    
    //对外暴露食物类的构造函数
    window.Food=Food;

    
    
})();

View Code

game.js

(function(){
    
    //控制整个游戏执行的逻辑
    function Game(map){
          this.food=new Food(map);
          this.snake=new Snake(map); 
    }
    
    
    
    Game.prototype.start=function(){
        
        //将食物和蛇渲染进地图中
        this.food.render(this.map);
        this.snake.render(this.map);
        
        
        
        
        //让整个蛇按照方向移动
        //一旦触碰到墙壁游戏结束
        //一旦吃到食物,蛇节部分就要增加一节
        
    };
    
    
    window.Game=Game;
    
    
    
})();

View Code

main.js

var map=document.getElementById('map');
var game=new Game(map);
game.start();

View Code

snake.js

(function(){
    
    //保存蛇的数组
    var elements=[];
    function Snake(map,options){
        
        options=options||{};
        this.height=options.height||20;
        this.width=options.width||20;
        //保存蛇的主体部分
        this.body=[
            {x:3,y:2,color:'red'},
            {x:2,y:2,color:'blue'},
            {x:1,y:2,color:'blue'},
        ];
        this.map=map;
        
        //将蛇渲染进地图map
        this.render();
    }
    
    
    Snake.prototype.render=function(){
        for(var i=0;i<this.body.length;i++){
            var div=document.createElement('div');
            this.map.appendChild(div);
            //将蛇的部分保存到elements数组中
            elements.push(div);
            div.style.height=this.height+'px';
            div.style.width=this.width+'px';
            div.style.position='absolute';
            div.style.left=this.body[i].x*this.width+'px';
            div.style.top=this.body[i].y*this.height+'px';
            div.style.backgroundColor=this.body[i].color;
            
        }
        
        
    };
    
    
    
    //对外暴露蛇的构造函数
    window.Snake=Snake;
    
    
    
})();

View Code

tools.js

var Tools={
    //随机生成[0,600]之间随机数整数
    getRandom:function(min,max){
          min = Math.ceil(min);
          max = Math.floor(max);
          return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
    }        
        
};

View Code

转载于:https://www.cnblogs.com/cainiao-chuanqi/p/11592920.html

element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
c++ 的iostream 和 c++的stdio的区别和联系黄卷青灯77 c++算法开发语言 iostream stdio
在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数广龙宇一起学Rust #Rust设计模式 rust 设计模式开发语言
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
C#中使用split分割字符串互联网打工人no1 c#
1、用字符串分隔：usingSystem.Text.RegularExpressions;stringstr="aaajsbbbjsccc";string[]sArray=Regex.Split(str,"js",RegexOptions.IgnoreCase);foreach(stringiinsArray)Response.Write(i.ToString()+"");输出结果：aaabbbc
【华为OD机试真题2023B卷 JAVA&JS】We Are A Team 若博豆 java 算法华为 javascript
华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
数组去重好奇的猫猫猫
整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
【JS】执行时长(100分) |思路参考+代码解析（C++） l939035548 JS 算法数据结构 c++
题目为了充分发挥GPU算力，需要尽可能多的将任务交给GPU执行，现在有一个任务数组，数组元素表示在这1秒内新增的任务个数且每秒都有新增任务。假设GPU最多一次执行n个任务，一次执行耗时1秒，在保证GPU不空闲情况下，最少需要多长时间执行完成。题目输入第一个参数为GPU一次最多执行的任务个数，取值范围[1,10000]第二个参数为任务数组长度，取值范围[1,10000]第三个参数为任务数组，数字范围
Python快速入门 —— 第三节：类与对象孤华暗香 Python快速入门 python 开发语言
第三节：类与对象目标：了解面向对象编程的基础概念，并学会如何定义类和创建对象。内容：类与对象：定义类：class关键字。类的构造函数：__init__()。类的属性和方法。对象的创建与使用。示例：classStudent:def__init__(self,name,age,major):self.name&#
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
docker igotyback eureka 云原生
Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息
在Ubuntu中编译含有JSON的文件出现报错芝麻糊76 Linux kill_bug linux ubuntu json
在ubuntu中进行JSON相关学习的时候，我发现了一些小问题，决定与大家进行分享，减少踩坑时候出现不必要的时间耗费截取部分含有JSON部分的代码进行展示char*str="{\"title\":\"JSONExample\",\"author\":{\"name\":\"JohnDoe\",\"age\":35,\"isVerified\":true},\"tags\":[\"json\",\"
Xinference如何注册自定义模型玩人工智能的辣条哥人工智能 AI 大模型 Xinference
环境：Xinference问题描述：Xinference如何注册自定义模型解决方案：1.写个model_config.json，内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model
一文掌握python面向对象魔术方法（二）程序员neil python python 开发语言
接上篇：一文掌握python面向对象魔术方法（一）-CSDN博客目录六、迭代和序列化：1、__iter__(self):定义迭代器，使得类可以被for循环迭代。2、__getitem__(self,key):定义索引操作，如obj[key]。3、__setitem__(self,key,value):定义赋值操作，如obj[key]=value。4、__delitem__(self,key):定义
系统架构设计师需求分析篇二 AmHardy 软件架构设计师系统架构需求分析面向对象分析分析模型 UML和SysML
面向对象分析方法1.用例模型构建用例模型一般需要经历4个阶段：识别参与者：识别与系统交互的所有事物。合并需求获得用例：将需求分配给予其相关的参与者。细化用例描述：详细描述每个用例的功能。调整用例模型：优化用例之间的关系和结构，前三个阶段是必需的。2.用例图的三元素参与者：使用系统的用户或其他外部系统和设备。用例：系统所提供的服务。通信关联：参与者和用例之间的关系，或用例与用例之间的关系。3.识别参
Python神器！WEB自动化测试集成工具 DrissionPage 亚丁号 python 开发语言
一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率
Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net 佛一脚 error react mongodb 数据库
背景每天都能遇到奇怪的问题，做个记录，以便有缘人能得到帮助！换了一台电脑开发nextjs程序。需要连接mongodb数据，对数据进行增删改查。上一台电脑好好的程序，新电脑死活连不上mongodb数据库。同一套代码，没任何修改，搞得我怀疑人生了，打开浏览器进入mongodb官网毫无问题，也能进入线上系统查看数据，网络应该是没问题。于是我尝试了一下手机热点，这次代码能正常跑起来，连接数据库了！！！是不
C++ lambda闭包消除类成员变量 barbyQAQ c++c++java 算法
原文链接：https://blog.csdn.net/qq_51470638/article/details/142151502一、背景在面向对象编程时，常常要添加类成员变量。然而类成员一旦多了之后，也会带来干扰。拿到一个类，一看成员变量好几十个，就问你怕不怕？二、解决思路可以借助函数式编程思想，来消除一些不必要的类成员变量。三、实例举个例子：classClassA{public:...intfu
Vue( ElementUI入门、vue-cli安装) m0_l5z elementui vue.js
一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
【2022 CCF 非专业级别软件能力认证第一轮（CSP-J1）入门级 C++语言试题及解析】汉子萌萌哒 CCF noi 算法数据结构 c++
一、单项选择题(共15题，每题2分，共计30分；每题有且仅有一个正确选项)1.以下哪种功能没有涉及C++语言的面向对象特性支持：()。A.C++中调用printf函数B.C++中调用用户定义的类成员函数C.C++中构造一个class或structD.C++中构造来源于同一基类的多个派生类题目解析【解析】正确答案:AC++基础知识，面向对象和类有关，类又涉及父类、子类、继承、派生等关系，printf
00. 这里整理了最全的爬虫框架（Java + Python）有一只柴犬爬虫系列爬虫 java python
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.js vue-cli3
这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
更改npm镜像源为淘宝镜像骆小骆基于node.js
npm常用指令后缀*最近复习了一下node.js整理了一下跟node.js相关的指令后缀*--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；–--save-dev、-D参数意思是把模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的de
COCO 格式的数据集转化为 YOLO 格式的数据集 QYQY77 YOLO python
"""--json_path输入的json文件路径--save_path保存的文件夹名字，默认为当前目录下的labels。"""importosimportjsonfromtqdmimporttqdmimportargparseparser=argparse.ArgumentParser()parser.add_argument('--json_path',default='./instances
NPM私库搭建-verdaccio（Linux） Beam007 npm linux 前端
1、安装nodelinux服务器安装nodea)、官网下载所需的node版本https://nodejs.org/dist/v14.21.0/b)、解压安装包若下载的是xxx.tar.xz文件，解压命令为tar-xvfxxx.tar.xzc)、修改环境变量修改：/etc/profile文件#SETPATHFORNODEJSexportNODE_HOME=NODEJS解压安装的路径exportPAT
Python编程 - 初识面向对象易辰君 Python核心编程 python 开发语言
目录前言一、面向对象二、类和对象（一）类简介定义类（二）对象简介创建对象（三）总结三、实例属性和实例方法（一）实例属性创建的基本语法使用示例（二）实例方法定义实例方法的基本语法调用示例方法的示例（三）总结四、类中的self（一）基本概念（二）作用访问实例属性调用其他实例方法在构造函数中初始化对象（三）总结五、__init__方法（一）__init__方法的特点（二）基本语法（三）示例（四）总结前言
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
golang获取用户输入的几种方式余生逆风飞翔 golang 开发语言后端
一、定义结构体typeUserInfostruct{Namestring`json:"name"`Ageint`json:"age"`Addstring`json:"add"`}typeReturnDatastruct{Messagestring`json:"message"`Statusstring`json:"status"`DataUserInfo`json:"data"`}二、get请求的
VUE3 + xterm + nestjs实现web远程终端或连接开启SSH登录的路由器和交换机。焚木灵 node.js vue
可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
ztree设置禁用节点 3213213333332132 JavaScript ztree json setDisabledNode Ajax
ztree设置禁用节点的时候注意，当使用ajax后台请求数据,必须要设置为同步获取数据，否者会获取不到节点对象，导致设置禁用没有效果。 $(function(){ showTree(); setDisabledNode(); });
JVM patch by Taobao bookjovi java HotSpot
在网上无意中看到淘宝提交的hotspot patch，共四个，有意思，记录一下。 7050685：jsdbproc64.sh has a typo in the package name 7058036：FieldsAllocationStyle=2 does not work in 32-bit VM 7060619：C1 should respect inline and
将session存储到数据库中 dcj3sjt126com sql PHP session
CREATE TABLE sessions ( id CHAR(32) NOT NULL, data TEXT, last_accessed TIMESTAMP NOT NULL, PRIMARY KEY (id) ); <?php /** * Created by PhpStorm. * User: michaeldu * Date
Vector 171815164 vector
public Vector<CartProduct> delCart(Vector<CartProduct> cart, String id) { for (int i = 0; i < cart.size(); i++) { if (cart.get(i).getId().equals(id)) { cart.remove(i);
各连接池配置参数比较 g21121 连接池
排版真心费劲，大家凑合看下吧，见谅~ Druid DBCP C3P0 Proxool 数据库用户名称 Username Username User 数据库密码 Password Password Password 驱动名
[简单]mybatis insert语句添加动态字段 53873039oycg mybatis
mysql数据库,id自增,配置如下： <insert id="saveTestTb" useGeneratedKeys="true" keyProperty="id" parameterType=&
struts2拦截器配置云端月影 struts2拦截器
struts2拦截器interceptor的三种配置方法方法1. 普通配置法 <struts> <package name="struts2" extends="struts-default"> &
IE中页面不居中，火狐谷歌等正常 aijuans IE中页面不居中
问题是首页在火狐、谷歌、所有IE中正常显示，列表页的页面在火狐谷歌中正常，在IE6、7、8中都不中，觉得可能那个地方设置的让IE系列都不认识，仔细查看后发现，列表页中没写HTML模板部分没有添加DTD定义，就是<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3
String,int,Integer,char 几个类型常见转换 antonyup_2006 html sql .net
如何将字串 String 转换成整数 int? int i = Integer.valueOf(my_str).intValue(); int i=Integer.parseInt(str); 如何将字串 String 转换成Integer ? Integer integer=Integer.valueOf(str); 如何将整数 int 转换成字串 String ? 1.
PL/SQL的游标类型百合不是茶显示游标(静态游标)隐式游标游标的更新和删除 %rowtype ref游标(动态游标)
游标是oracle中的一个结果集,用于存放查询的结果; PL/SQL中游标的声明; 1,声明游标 2,打开游标(默认是关闭的); 3,提取数据 4,关闭游标注意的要点:游标必须声明在declare中,使用open打开游标,fetch取游标中的数据,close关闭游标隐式游标:主要是对DML数据的操作隐
JUnit4中@AfterClass @BeforeClass @after @before的区别对比 bijian1013 JUnit4 单元测试
一.基础知识 JUnit4使用Java5中的注解（annotation），以下是JUnit4常用的几个annotation： @Before：初始化方法对于每一个测试方法都要执行一次（注意与BeforeClass区别，后者是对于所有方法执行一次）@After：释放资源对于每一个测试方法都要执行一次（注意与AfterClass区别，后者是对于所有方法执行一次
精通Oracle10编程SQL(12)开发包 bijian1013 oracle 数据库 plsql
/* *开发包 *包用于逻辑组合相关的PL/SQL类型（例如TABLE类型和RECORD类型）、PL/SQL项（例如游标和游标变量）和PL/SQL子程序（例如过程和函数） */ --包用于逻辑组合相关的PL/SQL类型、项和子程序，它由包规范和包体两部分组成 --建立包规范：包规范实际是包与应用程序之间的接口，它用于定义包的公用组件，包括常量、变量、游标、过程和函数等 --在包规
【EhCache二】ehcache.xml配置详解 bit1129 ehcache.xml
在ehcache官网上找了多次，终于找到ehcache.xml配置元素和属性的含义说明文档了，这个文档包含在ehcache.xml的注释中！ ehcache.xml ： http://ehcache.org/ehcache.xml ehcache.xsd ： http://ehcache.org/ehcache.xsd ehcache配置文件的根元素是ehcahe ehcac
java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL 白糖_ java eclipse spring tomcat Web
今天学习spring+cxf的时候遇到一个问题：在web.xml中配置了spring的上下文监听器： <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> 随后启动
angular.element boyitech AngularJS AngularJS API angular.element
angular.element 描述: 包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。（类似于jQuery的选择器啦）如果jQuery被引入了，则angular.element就可以看作是jQuery选择器，选择的对象可以使用jQuery的函数；如果jQuery不可用，angular.e
java-给定两个已排序序列，找出共同的元素。 bylijinnan java
import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class CommonItemInTwoSortedArray { /** * 题目：给定两个已排序序列，找出共同的元素。 * 1.定义两个指针分别指向序列的开始。 * 如果指向的两个元素
sftp 异常，有遇到的吗？求解 Chen.H java jcraft auth jsch jschexception
com.jcraft.jsch.JSchException: Auth cancel at com.jcraft.jsch.Session.connect(Session.java:460) at com.jcraft.jsch.Session.connect(Session.java:154) at cn.vivame.util.ftp.SftpServerAccess.connec
[生物智能与人工智能]神经元中的电化学结构代表什么? comsci 人工智能
我这里做一个大胆的猜想,生物神经网络中的神经元中包含着一些化学和类似电路的结构,这些结构通常用来扮演类似我们在拓扑分析系统中的节点嵌入方程一样,使得我们的神经网络产生智能判断的能力,而这些嵌入到节点中的方程同时也扮演着"经验"的角色.... 我们可以尝试一下...在某些神经
通过LAC和CID获取经纬度信息 dai_lm lac cid
方法1：用浏览器打开http://www.minigps.net/cellsearch.html，然后输入lac和cid信息(mcc和mnc可以填0)，如果数据正确就可以获得相应的经纬度方法2：发送HTTP请求到http://www.open-electronics.org/celltrack/cell.php?hex=0&lac=<lac>&cid=&
JAVA的困难分析 datamachine java
前段时间转了一篇SQL的文章（http://datamachine.iteye.com/blog/1971896），文章不复杂，但思想深刻，就顺便思考了一下java的不足，当砖头丢出来，希望引点和田玉。 -----------------------------------------------------------------------------------------
小学5年级英语单词背诵第二课 dcj3sjt126com english word
money 钱 paper 纸 speak 讲，说 tell 告诉 remember 记得，想起 knock 敲，击，打 question 问题 number 数字，号码 learn 学会，学习 street 街道 carry 搬运，携带 send 发送，邮寄，发射 must 必须 light 灯，光线，轻的 front
linux下面没有tree命令 dcj3sjt126com linux
centos p安装 yum -y install tree mac os安装 brew install tree 首先来看tree的用法 tree 中文解释：tree 功能说明：以树状图列出目录的内容。语　　法：tree [-aACdDfFgilnNpqstux][-I <范本样式>][-P <范本样式
Map迭代方式，Map迭代，Map循环蕃薯耀 Map循环 Map迭代 Map迭代方式
Map迭代方式，Map迭代，Map循环 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年
Spring Cache注解+Redis hanqunfeng spring
Spring3.1 Cache注解依赖jar包：  <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-redis</artifactId>
Guava中针对集合的 filter和过滤功能 jackyrong filter
在guava库中，自带了过滤器(filter)的功能，可以用来对collection 进行过滤，先看例子： @Test public void whenFilterWithIterables_thenFiltered() { List<String> names = Lists.newArrayList("John"
学习编程那点事 lampcy 编程 android PHP html5
一年前的夏天，我还在纠结要不要改行，要不要去学php？能学到真本事吗？改行能成功吗？太多的问题，我终于不顾一切，下定决心，辞去了工作，来到传说中的帝都。老师给的乘车方式还算有效，很顺利的就到了学校，赶巧了，正好学校搬到了新校区。先安顿了下来，过了个轻松的周末，第一次到帝都，逛逛吧！接下来的周一，是我噩梦的开始，学习内容对我这个零基础的人来说，除了勉强完成老师布置的作业外，我已经没有时间和精力去
架构师之流处理---------bytebuffer的mark,limit和flip nannan408 ByteBuffer
1.前言。如题，limit其实就是可以读取的字节长度的意思，flip是清空的意思，mark是标记的意思。 2.例子. 例子代码: String str = "helloWorld"; ByteBuffer buff = ByteBuffer.wrap(str.getBytes()); Sy
org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, column 1 Everyday都不同 $转义 el表达式
最近在做Highcharts的过程中，在写js时，出现了以下异常：严重: Servlet.service() for servlet jsp threw exception org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1,
用Java实现发送邮件到163 tntxia java实现
/* 在java版经常看到有人问如何用javamail发送邮件？如何接收邮件？如何访问多个文件夹等。问题零散，而历史的回复早已经淹没在问题的海洋之中。本人之前所做过一个java项目，其中包含有WebMail功能，当初为用java实现而对javamail摸索了一段时间，总算有点收获。看到论坛中的经常有此方面的问题，因此把我的一些经验帖出来，希望对大家有些帮助。此篇仅介绍用
探索实体类存在的真正意义 java小叶檀 POJO
一. 实体类简述实体类其实就是俗称的POJO,这种类一般不实现特殊框架下的接口，在程序中仅作为数据容器用来持久化存储数据用的 POJO（Plain Old Java Objects）简单的Java对象它的一般格式就是 public class A{ private String id; public Str

前端学习:JS(面向对象)代码笔记

前端学习:JS(面向对象)代码笔记

创建类和对象

创建对象方式1调用Object函数

创建对象方式2使用字面形式

创建对象方式3使用工厂函数创建多个对象

创建对象方式4调用构造函数创建对象

静态成员和实例成员

静态成员和实例成员

原型

使用全局函数

使用构造函数的原型解决方法的重复创建问题

对象的原型

属性的查找规则

在原型中写入多个方法属性-精简写法

原生对象的原型

拓展原生对象中原型的方法

案例：随机生成方块

案例前的练习

随机生成方块

案例：贪吃蛇

你可能感兴趣的:(前端学习:JS(面向对象)代码笔记)