-seventy-
-seventy-

JavaScript-4

事件监听

  • 什么是事件：
在编程时系统内发生的动作或者发生的事情。比如：用户在网页上单击一个按钮
  • 什么是事件监听：
让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应
也称为"绑定事件或者注册事件"	（比如：点击按钮可以切换图片）
  • 事件监听三要素
事件源：某个DOM元素触发了事件
事件类型：用什么方式触发（比如：鼠标单击click、鼠标经过mouseover等）
事件调用的函数：要做什么事情
  • 语法：
元素对象.addEventListener('事件类型', 要执行的函数)
  • 演示
<body>
    <button>点击button>

    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            alert('Hello World')
        })
    script>
body>

两种注册事件的区别

传统 on 注册

  • 同一个对象，后面注册的事件会覆盖前面注册（同一个事件）
  • 直接使用 null 覆盖就可以实现事件的解绑
  • 都是冒泡阶段执行的

事件监听注册

  • 后面注册的事情不会覆盖到前面注册的事件
  • 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
  • 必须使用 removeEventListener(事件类型，事件处理函数，获取捕获或者冒泡阶段) 进行事件的解绑操作
  • 匿名函数无法被解绑

事件类型

鼠标事件

click 鼠标点击
mouseenter 鼠标进入
mouseleave 鼠标离开

焦点事件

focus 获得焦点
blur 失去焦点

键盘事件

keydown 键盘按下触发
keyup 键盘抬起触发

文本事件

input 用户输入事件

具体演示

  • 鼠标事件
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    style>
head>

<body>
    <div>div>

    <script>
        const div = document.querySelector('div')
        div.addEventListener('mouseenter', function () {
            div.style.backgroundColor = 'green'
        })
        div.addEventListener('mouseleave', function () {
            div.style.backgroundColor = 'red'
        })
    script>
body>
  • 焦点事件

    请输入
  • 键盘事件
    

        键盘当前状态:
        弹起
  • 文本事件
<body>
    <input type="text">
    <div>
        当前输入: <span>span>
    div>

    <script>
        const input = document.querySelector('input')
        const span = document.querySelector('span')

        input.addEventListener('input', function () {
            span.style.color = 'red'
            span.innerHTML = input.value
        })
    script>
body>

事件对象

基本概念

事件对象是什么?
	它是一个对象，这个对象里有事情触发时的相关信息
	例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置的信息

使用场景：
	可以判断用户按下了哪个键，比如：按下回车键可以发布新闻
	可以判断鼠标点击了哪个元素，从而做出相应操作

事件对象在哪里？
	事件绑定的回调函数的第一个参数

具体演示

<body>
    <input type="text">

    <script>
        const input = document.querySelector('input')
        input.addEventListener('keyup', function (event) {
            if (event.key === 'Enter') {
                console.log('成功按下了回车键')
            }
        })
    script>
body>

环境对象

环境对象，指的是函数内部特殊的变量 this，它代表着当前函数运行时所处的环境
（粗略判断规则：谁调用，this 就是谁）

<body>
    <button>点击button>

    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            this.style.color = 'red'    // 等效于 btn.style.color = 'red'
        })
    script>
body>

回调函数

概念：如果将函数A做为参数，传递给函数B，我们称函数A为回调函数

事件流

基本概念

  • 事件流：指的是事件完整执行过程中的流动路径
  • 捕获阶段：Document =》Element html =》Element body =》Element div
  • 冒泡阶段：Element div =》Element body =》Element html =》Document
语法：
	元素.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)

注意：
	addEventListener第三个参数传入true：代表是捕获阶段（很少使用）
	addEventListener第三个参数传入false或者不写：代表是冒泡阶段

捕获

<body>
    <div class="father">
        <div class="son">
            点我
        div>
    div>

    <script>
        const father = document.querySelector('.father')
        const son = document.querySelector('.son')

        document.addEventListener('click', function () {
            alert('I am grandfather')
        }, true)

        father.addEventListener('click', function () {
            alert('I am father')
        }, true)

        son.addEventListener('click', function () {
            alert('I am son')
        }, true)
    script>
body>

当鼠标点击"点我"时候，弹出框弹出的先后顺序是：
    I am grandfather
    I am father
    I am son

冒泡

<body>
    <div class="father">
        <div class="son">
            点我
        div>
    div>

    <script>
        const father = document.querySelector('.father')
        const son = document.querySelector('.son')

        document.addEventListener('click', function () {
            alert('I am grandfather')
        }, false)

        father.addEventListener('click', function () {
            alert('I am father')
        }, false)

        son.addEventListener('click', function () {
            alert('I am son')
        }, false)
    script>
