小王小王几点了
小王小王几点了

【JavaScript面向对象】

JavaScript面向对象

  • 1 本节目标
  • 2 面向对象编程介绍
    • 2.1 两大编程思想
    • 2.2 面向过程编程POP
    • 2.3 面向对象编程OOP
    • 2.4 面向过程和面向对象的对比
  • 3 ES6中的类和对象
    • 3.1 对象
    • 3.2 类class
    • 3.3 创建类
    • 3.4 类constructor构造函数
    • 3.5 类添加方法
    • 3.6 三个注意点
  • 4 类的继承
    • 4.1 继承
    • 4.2 super关键字
  • 5 面向对象案例——tab栏切换

1 本节目标

  • 说出什么是面向对象
  • 说出类和对象的关系
  • 使用class创建自定义类
  • 说出什么是继承

2 面向对象编程介绍

2.1 两大编程思想

  • 面向过程
  • 面向对象

2.2 面向过程编程POP

  • 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。
  • 面向过程就是按照我们分析好了的步骤，按照步骤解决问题。
    【JavaScript面向对象】_第1张图片

2.3 面向对象编程OOP

  • 面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。
  • 面向对象是以对象功能来划分问题，而不是步骤。
  • 在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。
  • 面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。
  • 面向对象的特性：封装性、继承性、多态性。
    【JavaScript面向对象】_第2张图片

2.4 面向过程和面向对象的对比

【JavaScript面向对象】_第3张图片

3 ES6中的类和对象

  • 面向对象更贴近我们的实际生活，可使用面向对象描述现实世界事物，但事物分为具体的事物和抽象的事物。
  • 面向对象的思维特点：
    1> 抽取(抽象)对象共用的属性和行为组织(封装)成一个类(模板)；
    2> 对类进行实例化，获取类的对象。
  • 面向对象编程我们考虑的是有哪些对象，按照面向对象的思维特点，不断的创建对象，使用对象，指挥对象做事情。

3.1 对象

  • 现实生活中，对象是一个具体的事物。
  • 在JavaScript中，对象是一组无序相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
  • 对象是由属性和方法组成的：
    1> 属性：事物的特征，在对象中用属性来表示(常用名词)
    2> 方法：事物的行为，在对象中用方法来表示(常用动词)

3.2 类class

  • 在ES6中新增加了类的概念，可使用class关键字声明一个类，之后以这个类来实例化对象。
  • 类抽象了对象的公共部分，它泛指某一大类(class)。
  • 对象特指某一个，通过实例化一个具体的对象。

3.3 创建类

  • 语法：
	class name {
    	//class body
    }
  • 创建实例：
var xx = new name();
  • 注意：类必须使用new实例化对象。
    【JavaScript面向对象】_第4张图片

3.4 类constructor构造函数

  • constructor()方法是类的构造函数(默认方法)，用于传递参数，返回实例对象，通过new命令生成对象实例时，自动调用该方法，如果没有显示定义，类内部会自动给我们创建一个constructor()。
    【JavaScript面向对象】_第5张图片
    【JavaScript面向对象】_第6张图片
  • 注意：
    1> 通过class关键字创建类，类名我们还是习惯性定义首字母大写
    2> 类里面有一个constructor()函数，可以接受传递过来的参数，同时返回实例对象
    3> constructor()函数只要new生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数
    4> 生成实例new不能省略
    5> 最后注意语法规范，创建类：类名后面不要加小括号，生成实例：类名后面加小括号，构造函数不需要加function

3.5 类添加方法

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>类中添加方法title>
head>
<body>
    <script>
        // 1.创建类class 创建一个明星类
        class Star {
            // 类的共有属性放到constructor里面
            constructor(uname, age) {
                this.uname = uname;
                this.age = age;
            }
            sing(song) {
                // console.log('我唱歌');
                console.log(this.uname + song);
            }
        }
        // 2.利用类创建对象 new
        var ldh = new Star('刘德华',18);
        var zxy = new Star('张学友',20);
        // console.log(ldh);
        // console.log(zxy);

        ldh.sing('冰雨');
        zxy.sing('李香兰');
        // (1)类里面所有的函数不需要写function()
        // (2)多个函数或方法之间不需要添加逗号分隔
    script>
body>
html>

【JavaScript面向对象】_第7张图片

3.6 三个注意点

  • 在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象。
  • 类里面共有的属性和方法一定要加this使用。
  • 类里面的this指向问题。
    【JavaScript面向对象】_第8张图片

4 类的继承

4.1 继承

  • 程序中的继承：子类可以继承父类的一些属性和方法。
  • 语法：
class Father {
	// 父类
}
class Son extends Father {
	// 子类继承父类
}

【JavaScript面向对象】_第9张图片

4.2 super关键字

  • super关键字用于访问和调用对象父类上的函数，可以调用父类的构造函数，也可以调用父类的普通函数。
    【JavaScript面向对象】_第10张图片
    【JavaScript面向对象】_第11张图片
    【JavaScript面向对象】_第12张图片
  • 注意：子类在构造函数中使用super，必须放到this前面(必须先调用父类的构造方法，再使用子类的构造方法)。

