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

【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)

    • 深入解析 “void(0)；” 的用法与作用_void(0)；
      关键要点void(0);是JavaScript中的一个表达式，研究表明它通常用于超链接中，防止页面跳转。它通过void运算符计算表达式并返回undefined，常用于创建“死链接”。证据显示，这种用法简单易用，但现代开发更推荐使用事件监听器。基本概念void(0);的作用void(0);是JavaScript的void运算符的一个实例，void运算符会计算一个表达式但不返回任何值，而是始终返回un
    • GPT实操——利用GPT创建一个应用 狗木马 深度学习gpt-3gpt
      功能描述信息查询：用户可以询问各种问题，如天气、新闻、股票等，机器人会返回相关信息。任务执行：用户可以要求机器人执行一些简单的任务，如设置提醒、发送邮件等。情感支持：机器人可以与用户进行情感交流，提供安慰和支持。个性化设置：用户可以自定义机器人的回复风格和偏好。技术栈前端：React.js后端：Node.js+Express数据库：MongoDB自然语言处理：OpenAIGPT-3API其他工具：
    • 【JS三兄弟谁是谁】搞懂 splice、slice、split，只需一杯奶茶的时间！ dorabighead 前端八股总结javascript前端开发语言
      JavaScript有三兄弟，经常一起“切人”。他们名字相似、功能相关，但性格迥异，常被搞混。今天，就带你喝着奶茶，笑着剖析，帮你彻底搞懂：splice、slice、split到底是谁？干了啥？凭啥这么火？一、三兄弟登场：不同对象，不同任务名称作用对象是否修改原对象返回类型功能简述splice数组✅是被删除元素数组原地删除元素并可插入新元素slice数组/字符串❌否副本（子集）复制选中部分，原体不
    • 前端面试题总结——JS篇 又又呢 前端javascript开发语言
      一、说说JavaScript中的数据类型？存储上有什么差别？1、数据类型基本类型number：数值类型十进制：letintNum=55八进制（零开头）：letnum1=070十六进制（0x开头）：lethexNum1=0xANaN：特殊数值，意为“不是数值”string：字符串类型boolean：布尔值，true或falseundefined：表示未定义null：空值symbol：是原始值，且符号
    • 前端面试题——5.AjAX的缺点？ 浅端 前端面试题前端面试题
      ①传统的web交互是：用户一个网页动作，就会发送一个http请求到服务器，服务器处理完该请求再返回一个完整的HTML页面，客户端再重新加载，这样极大地浪费了带宽。②AJAX的出现解决了这个问题，它只会向服务器请求用户所需要的数据，并在客户端采用JavaScript处理返回的数据，操作DOM更新页面。③AJXA优点：无刷新更新页面异步服务器通信前端后端负载均衡④AJAX缺点：干掉了Back和Hist
    • JavaScript知识归纳——面试题 Dream_Lee_1997 JavaScriptjs面试题
      JavaScript面试题总结JavaScript知识点1、JavaScript中settimeout与setinteval两个函数的区别？2、编写JavaScript脚本生成1-6之间的整数？3、在JavaScript脚本中，isNaN的作用是什么？4、JavaScript中获取某个元素有哪几种方式？5、Ajax的优缺点都有什么？6、简述一下Ajax的工作原理。7、JavaScript中的数据类
    • 2023高薪前端面试题（二、前端核心——Ajax）
      原生AjaxAjax简介Ajax全程为AsynchronousJavaScript+XML，就是异步的JS和XML通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势是：无刷新获取数据，实现局部刷新Ajax是一种用于创建快速动态网页的技术AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式Ajax的应用场景页面上拉加载更多数据列表数据无刷新分页表单项离开焦点数据验证搜索框提示
    • 前端面试题——手写实现 ajax 阿水爱踢中锋 ajaxjs前端
      凡是和后台有过数据交互的小伙伴肯定都接触过ajax.我们可以通过ajax来实现页面的无刷新请求数据，这样就能在保证良好用户体验的同时，将更多的内容展示给用户ajax在我们的开发工作中已经司空见惯，几乎所有我们频繁使用的库和框架都提供了经过完善封装后的ajax方法，如jQuery、zepto、angular等等，这使得我们的数据请求变得异常简洁明了但是这也带来了很明显的缺陷，就是我们知道如何去使用封
    • 配置Nginx实现静态资源访问 Gappsong874 nginx运维网络安全web安全安全架构运维开发
      Nginx是一款高性能的HTTP和反向代理服务器，常用于处理静态资源请求。通过合理配置，可以显著提升静态资源的访问速度和服务器性能。以下内容将详细介绍如何配置Nginx以实现静态资源的高效访问。基本静态资源配置静态资源通常包括HTML文件、CSS样式表、JavaScript脚本、图片、视频等。Nginx通过简单的配置即可处理这些请求。在Nginx的配置文件中，通常位于/etc/nginx/ngin
    • uniapp 如何封装实现任意页面都能使用的全局弹窗 代码简单说 2025开发必备(限时特惠)uni-appvue.jsjavascriptuniapp全局弹窗uniapp弹窗组件
      【实战干货】uniapp如何封装实现任意页面都能使用的全局弹窗标签：uniapp弹窗组件全局弹窗Vue动态渲染跨页面弹窗✨前端老司机亲授，uniapp无法在所有页面中直接用自定义弹窗？别急，一招动态挂载vue实例，优雅解决！背景故事：一个被“弹窗”搞崩溃的早晨作为一名前端开发工程师，有一天我在给uniapp项目加IM消息功能，需求是：不论当前用户在哪个页面，只要有消息来，就要立即弹出提示窗口。听起
    • 【前端】接口日志追踪 毕业茄 前端
      1.问题描述场景：前端提交数据后，接口回调再次添加参数，但页面跳转/刷新导致之前的console.log数据丢失。影响：无法追踪完整的请求流程，调试困难。2.环境信息项目说明浏览器GoogleChrome120+开发者工具ChromeDevTools技术栈前端：Vue/React/其他接口类型RESTfulAPI/GraphQL3.解决方案3.1保留控制台日志（推荐）步骤：打开Chrome开发者工
    • 【前端】异步任务风控验证与轮询机制技术方案（通用笔记版）
      一、背景场景在某类生成任务中，例如用户点击“执行任务”按钮后触发一个较耗时的后端操作（如生成报告、渲染图像、转码视频等），由于其调用了模型、渲染服务或需要较长处理时间，为了防止接口被频繁恶意调用，系统需要加入风控验证机制。此外，因任务处理为异步，前端无法立即获得最终结果，因此需通过轮询方式定期查询任务状态，等待任务完成后展示结果。二、整体流程说明1.用户点击“执行任务”按钮：前端调用风控接口/ap
    • uniapp对接unipush 1.0 ios/android 车轮滚滚__ uni-appiosandroid
      配置注意需要打包自定义基座之后在手机上运行自定义基座才可以！官方有文档可以根据文档来我这里用的是1.0为什么没有2.0因为2.0要用uinicloud注意每次打包之后cid都会变cid用户的标识iduniapp通过这个id可以把消息推送给指定人前端代码前端要做的很简单直接放到app.vue中onLaunch钩子中即可麻烦的在后端和个推的对接onPushMessage(that){//#ifdefA
    • 微信小程序开发：从漫画阅读到商业变现 永远的12
      本文还有配套的精品资源，点击获取简介：微信小程序作为一种轻量级应用平台，在无需下载安装的情况下提供便捷服务，尤其在漫画阅读领域得到广泛应用。本文介绍了微信小程序的基础开发框架，包括WXML、WXSS和JavaScript的使用，以及漫画小程序的核心功能设计，如漫画分类、搜索、详情展示、阅读模式等。同时，探讨了在小程序中加入广告ID以实现商业变现，包括广告组件的集成和广告政策的遵守。最后，强调了漫画
    • 浏览器视角看 —— 消息队列和事件循环、宏任务和微任务 DTcode7 HTML网站开发#前端基础入门三大核心之htmlHTML前端webJavaScript网页开发
      浏览器视角看——消息队列和事件循环、宏任务和微任务1.JavaScript执行模型简介2.消息队列与事件循环2.1消息队列2.2事件循环示例一：基本事件循环3.宏任务与微任务3.1宏任务与微任务的区别3.2微任务的执行时机示例二：宏任务与微任务的执行顺序4.深入理解事件循环4.1事件循环的生命周期4.2事件循环的阶段5.应用技巧与分析5.1使用微任务优化性能示例三：使用微任务优化DOM操作5.2利
    • 在html中加入网址,网页超链接怎么做，添加超链接网址的的详细步骤 一只爪子 在html中加入网址
      此系列教程主要讲解HTML从基础到精通。自己能够设计一个完整的前端网页项目。程序员写代码在HTML中添加图片其实很简单，就是添加一个img的标签。图片标签的语法一般有src、alt、width、height四种属性就够用了。效果：图片的显示效果图片路径的写法src表示的是图片的路径，这里面的值应该怎么写呢？(1)html文件和图片在相同一个文件夹下。HTML文件和图片文件在相同的目录下，可以直接书
    • uniapp项目如何优雅处理Token失效自动重试 token无感刷新 代码简单说 2025开发必备(限时特惠)uni-appuniapptoken重试uniapptoken获取token无感刷新uniapp自动刷新token前端登录状态管理token自动刷新
      uniapp项目如何优雅处理Token失效自动重试token无感刷新标签：uniapp｜前端登录状态管理｜Token自动刷新｜前端重试队列作为一名前端开发，我在重构公司旧项目时，踩到了一个大家经常遇到的坑：Token失效后请求失败，用户体验极差。而更糟糕的是，在一个页面里多个请求同时发出，全部失败并跳转登录，场面就像是“弹窗地狱”。我决定把这个问题解决到底，封装出一个可复用、稳定、自动重试的请求模
    • 前端每周清单第 16 期：JavaScript 模块化现状；Node V8 与V6 真实性能对比
      前端每周清单第16期：JavaScript模块化现状；NodeV8与V6真实性能对比；Nuxt.jsSSR与权限验证指南为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的Web前端入门与工程实践的前端每周清单系列系列；部分文章需要自备梯子。前端每周清单第16期：JavaScript模块化现状；NodeV8与V6真实性能对比；Nuxt.jsSSR与权限验证指
    • 【译】2018 前端性能优化清单 —— 第一部分 qq_36320160 前端前端
      原文地址：Front-EndPerformanceChecklist2018-Part1原文作者：VitalyFriedman译文出自：掘金翻译计划本文永久链接：https://github.com/xitu/gold-miner/blob/master/TODO/front-end-performance-checklist-2018-1.md译者：tvChan校对者：mysterytonyry
    • 如何做到无感刷新token?
      如何做到无感刷新token?前言后端刷新Token方案--自动刷新token前端刷新Token方案--token续约疑问及思考前言解决方案：自动刷新tokentoken续约思路如果Token即将过期，你在验证用户权限的同时，为用户生成一个新的Token并返回给客户端，客户端需要更新本地存储的Token，还可以做定时任务来刷新Token，可以不生成新的Token，在快过期的时候，直接给Token增加
    • uniapp登录成功后跳回原有页面+无感刷新token 黑匣子~ uniappuni-apptoken
      uniapp登录成功后跳回原有页面引言在C端的页面场景中，我们经常会有几种情况到登录页：区分需要登录和不用登录的页面，点击需要登录才能查看的页面已经登录但是超时，用户凭证失效等原因以上情况可以细分为两种，一种是从未登录过的，需要第一次去登录，还一种是已经登录了，但是cookie失效了，需要重新获取用户凭证，这样的话后端会将两个状态码区分，那我们前端需要根据不同的状态码进行相应的处理。第一次登录时当
    • NodeJS VM2沙箱逃逸漏洞分析【CVE-2023-29199】 R3s3arcm NodeJS漏洞分析node.js安全安全威胁分析
      NodeJSVM2沙箱逃逸漏洞分析【CVE-2023-29199】简介Node.js是一个基于V8引擎的开源、跨平台的JavaScript运行环境，它可以在多个操作系统上运行，包括Windows、macOS和Linux等。Node.js提供了一个运行在服务器端的JavaScript环境，使得开发者可以编写并发的、高效的服务器端应用程序。Node.js使用事件驱动、非阻塞I/O模型来支持并发运行。它
    • 前端开发常见问题
      技术文章大纲性能优化问题页面加载速度慢的常见原因及解决方案渲染阻塞资源的处理方法图片与媒体文件优化策略懒加载与代码分割的实现方式浏览器兼容性问题不同浏览器对CSS特性的支持差异JavaScriptAPI的兼容性处理方案Polyfill的使用场景与实现方法自动化测试工具在兼容性测试中的应用响应式设计挑战移动端与桌面端布局适配问题媒体查询的最佳实践方案视口单位与相对单位的正确使用高DPI屏幕的图像处理
    • selenium跳转到新页面时如何进行定位
      在Selenium中，当你跳转到新页面（例如通过点击链接、提交表单或JavaScript重定向）时，通常会遇到页面加载或窗口切换的问题。为了在新页面上继续进行页面定位操作，你需要确保以下几点：✅1.等待页面加载完成Selenium默认不会自动等待页面加载完成。因此，你需要使用显式等待（ExplicitWait）来确保元素存在后再进行操作。示例代码（Python）：fromseleniumimpor
    • 反射+注解实现数据库Map转换成实体Map工具类 皮卡丘比比比
      实现场景因为原始的需求是从数据库中查询出来的一个实体字段比如一个Useruser=newUser（）的实体类，有userName，userId两个字段。然后我返回一个list给前端，Listlist现在需求变化，我需要添加一个额外的字段，比如userCompany，就没有办法使用刚才那个返回对象的方法现在直接从数据库中多表查询一个Map如下("user_name","curry"),("user_
    • web 系统对接钉钉三方登录完整步骤实战使用示例
      Web系统对接钉钉三方登录完整步骤实战以下是基于OAuth2.0授权码模式的完整对接流程（以扫码登录为例）：一、准备工作注册钉钉开发者账号钉钉开放平台→创建企业内部应用（或第三方应用）记录AppKey和AppSecret配置回调域名（如https://yourdomain.com/callback）授权权限在应用权限中开启成员信息读权限（auth/user）二、前端实现：生成登录二维码window
    • 《前端面试全家桶，从求职准备到面试演练 2024升级TS》课程笔记 半藏森林_ 前端面试笔记
      第2章【第一阶段】高效准备前端技术一面：第一阶段介绍——说说面试的那些事儿2-3先来体验几个面试题typeof能判断哪些类型？何时使用===何时使用==window.onload和DOMContentLoaded的区别？JS创建10个标签，点击的时候弹出对应的序号手写节流throttle、防抖debouncePromise解决了什么问题？思考：拿到一个面试题，你第一时间看到的是什么？如何看待网上搜
    • 2024 web 前端面试总结（春招） 2401_84413092 程序员前端面试职场和发展
      关于基础我一直认为基础都是最重要的，在掘金上面加了个前端的小册群，群里面大多数应该是工作了的人，前两天有人在群里问了下面这道题varvalue=1varfoo={value:2,bar:function(){returnthis.value}}console.log((foo.bar)())然后有的说自执行函数，还有人说为什么不是undefined，为什么不是1，其实就是个很简单的隐式绑定。怎么说
    • 【前端】【Echarts】【Liquidfill 水球图】深入理解 ECharts Liquidfill 水球图：从入门到进阶 患得患失949 Echarts学习数据大屏前端echartsjavascript
      效果深入理解EChartsLiquidfill水球图：从入门到进阶在可视化数据展示中，水球图（Liquidfill）是一种极具表现力的图表。它形象地用“水位高低”表示某个百分比或完成度，非常适合展示指标进度、占比、加载状态等。本文将结合实际HTML示例，带你全面掌握如何使用ECharts+echarts-liquidfill插件绘制水球图，并通过多个实例逐步讲解配置技巧。准备工作在HTML中使用水
    • 每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践 蓝婷儿 前端面试前端
      WebWorkers/多线程模型在前端中的应用实践一、为什么前端需要多线程？单线程JS的瓶颈：浏览器主线程不仅负责执行JS，还要负责：UI渲染（DOM/CSS）用户事件处理（点击、输入）一旦JS执行耗时任务（如大数组处理、加密运算），会阻塞页面响应多线程的意义：✅把计算密集型或IO密集型任务移出主线程，防止“卡死”✅实现离线计算、并发执行、后台数据同步✅提升用户体验、增强系统鲁棒性二、前端中的“线
    • 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其他