body>

当鼠标点击"点我"时候，弹出框弹出的先后顺序是：
	I am son
	I am father
    I am grandfather

阻止冒泡

问题：
	因为默认就有冒泡模式的存在，所以容易导致事情影响到父级元素

需求：
	若想把事情就限制在当前元素内，就需要阻止事件冒泡

语法：
	事件对象.stopPropagation()

注意：
	此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

<body>
    <div class="father">
        <div class="son">
            点我
        div>
    div>

    <script>
        const father = document.querySelector('.father')
        const son = document.querySelector('.son')

        document.addEventListener('click', function () {
            alert('I am grandfather')
        }, false)

        father.addEventListener('click', function () {
            alert('I am father')
        }, false)

        son.addEventListener('click', function (event) {
            alert('I am son')
            
            // 阻止事件冒泡
            event.stopPropagation()
            
        }, false)
    script>
body>

事件解绑

  • 解绑方式一
<body>
    <button>确认button>

    <script>
        const btn = document.querySelector('button')
        btn.onclick = function () {
            alert('用户点击了确认')
            btn.onclick = null  // 解绑操作
        }
    script>
body>
  • 解绑方式二（常见）

事件委托

基本理解

情景带入

需求：
	要求点击某个li，那个li就变成红色。	
	
    
    
        
  • 1
    • 
        
  • 2
    • 
        
  • 3
    • 
        
  • 4
    • 
        
  • 5
    • 
    

    
解决办法：
	方式一：给每个li都添加一个事件（太麻烦）
	方式二：使用事件委托，将事件委托给ul进行处理

事件委托的优点：减少注册事件的次数，可以提供程序性能

事件委托的原理：利用事件冒泡的特点（给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件）

具体演示

<body>
    <ul>
        <li>li-1li>
        <li>li-2li>
        <li>li-3li>
        <li>li-4li>
        <li>li-5li>
        <p>我是p标签p>
    ul>

    <script>
        // 需求：点击小li，当前li文字变红色，点击其他标签不变色

        const ul = document.querySelector('ul')
        ul.addEventListener('click', function (event) {
            if (event.target.tagName === 'LI') {
                event.target.style.color = 'red'    // 找到点击所触发的元素：event.target
            }
        })
    script>
body>

阻止默认行为

<body>
    <form action="https://www.baidu.com">
        <input type="submit" value="免费注册">
    form>
    
    <script>
        const form = document.querySelector('form')
        form.addEventListener('submit', function (event) {
            // 阻止默认行为，此处的默认行为是"提交"
            event.preventDefault()
        })
    script>
body>


    点击跳转

其他事件

页面加载事件

  • 基本认识
作用：
	可以控制：先加载外部资源（如：图片、CSS、JS等）加载完毕时触发的事件

意义：
	1.有些时候，我们需要等页面所有资源全部加载完了，再做一些事情
	2.一些老项目的代码，往往把 script 写在 head 中
  • 监听整个页面资源是否加载完成
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 等待页面所有资源加载完毕，才会去执行回调函数
        window.addEventListener('load', function () {
            // ......
            // 请在此处写当前这个回调函数具体要实现的功能
            // ......
        })
    script>
head>
  • 注意：load 不仅可以监听整个页面资源加载完成，也可以针对某个资源绑定 load 事件
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 等待图片加载完毕，才会去执行回调函数
        img.addEventListener('load', function () {
            //......
        })
    script>
head>
  • 当初始的 HTML 文档被完全加载和解析完成后，DOMContentLoaded 事件被触发，而无需等待CSS样式表、图像等完全加载（此方法更快加载事件）
// 监听页面 DOM 加载完毕
        document.addEventListener('DOMContentLoaded', function () {
			// ......
        })

页面滚动事件

基本认识

含义：
	滚动条在滚动的时候持续触发的事件

意义：
	很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏、返回顶部

监听滚动

  • 监听页面滚动
<body>
    <div style="height: 2000px;">div>
    
    <script>
        // 页面滚动事件
        window.addEventListener('scroll', function () {
            console.log('我滚动了');
        })
    script>
body>
  • 监听某个元素内部的滚动
<body>
    <div style="width: 50px; height: 150px; overflow: scroll;">
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    div>

    <script>
    	// 监听div元素内部的滚动
        const div = document.querySelector('div')
        div.addEventListener('scroll', function () {
            console.log('我滚动了');
        })
    script>
body>

获取位置

  • 基本认识