5 面向对象案例——tab栏切换

  • tab.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>面向对象的tab栏切换title>
    <link rel="stylesheet" href="./styles/tab.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
head>
<body>
    <main>
        <h4>
            Js 面向对象 动态添加标签页
        h4>
        <div class="tabsbox" id="tab">
            
            <nav class="fisrstnav">
                
                <ul>
                    <li class="liactive"><span>测试1span><span class="iconfont icon-guanbi">span>li>
                    <li><span>测试2span><span class="iconfont icon-guanbi">span>li>
                    <li><span>测试3span><span class="iconfont icon-guanbi">span>li>
                ul>
                
                <div class="tabadd">
                    <span>+span>
                div>
            nav>
 
            
            <div class="tabscon">
                <section class="conactive">测试1section>
                <section>测试2section>
                <section>测试3section>
            div>
        div>
    main>

    <script src="js/tab.js">script>
body>
html>
  • tab.css代码：
 - {
    margin: 0;
    padding: 0;
}
 
ul li {
    list-style: none;
}
 
main {
    width: 960px;
    height: 500px;
    border-radius: 10px;
    margin: 50px auto;
}
 
main h4 {
    height: 100px;
    line-height: 100px;
    text-align: center;
}
 
.tabsbox {
    width: 900px;
    margin: 0 auto;
    height: 400px;
    border: 1px solid lightsalmon;
    position: relative;
}
 
nav ul {
    overflow: hidden;
}
 
nav ul li {
    float: left;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-right: 1px solid #ccc;
    position: relative;
}
 
nav ul li.liactive {
    border-bottom: 2px solid #ffffff;
    z-index: 999;
}
 
#tab input {
    width: 80%;
    height: 60%;
}
 
nav ul li span:last-child {
    position: absolute;
    user-select: none; /* 控制用户不能选中文本 */
    font-size: 12px;
    top: -18px;
    right: 0;
    display: inline-block;
    height: 20px;
}
 
.tabadd {
    position: absolute;
    /* width: 100px; */
    top: 0;
    right: 0;
}
 
.tabadd span {
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #ccc;
    float: right;
    margin: 10px;
    user-select: none;
}
 
.tabscon {
    width: 100%;
    height: 300px;
    position: absolute;
    padding: 30px;
    top: 50px;
    left: 0px;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
}
 
.tabscon section,
.tabscon section.conactive {
    display: none;
    width: 100%;
    height: 100%;
}
 
.tabscon section.conactive {
    display: block;
}

功能需求：
1.点击tab栏，可以切换效果
2.点击+号，可以添加tab项和内容项
	1>第一步：创建新的选项卡li和新的内容section
	2>第二步：把创建的两个元素追加到对应的父元素中
	3>以前的做法：动态创建元素createElement,但元素里面内容较多，需要innerHTML赋值，在appendChild追加到父元素里面
	4>现在高级做法：利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中
	5>appendChild不支持追加字符串的子元素，insertAdjacentHTML支持追加字符串的元素
3.点击×号，可以删除当前的tab项和内容项
	1>×是没有索引号的，但是他的父亲li有索引号，这个索引号正是我们想要的索引号
	2>所以核心思路是：点击×号可以删除这个索引号对应的li和section
4.双击tab项文字或者内容项文字，可以修改里面的文字内容
	1>双击事件：ondblclick
	2>如果双击文字，会默认选定文字，此时需要双击禁止选中文字：window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
	3>核心思路：双击文字的时候，在里面生成一个文本框，当失去焦点或者按下回车然后把文本框输入的值给原先元素即可。
抽象对象：Tab对象
1.该对象有切换功能
2.该对象有添加功能
3.该对象有删除功能
4该对象有修改功能

【JavaScript面向对象】_第13张图片

  • tab.js：
