概述
单击事件是任何一个前端页面中最常用的交互行为之一，在传统的PC端大部分是使用click事件来实现用户单击交互的程序逻辑，而在移动Web端新增了touch事件来实现移动端更加敏感和复杂的触摸交互行为。本章将就移动端touch事件的使用以及它与PC端的click事件的区别进行深入探讨。
touch事件
在传统的PC端，用户的单击操作主要是由鼠标的左键或者右键来产生，它主要是指鼠标的按钮被按下，并且在很短的时间内（一般小于300ms）又被释放开，这就被称为单击操作（或称为一次点击操作）。
而对于移动Web端，同样也是如此，当手指触摸到屏幕时开始计算时间，并且在300ms内离开屏幕，这段时间手指不能移动，这就算是移动Web端的单击事件，手指触摸就被称为touch。
touch事件分类
移动Web端的touch触摸事件主要由屏幕和触摸点组成，其中屏幕可以是手机、平板或者触摸板，而触摸点可以通过手指、胳膊肘或触摸笔，甚至耳朵、鼻子都行，但一般是通过手指。根据touch触摸的类型可分为以下4种事件：
touchstart：当手指与屏幕接触时触发。
touchmove：当手指在屏幕上滑动时连续地触发。
touchend：当手指从屏幕上离开时触发。
touchcancel：当touch事件被迫终止，例如电话接入或者弹出信息时会触发，或者当触摸点太多，超过了支持的上限（自动取消早先的触摸点）时触发，一般不常用。
相比PC端，以上4种事件将用户的touch行为划分得更细，并且通过这些细化的事件可以实现移动Web端独有的用户交互行为，例如拖动swipe、长按longtap、双指缩放pinch，等等。
其中的touchstart、touchmove和touchend是最常用的3个事件，其中touchstart最先触发，touchend结束时触发，而touchmove是否触发取决于手指是否在触摸屏上移动。下面用代码来感受一下这3种事件的触发顺序，如下
在浏览器中运行这段代码，同时注意要启用Chrome中DevTools工具中的Device Mode功能，并使用鼠标模拟手指在屏幕上触发触摸事件，随后就会在Console控制台看到打印出对应的日志，从中可以看到一个简单的触摸操作是如何完成的。
touch事件对象
对于touch事件，每一次触发都可以得到一个事件对象，在JavaScript中这个对象叫作TouchEvent，利用TouchEvent可以获取touch事件触发时的坐标、元素以及到底有几个手指触发等，下面就来了解一下TouchEvent事件对象。
可以在Console控制台打印出当前触发touch时的TouchEvent对象，代码如下所示：
document.addEventListener("touchstart",function (e) {
console.log(e);
});
打印的内容如图:
在上面的TouchEvent的属性中，经常使用的就是touches、targetTouches和changedTouches，它们的含义分别是：
touches：当前页面（屏幕）上所有的触摸点。
targetTouches：当前绑定事件的元素上的触摸点。
changedTouches：当前屏幕上刚刚接触的手指或者离开的手指的触摸点。
这3个属性返回的是TouchList对象，代表的是一个touch的集合数组，也就是说每一次touch触发，都会兼顾到多指触摸的场景，下面就分别以单指触摸的场景和多指触摸的场景来讲解这3个属性的区别。
首先是单指触摸的场景，我们来模拟用户一个手指触摸，如图。
外层的线框代表页面，里面的一个元素绑定了touch事件，1号手指触摸了该
元素，这时touches、targetTouches以及changedTouches里面的触摸点都是指1号手指这个触摸点，应该很好理解。 对于多指触摸的场景，条件是手指触摸屏幕之后暂不离开，如图。
外层的线框代表页面，里面的一个元素绑定了touch事件，首先1号手指第一个触摸了该
元素，然后2号手指第二个也触摸了该
元素，最后3号手指第三个触摸了div外面的区域，这时touches涵盖的触摸点的集合数组包括1号、2号、3号手指，而targetTouches涵盖的触摸点的集合数组包括1号和2号手指，而changedTouches涵盖的触摸点的集合数组包括2号和3号手指。
当手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值，此值为最后一个离开屏幕的手指的接触点。这就是touches、targetTouches和changedTouches这3个属性对于单指触摸的场景和多指触摸的场景下的区别，总结如下：
单指触摸的场景：
touches：1号手指
targetTouches：1号手指
changedTouches：1号手指
多指触摸的场景：
touches：1，2，3号手指
targetTouches：1，2号手指
changedTouches：2，3号手指
对于单指触摸的场景来说，它们并无区别，主要区别在于多指触摸的场景，所以在使用时可以根据具体的程序逻辑来选择使用合适的属性。
对于涵盖触摸点的集合数组TouchList而言，里面每个元素都是一个touch对象，通过这个对象可以获取当前触摸的位置，如图。
其中，主要用到了offsetX/Y、pageX/Y和clientX/Y这3个属性，它们的区别和含义分别是：
offsetX/Y：触摸位置相当于事件源元素的位置坐标，以当前元素盒子模型的内容区域的左上角为原点。
pageX/Y：触摸位置相当于整个页面内容区域的位置坐标，当页面过长时，包括滚动隐藏的部分内容，以页面完整内容区域的左上角为原点。
clientX/Y：触摸位置相当于浏览器视区（屏幕）区域的位置坐标，以相对于页面的可见部分内容区域的左上角为原点。
具体的位置和距离可以参考下图，外层表示页面的所有内容，中间框表示浏览器的视区，其中有一个元素绑定了touch事件，黑点表示触摸点的位置。
移动web单击事件
在了解了touch事件之后，我们知道移动Web端的单击事件完全可以由touchstart、touchmove和touchend来组合实现，移动Web端同时也提供了原生的click事件，它和传统的PC端的click事件一样，在用户完成一次完整的手指单击屏幕之后触发。在移动Web端使用click绑定单击事件，代码如下：
document.addEventListener("click",function (e) {
console.log(e);
});
一切看似都很顺利，在需要使用单击时就用click事件，在需要使用touch时（拖动，长按等）就使用touch对应的事件。但是，对于移动Web端而言，处于iOS系统或Android系统时，采用click实现单击事件却有着不同的表现。
iOS单击延迟
这要追溯至2007年初，苹果公司在发布首款iPhone前遇到了一个问题：当时的网站都是为大屏幕设备所设计的，于是提出了视区（Viewport）的概念，其中一项即是用户在浏览网页时，可以在页面的任何地方通过双击操作将页面放大（Double Tap to Zoom）。这个交互功能提升了用户浏览网页时的体验，于是Android和iOS的移动端浏览器纷纷支持了这个功能，但是对于双击这个操作而言，其实是包括了两次单击操作，当第一次单击完成后，系统需要有一段时间来监听是否有第二次单击，如果有则表明此次操作是一个双击操作，而这段时间间隔大概有300毫秒（ms）。
因此，哪怕是只想要单击这个事件，也都会经过双击放大这个判断逻辑，导致要等到300毫秒之后才能收到单击事件程序逻辑的反馈，这就是300毫秒的单击延迟问题。
对于Android系统的浏览器而言，可以通过给视区设置user-scalable=no来禁止用户进行缩放，随后就可以正常地使用原生的click事件而没有延迟；对于iOS系统而言，浏览器对user-scalable支持度存在Bug（漏洞），导致了无法通过简单的设置来达到正常使用原生click事件的目的。代码如下：
所以，在iOS移动端，如果想要实现真正的单击事件而没有300毫秒延迟问题，就不能采用原生的click事件，可以通过touch（touchstart、touchmove和touchend）事件来模拟一次单击操作。好在当前业界已有比较流行的方案，例如Zepto.js中的tap事件和FastClick.js库可用来解决这个问题，在这里主要介绍一下FastClick.js库。
FastClick.js是FT Labs团队结合touch事件专门为解决移动端浏览器的300毫秒单击延迟问题所开发的一个轻量级的库。正常情况下，在移动Web端，当用户单击屏幕时，会依次触发touchstart、touchmove（0 次或多次）、touchend、click（原生）这些事件。touchmove事件只有当手指在屏幕上移动时才会触发。Touchstart、touchmove或者touchend 事件的任意一个调用event.preventDefault()方法，都会直接阻止原生click事件的触发。
FastClick的实现原理是在检测到touchend事件触发时，把浏览器在300毫秒之后原生的click事件阻止掉，然后通过DOM自定义事件立即发出一个模拟的click事件，这样就消除了300毫秒的延迟，提供了一个快速响应的“单击”事件。如下代码演示了FastClick的使用。
需要注意的是，在不修改WKWebView 的浏览器，并将其应用在Safari浏览器上，由此解决了这个问题（存在300毫秒单击延迟问题的浏览器是UIWebView，这个内核已经不再维护了），并且后续使用iOS 9.3版本系统的浏览器在访问页面时，会默认使用WKWebView浏览器。
至此，移动Web端的300毫秒单击延迟问题得到了彻底的改善。
“单击穿透”问题
在移动Web端，有一个很常见的应用场景，单击一个按钮会出现一个蒙层，此蒙层是全屏遮盖，并且有最高层级，当单击蒙层时，蒙层消失。此场景和交互操作看似并没有什么问题，但是假如页面中有一个绑定了单击事件的元素被蒙层遮盖，而单击蒙层关闭时的位置刚好和该
元素重合，那么蒙层关闭后会同时触发该
元素的单击事件，对于用户来说，这个操作并不是要单击该
元素，这就是所谓的“单击穿透”问题，如图。
出现“单击穿透”问题需要有个条件，即蒙层是通过绑定的touch事件来实现隐藏，而其遮盖的元素绑定的是原生click事件，这样就形成了touch事件触发之后，蒙层隐藏了，300毫秒后当前这个触摸点的click事件又触发了，就形成“单击穿透”。
移动Web端的“单击穿透”问题出现的原因其实和300毫秒单击延迟问题脱不了关系，但是“单击穿透”出现的场景比较单一，并且也比较好解决。
解决“单击穿透”问题可以从问题出现的原因上来着手，主要有以下两种解决方案：
不要同时混用touch事件和click事件，要么给蒙层和元素同时绑定touch事件，要么同时绑定click事件，在iOS 9.3版本之后，只用click事件即可，此方案体验最好。
延迟蒙层消失的时间，例如在touch事件触发后，在350毫秒后再让蒙层消失，这样后面的元素就不会触发click事件了，此方案会导致蒙层消失的响应慢，体验差，并且有时会触发两次消失逻辑，故不推荐使用。
无论是300毫秒单击延迟问题，还是“单击穿透”问题，这些都是移动Web端特有的问题，也在一定程度上反映出移动Web端环境的复杂性，需要注意支持度和兼容性问题的地方很多，所以大家在进行移动Web端开发时，要有意识地去关注这些问题。
以上就是移动web开发技能之touch事件详解的详细内容，更多关于web移动touch事件的资料请关注脚本之家其它相关文章！
你可能感兴趣的:(移动web开发技能之touch事件详解)
鸿蒙仓颉开发语言实战教程：页面跳转和传参
湖北穷逼首席代表
harmonyos 开发语言 华为
合集-仓颉教程(25)1.详解鸿蒙仓颉开发语言中的日志打印问题05-212.鸿蒙仓颉开发语言实战教程：实现商城应用首页05-223.鸿蒙仓颉开发语言实战教程：页面跳转和传参05-254.鸿蒙仓颉语言开发教程：页面和组件的生命周期05-285.鸿蒙仓颉语言开发实战教程：购物车页面06-036.鸿蒙仓颉语言开发实战教程：商城登录页06-047.鸿蒙仓颉语言开发实战教程：商城搜索页06-058.鸿蒙仓颉
鸿蒙仓颉语言开发实战教程：购物车页面
王家那谁
harmonyos 华为
合集-仓颉教程(25)1.详解鸿蒙仓颉开发语言中的日志打印问题05-212.鸿蒙仓颉开发语言实战教程：实现商城应用首页05-223.鸿蒙仓颉开发语言实战教程：页面跳转和传参05-254.鸿蒙仓颉语言开发教程：页面和组件的生命周期05-285.鸿蒙仓颉语言开发实战教程：购物车页面06-036.鸿蒙仓颉语言开发实战教程：商城登录页06-047.鸿蒙仓颉语言开发实战教程：商城搜索页06-058.鸿蒙仓颉
深入详解：决策树算法的概念、原理、实现与应用场景
猿享天开
算法 决策树 机器学习
深入详解：决策树算法的概念、原理、实现与应用场景决策树（DecisionTree）是机器学习中一种直观且广泛应用的监督学习算法，适用于分类和回归任务。其树形结构易于理解，特别适合初学者。本文将从概念、原理、实现到应用场景，全面讲解决策树，并通过流程图和可视化示例增强理解，通俗易懂，帮助小白快速掌握决策树算法相关知识。1.决策树的概念1.1什么是决策树？决策树通过一系列条件判断（决策节点）将输入数据
Java Fork/Join 框架详解
empti_
数据结构与算法 java
JavaFork/Join框架详解Fork/Join框架是Java7引入的一个并行编程框架，专门设计用来高效地实现分治算法（Divide-and-Conquer）。它通过工作窃取（Work-Stealing）算法来最大化多核处理器的利用率。一、核心概念1.基本组成ForkJoinPool：特殊的线程池，管理工作线程ForkJoinTask：表示任务的抽象类，有两个重要子类：RecursiveAct
Linux I/O 文件操作详解：从系统调用到实际工程应用
平凡灵感码头
linux学习 linux 运维 服务器
一、写在前面在Linux或任何类Unix操作系统中，文件是一切的核心——无论是硬盘上的文本文件，还是串口设备、GPIO寄存器、甚至网络接口，几乎都被抽象为“文件”。理解Linux下的I/O文件操作机制，不仅是嵌入式开发的基础，也是进行系统编程与底层控制的关键。二、I/O的本质：一切皆文件Linux将外设抽象成文件的方式，统一了对各种资源的操作模型。你可以用open打开串口设备/dev/ttyS0，
JVM(9)——详解Serial垃圾回收器
十六点五
jvm java 开发语言 后端
Serial垃圾回收器是JVM最古老、最基础、最简单的垃圾回收器，也是理解其他更复杂回收器的基础。一、Serial回收器的定位与设计目标核心特点：单线程(Single-Threaded)这是Serial回收器最根本的特征。无论是进行垃圾标记(Marking)、清除(Sweeping)、复制(Copying)还是整理(Compacting)，它都只使用一个单独的线程来执行所有垃圾回收工作。工作模式：
世赛背景下，中职物联网应用与服务赛项实训解决方案
武汉唯众智创
物联网 世赛 物联网应用与服务 世界职业院校技能大赛 技能大赛 物联网应用
一、世赛背景与物联网应用赛项概述1.1世赛发展历程及对中职教育的影响世界技能大赛（WorldSkillsCompetition，简称世赛）自1950年创立以来，已经成为全球范围内展示职业技能水平的重要赛事。截至2024年，世赛已成功举办46届，参赛国家和地区数量不断增加，从最初的20多个发展到如今的80多个，参赛选手超过1000名。世赛涵盖了从传统制造业到现代信息技术等众多领域，其中物联网应用与服
MySQL表达式之公用表表达式(CTE)的使用示例
@Corgi
后端开发 mysql 数据库 CTE
示例一数据表中有每个企业每年每月并且每月的产值是累加的数据的数据记录需求：统计企业产值能力，找出所有家企业中产值最高的企业，其产值记为P。对于第i家企业，其产值为Pi则该企业的产值能力评分=Pi/P×100。SQL：--使用ROW_NUMBER()为每个企业每年每个月的产值排名，筛选出每个企业每年最大月份的产值。WITHMaxMonthlyOutputAS(SELECTcompany_id,dec
游戏寻路之A*算法（GUI演示）
jforgame
从零开始搭建游戏服务器框架 java A星 自动寻路
一、A*算法介绍A*算法是一种路径搜索算法，用于在图形网络中找到最短路径。它结合了Dijkstra算法和启发式搜索的思想，通过综合利用已知的最短路径和估计的最短路径来优化搜索过程。在游戏自动寻路得到广泛应用。二、A*算法的基本思想在图形网络中选择一个起点和终点。维护两个列表：开放列表和关闭列表。开放列表用于存储待考虑的节点，关闭列表用于存储已考虑过的节点。将起点加入开放列表。循环以下工作当open
三阶落地：腾讯云Serverless+Spring Cloud的微服务实战架构
大熊计算机
# 腾讯云 架构 腾讯云 serverless
云原生演进的关键挑战（1）传统微服务架构痛点资源利用率低（非峰值期资源闲置率>60%）运维复杂度高（需管理数百个容器实例）突发流量处理能力弱（扩容延迟导致P99延迟飙升）（2）Serverless的破局价值腾讯云SCF（ServerlessCloudFunction）提供：毫秒级计费粒度（成本下降40%~70%）百毫秒级弹性伸缩（支持每秒万级并发扩容）零基础设施运维同步调用异步事件用户请求API网
DeepSeek-V3 通俗详解：从诞生到优势，以及与 GPT-4o 的对比
码事漫谈
AI ai
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站1.DeepSeek的前世今生1.1什么是DeepSeek？DeepSeek是一家专注于人工智能技术研发的公司，致力于打造高性能、低成本的AI模型。它的目标是让AI技术更加普惠，让更多人能够用上强大的AI工具。1.2DeepSeek-V3的诞生DeepSeek-V3是DeepSeek公司推出的最新一代A
009 【入门】单双链表及其反转-堆栈诠释
要天天开心啊
算法专栏 算法 链表
链表与堆栈系统详解|[数据结构]-[中级]-[通用]一、基础概念与内存模型1.按值传递vs按引用传递|[Java]-[基础]-[内存]//[典型错误示例]-Java中的引用传递陷阱voidmodify(Nodenode){node=node.next;//[警告]错误！仅修改局部引用的指向，不影响原始链表}//[正确做法]-通过引用修改对象内部状态voidrealModify(Nodenode){
GitHub Actions 的深度解析与概念介绍
青草地溪水旁
linux 环境配置 开发管理 github linux ubuntu docker
GitHubActions核心定义GitActions是GitHub原生提供的自动化工作流引擎，允许开发者在代码仓库中直接创建、测试、部署代码。其本质是通过事件驱动（Event-Driven）的自动化管道，将软件开发中的重复任务抽象为可编排的流程。架构核心四要素工作流（Workflow）仓库中的自动化流程蓝图（.yml文件）存储在.github/workflows目录单仓库可包含多个独立工作流事件
linux mysql命令行操作
命令行,linux,命令行操作相关学习资料：https://edu.51cto.com/video/797.htmlhttps://edu.51cto.com/video/1400.htmlhttps://edu.51cto.com/video/3832.htmlLinuxMySQL命令行操作入门指南作为一名刚入行的开发者，掌握Linux系统下的MySQL命令行操作是一项基本技能。本文将带你一步步
Linux命令行操作基础
EnigmaCoder
Linux linux 运维 服务器
目录前言目录结构✍️语法格式操作技巧Tab补全光标操作基础命令登录和电源管理命令⚙️login⚙️last⚙️exit⚙️shutdown⚙️halt⚙️reboot文件命令⚙️浏览目录类命令pwdcdls⚙️浏览文件类命令catmorelessheadtail⚙️目录操作类命令mkdirrmdir⚙️文件操作类命令mvrmtouchfindgziptar⚙️cp前言大家好！我是EnigmaCod
期货反向跟单-亏损原因（四）主观误判行情
反向跟单策略
期货反向跟单 区块链 大数据 数据分析 人工智能
熟悉期货反向跟单策略的运营者都清楚，它宛如一把双刃剑，在单边行情中锋芒毕露，能轻松斩获丰厚利润；但一旦遭遇震荡行情，便如同陷入泥潭，可能面临持续亏损的局面。造成这种局面的关键，在于盘手的交易习惯。震荡行情下，价格来回波动，盘手在亏损时往往会选择扛单，即便亏损也能扛到盈利。期货市场的走势难以捉摸，大行情并非每日可见，震荡才是市场的常态之一。特别是在缺乏重大国际事件或基本面消息刺激时，市场陷入长达一个
JavaScript性能优化
lyh1344
javascript 性能优化 开发语言
JavaScript性能优化方法减少重绘和回流频繁操作DOM会导致浏览器反复计算布局，引发性能问题。使用documentFragment进行批量DOM操作，或通过classList一次性修改多个样式属性。缓存DOM查询结果，避免重复访问。事件委托利用事件冒泡机制，将事件监听器绑定到父元素而非多个子元素。减少内存占用，提升动态内容的事件处理效率。节流与防抖高频事件（如滚动、输入）通过节流（Throt
【为什么网络安全缺口很大，而招聘却很少？】
网络安全工程师教学
安全 黑客技术 网络安全 web安全 网络 安全 游戏 数据库
为什么网络安全缺口很大，而招聘却很少？2020年我国网络空间安全人才数量缺口超过了140万，就业人数却只有10多万，缺口高达了93%。这里就有人会问了：1、网络安全行业为什么这么缺人？2、明明人才那么稀缺，为什么招聘时招安全的人员却没有那么多呢？首先来回答第一个问题，从政策背景、市场需求、行业现状来说。政策背景自从斯诺登棱镜门事件曝光之后，网络空间站成为现代战场第一战场，网络安全能力也被各国列为了
什么是Node.js，有什么特点
前端与小赵
node.js
Node.js简介Node.js是一个基于ChromeV8引擎的JavaScript运行时环境，由RyanDahl于2009年创建。Node.js允许开发者使用JavaScript编写服务器端应用程序，打破了JavaScript仅限于浏览器端的限制。Node.js的设计目标是提供一种简单、高效的方式来构建可伸缩的网络应用。Node.js的特点非阻塞I/O特点：Node.js使用事件驱动的非阻塞I/
关于 webpack 打包结构 详解
shenyan~
webpack 前端 node.js
一、整体结构概览Webpack打包代码示例：(function(t,n){...i=function(){returnfunction(t){vare={};//模块缓存functionn(r){...}//模块加载器__webpack_require__//工具函数定义↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓n.m=t;//模块表（每个模块对应一个函数）n.c
Node.js到底是什么
浪裡遊
杂文 node.js php 开发语言 前端 javascript vue.js
我想像是npm、vite这些名词大家都很熟悉，对它们的作用也有大致印象，但是可能都像我一样不明白Node.js到底是什么，这里给大家带来一个简单介绍。Node.js详解：历史发展、生态构建与底层原理一、Node.js的起源与历史发展诞生背景2009年5月：Node.js由RyanDahl开发并首次发布。其核心目标是解决JavaScript仅限于浏览器端运行的局限性，通过ChromeV8引擎（Jav
微信小程序进度条样式_微信小程序之圆形进度条
需求概要小程序中使用圆形倒计时，效果图：思路使用2个canvas一个是背景圆环，一个是彩色圆环。使用setInterval让彩色圆环逐步绘制。解决方案第一步先写结构一个盒子包裹2个canvas以及文字盒子；盒子使用相对定位作为父级，flex布局，设置居中；一个canvas，使用绝对定位作为背景，canvas-id="canvasProgressbg"另一个canvas，使用相对定位作为进度条，ca
GO 语言学习 之 运算符号
唯独不开心
学习 go
算术运算符：二元的运算符：+-*/%四则运算没啥好说的，从小就开始学习，最后一个%表示求余数或者取模运算。packagemainimport"fmt"funcmain(){a:=1+2b:=a-1c:=a*bd:=c/ae:=c%3fmt.Println("a:=1+2的结果是：",a)fmt.Println("b:=a-1的结果是：",b)fmt.Println("c:=a*b的结果是：",c)
GO 语言学习 之 变量和常量
唯独不开心
golang 学习 开发语言
变量变量顾名思义，存储的内容是不确定，只有在执行赋值后那一刻是确定的，因为你也不知道赋值后会不会被修改。变量定义方式：var:=var(aint,b,c....)示例：packagemainimport"fmt"funcmain(){varaint//定义一个整型变量，默认是零值（整形的零值是0）b:=1//定义一个整型变量，并赋值为1fmt.Printf("a=%db=%d\n",a,b)//定
GO语言学习之字符串和流程控制
cr7xin
golang 学习 开发语言
文章目录一.字符串1.1.1字符串转义符1.1.2多行字符串1.1.3字符串的常用操作1.2byte和rune类型1.2.1修改字符串1.2.2类型转换二.流程控制1.1ifelse(分支结构)1.1.1基本写法1.1.2特殊写法1.2for(循环结构)1.2.1for循环的基本格式1.2.2forrange(键值循环)1.3switchcase1.3.1基本格式1.3.2多个值在一个分支1.3.
深入剖析Nginx架构及其不同使用场景下的配置
LiRuiJie
Nginx Nginx 系统架构 反向代理
一、Nginx整体架构概览1.Nginx简介Nginx是采用C语言编写的高性能Web服务器、反向代理服务器及邮件代理服务器，特点是：高并发、高可用、低内存占用、模块化设计。架构核心理念：Master-Worker多进程模型事件驱动（Event-Driven）+异步非阻塞高度模块化设计2.进程模型Nginx的进程模型非常轻量，通常包含：1.Master进程启动时由shell进程fork出来主要负责：
构建四则运算解析器：字符串处理与计算逻辑实战
大熊小清新
本文还有配套的精品资源，点击获取简介：四则运算解析器是将包含四则运算符号的字符串表达式转化为可执行计算的程序。它对编程初学者而言是理解编程逻辑和语法分析的基础。通过理解四则运算的优先级规则，实现输入处理、词法分析、语法分析和计算步骤，可以采用递归下降解析或堆栈解析等方法。本解析器的实现涉及字符串处理、数据结构的运用，有助于学习者掌握编程语言的底层工作方式，提升编程技能和问题解决能力。1.四则运算解
linux日志文件详解
MagnumOvO
云计算 linux 5G linux 运维 centos
目录一、日志文件的分类二、日志文件位置三、常见日志文件1.分析日志文件2.内核及系统日志四、日志消息等级五、日志文件分析1.用户日志2.程序日志六、日志分析注意事项一、日志文件的分类日志文件是用于记录Linux系统中各种运行消息的文件,相当于Linux主机的“日记”。不同的日志文件记载了不同类型的信息,如Linux内核消息、用户登录事件、程序错误等·日志文件对于诊断和解决系统中的问题很有帮助,因为
64、Delphi系统架构与线程模型详解
g8f9d0s1a2
深入解析Delphi 6开发者指南 Delphi 系统架构 线程模型
Delphi系统架构与线程模型详解1系统架构概述Delphi作为一款强大的集成开发环境（IDE），其系统架构设计不仅体现了高效性，还融合了灵活性和可扩展性。理解Delphi的系统架构是掌握其核心功能和开发技巧的关键。本文将详细介绍Delphi的系统架构及其各组成部分的交互方式，帮助开发者更好地利用这款工具。1.1Delphi系统架构的基本组成部分Delphi的系统架构主要包括以下几个关键部分：编译
Linux系统日志管理
多肉葡萄～
linux 运维 服务器
日志文件作用日志文件用于记录linux系统的各种运行信息的文件，相当于linux主机的日记，不同的日志文件记载了不同类型的信息,如Linux内核消息、用户登录事件、程序错误等。日志文件对于诊断和解决问题很有帮助，因为linux运行的程序通常把系统的消息和错误写入对应的日志文件，这样系统可以有据可查，此外,当主机遭受攻击时,日志文件还可以帮助寻找攻击者留下的痕迹。几种日志管理工具的介绍在Linux系
Nginx负载均衡
510888780
nginx 应用服务器
Nginx负载均衡一些基础知识:
nginx 的 upstream目前支持 4 种方式的分配
1)、轮询（默认）
每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器down掉，能自动剔除。
2)、weight
指定轮询几率，weight和访问比率成正比
RedHat 6.4 安装 rabbitmq
bylijinnan
erlang rabbitmq redhat
在 linux 下安装软件就是折腾，首先是测试机不能上外网要找运维开通，开通后发现测试机的 yum 不能使用于是又要配置 yum 源，最后安装 rabbitmq 时也尝试了两种方法最后才安装成功
机器版本：
[root@redhat1 rabbitmq]# lsb_release
LSB Version: :base-4.0-amd64:base-4.0-noarch:core
FilenameUtils工具类
eksliang
FilenameUtils common-io
转载请出自出处：http://eksliang.iteye.com/blog/2217081 一、概述
这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
xml文件解析SAX
不懂事的小屁孩
xml
xml文件解析:xml文件解析有四种方式，
1.DOM生成和解析XML文档(SAX是基于事件流的解析)
2.SAX生成和解析XML文档(基于XML文档树结构的解析)
3.DOM4J生成和解析XML文档
4.JDOM生成和解析XML
本文章用第一种方法进行解析，使用android常用的DefaultHandler
import org.xml.sax.Attributes;
通过定时任务执行mysql的定期删除和新建分区，此处是按日分区
酷的飞上天空
mysql
使用python脚本作为命令脚本，linux的定时任务来每天定时执行
#!/usr/bin/python
# -*- coding: utf8 -*-
import pymysql
import datetime
import calendar
#要分区的表
table_name = 'my_table'
#连接数据库的信息
host,user,passwd,db =
如何搭建数据湖架构？听听专家的意见
蓝儿唯美
架构
Edo Interactive在几年前遇到一个大问题：公司使用交易数据来帮助零售商和餐馆进行个性化促销，但其数据仓库没有足够时间去处理所有的信用卡和借记卡交易数据
“我们要花费27小时来处理每日的数据量，”Edo主管基础设施和信息系统的高级副总裁Tim Garnto说道：“所以在2013年，我们放弃了现有的基于PostgreSQL的关系型数据库系统，使用了Hadoop集群作为公司的数
spring学习——控制反转与依赖注入
a-john
spring
控制反转（Inversion of Control，英文缩写为IoC）是一个重要的面向对象编程的法则来削减计算机程序的耦合问题，也是轻量级的Spring框架的核心。 控制反转一般分为两种类型，依赖注入（Dependency Injection，简称DI）和依赖查找（Dependency Lookup）。依赖注入应用比较广泛。
用spool+unixshell生成文本文件的方法
aijuans
xshell
例如我们把scott.dept表生成文本文件的语句写成dept.sql,内容如下:
set pages 50000;
set lines 200;
set trims on;
set heading off;
spool /oracle_backup/log/test/dept.lst;
select deptno||','||dname||','||loc
1、基础--名词解析(OOA/OOD/OOP)
asia007
学习基础知识
OOA:Object-Oriented Analysis（面向对象分析方法）
是在一个系统的开发过程中进行了系统业务调查以后，按照面向对象的思想来分析问题。OOA与结构化分析有较大的区别。OOA所强调的是在系统调查资料的基础上，针对OO方法所需要的素材进行的归类分析和整理，而不是对管理业务现状和方法的分析。
OOA（面向对象的分析）模型由5个层次（主题层、对象类层、结构层、属性层和服务层）
浅谈java转成json编码格式技术
百合不是茶
json编码 java转成json编码
json编码;是一个轻量级的数据存储和传输的语言
在java中需要引入json相关的包,引包方式在工程的lib下就可以了
JSON与JAVA数据的转换（JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非
常适合于服务器与 JavaScript 之间的数据的交
web.xml之Spring配置(基于Spring+Struts+Ibatis)
bijian1013
java web.xml SSI spring配置
指定Spring配置文件位置
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>
/WEB-INF/spring-dao-bean.xml,/WEB-INF/spring-resources.xml,
/WEB-INF/
Installing SonarQube（Fail to download libraries from server）
sunjing
Install Sonar
1. Download and unzip the SonarQube distribution
2. Starting the Web Server
The default port is "9000" and the context path is "/". These values can be changed in &l
【MongoDB学习笔记十一】Mongo副本集基本的增删查
bit1129
mongodb
一、创建复本集
假设mongod,mongo已经配置在系统路径变量上，启动三个命令行窗口，分别执行如下命令：
mongod --port 27017 --dbpath data1 --replSet rs0
mongod --port 27018 --dbpath data2 --replSet rs0
mongod --port 27019 -
Anychart图表系列二之执行Flash和HTML5渲染
白糖_
Flash
今天介绍Anychart的Flash和HTML5渲染功能
HTML5
Anychart从6.0第一个版本起，已经逐渐开始支持各种图的HTML5渲染效果了，也就是说即使你没有安装Flash插件，只要浏览器支持HTML5，也能看到Anychart的图形（不过这些是需要做一些配置的）。
这里要提醒下大家，Anychart6.0版本对HTML5的支持还不算很成熟，目前还处于
Laravel版本更新异常4.2.8-> 4.2.9 Declaration of ... CompilerEngine ... should be compa
bozch
laravel
昨天在为了把laravel升级到最新的版本，突然之间就出现了如下错误：
ErrorException thrown with message "Declaration of Illuminate\View\Engines\CompilerEngine::handleViewException() should be compatible with Illuminate\View\Eng
编程之美-NIM游戏分析-石头总数为奇数时如何保证先动手者必胜
bylijinnan
编程之美
import java.util.Arrays;
import java.util.Random;
public class Nim {
/**编程之美 NIM游戏分析
问题：
有N块石头和两个玩家A和B，玩家A先将石头随机分成若干堆，然后按照BABA...的顺序不断轮流取石头，
能将剩下的石头一次取光的玩家获胜，每次取石头时，每个玩家只能从若干堆石头中任选一堆，
lunce创建索引及简单查询
chengxuyuancsdn
查询 创建索引 lunce
import java.io.File;
import java.io.IOException;
import org.apache.lucene.analysis.Analyzer;
import org.apache.lucene.analysis.standard.StandardAnalyzer;
import org.apache.lucene.document.Docume
[IT与投资]坚持独立自主的研究核心技术
comsci
it
和别人合作开发某项产品....如果互相之间的技术水平不同,那么这种合作很难进行,一般都会成为强者控制弱者的方法和手段.....
所以弱者,在遇到技术难题的时候,最好不要一开始就去寻求强者的帮助,因为在我们这颗星球上,生物都有一种控制其
flashback transaction闪回事务查询
daizj
oracle sql 闪回事务
闪回事务查询有别于闪回查询的特点有以下3个：
（1）其正常工作不但需要利用撤销数据，还需要事先启用最小补充日志。
（2）返回的结果不是以前的“旧”数据，而是能够将当前数据修改为以前的样子的撤销SQL（Undo SQL）语句。
（3）集中地在名为flashback_transaction_query表上查询，而不是在各个表上通过“as of”或“vers
Java I/O之FilenameFilter类列举出指定路径下某个扩展名的文件
游其是你
FilenameFilter
这是一个FilenameFilter类用法的例子，实现的列举出“c:\\folder“路径下所有以“.jpg”扩展名的文件。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
C语言学习五函数，函数的前置声明以及如何在软件开发中合理的设计函数来解决实际问题
dcj3sjt126com
c
# include <stdio.h>
int f(void) //括号中的void表示该函数不能接受数据，int表示返回的类型为int类型
{
return 10; //向主调函数返回10
}
void g(void) //函数名前面的void表示该函数没有返回值
{
//return 10; //error 与第8行行首的void相矛盾
}
in
今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Pl
dcj3sjt126com
centos
今天在测试环境使用yum安装，遇到一个问题：
Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again
处理很简单，修改文件“/etc/yum.repos.d/epel.repo”， 将baseurl的注释取消， mirrorlist注释掉。即可。
&n
单例模式
shuizhaosi888
单例模式
单例模式 懒汉式
public class RunMain {
/**
* 私有构造
*/
private RunMain() {
}
/**
* 内部类，用于占位，只有
*/
private static class SingletonRunMain {
priv
Spring Security（09）——Filter
234390216
Spring Security
Filter
目录
1.1 Filter顺序
1.2 添加Filter到FilterChain
1.3 DelegatingFilterProxy
1.4 FilterChainProxy
1.5
公司项目NODEJS实践0.1
逐行分析JS源代码
mongodb nginx ubuntu nodejs
一、前言
前端如何独立用nodeJs实现一个简单的注册、登录功能，是不是只用nodejs+sql就可以了？其实是可以实现，但离实际应用还有距离，那要怎么做才是实际可用的。
网上有很多nod
java.lang.Math
liuhaibo_ljf
java Math lang
System.out.println(Math.PI);
System.out.println(Math.abs(1.2));
System.out.println(Math.abs(1.2));
System.out.println(Math.abs(1));
System.out.println(Math.abs(111111111));
System.out.println(Mat
linux下时间同步
nonobaba
ntp
今天在linux下做hbase集群的时候，发现hmaster启动成功了，但是用hbase命令进入shell的时候报了一个错误 PleaseHoldException: Master is initializing，查看了日志，大致意思是说master和slave时间不同步，没办法，只好找一种手动同步一下，后来发现一共部署了10来台机器，手动同步偏差又比较大，所以还是从网上找现成的解决方
ZooKeeper3.4.6的集群部署
roadrunners
zookeeper 集群 部署
ZooKeeper是Apache的一个开源项目，在分布式服务中应用比较广泛。它主要用来解决分布式应用中经常遇到的一些数据管理问题，如：统一命名服务、状态同步、集群管理、配置文件管理、同步锁、队列等。这里主要讲集群中ZooKeeper的部署。
1、准备工作
我们准备3台机器做ZooKeeper集群，分别在3台机器上创建ZooKeeper需要的目录。
数据存储目录
Java高效读取大文件
tomcat_oracle
java
读取文件行的标准方式是在内存中读取，Guava 和Apache Commons IO都提供了如下所示快速读取文件行的方法： Files.readLines(new File(path), Charsets.UTF_8); FileUtils.readLines(new File(path)); 这种方法带来的问题是文件的所有行都被存放在内存中，当文件足够大时很快就会导致
微信支付api返回的xml转换为Map的方法
xu3508620
xml map 微信api
举例如下：
<xml>
<return_code><![CDATA[SUCCESS]]></return_code>
<return_msg><![CDATA[OK]]></return_msg>
<appid><