属性：
	scrollLeft 和 scrollTop

作用：
    获取元素内容往左、往上滚动出去的距离

注意：
	1.此属性既可以读取当前距离，也可以给它进行距离的赋值！
	2.本文只通过两个"向上滚动的距离"进行演示
  • 演示一：输出 div 元素向上滚动的距离
<body>
    <div style="width: 50px; height: 150px; overflow: scroll;">
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    div>

    <script>
        const div = document.querySelector('div')
        
        // 输出: div元素向上滚动的距离
        div.addEventListener('scroll', function () {
            console.log(div.scrollTop);
        })
    script>
body>
  • 演示二：输出窗口向上滚动的距离
<body>
    <div style="height: 2000px;">div>

    <script>
        // 补充知识：获取html元素对象的写法是 document.documentElement

        // 输出: 窗口向上滚动距离
        window.addEventListener('scroll', function(){
            console.log(document.documentElement.scrollTop);
        })

    script>
body>
  • 扩展
跳转到窗口的某个滚动距离：
	
	方法一：利用 scrollTop 的可赋值性，document.documentElement.scrollTop = 100px
	
	方法二：windows.scrollTO(x, y)

页面尺寸事件

  • 尺寸改变，触发事件
<body>

    <script>
    	// 窗口尺寸改变的时候，触发事件
        window.addEventListener('resize', function () {
            console.log("窗口尺寸改变了！");
        })
    script>
body>
  • 获取元素宽高
注意：
	通过获取元素的可见部分宽高，不包含边框，margin，滚动条

属性：
	clientWidth 和 clientHeight

<body>
    <div style="display: inline-block;">
        随着内容的变化，span标签的宽度也随之变化
    div>

    <script>
        const div = document.querySelector('div')
        console.log(div.clientWidth);
    script>
body>

元素的尺寸与位置

获取宽高

介绍：
	1.获取元素的自身宽高、包含元素自身设置的宽高、padding、border
	2.获取出来的是数值，方便计算

属性：
	offsetWidth 和 offsetHeight

注意：
	获取的是可视宽高，如果盒子是隐藏的，获取的结果是0

<body>
    <div style="width: 100px;height: 100px; background-color: pink; margin: 100px auto;">div>
    <script>
        const div = document.querySelector('div')
        console.log(div.offsetWidth);
        console.log(div.offsetHeight);
    script>
body>

获取位置

介绍：
	获取元素距离自己"有定位的"父级元素的左、上距离

属性：
	offsetLeft 和 offsetTop

注意：
	这两个属性是只读属性，不能赋值。

<body>
    <div style="width: 100px;height: 100px; background-color: pink; margin: 100px auto;">div>
    
    <script>
        const div = document.querySelector('div')
        // div 与它"有定位"的父级的距离
        console.log(div.offsetTop);
        console.log(div.offsetLeft);
    script>
body>

速查(属性总结)

属性 作用 说明
scrollLeft 和 scrollTop 被卷去的头部和左侧 配合页面滚动使用（可读写）
clientWidth 和 clientHeight 获得元素宽度和高度 不包含border、margin、滚动条，用于js获取元素大小（只读属性）
offsetWidth 和 offsetHeight 获取元素宽度和高度 包含border、padding，滚动条等（只读属性）
offsetLeft 和 offsetTop 获取元素距离自己定位父级元素的左、上距离 在获取元素定位的时候使用（只读属性）