// 声明全局变量that
var that;
class Tab {
    constructor(id) {
        // 获取元素
        that = this;
        // 获取大盒子
        this.main = document.querySelector(id);
        // 获取的是一开始准备好的li和section 不包含后来添加的
        /* this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section'); */

        // 获取+号
        this.add = this.main.querySelector('.tabadd');
        // 获取×号 应写进updateNode()里面 因为update会更新,只要新增一个关闭按钮,就会重新获取一次
        // this.remove = this.main.querySelectorAll('.icon-guanbi');

        // 获取li的父元素
        this.ul = this.main.querySelector('.firstnav ul:first-child');
        // 获取section的父元素
        this.fsection = this.main.querySelector('.tabscon');

        this.init();
    }
    // init() 初始化操作,让相关的元素绑定事件
    init() {
        this.updateNode();
        for(var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i; // 给每个小li都添加了一个属性index,里面存着当前li的索引号
            this.lis[i].onclick = this.toggleTab;
            // 每个小li都有一个删除按钮
            this.remove[i].onclick = this.removeTab;
            this.spans[i].ondblclick = this.editTab;
            this.sections[i].ondblclick = this.editTab;
        }

        // 点击按钮 只有一个 不需要循环
        this.add.onclick = this.addTab;
    }
    // 获取所有的li和section和remove还有span
    updateNode() {
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
        this.remove = this.main.querySelectorAll('.icon-guanbi');
        this.spans = this.main.querySelectorAll('.firstnav li span:first-child');
    }
    // 1.切换功能
    toggleTab() {
        // 排他思想
        that.clearClass();
        this.className = 'liactive'; //点击哪个li li具有liactive类样式
        that.sections[this.index].className = 'conactive'; //点击哪个li section具有conactive类样式
    }
    // 清除所有li和section类的样式
    clearClass() {
        for(var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = ''; // 未被点击的li清除liactive类样式
            this.sections[i].className = ''; // 未被点击的section清除conactive类样式
        }
    }
    // 2.添加功能
    addTab() {
        // 排他思想
        that.clearClass();
        // 创建li元素和section元素
        var random = Math.random(); //生成一个随机数
        var li = '
  • 新选项卡
    • '    ;
        var section = '
    测试'+ random +'
    '    ;
        // 把这两个元素追加到对应的父元素里面
        that.ul.insertAdjacentHTML('beforeend', li);
        that.fsection.insertAdjacentHTML('beforeend',section);

        that.init();
    }
    // 3.删除功能
    removeTab(e) {
        e.stopPropagation(); // 阻止冒泡 防止触发li的切换点击事件
        var index = this.parentNode.index; // 错号的索引号等于他父亲li的索引号
        console.log(index);
        // 根据索引号删除对应的li和section  remove()方法可以直接删除指定的元素
        that.lis[index].remove();
        that.sections[index].remove();
        that.init();
        // 当我们删除了不是选中状态的li的时候,原来处于选定状态的li保持不变
        if(document.querySelector('.liactive')) return;
        // 当我们删除了选中状态的li的时候,让它的前一个li处于选定状态
        index--;
        // 如果前面为真 才会执行后面的 如果前面为假 则不再继续执行
        that.lis[index] && that.lis[index].click(); // click()手动调用点击事件,不需要鼠标触发
    }
    // 4.修改功能
    editTab() {
        var str = this.innerHTML;
        // 双击禁止选中文字
        window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
        // 双击后添加文本框
        this.innerHTML = '';
        // 把原先的内容赋值给文本框
        var input = this.children[0]; // span的第一个孩子
        input.value = str;
        input.select(); // 让文本框里面的文字处于选定状态
        // 当我们离开文本框就把文本框里面的值给span
        input.onblur = function() {
            // 此时span是input的父亲
            this.parentNode.innerHTML = this.value;
        }
        // 按下回车也可以把文本框里面的值给span
        input.onkeyup = function(e) {
            if(e.key === 'Enter') {
                // 手动调用表单失去焦点事件 不需要鼠标离开操作
                this.blur();
            }
        }
    }
}
new Tab('#tab');
    • 效果图：
      【JavaScript面向对象】_第14张图片

    你可能感兴趣的:(ES6,javascript,前端,es6)

    • JavaScript性能优化指南：聚焦DOM操作优化 桃木山人 技术杂谈javascript性能优化开发语言
      引言：性能优化的关键路径在Web应用开发中，JavaScript性能直接影响用户体验。虽然存在多种优化手段，但DOM操作优化往往能带来最显著的性能提升。本文将以DOM操作为核心展开深入分析，并简要概述其他优化方向。核心优化：DOM操作性能提升1.问题根源分析浏览器渲染引擎与JavaScript引擎独立运作，频繁的DOM操作会导致：重排（Reflow）：计算元素几何属性重绘（Repaint）：更新元
    • FastAPI安全防护指南：构建坚不可摧的参数处理体系 qcidyu fastapi安全
      扫描二维码关注或者微信搜一搜：编程智域前端至全栈交流与成长探索数千个预构建的AI应用，开启你的下一个伟大创意第一章：输入验证体系1.1类型安全革命frompydanticimportBaseModel,PaymentCardNumberfrompydantic.typesimportSecretStrclassUserRequest(BaseModel):username:str=Field(mi
    • SvelteKit 最新中文文档教程（3）—— 数据加载
      前言Svelte，一个语法简洁、入门容易，面向未来的前端框架。从Svelte诞生之初，就备受开发者的喜爱，根据统计，从2019年到2024年，连续6年一直是开发者最感兴趣的前端框架No.1：Svelte以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级Web项目。为了帮助大家学习Svelte，我同时搭建了Svelte最新的中文文档站点。如果需要进阶学习，也可以入手我
    • 16、JavaEE核心技术-EL与 JSTL 跟着汪老师学编程 java-eejava
      EL与JSTL实践一.EL（ExpressionLanguage）EL（表达式语言）是JSP2.0中引入的一种简单的脚本语言，用于在JSP页面中简化数据的访问和显示。它通过一种类似于JavaScript的语法，允许开发者在JSP页面中直接访问JavaBean的属性、集合、甚至是Java类的静态字段和方法。1、EL的基本语法EL表达式的语法格式为${}，例如：${requestScope.userN
    • 【SpringMVC】常用注解：@RequestParam 字节源流 java开发语言
      1.作用如果控制器标注的方法的参数名称与前端传递过来的参数名称不一致，使得SpringMVC无法自动启动，那么我们可以使用该注解实现前后端参数的绑定。2.相关属性value/name：这两个属性都是一个作用，都是描述参数的名称，也就是前端传递过来的参数的名称。required：默认值为true.标识当前的参数是必须携带的，如果前端没有携带该参数，就会报404的异常。如果是false就是不必须的de
    • 六十天前端强化训练之第十七天React Hooks 入门：useState 深度解析 编程星辰海 #前端前端react.jsjavascript
      =====欢迎来到编程星辰海的博客讲解======看完可以给一个免费的三连吗，谢谢大佬！目录一、知识讲解1.Hooks是什么？2.useState的作用3.基本语法解析4.工作原理5.参数详解a)初始值设置方式b)更新函数特性6.注意事项7.类组件对比8.常见问题解答二、核心代码示例三、实现效果四、学习要点总结五、扩展阅读推荐官方文档优质文章推荐学习路径进阶资源六、实践步骤一、表单输入控制二、动态
    • 深入解析React 18核心特性：构建未来级Web应用的全面指南 斯~内克 react知识点前端react.js前端框架
      一、React18的里程碑意义React18作为近年来最具革命性的版本更新，标志着前端开发正式进入并发渲染时代。这个版本不仅带来了底层架构的革新，更重新定义了现代Web应用的性能标准与开发范式。根据npm官方统计，React18发布首周下载量突破1800万次，GitHub星标数新增3.4万，充分展现了开发者社区对其技术价值的认可。二、架构革命：并发模式深度解析2.1并发渲染原理//传统同步渲染模式
    • 深入解析 React Diff 算法：原理、优化与实践 赵大仁 前端技术jsreact.js前端前端框架
      深入解析ReactDiff算法：原理、优化与实践1.引言React作为前端领域的标杆框架，采用虚拟DOM（VirtualDOM）来提升UI更新性能。React的Diff算法（Reconciliation）是虚拟DOM运行机制的核心，它决定了如何高效地对比新旧DOM并执行最少的操作来更新UI。本篇文章将深入探讨ReactDiff算法的原理、优化策略，并通过生动的示例解析其工作方式，让你能够更直观地理
    • 前端面试题---vue项目打包时, 内存不足了怎么办 为什么会出现这样的情况 *星之卡比* 前端vue.jsjavascript
      Vue项目打包时如果出现内存不足（OOM，OutofMemory）简称就是OOM，通常是因为项目代码量较大、依赖过多、打包时Webpack需要处理的文件过多，导致Node.js运行时超出了默认的内存限制。一、为什么会出现内存不足？项目过大：项目代码文件过多，Webpack需要处理的内容太多。第三方库过多：node_modules体积过大，依赖库多且未进行优化。SourceMap过大：默认produ
    • 深入解析 React 最新特性：革新、应用与最佳实践 赵大仁 前端ReactNativereact.js前端前端框架
      深入解析React最新特性：革新、应用与最佳实践1.引言React作为前端开发的核心技术之一，近年来不断推出新的API和优化机制，从ConcurrentRendering（并发模式）到ServerComponents（服务器组件），都在不断提升开发体验和应用性能。本文将深入解析React最新特性，包括React18并发模式、useTransition、useDeferredValue、ReactS
    • 我与DeepSeek读《大型网站技术架构》- 大型网站架构技术一览与Web开发技术发展历程 诺亚凹凸曼 架构
      文章目录大型网站架构技术一览1.前端架构2.应用层架构3.服务层架构4.存储层架构5.后台架构6.数据采集与监控7.安全架构8.数据中心机房架构Web开发技术发展历程一、静态HTML阶段二、CGI脚本模式阶段三、服务器页面模式阶段大型网站架构技术一览1.前端架构浏览器访问优化：压缩静态资源、减少HTTP请求。CDN加速：将静态资源分发至边缘节点，降低网络延迟。反向代理：缓存热点内容，提供负载均衡与
    • 我与DeepSeek读《大型网站技术架构》（4） 诺亚凹凸曼 架构
      瞬时响应：网站的高性能架构章节要点本章聚焦于如何通过系统性优化实现网站快速响应，从多层级、多维度剖析了高性能架构的核心策略。1.高性能架构的优化层级(1)前端性能优化目标：减少用户端请求延迟，提升页面加载速度。核心策略：减少HTTP请求：合并CSS/JS文件、使用CSSSprites（雪碧图）。压缩资源：Gzip压缩文本文件（HTML/CSS/JS）、图片优化（WebP格式）。CDN加速：静态资源
    • 2024前端Webpack面试题 司宁 前端面试题前端webpack
      1、谈谈你对Webpack的理解Webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件（图片，字体）等，让开发更高效。对于不同类型的依赖，Webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。2、Webpack的基本功能代码转换：Type
    • fetch java_拦截Java语言中的Fetch（）API响应和请求 就大概是这样 fetchjava
      我想拦截Javascript中的提取API请求和响应。例如：在发送请求之前，要拦截请求URL，一旦获得响应，就要拦截响应。以下代码用于拦截所有XMLHTTPRequest的响应。(function(open){XMLHttpRequest.prototype.open=function(XMLHttpRequest){varself=this;this.addEventListener("read
    • XMLHttpRequest、Fetch、Axios和AJAX的关系 冰镇屎壳郎 前端#JavaScriptajax前端javascript
      一、基于http协议用于前后端通信的工具1、XMLHttpRequest（原生JS对象）XMLHttpRequest（XHR）是原生JavaScript对象。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据。特性：浏览器广泛支持功能丰富：可以跟踪请求的状态、支持进度事件、文件上传、同步请求等可同步可异步不支持PromiseAPI2、Fetch（浏览器原生API）（1
    • 通过覆盖原型属性拦截 XMLHttpRequest 响应 @大迁世界 服务器运维
      在JavaScript中有两种发起HTTP请求的API-现代的fetch()和传统的XMLHttpRequest。它们功能完全相同,只是语法不同。XMLHttpRequest使用回调处理响应,而fetch()返回更方便使用的Promise。XMLHttpRequest是发起HTTP请求的主流API。在新项目中使用传统的XMLHttpRequest是没有意义的。另一方面,将现有可运行的基于XMLHt
    • 【pptx-preview】react+pptx预览 起来改bug javascriptreact.jspptx
      pptx前端预览插件pptx-preview-npm1.插件使用letpptxPreviewer:any=null;constdom:any=document.getElementById(`pptx-wrapper`);if(!dom)return;pptxPreviewer=init(dom,{width:800});fetch(url).then((response:any)=>respon
    • HarmonyOS 实战开发 —— 基于HMRouter的路由跳转方案 CTrup 鸿蒙开发HarmonyOS移动开发harmonyos组件化移动开发鸿蒙开发ArkUIHMRouter组件化路由
      往期笔录记录：鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……HMRouter简介HMRouter作为Har
    • web前端开发工程师工作的岗位职责（合集） 极客11 面试与求职前端状态模式
      web前端开发工程师工作的岗位职责1职责：1、根据设计图进行前端页面开发并设计编写业务交互脚本2、优化前端页面，保证良好的用户体验以及不同浏览器的兼容性3、web前沿技术研究和新技术调研，将主流的特效应用到业务场景中4、配合后台开发人员实现网站界面和功能，为产品后期运营提供升级、维护等技术支持。5、工作积极主动，善于沟通，协调项目与项目之间的工作安排与配合，确保开发工作顺利进行。6、具备较强的学习
    • Node.js 的模块作用域和 module 对象详细介绍 还是鼠鼠 node.jsnode.jsjavascript前端vscodeweb
      目录代码示例1.创建模块文件module-demo.js2.导入模块并使用module-demo.js运行结果总结在Node.js中，每个文件都是一个独立的模块，具有自己的作用域。与浏览器JavaScript代码不同，Node.js采用模块作用域，这意味着一个文件中的变量、函数、类等不会污染全局作用域，而是仅在该模块内部有效。这种设计提高了代码的封装性和安全性。module对象是Node.js提供
    • 使用flask快速搭建web应用 alex190824 flask前端pythonecharts
      文章目录前言一、Flask是什么？二、使用步骤1.引入包2.简单的服务端应用程序3.添加用于显示折线图代码4.在templates目录下，创建用于渲染的line-simple.html页面5.完整的代码结构前端代码后端代码总结前言在数据处理分析过程中，有快速搭建数据展示的应用场景需求，此时可以使用Flask快速进行web应用环境构建。本示例演示创建web应用及显示渲染echart折线图。一、Fla
    • 【测试语言篇四】Python进阶篇之json模块 m0_37135615 编程语言pythonphp开发语言
      一、json模块介绍JSON（JavaScript对象表示法）是一种轻量级数据格式，用于数据交换。在Python中具有用于编码和解码JSON数据的内置json模块。只需导入它，就可以使用JSON数据了：importjsonJSON的一些优点：JSON作为“字节序列”存在，在我们需要通过网络传输（流）数据的情况下非常有用。与XML相比，JSON小得多，可转化为更快的数据传输和更好的体验。JSON非常
    • odoo-040 odoo17前端的js方法调用后端py方法action报错 Sapphire～ Odoo总结前端javascriptodoo
      文章目录问题描述梳理写法xml写法前端方法后端action的写法错误解释问题描述在前端的kanban视图上添加了几个自定义按钮，按钮点击可以跳转到对应的tree视图，在写按钮调用方法的时候报错如下：前端调用后端action报错：action.views=[...action.views.map((v)=>[v[0],v[1]==="tree"?"list":v[1]])];//manipulate
    • 我的创作纪念日 我爱学习_zwj 前端前端框架华为
      机缘在前端开发的广袤天地中，我的创作之旅始于一次充满挑战与机遇的契机。初涉前端领域时，面对复杂多变的项目需求和飞速更新的技术栈，我深刻感受到知识的浩瀚无边，也意识到自身能力的不足。在参与一个大型项目时，我遭遇了许多棘手难题，像页面加载速度的优化、不同浏览器兼容性的处理等。那时，我便产生了一个想法：把在实战中积累的经验以及过去学习的知识记录下来，既能作为自己成长的见证，也能与同行交流分享，携手攻克技
    • Vue.js的内联样式绑定：style的多种用法 阿珊和她的猫 vue.js前端javascript
      前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录引言`style`属性的基本概念`style`属性的用法1.绑定对象2.
    • 从前端视角理解消息队列：核心问题与实战指南 秋水为渡 前端
      消息队列（MessageQueue）是现代分布式系统的核心组件之一，它在前后端协作、系统解耦、流量削峰等场景中发挥着重要作用。本文从前端开发者视角出发，解析消息队列的关键问题，并结合实际场景给出解决方案。一、为什么要使用消息队列？1.前端常见场景异步任务处理：用户行为日志上报、实时通知推送流量削峰：应对秒杀活动、大文件上传等瞬时高并发场景系统解耦：前端与后端服务、第三方服务之间的松耦合通信2.前端
    • 前端请求全面解析：AJAX、Axios 与 Fetch 的使用详解与代码示例 软件工匠师 前端ajaxjavascript
      前端请求全面解析：AJAX、Axios与Fetch的使用详解与代码示例前端请求全面解析：AJAX、Axios与Fetch的使用详解与代码示例1.AJAX——传统的异步请求1.1基本用法示例1.2AJAX特点2.FetchAPI——现代化请求方案2.1基本用法示例2.2Fetch特点3.Axios——第三方HTTP请求库3.1安装Axios3.2基本用法示例3.3Axios特点4.总结前端请求全面解
    • 【MyBatis-Plus 分页插件】深入分析和实战解析 Yan.love mybatisjava后端
      分页是Web应用开发中的高频需求，而在MyBatis的生态中，MyBatis-Plus分页插件PaginationInnerInterceptor和MyBatis的PageHelper是两种常见的实现方案。本文将通过工作机制、使用方法和细节剖析，带你循序渐进地掌握这两种方式，并为你的项目选择提供指导。一、什么是分页？分页的核心目标是减少数据传输量和前端渲染压力。通过限制每次查询的结果数量，分页能够
    • 【JS】JS中的jQuery库简介及使用方法 菜就多练少说 javascriptjavascriptjquery开发语言
      jQuery简介及使用方法jQuery简介如何使用jQuery1导入jQuery库2编写自己的jQuery文件3jQuery语法3.1基础语法3.2文档就绪函数3.3选择器3.4事件绑定函数结语jQuery简介jQuery是一个流行的JavaScript库，用于简化JavaScript编程。它提供了许多便捷的方法来处理DOM操作、事件处理、动画效果等，使得JavaScript开发变得更加简单和高效
    • Android自动化测试工具 海棠如醉 web技术自动化运维
      细解自动化测试工具Airtest-CSDN博客以下是几种常见的Android应用自动化测试工具：Appium：支持多种编程语言，如Java、Python、Ruby、JavaScript等。可以用于Web应用程序和原生应用程序的自动化测试，并支持iOS和Android平台。Espresso：由Google开发的AndroidUI测试框架，可用于测试应用程序的用户界面和与用户的交互。Espresso支
    • ViewController添加button按钮解析。（翻译） 张亚雄 c
      <div class="it610-blog-content-contain" style="font-size: 14px"></div>//  ViewController.m //  Reservation software // //  Created by 张亚雄 on 15/6/2.
    • mongoDB 简单的增删改查 开窍的石头 mongodb
         在上一篇文章中我们已经讲了mongodb怎么安装和数据库/表的创建。在这里我们讲mongoDB的数据库操作       在mongo中对于不存在的表当你用db.表名 他会自动统计 下边用到的user是表明，db代表的是数据库       添加(insert):
    • log4j配置 0624chenhong log4j
      1) 新建java项目 2) 导入jar包，项目右击，properties—java build path—libraries—Add External jar，加入log4j.jar包。 3) 新建一个类com.hand.Log4jTest package com.hand; import org.apache.log4j.Logger; public class
    • 多点触摸(图片缩放为例) 不懂事的小屁孩 多点触摸
      多点触摸的事件跟单点是大同小异的，上个图片缩放的代码，供大家参考一下 import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener
    • 有关浏览器窗口宽度高度几个值的解析 换个号韩国红果果 JavaScripthtml
      1 元素的 offsetWidth 包括border padding  content  整体的宽度。 clientWidth  只包括内容区 padding 不包括border。 clientLeft =  offsetWidth -clientWidth  即这个元素border的值 offsetLeft  若无已定位的包裹元素
    • 数据库产品巡礼：IBM DB2概览 蓝儿唯美 db2
      IBM DB2是一个支持了NoSQL功能的关系数据库管理系统，其包含了对XML，图像存储和Java脚本对象表示（JSON）的支持。DB2可被各种类型的企 业使用，它提供了一个数据平台，同时支持事务和分析操作，通过提供持续的数据流来保持事务工作流和分析操作的高效性。 DB2支持的操作系统 DB2可应用于以下三个主要的平台:   工作站，DB2可在Linus、Unix、Windo
    • java笔记5 a-john java
      控制执行流程： 1，true和false    利用条件表达式的真或假来决定执行路径。例：（a==b）。它利用条件操作符“==”来判断a值是否等于b值，返回true或false。java不允许我们将一个数字作为布尔值使用，虽然这在C和C++里是允许的。如果想在布尔测试中使用一个非布尔值，那么首先必须用一个条件表达式将其转化成布尔值，例如if(a!=0)。 2，if-els
    • Web开发常用手册汇总 aijuans PHP
      一门技术，如果没有好的参考手册指导,很难普及大众。这其实就是为什么很多技术，非常好，却得不到普遍运用的原因。 正如我们学习一门技术，过程大概是这个样子： ①我们日常工作中，遇到了问题，困难。寻找解决方案，即寻找新的技术； ②为什么要学习这门技术？这门技术是不是很好的解决了我们遇到的难题，困惑。这个问题，非常重要，我们不是为了学习技术而学习技术，而是为了更好的处理我们遇到的问题，才需要学习新的
    • 今天帮助人解决的一个sql问题 asialee sql
                  今天有个人问了一个问题，如下： type     AD      value          A  
    • 意图对象传递数据 百合不是茶 android意图IntentBundle对象数据的传递
      学习意图将数据传递给目标活动; 初学者需要好好研究的       1,将下面的代码添加到main.xml中    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http:/
    • oracle查询锁表解锁语句 bijian1013 oracleobjectsessionkill
      一.查询锁定的表 如下语句，都可以查询锁定的表 语句一： select a.sid, a.serial#, p.spid, c.object_name, b.session_id, b.oracle_username, b.os_user_name from v$process p, v$s
    • mac osx 10.10 下安装 mysql 5.6 二进制文件［tar.gz］ 征客丶 mysqlosx
      场景：在 mac osx 10.10 下安装 mysql 5.6 的二进制文件。 环境：mac osx 10.10、mysql 5.6 的二进制文件 步骤：[所有目录请从根“/”目录开始取，以免层级弄错导致找不到目录] 1、下载 mysql 5.6 的二进制文件，下载目录下面称之为 mysql5.6SourceDir； 下载地址：http://dev.mysql.com/downl
    • 分布式系统与框架 bit1129 分布式
      RPC框架 Dubbo 什么是Dubbo   Dubbo是一个分布式服务框架，致力于提供高性能和透明化的RPC远程服务调用方案，以及SOA服务治理方案。其核心部分包含:    远程通讯: 提供对多种基于长连接的NIO框架抽象封装，包括多种线程模型，序列化，以及“请求-响应”模式的信息交换方式。    集群容错: 提供基于接
    • 那些令人蛋痛的专业术语 白糖_ springWebSSOIOC
      spring 【控制反转(IOC)/依赖注入(DI)】： 由容器控制程序之间的关系，而非传统实现中，由程序代码直接操控。这也就是所谓“控制反转”的概念所在：控制权由应用代码中转到了外部容器，控制权的转移，是所谓反转。 简单的说：对象的创建又容器(比如spring容器)来执行，程序里不直接new对象。 Web 【单点登录(SSO)】：SSO的定义是在多个应用系统中，用户
    • 《给大忙人看的java8》摘抄 braveCS java8
      函数式接口：只包含一个抽象方法的接口 lambda表达式：是一段可以传递的代码       你最好将一个lambda表达式想象成一个函数，而不是一个对象，并记住它可以被转换为一个函数式接口。 事实上，函数式接口的转换是你在Java中使用lambda表达式能做的唯一一件事。   方法引用：又是要传递给其他代码的操作已经有实现的方法了，这时可以使
    • 编程之美-计算字符串的相似度 bylijinnan java算法编程之美
      public class StringDistance { /** * 编程之美 计算字符串的相似度 * 我们定义一套操作方法来把两个不相同的字符串变得相同，具体的操作方法为： * 1.修改一个字符（如把“a”替换为“b”）; * 2.增加一个字符（如把“abdd”变为“aebdd”）; * 3.删除一个字符（如把“travelling”变为“trav
    • 上传、下载压缩图片 chengxuyuancsdn 下载
      /** * * @param uploadImage --本地路径(tomacat路径) * @param serverDir --服务器路径 * @param imageType --文件或图片类型 * 此方法可以上传文件或图片.txt,.jpg,.gif等 */ public void upload(String uploadImage,Str
    • bellman-ford(贝尔曼-福特)算法 comsci 算法F#
      Bellman-Ford算法(根据发明者 Richard Bellman 和 Lester Ford 命名)是求解单源最短路径问题的一种算法。单源点的最短路径问题是指：给定一个加权有向图G和源点s，对于图G中的任意一点v，求从s到v的最短路径。有时候这种算法也被称为 Moore-Bellman-Ford 算法，因为 Edward F. Moore zu 也为这个算法的发展做出了贡献。 与迪科
    • oracle ASM中ASM_POWER_LIMIT参数 daizj ASMoracleASM_POWER_LIMIT磁盘平衡
      ASM_POWER_LIMIT 该初始化参数用于指定ASM例程平衡磁盘所用的最大权值，其数值范围为0~11，默认值为1。该初始化参数是动态参数，可以使用ALTER  SESSION或ALTER  SYSTEM命令进行修改。示例如下： SQL>ALTER  SESSION  SET   Asm_power_limit=2;
    • 高级排序:快速排序 dieslrae 快速排序
      public void quickSort(int[] array){ this.quickSort(array, 0, array.length - 1); } public void quickSort(int[] array,int left,int right){ if(right - left <= 0
    • C语言学习六指针_何谓变量的地址 一个指针变量到底占几个字节 dcj3sjt126com C语言
      # include <stdio.h> int main(void) { /* 1、一个变量的地址只用第一个字节表示 2、虽然他只使用了第一个字节表示，但是他本身指针变量类型就可以确定出他指向的指针变量占几个字节了 3、他都只存了第一个字节地址，为什么只需要存一个字节的地址，却占了4个字节，虽然只有一个字节， 但是这些字节比较多，所以编号就比较大，
    • phpize使用方法 dcj3sjt126com PHP
      phpize是用来扩展php扩展模块的，通过phpize可以建立php的外挂模块,下面介绍一个它的使用方法,需要的朋友可以参考下 安装（fastcgi模式）的时候，常常有这样一句命令： 代码如下: /usr/local/webserver/php/bin/phpize   一、phpize是干嘛的？ phpize是什么？ phpize是用来扩展php扩展模块的，通过phpi
    • Java虚拟机学习 - 对象引用强度 shuizhaosi888 JAVA虚拟机
      本文原文链接：http://blog.csdn.net/java2000_wl/article/details/8090276 转载请注明出处！ 无论是通过计数算法判断对象的引用数量，还是通过根搜索算法判断对象引用链是否可达，判定对象是否存活都与“引用”相关。 引用主要分为 ：强引用(Strong Reference)、软引用(Soft Reference)、弱引用(Wea
    • .NET Framework 3.5 Service Pack 1（完整软件包）下载地址 happyqing .net下载framework
        Microsoft .NET Framework 3.5 Service Pack 1（完整软件包）  http://www.microsoft.com/zh-cn/download/details.aspx?id=25150 Microsoft .NET Framework 3.5 Service Pack 1 是一个累积更新，包含很多基于 .NET Framewo
    • JAVA定时器的使用 jingjing0907 javatimer线程定时器
      1、在应用开发中，经常需要一些周期性的操作，比如每5分钟执行某一操作等。 对于这样的操作最方便、高效的实现方式就是使用java.util.Timer工具类。 privatejava.util.Timer timer; timer = newTimer(true); timer.schedule( newjava.util.TimerTask() { public void run()
    • Webbench 流浪鱼 webbench
      首页下载地址 http://home.tiscali.cz/~cz210552/webbench.html Webbench是知名的网站压力测试工具，它是由Lionbridge公司（http://www.lionbridge.com）开发。 Webbench能测试处在相同硬件上，不同服务的性能以及不同硬件上同一个服务的运行状况。webbench的标准测试可以向我们展示服务器的两项内容：每秒钟相
    • 第11章 动画效果（中） onestopweb 动画
      index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
    • windows下制作bat启动脚本. sanyecao2314 javacmd脚本bat
      java -classpath C:\dwjj\commons-dbcp.jar;C:\dwjj\commons-pool.jar;C:\dwjj\log4j-1.2.16.jar;C:\dwjj\poi-3.9-20121203.jar;C:\dwjj\sqljdbc4.jar;C:\dwjj\voucherimp.jar com.citsamex.core.startup.MainStart
    • Java进行RSA加解密的例子 tomcat_oracle java
      加密是保证数据安全的手段之一。加密是将纯文本数据转换为难以理解的密文；解密是将密文转换回纯文本。 　　数据的加解密属于密码学的范畴。通常，加密和解密都需要使用一些秘密信息，这些秘密信息叫做密钥，将纯文本转为密文或者转回的时候都要用到这些密钥。 　　对称加密指的是发送者和接收者共用同一个密钥的加解密方法。 　　非对称加密(又称公钥加密)指的是需要一个私有密钥一个公开密钥，两个不同的密钥的
    • Android_ViewStub 阿尔萨斯 ViewStub
      public final class ViewStub extends View java.lang.Object android.view.View android.view.ViewStub 类摘要： ViewStub 是一个隐藏的，不占用内存空间的视图对象，它可以在运行时延迟加载布局资源文件。当 ViewSt
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他