移动web开发技能之touch事件详解

概述

单击事件是任何一个前端页面中最常用的交互行为之一，在传统的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种事件的触发顺序，如下




  
  
  touch事件

在浏览器中运行这段代码，同时注意要启用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的使用。




  
  
  FastClick.js

需要注意的是，在不修改标签中的user-scalable属性的情况下，300毫秒单击延迟的问题只会出现在iOS系统的浏览器中，并且解决方案只需要针对iOS端，上文也提到了这个问题的产生是由于对user-scalable支持度存在Bug，之后苹果公司也意识到了这个问题的严重性，于是在iOS 9.3版本时，提供了一个基于新的内核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事件详解)

学点心理知识，呵护孩子健康静候花开_7090
昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
扫地机类清洁产品之直流无刷电机控制悟空胆好小清洁服务机器人单片机人工智能
扫地机类清洁产品之直流无刷电机控制1.1前言扫地机产品有很多的电机控制，滚刷电机1个，边刷电机1-2个，清水泵电机，风机一个，部分中高端产品支持抹布功能，也就是存在抹布盘电机，还有追觅科沃斯石头等边刷抬升电机，滚刷抬升电机等的，这些电机有直流有刷电机，直接无刷电机，步进电机，电磁阀，挪动泵等不同类型。电机的原理，驱动控制方式也不行。接下来一段时间的几个文章会作个专题分析分享。直流有刷电机会自动持续
Linux下QT开发的动态库界面弹出操作（SDL2） 13jjyao QT类 qt 开发语言 sdl2 linux
需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
2018-07-23-催眠日作业-#不一样的31天#-66小鹿小鹿_33
预言日：人总是在逃避命运的路上，与之不期而遇。心理学上有个著名的名词，叫做自证预言；经济学上也有一个很著名的定律叫做，墨菲定律；在灵修派上，还有一个很著名的法则，叫做吸引力法则。这3个领域的词，虽然看起来不太一样，但是他们都在告诉人们一个现象：你越担心什么，就越有可能会发生什么。同样的道理，你越想得到什么，就应该要积极地去创造什么。无论是自证预言，墨菲定律还是吸引力法则，对人都有正反2个维度的影响
《大清方方案》| 第二话谁佐清欢
和珅究竟说了些什么？竟能令堂堂九五之尊龙颜失色！此处暂且按下不表；单说这位乾隆皇帝，果真不愧是康熙从小带过的，一旦决定了要做的事，便杀伐决断毫不含糊。他当即亲自拟旨，着令和珅为钦差大臣，全权负责处理方方事件，并钦赐尚方宝剑，遇急则三品以下官员可先斩后奏。和珅身负皇上重托，岂敢有半点怠慢，当夜即率领相关人等，马不停蹄杀奔江汉。这一路上，和珅的几位幕僚一直在商讨方方事件的处置方案。有位年轻幕僚建议快刀
《庄子.达生9》钱江潮369
【原文】孔子观于吕梁，县水三十仞，流沫四十里，鼋鼍鱼鳖之所不能游也。见一丈夫游之，以为有苦而欲死也，使弟子并流而拯之。数百步而出，被发行歌而游于塘下。孔子从而问焉，曰：“吾以子为鬼，察子则人也。请问，‘蹈水有道乎’”曰：“亡，吾无道。吾始乎故，长乎性，成乎命。与齐俱入，与汩偕出，从水之道而不为私焉。此吾所以蹈之也。”孔子曰：“何谓始乎故，长乎性，成乎命？”曰：“吾生于陵而安于陵，故也；长于水而安于
Python中os.environ基本介绍及使用方法鹤冲天Pro #Python python 服务器开发语言
文章目录python中os.environos.environ简介os.environ进行环境变量的增删改查python中os.environ的使用详解1.简介2.key字段详解2.1常见key字段3.os.environ.get()用法4.环境变量的增删改查和判断是否存在4.1新增环境变量4.2更新环境变量4.3获取环境变量4.4删除环境变量4.5判断环境变量是否存在python中os.envi
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
高端密码学院笔记285 柚子_b4b4
高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要
2020-04-12每天三百字之连接与替代冷眼看潮
不知道是不是好为人师，有时候还真想和别人分享一下我对某些现象的看法或者解释。人类社会不断发展进步的过程，就是不断连接与替代的过程。人类发现了火并应用火以后，告别了茹毛饮血的野兽般的原始生活（火烧、烹饪替代了生食）人类用石器代替了完全手工，工具的使用使人类进步一大步。类似这样的替代还有很多，随着科技的发展，有更多的原始的事物被替代，代之以更高效、更先进的技术。在近现代，汽车替代了马车，高速公路和铁路
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
东南林氏之九牧林候选父系祖缘树TheYtree
渊源介绍东晋初年晋安林始祖林禄公入闽，传十世隋右丞林茂，由晋安迁居莆田北螺村。又五世而至林万宠，唐开元间任高平太守，生三子：韬、披、昌。韬公之孙攒，唐德宗立双阙以旌表其孝，时号"阙下林家"。昌公字茂吉，乃万宠公第三子，官兵部司马，配宋氏，生一子名萍。萍于唐贞元间明经及第，官沣洲司马(后追赠中宪大夫)。唐太和年间归隐后，迁居仙游游洋，世称“游洋林”；其后裔居游洋后迁移漳州漳浦路下，由路下林第四房平和
人工智能时代，程序员如何保持核心竞争力？ jmoych 人工智能
随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员
人生的每一步路都算数 sheli
如果你想打工，一直靠打工赚钱，那你就会不断的希望自己变得更专业，不断的希望能够获得更好的工作机会，升职加薪。如果你的目标志不在此，而是拥有自己的企业，那你的选择就会出现差别。在认真打工的人眼里，会“不务正业”，会总是选择不同岗位，甚至放弃高薪机会。但是这背后都是有更加长远的规划。成功富人所必需的管理技能包括：1．对现金流的管理。2．对系统的管理。3．对人员的管理。所以，在没有获得这些能力之前，只要
大伟说成语之唉声叹气求索大伟
＊大伟说成语＊【唉声叹气】叹气：因心里不痛快或不如意而吐出长气，发出声音。因为痛苦、憋闷或感伤而发出叹息的声音。【大伟说】情绪外露，非人类所特有，动物亦有情绪，悲哀和欢乐所表示的情绪亦是不一样的，会嗷嗷大叫也会低吟痛哭。不同的是，人类的情绪更复杂，更多样，更丰富。唉声叹气，可以说是最基础的情绪，因为无奈而举足无措，不知该如何如何化解，只有独自一人慢慢承受，长吁短叹不知如何是好，其实是无能无力的表现
libyuv之linux编译 jaronho Linux linux 运维服务器
文章目录一、下载源码二、编译源码三、注意事项1、银河麒麟系统（aarch64）（1）解决armv8-a+dotprod+i8mm指令集支持问题（2）解决armv9-a+sve2指令集支持问题一、下载源码到GitHub网站下载https://github.com/lemenkov/libyuv源码，或者用直接用git克隆到本地，如：gitclonehttps://github.com/lemenko
怎么做淘客赚钱(2022最新免费淘客盈利的方法) 高省_飞智666600
很多人都不知道什么是淘宝客，今天小编为大家解答一下吧。淘宝客，现在简称淘客，是时下比较流行的一个词语，特质为淘宝店推广商品获取提成的人，这些人没有自己的产品，只是在淘宝里面选择适合自己的产品，在自己比较熟悉的领域推广，把产品卖出去之后，会从淘宝店家那里获得百分之五到百分之五十左右的佣金。淘宝客付出的是什么呢？时间。你需要花时间去选适合自己推广的产品，需要花时间去选自己的推广方法，如果你打算自己做个
Python爬虫解析工具之xpath使用详解 eqa11 python 爬虫开发语言
文章目录Python爬虫解析工具之xpath使用详解一、引言二、环境准备1、插件安装2、依赖库安装三、xpath语法详解1、路径表达式2、通配符3、谓语4、常用函数四、xpath在Python代码中的使用1、文档树的创建2、使用xpath表达式3、获取元素内容和属性五、总结Python爬虫解析工具之xpath使用详解一、引言在Python爬虫开发中，数据提取是一个至关重要的环节。xpath作为一门
锁之缘尘缘诗词原创作品
是谁追寻梦的足迹，是谁在偷偷的哭泣，日月隔离在黑白天地情感在心中蔓延的痕迹天与地的距离有多远流失的星晨落入哪片空间不要让泪水模糊双眼心牢中一样充满温暖谁说爱情没有永远白娘子又为何爱许仙蝴蝶墓地展翅翩翩轻歌慢舞袖卷人间传奇千古留爱万年…………月落星飞徘徊是选择不去问自已为合舍不得寂寞本就是痛苦的不在追寻梦中的痕迹才不会失去真实的自已
ARM驱动学习之基础小知识 JT灬新一 ARM 嵌入式 arm开发学习
ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
ARM驱动学习之5 LEDS驱动 JT灬新一嵌入式 C 底层 arm开发学习单片机
ARM驱动学习之5LEDS驱动知识点：•linuxGPIO申请函数和赋值函数–gpio_request–gpio_set_value•三星平台配置GPIO函数–s3c_gpio_cfgpin•GPIO配置输出模式的宏变量–S3C_GPIO_OUTPUT注意点：DRIVER_NAME和DEVICE_NAME匹配。实现步骤：1.加入需要的头文件：//Linux平台的gpio头文件#include//三
ARM驱动学习之4小结 JT灬新一嵌入式 C++arm开发学习 linux
ARM驱动学习之4小结#include#include#include#include#include#defineDEVICE_NAME"hello_ctl123"MODULE_LICENSE("DualBSD/GPL");MODULE_AUTHOR("TOPEET");staticlonghello_ioctl(structfile*file,unsignedintcmd,unsignedlo
C++ | Leetcode C++题解之第409题最长回文串 Ddddddd_158 经验分享 C++Leetcode 题解
题目：题解：classSolution{public:intlongestPalindrome(strings){unordered_mapcount;intans=0;for(charc:s)++count[c];for(autop:count){intv=p.second;ans+=v/2*2;if(v%2==1andans%2==0)++ans;}returnans;}};
一个历史事件和查理一世走上断头台有很大关系，这个事件是什么？王老师聊围棋
今天我要讲的历史事件，查理一世被处死的始末。其实查理一世给被处死的时候，与一个事件有很大的联系。这个事件是“普莱德清洗”。提到这个事件，我们不得不提到一个人，这个人就是克伦威尔。可以说，查理一世能够走上断头台，克伦威尔有很大的功劳。为什么这么说呢。那我们就成英国内战的终结说起吧。我们都知道英国的内战是有保王党挑起来。在保王党军队一路凯歌进攻的同时。就在1645年6月14日，在纳西比荒原上进行最后的
2020-12-24 我和我的天使们
阅读《老子的心事》391—403“将欲取之，必固与之”：想要得到什么，首先就要送出什么。我常常对孩子们说，你希望别人怎样对你你就怎样对待别人。想要得到别人的尊重，首先要尊重别人。我希望她们可以不迟到，因为不迟到是对别人的尊重，我就自己就先做到不迟到。哪怕是约朋友逛街，我尽量准时赴约。我严格要求孩子们，也同样严格要求自己，我跟孩子们一起把好的品格变成习惯。“是谓微明”：这就是微妙的智慧。看起来很少很
18、架构-可观测性之聚合度量大树~~ 架构 java python 后端架构
聚合度量聚合度量是指对系统运行时产生的各种指标数据进行收集、聚合和分析，以了解系统的健康状况和性能表现。聚合度量是可观测性的关键组成部分，通过对度量数据的分析，可以及时发现系统中的异常和瓶颈。以下是对聚合度量各个方面的详细解析，并结合具体的数据案例和技术支撑。指标收集收集系统运行时产生的各种指标数据是聚合度量的基础。常见的指标包括CPU使用率、内存使用率、请求处理时间、请求数、错误率等。以下是指标
学习“论语”-第59天春峰轩
12.14子张问政。子曰：“居之无倦，行之以忠。”子张问为政之道。孔子说：“在位尽职不懈怠，执行政令要忠诚。”12.15子曰：“博学于文，约之以礼，亦可以弗畔矣夫！”孔子说：“君子广泛地学习文献，并且用礼节约束自己，也就不会离经叛道了。”12.16子曰：“君子成人之美，不成人之恶。小人反是。”孔子说：“君子成全别人的好事，而不助长别人的坏处。小人则与此相反行事。”知识点:“成人之美，不成人之恶”贯
《Python数据分析实战终极指南》 xjt921122 python 数据分析开发语言
对于分析师来说，大家在学习Python数据分析的路上，多多少少都遇到过很多大坑**，有关于技能和思维的**：Excel已经没办法处理现有的数据量了，应该学Python吗？找了一大堆Python和Pandas的资料来学习，为什么自己动手就懵了？跟着比赛类公开数据分析案例练了很久，为什么当自己面对数据需求还是只会数据处理而没有分析思路？学了对比、细分、聚类分析，也会用PEST、波特五力这类分析法，为啥
2021-11-15 宙火
我给宋小姐写了首诗，是我在课上因思恋宋小姐而写的。“自古多情是唐宋，从来双飞归巢燕。邻家小女相聘婷，常使春意荡漾我。不知单思可为爱，惟愿一心付之汝。”我拿给宋小姐看了，她说我写得很棒。我很开心，但又不是那么开心。宋小姐是回复我了，但也只是说我写得很棒，对我诗句中蕴藏的真切感情，不知道是真的没发现，还是装作没发现。但我不深究，只是这样，我就很开心了。我答应宋小姐，一天给她写一首诗。
《我的青葱岁月之缘来是你》第二章迎新晚会思源思缘思怨
“怎么你也来了这里？”我愉快的问到，想着这是上天给的缘分吗？我还没去找他竟然就相遇了。那个让我开心的老乡。“你好，我也是舞蹈社的新人啊！”他说，笑起来回答我，眼睛弯弯的。“这么巧，我叫吴倩，你叫啥？”“我叫韩欢，你也是B市人吧，c中毕业的？”“我不是，我是f中的，不然肯定会认识你的”“是吗？以后多多关照了”他还冲我眨了眨眼睛。内心一阵悸动，这是……回到寝室，我兴奋的告诉我的室友这个事情，我再次觉得
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><

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他