你可能感兴趣的:(前端-JavaScript,javascript)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 前端代码上传文件 余生逆风飞翔 前端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
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
    1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
  • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
    1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
  • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
    数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
  • 分布式锁和spring事务管理 暴躁的鱼 锁及事务分布式springjava
    最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • java杨辉三角 3213213333332132 java基础
    package com.algorithm; /** * @Description 杨辉三角 * @author FuJianyong * 2015-1-22上午10:10:59 */ public class YangHui { public static void main(String[] args) { //初始化二维数组长度 int[][] y
  • 《大话重构》之大布局的辛酸历史 白糖_ 重构
    《大话重构》中提到“大布局你伤不起”，如果企图重构一个陈旧的大型系统是有非常大的风险，重构不是想象中那么简单。我目前所在公司正好对产品做了一次“大布局重构”，下面我就分享这个“大布局”项目经验给大家。   背景         公司专注于企业级管理产品软件，企业有大中小之分，在2000年初公司用JSP/Servlet开发了一套针对中
  • 电驴链接在线视频播放源码 dubinwei 源码电驴播放器视频ed2k
    本项目是个搜索电驴（ed2k）链接的应用,借助于磁力视频播放器（官网： http://loveandroid.duapp.com/ 开放平台），可以实现在线播放视频，也可以用迅雷或者其他下载工具下载。 项目源码： http://git.oschina.net/svo/Emule,动态更新。也可从附件中下载。 项目源码依赖于两个库项目，库项目一链接： http://git.oschina.
  • Javascript中函数的toString()方法 周凡杨 JavaScriptjstoStringfunctionobject
    简述     The toString() method returns a string representing the source code of the function.     简译之，Javascript的toString()方法返回一个代表函数源代码的字符串。 句法     function.
  • struts处理自定义异常 g21121 struts
    很多时候我们会用到自定义异常来表示特定的错误情况，自定义异常比较简单，只要分清是运行时异常还是非运行时异常即可，运行时异常不需要捕获，继承自RuntimeException，是由容器自己抛出，例如空指针异常。 非运行时异常继承自Exception，在抛出后需要捕获，例如文件未找到异常。 此处我们用的是非运行时异常，首先定义一个异常LoginException: /** * 类描述：登录相
  • Linux中find常见用法示例 510888780 linux
    Linux中find常见用法示例 ·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \; find命令的参数；
  • SpringMVC的各种参数绑定方式 Harry642 springMVC绑定表单
    1. 基本数据类型(以int为例，其他类似)： Controller代码： @RequestMapping("saysth.do") public void test(int count) { } 表单代码： <form action="saysth.do" method="post&q
  • Java 获取Oracle ROWID aijuans javaoracle
    A ROWID is an identification tag unique for each row of an Oracle Database table. The ROWID can be thought of as a virtual column, containing the ID for each row. The oracle.sql.ROWID class i
  • java获取方法的参数名 antlove javajdkparametermethodreflect
    reflect.ClassInformationUtil.java package reflect; import javassist.ClassPool; import javassist.CtClass; import javassist.CtMethod; import javassist.Modifier; import javassist.bytecode.CodeAtt
  • JAVA正则表达式匹配 查找 替换 提取操作 百合不是茶 java正则表达式替换提取查找
    正则表达式的查找;主要是用到String类中的split();       String str;      str.split();方法中传入按照什么规则截取,返回一个String数组   常见的截取规则: str.split("\\.")按照.来截取 str.
  • Java中equals()与hashCode()方法详解 bijian1013 javasetequals()hashCode()
    一.equals()方法详解     equals()方法在object类中定义如下：  public boolean equals(Object obj) { return (this == obj); }    很明显是对两个对象的地址值进行的比较（即比较引用是否相同）。但是我们知道，String 、Math、I
  • 精通Oracle10编程SQL(4)使用SQL语句 bijian1013 oracle数据库plsql
    --工资级别表 create table SALGRADE ( GRADE NUMBER(10), LOSAL NUMBER(10,2), HISAL NUMBER(10,2) ) insert into SALGRADE values(1,0,100); insert into SALGRADE values(2,100,200); inser
  • 【Nginx二】Nginx作为静态文件HTTP服务器 bit1129 HTTP服务器
     Nginx作为静态文件HTTP服务器 在本地系统中创建/data/www目录，存放html文件(包括index.html) 创建/data/images目录，存放imags图片 在主配置文件中添加http指令   http { server { listen 80; server_name
  • kafka获得最新partition offset blackproof kafkapartitionoffset最新
    kafka获得partition下标，需要用到kafka的simpleconsumer   import java.util.ArrayList; import java.util.Collections; import java.util.Date; import java.util.HashMap; import java.util.List; import java.
  • centos 7安装docker两种方式 ronin47
          第一种是采用yum 方式              yum install -y docker           
  • java-60-在O(1)时间删除链表结点 bylijinnan java
    public class DeleteNode_O1_Time { /** * Q 60 在O(1)时间删除链表结点 * 给定链表的头指针和一个结点指针(!!)，在O(1)时间删除该结点 * * Assume the list is: * head->...->nodeToDelete->mNode->nNode->..
  • nginx利用proxy_cache来缓存文件 cfyme cache
    user  zhangy users; worker_processes 10; error_log  /var/vlogs/nginx_error.log  crit; pid        /var/vlogs/nginx.pid; #Specifies the value for ma
  • [JWFD开源工作流]JWFD嵌入式语法分析器负号的使用问题 comsci 嵌入式
        假如我们需要用JWFD的语法分析模块定义一个带负号的方程式，直接在方程式之前添加负号是不正确的，而必须这样做：     string str01 = "a=3.14;b=2.71;c=0;c-((a*a)+(b*b))"     定义一个0整数c,然后用这个整数c去
  • 如何集成支付宝官方文档 dai_lm android
    官方文档下载地址 https://b.alipay.com/order/productDetail.htm?productId=2012120700377310&tabId=4#ps-tabinfo-hash 集成的必要条件 1. 需要有自己的Server接收支付宝的消息 2. 需要先制作app，然后提交支付宝审核，通过后才能集成 调试的时候估计会真的扣款，请注意
  • 应该在什么时候使用Hadoop datamachine hadoop
    原帖地址：http://blog.chinaunix.net/uid-301743-id-3925358.html 存档，某些观点与我不谋而合，过度技术化不可取，且hadoop并非万能。 --------------------------------------------万能的分割线-------------------------------- 有人问我，“你在大数据和Hado
  • 在GridView中对于有外键的字段使用关联模型进行搜索和排序 dcj3sjt126com yii
    在GridView中使用关联模型进行搜索和排序 首先我们有两个模型它们直接有关联: class Author extends CActiveRecord { ... } class Post extends CActiveRecord { ... function relations() { return array( '
  • 使用NSString 的格式化大全 dcj3sjt126com Objective-C
    格式定义The format specifiers supported by the NSString formatting methods and CFString formatting functions follow the IEEE printf specification; the specifiers are summarized in Table 1. Note that you c
  • 使用activeX插件对象object滚动有重影 蕃薯耀 activeX插件滚动有重影
      使用activeX插件对象object滚动有重影   <object style="width:0;" id="abc" classid="CLSID:D3E3970F-2927-9680-BBB4-5D0889909DF6" codebase="activex/OAX339.CAB#
  • SpringMVC4零配置 hanqunfeng springmvc4
    基于Servlet3.0规范和SpringMVC4注解式配置方式，实现零xml配置，弄了个小demo，供交流讨论。     项目说明如下： 1.db.sql是项目中用到的表，数据库使用的是oracle11g 2.该项目使用mvn进行管理，私服为自搭建nexus,项目只用到一个第三方 jar，就是oracle的驱动； 3.默认项目为零配置启动，如果需要更改启动方式，请
  • 《开源框架那点事儿16》：缓存相关代码的演变 j2eetop 开源框架
    问题引入 上次我参与某个大型项目的优化工作，由于系统要求有比较高的TPS，因此就免不了要使用缓冲。 该项目中用的缓冲比较多，有MemCache，有Redis，有的还需要提供二级缓冲，也就是说应用服务器这层也可以设置一些缓冲。 当然去看相关实现代代码的时候，大致是下面的样子。 [java] view plain copy print ? public vo
  • AngularJS浅析 kvhur JavaScript
    概念 AngularJS is a structural framework for dynamic web apps. 了解更多详情请见原文链接：http://www.gbtags.com/gb/share/5726.htm Directive 扩展html，给html添加声明语句，以便实现自己的需求。对于页面中html元素以ng为前缀的属性名称，ng是angular的命名空间
  • 架构师之jdk的bug排查(一)---------------split的点号陷阱 nannan408 split
    1.前言.    jdk1.6的lang包的split方法是有bug的,它不能有效识别A.b.c这种类型,导致截取长度始终是0.而对于其他字符,则无此问题.不知道官方有没有修复这个bug. 2.代码 String[] paths = "object.object2.prop11".split("'"); System.ou
  • 如何对10亿数据量级的mongoDB作高效的全表扫描 quentinXXZ mongodb
      本文链接:  http://quentinXXZ.iteye.com/blog/2149440 一、正常情况下，不应该有这种需求 首先，大家应该有个概念，标题中的这个问题，在大多情况下是一个伪命题，不应该被提出来。要知道，对于一般较大数据量的数据库，全表查询，这种操作一般情况下是不应该出现的，在做正常查询的时候，如果是范围查询，你至少应该要加上limit。 说一下，
  • C语言算法之水仙花数 qiufeihu c算法
    /** * 水仙花数 */ #include <stdio.h> #define N 10 int main() { int x,y,z; for(x=1;x<=N;x++) for(y=0;y<=N;y++) for(z=0;z<=N;z++) if(x*100+y*10+z == x*x*x
  • JSP指令 wyzuomumu jsp
    jsp指令的一般语法格式： <%@ 指令名 属性 =”值 ” %> 常用的三种指令： page,include,taglib page指令语法形式： <%@ page 属性 1=”值 1” 属性 2=”值 2”%> include指令语法形式： <%@include file=”relative url”%> (jsp可以通过 include
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他