如何用原生 JS 实现手势解锁组件

之前一直都在用框架写东西，也没造过什么轮子，所以一直想用原生JS写点什么东西，无奈自己水平又有限，因此只能上网找别人造好的轮子，然后自己研究。本项目并非原创，只是作为一个学习的案例。本篇文章用来记录自己对该项目的学习总结。

一.声明：

本项目全都使用es6/es7语法进行编写，并且使用了多页面开发环境进行打包编译。因此可以作为前端进阶的一个项目，如果你是新手建议去这里
原项目文章写的非常好，组件编写的流程说的很清楚，详情见原项目地址
自己改(zhao)造(chao)的项目地址 (带有大量注释)
原文涉及到的在这里就不再提了，本文主要提及一些原文中没有说到的东西
在看本篇文章之前，先看原项目
本文只是自己对项目源码的理解，如有不对，请及时指出
多页面开发环境的使用方法见这里
演示地址仅支持移动端

二.知识点

1. change事件

先看MDN上的介绍：

规范 HTML5
接口 Event
冒泡 Yes
可取消 No
目标 Element
默认行为 undefined

从上述介绍来看，change事件可以冒泡，因此可以对表单元素使用事件代理，先看一段代码:

这段代码的意思是：一开始让设置密码单选按钮被选中，2s之后再让验证密码按钮选中，触发change事件，这里change事件是被代理的。经过测试你会发现:两秒后验证密码单选按钮被选中，但是change事件回调没有被触发，WTF?。原来是这么回事，再看MDN上的一段描述：

事件触发取决于表单元素的类型（type）和用户对标签的操作:
1. 和的默认选项被修改时（通过点击或者键盘事件）;
2.当用户完成提交动作时 (例如：点击了标签选择了一个日期，通过标签上传了一个文件，等 );
3.当标签的值被修改并且失焦后，但并未进行提交 (例如：对</code>或者<code><input type="text"></code>的值进行编辑后。).</p> <p><code>checkmode.checked = 'checked'</code>触发了验证密码单选按钮的<code>change</code>事件，但是没有发生冒泡，只有单选按钮的鼠标事件或者键盘事件被触发时，<code>change</code>事件才会冒泡。因此解决办法是使用<code>click</code>方法:</p> <pre><code>click方法可以用来模拟鼠标左键单击一个元素。当在支持click方法的元素上使用该方法时会触发该元素的 click 事件 checkmode.click() </code></pre> <h6>2.实现一个高度随宽度自适应的正方形</h6> <pre><code>使用margin或者padding <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #container{ width: 400px; } #main{ width: 100%; padding-bottom: 100%; height: 0; background: red; } </style> </head> <body> <div id="container"> <div id="main"></div> </div> </body> </html> </code></pre> <h6>3.touch事件取消默认行为</h6> <pre><code>container.addEventListener('touchstart',(evt)=>{ evt.preventDefault(); },{passive:false}) </code></pre> <p><code>passive</code>的默认值是<code>false</code>,当<code>passive=true</code>表示 <code>listener</code>永远不会调用 <code>preventDefault()</code>。如果<code>listener</code>仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。</p> <h4>三. 实现细节:</h4> <h6>1.状态切换</h6> <p>先上一张图:</p> <br> <div class="image-package"> <div class="image-container" style="max-width: 561px; max-height: 420px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/ca5946eb46284277bddd1fdc092d84a4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/ca5946eb46284277bddd1fdc092d84a4.jpg" width="561" height="420" alt="如何用原生 JS 实现手势解锁组件_第1张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p>三种状态之间进行切换:</p> <ol> <li>验证密码状态：如果验证的密码不足四位(四个圆圈)或者与设置的不匹配则再次返回验证密码状态</li> <li>第一次设置密码状态：如果验证的密码不足四位(四个圆圈)则再次返回第一次设置密码状态，否则进行第二次重复密码设置</li> <li>第二次重复设置密码状态：如果验证的密码不足四位(四个圆圈)或者与第一次设置的不匹配则再次返第一次设置密码状态，否则转移到验证密码状态</li> </ol> <pre><code>import Recorder from './recorder.js'; import {defaultFunctions} from './config.js' export default class Locker extends Recorder{ static get ERR_NOT_MISMATCH(){ return "not mismath" } constructor(options){ options.check = Object.assign({},defaultFunctions.check,options.check); options.update = Object.assign({},defaultFunctions.update,options.update); /* super关键字: 在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，是基于对父类实例加工，只有super方法才能返回父类实例 */ super(options); } async check(password){ let checked = this.options.check.checked; let res = await this.record(); if(!res.err&&password!==res.records){ res.err = Locker.ERR_NOT_MISMATCH } checked.call(this,res); this.check(password); } async update(){ let beforeRepeat = this.options.update.beforeRepeat, afterRepeat = this.options.update.afterRepeat; let first = await this.record(); beforeRepeat.call(this,first); if(first.err){ return this.update(); } let second = await this.record(); if(!second.err&&second.records!==first.records){ second.err = Locker.ERR_NOT_MISMATCH } afterRepeat.call(this,second); this.update(); } } </code></pre> <h6>2. 解读<code>Recoder</code>父类中的<code>record</code>方法</h6> <p><code>record</code>方法中主要有<code>touchstart</code>、<code>touchmove</code>和<code>touchend</code>三个事件的回调函数.并且<code>record</code>是一个异步的操作，因此调用的时候要在<code>async/await</code>中调用。</p> <ul> <li> <code>handler</code>(touchstart和touchmove的事件回调)主要用来画固定线条、圆圈和移动线条。详情见下面的注释</li> </ul> <pre><code>let handler = evt => { let {clientX, clientY} = evt.changedTouches[0], {bgColor, focusColor, innerRadius, outerRadius, touchRadius} = options, touchPoint = getCanvasPoint(moveCanvas, clientX, clientY); /* 画固定线条、圆圈、移动线条的步骤: 1.遍历九个点，与touchPoint求距离，如果小于outerRaius，则该点就是手势划过的点，画圆圈 2.判断密码记录数组有没有值，如果有，取出数组中最后一个值最为画固定线条的起点，第一步中遍历到的点作为固定线条的终点 3.把第一步遍历到的点从this.circles删除并添加到records数组中(用于记录密码的数组) 4.判断records数组长度，如果大于0，数组中最后一个点作为移动线条的起点，手势移动的点作为终点并且在画移动线条的时候要先清除画布，再重绘 */ for(let i = 0; i < this.circles.length; i++){ let point = this.circles[i], x0 = point.x, y0 = point.y; if(distance(point, touchPoint) < outerRadius){ drawSolidCircle(circleCtx, bgColor, x0, y0, outerRadius);//画一个空白的实心圆 drawSolidCircle(circleCtx, focusColor, x0, y0, innerRadius);//画一个红色实心圆 drawHollowCircle(circleCtx, focusColor, x0, y0, outerRadius);//画一个空心圆，边框是红色的 if(records.length){ let p2 = records[records.length - 1], x1 = p2.x, y1 = p2.y; drawLine(lineCtx, focusColor, x1, y1, x0, y0); } let circle = this.circles.splice(i, 1); records.push(circle[0]); break; } } /* 手势在移动的时候直线跟着逐渐伸长 */ if(records.length){ let point = records[records.length - 1], x0 = point.x, y0 = point.y, x1 = touchPoint.x, y1 = touchPoint.y; moveCtx.clearRect(0, 0, moveCanvas.width, moveCanvas.height); drawLine(moveCtx, focusColor, x0, y0, x1, y1); } }; circleCanvas.addEventListener('touchstart', handler); circleCanvas.addEventListener('touchmove', handler); </code></pre> <ul> <li> <code>done</code>主要用来移出事件回调并且<code>resolve</code>异步操作的结果,因为主要是<code>touchend</code>决定了异步操作的结果，因此把<code>done</code>方法封装在了一个<code>promise</code>中</li> </ul> <pre><code> let done; // 异步操作的结束取决于什么时候touchend let promise = new Promise((resolve, reject) => { done = evt => { moveCtx.clearRect(0, 0, moveCanvas.width, moveCanvas.height); if(!records.length) return;//点击空白处不执行下面 circleCanvas.removeEventListener('touchstart', handler); circleCanvas.removeEventListener('touchmove', handler); circleCanvas.removeEventListener('touchend', done); let err = records.length < options.minPoints ? Recorder.ERR_NOT_ENOUGH_POINTS : null; //这里可以选择一些复杂的编码方式，本例子用最简单的直接把坐标转成字符串 let res = {err, records: records.map(o => o.pos.join('')).join('')}; resolve(res); }; circleCanvas.addEventListener('touchend', done); }); </code></pre> <h6>3.难点解析</h6> <p>先来一张效果图:</p> <br> <div class="image-package"> <div class="image-container" style="max-width: 509px; max-height: 631px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/b1b6d00ce9f94b0bab3a3c112ad4b603.gif" target="_blank"><img src="http://img.e-com-net.com/image/info10/b1b6d00ce9f94b0bab3a3c112ad4b603.gif" width="509" height="631" alt="如何用原生 JS 实现手势解锁组件_第2张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <h6>如图所示：</h6> <p>一开始单选按钮处于验证密码，我们没有进行任何绘制操作，当点击设置密码进行操作时会多出一条来自最开始点击的圆圈的射线。<br> 这是因为，一开始处于验证密码状态时，调用了<code>check</code>方法，而<code>check</code>方法中调用了<code>record</code>,而每<code>record</code>一次就会给<code>canvas</code>绑定事件回调,这样当点击设置密码进行绘制时，先调用了<code>update</code>方法,<code>update</code>又调用了一次<code>record</code>，当绘制的时候其实是执行了两次事件回调，并且两次事件回调用的是同一个<code>circles</code>数组，所以其中一个回调在执行的时候<code>circles</code>数组中一直只有一项，这样就造成了多出一条射线。</p> <h6>解决办法：</h6> <p>在每次<code>record</code>方法执行前先移除上一次<code>record</code>给<code>canvas</code>绑定的事件回调，但是怎么在本次<code>record</code>方法中移出上一次<code>record</code>方法中绑定的事件回调呢？<br> 那就是在<code>record</code>方法的底部使用一个闭包,在闭包中使用<code>removeEventListener</code>,这样就可以把<code>handler</code>和<code>done</code>“闭起来”，并且把这个闭包赋值给一个实例属性(是个对象),这样当<code>record</code>的时候就可以移除上次<code>record</code>添加的事件回调。</p> <pre><code>cancel(){ this.recordingTask&&this.recordingTask.cancel(); } record(){ let { circleCanvas, moveCanvas, circleCtx, lineCtx, moveCtx, options } = this; let { focusColor, bgColor, innerRadius, outerRadius, minPoint } = options; this.cancel(); circleCanvas.addEventListener("touchstart",(evt)=>{ this.clearPath(); }); let records = []; const handler = (evt)=>{ let {clientX,clientY} = evt.touches[0], touchPoint = getCanvasPoint(circleCanvas,clientX,clientY); for(let i=0;i<this.circles.length;i++){ let point = this.circles[i]; let x0 = point.x, y0 = point.y; if(distancePoint(point,touchPoint)<outerRadius){ drawSolidCircle(circleCtx,bgColor,x0,y0,outerRadius); drawSolidCircle(circleCtx,focusColor,x0,y0,innerRadius); drawHollowCircle(circleCtx,focusColor,x0,y0,outerRadius); if(records.length){ let p2 = records[records.length-1], x1 = p2.x, y1 = p2.y; drawLine(lineCtx,focusColor,x1,y1,x0,y0); } let circle = this.circles.splice(i,1); records.push(circle[0]) break; } } if(records.length){ let point = records[records.length-1], x0 = point.x, y0 = point.y, x1 = touchPoint.x, y1 = touchPoint.y; moveCtx.clearRect(0,0,moveCanvas.width,moveCanvas.height) drawLine(moveCtx,focusColor,x0,y0,x1,y1) } }; circleCanvas.addEventListener('touchstart',handler); circleCanvas.addEventListener('touchmove',handler); let done; // 异步操作的结束取决于什么时候touchend let promise = new Promise(resolve=>{ done = ()=>{ moveCtx.clearRect(0,0,moveCanvas.width,moveCanvas.height); if(!records.length) return ; circleCanvas.removeEventListener('touchstart', handler); circleCanvas.removeEventListener('touchmove', handler); circleCanvas.removeEventListener('touchend', done); let err = records.length<minPoint?Recorder.ERR_NOT_ENOUGH_POINTS:null; let res = {err,records:records.map(item=>item.pos.join('')).join('')}; resolve(res) }; circleCanvas.addEventListener('touchend',done); }); this.recordingTask = {}; this.recordingTask.cancel = ()=>{ circleCanvas.removeEventListener('touchstart', handler); circleCanvas.removeEventListener('touchmove', handler); circleCanvas.removeEventListener('touchend', done); }; return promise } </code></pre> <p>【注】：<code>this.recordingTask = {};</code>的目的是避免第一次<code>record</code>的时候<code>cancel</code>方法不存在</p> </article> </div> </div> </div>  <div id="SOHUCS" sid="1203204618771865600"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(如何用原生 JS 实现手势解锁组件)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1880581944366919680.htm" title="C++设计模式——Iterator迭代器模式" target="_blank">C++设计模式——Iterator迭代器模式</a> <span class="text-muted">程序员与背包客_CoderZ</span> <a class="tag" taget="_blank" href="/search/C%2FC%2B%2B%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">C/C++设计模式</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E8%BF%AD%E4%BB%A3%E5%99%A8%E6%A8%A1%E5%BC%8F/1.htm">迭代器模式</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>一，迭代器模式的定义迭代器模式是一种行为型设计模式，它使得遍历一个容器对象中的元素变得更加简单。迭代器模式将遍历操作从容器对象（如集合、列表）中分离出来，它通过迭代器对象来遍历容器对象中的元素，使得遍历操作与容器对象解耦。迭代器模式可以解决的需求场景是当容器对象内部的结构经常被改变时，需要对外部屏蔽其变化过程。迭代器模式对外提供了一个统一的遍历接口，这个接口可以顺序访问容器对象中的每个元素。迭代器</div> </li> <li><a href="/article/1880581440375156736.htm" title="VSCode配置调试C-配置launch.json和tasks.json" target="_blank">VSCode配置调试C-配置launch.json和tasks.json</a> <span class="text-muted">zhougl996</span> <a class="tag" taget="_blank" href="/search/C%E4%B8%8EC%2B%2B/1.htm">C与C++</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>launch.json{//使用IntelliSense了解相关属性。//悬停以查看现有属性的描述。//欲了解更多信息，请访问:https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0","configurations":[{"name":"gcc.exe-生成和调试活动文件",//该调试任务的名字，启动调试时会在待选列表中显示"</div> </li> <li><a href="/article/1880578916838600704.htm" title="MyBatis 注解使用指南" target="_blank">MyBatis 注解使用指南</a> <span class="text-muted">小小小妮子~</span> <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/MyBatis/1.htm">MyBatis</a> <div>什么是MyBatis注解？MyBatis是一个老牌而强大的ORM框架，通过配置文件或注解来实现数据库操作。在注解模式中，你可以不用写XML配置文件，而是通过在代码中直接使用Java注解来实现。这种方式更简洁，会让你的项目代码极大约简化，同时保持构件的结构化。MyBatis注解的优势优化代码结构：较乎使用XML配置，注解使用更简洁。所有于SQL直接直观地位于接口中，汇总于一个场景中。清除多余配置文件</div> </li> <li><a href="/article/1880578035149762560.htm" title="（九）ROS运行管理" target="_blank">（九）ROS运行管理</a> <span class="text-muted">PaLu-LvL</span> <a class="tag" taget="_blank" href="/search/ROS%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E5%AE%9E%E8%B7%B5/1.htm">ROS从入门到实践</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E4%BA%BA/1.htm">机器人</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>前言1.ROS是多进程(节点)的分布式框架，一个完整的ROS系统实现：可能包含多台主机；每台主机上又有多个工作空间(workspace)；每个的工作空间中又包含多个功能包(package)；每个功能包又包含多个节点(Node)，不同的节点都有自己的节点名称；每个节点可能还会设置一个或多个话题(topic)...2.在多级层深的ROS系统中，其实现与维护可能会出现一些问题，比如，如何关联不同的功能包</div> </li> <li><a href="/article/1880576774027407360.htm" title="Node.js - Express框架" target="_blank">Node.js - Express框架</a> <span class="text-muted">蒜蓉大猩猩</span> <a class="tag" taget="_blank" href="/search/Node.js/1.htm">Node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/express/1.htm">express</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>1.介绍Express是一个基于Node.js的Web应用程序框架，主要用于快速、简便地构建Web应用程序和API。它是目前最流行的Node.jsWeb框架之一，具有轻量级、灵活和功能丰富的特点。核心概念包括路由，中间件，请求与响应，以及模板引擎支持2.Express应用的使用通过npm进行安装express包npminstallexpress示例：以下是一个最简单的Express应用程序cons</div> </li> <li><a href="/article/1880576647602696192.htm" title="【数据分析岗】关于数据分析岗面试python的金典问题+解答，包含数据读取、数据清洗、数据分析、机器学习等内容" target="_blank">【数据分析岗】关于数据分析岗面试python的金典问题+解答，包含数据读取、数据清洗、数据分析、机器学习等内容</a> <span class="text-muted">摇光~</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>大家好，我是摇光~，用大白话讲解所有你难懂的知识点最近和几个大佬交流了，说了很多关于现在职场面试等问题，然后也找他们问了问他们基本面试的话都会提什么问题。所以我收集了很多关于python的面试题，希望对大家面试有用。类别1：数据读取与处理问题1：如何用Python从Excel文件中读取数据？答：在Python中，可以使用pandas库从Excel文件中读取数据。pandas提供了read_exce</div> </li> <li><a href="/article/1880575259229351936.htm" title="C++实现设计模式---中介者模式 (Mediator)" target="_blank">C++实现设计模式---中介者模式 (Mediator)</a> <span class="text-muted">计算机小混子</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E4%BB%8B%E8%80%85%E6%A8%A1%E5%BC%8F/1.htm">中介者模式</a> <div>中介者模式(Mediator)中介者模式是一种行为型设计模式，它用一个中介对象来封装一组对象之间的交互。中介者通过协调多个对象之间的通信，避免对象之间的直接依赖，从而实现对象之间的松耦合。意图通过引入一个中介者对象，减少对象之间的直接依赖，从而降低耦合性。中介者负责管理和协调对象之间的通信。使用场景对象之间的交互变得复杂：如果对象之间存在大量的直接引用和交互，可以使用中介者模式减少耦合。希望解耦多</div> </li> <li><a href="/article/1880575260491837440.htm" title="C++实现设计模式---迭代器模式 (Iterator)" target="_blank">C++实现设计模式---迭代器模式 (Iterator)</a> <span class="text-muted">计算机小混子</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E8%BF%AD%E4%BB%A3%E5%99%A8%E6%A8%A1%E5%BC%8F/1.htm">迭代器模式</a> <div>迭代器模式(Iterator)迭代器模式是一种行为型设计模式，它提供了一种方法，顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。意图提供一种方法，可以顺序访问一个容器对象中的元素，而无需暴露其内部实现。将遍历行为从集合对象中分离出来，使得遍历行为可以独立变化。使用场景需要顺序访问一个聚合对象中的元素：如数组、链表或集合。需要支持多种遍历方式：如正序遍历、反序遍历等。需要解耦遍历算</div> </li> <li><a href="/article/1880571226842263552.htm" title="使用java代码消费kafka数据" target="_blank">使用java代码消费kafka数据</a> <span class="text-muted">二进制_博客</span> <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a> <div>首先创建maven项目，导入jar包org.apache.kafkakafka-clients3.0.0org.slf4jslf4j-log4j121.7.25示例一：使用java代码消费kafka所有数据packagecom.bigdata.day03;importorg.apache.kafka.clients.consumer.ConsumerConfig;importorg.apache.</div> </li> <li><a href="/article/1880570974693289984.htm" title="cordova 指纹验证登录" target="_blank">cordova 指纹验证登录</a> <span class="text-muted">petunsecn</span> <a class="tag" taget="_blank" href="/search/APP/1.htm">APP</a><a class="tag" taget="_blank" href="/search/%E6%8C%87%E7%BA%B9%E9%AA%8C%E8%AF%81/1.htm">指纹验证</a><a class="tag" taget="_blank" href="/search/cordova/1.htm">cordova</a> <div>关键词：指纹验证登录需求：在APP上实现指纹验证登录指纹验证登录，顾名思义，基于手机系统提供的指纹认证API，实现方便用户登录的功能。实现流程：1：初始化--获取手机指纹识别支持情况（传感器支持，API支持，用户设置支持等）2：用户凭证登录（通常是用户名+密码）成功，调取系统指纹验证，验证通过，本地存储用户凭证；3：登录画面调用系统指纹验证，验证通过，使用本地存储的用户凭证执行登录。对手机指纹验证</div> </li> <li><a href="/article/1880568954334801920.htm" title="JavaWeb原生框架开发JSP+Servlet+JDBC案例" target="_blank">JavaWeb原生框架开发JSP+Servlet+JDBC案例</a> <span class="text-muted">秦老师Q</span> <a class="tag" taget="_blank" href="/search/JavaWeb%E5%9F%BA%E7%A1%80/1.htm">JavaWeb基础</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>目录概要功能技术名词解释技术细节1.项目列表2.网页3.Servlet小结概要JavaWeb开发案例，使用JSP、Servlet、JDBC原生框架技术，实现用户模块的功能开发，主要用于学习。功能1.注册2.登录3.用户模块3.1查询用户信息3.2删除用户信息3.3修改用户信息技术名词解释JSP：全称JavaServerPages,是由Sun公司主导创建的一种动态网页技术标准，JSP中可以编写Jav</div> </li> <li><a href="/article/1880568955865722880.htm" title="EL表达式与JSTL标签库详解" target="_blank">EL表达式与JSTL标签库详解</a> <span class="text-muted">秦老师Q</span> <a class="tag" taget="_blank" href="/search/JavaWeb%E5%9F%BA%E7%A1%80/1.htm">JavaWeb基础</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>前言本章主要学习EL表达式与JSTL标签库，用于简化JSP数据操作。收录JavaWeb基础系列，该系列主要学习JavaWeb开发原生框架、Servlet、JSP、request请求对象、response响应对象、Session会话对象、Filter过滤器、EL表达式、JSTL标签库、三层开发模型等知识点，欢迎童鞋们互相交流。觉得不错可以三连订阅喔。目标一、EL表达式1.概念2.语法3.示例4.EL</div> </li> <li><a href="/article/1880568324065128448.htm" title="[转载]Nodejs 利用 express 框架获取接口参数" target="_blank">[转载]Nodejs 利用 express 框架获取接口参数</a> <span class="text-muted">柒柒公子呐</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>Express是一个基于Node.js平台，快速、开放、极简的web开发框架Expresss是一个第三方模块（在npm上可以下载），在使用它之前要先去下载它，在下载包之前要先创建项目，并通过npminit创建package.json文件。1、get接口参数req.query属性express框架会自动收集get方式从url地址中传递的查询字符串参数，并自动保存在req对象的query属性中。我们直</div> </li> <li><a href="/article/1880567567941169152.htm" title="Nginx 集群测试" target="_blank">Nginx 集群测试</a> <span class="text-muted">小馋喵知识杂货铺</span> <a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD/1.htm">性能</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a> <div>在Nginx集群的部署和维护过程中，为了确保系统的高可用性、性能和扩展性，必须进行全面的测试。以下是Nginx集群需要进行的几类主要测试：1.集群有效性测试集群有效性测试的主要目的是验证Nginx集群的基本功能是否正常工作，确保流量分发和负载均衡按预期运行。测试内容：负载均衡验证：确保Nginx按照配置的负载均衡算法（如轮询、加权轮询、IP哈希等）正确地分发请求。测试方法：使用压力测试工具模拟请求</div> </li> <li><a href="/article/1880566937587609600.htm" title="leetcode707-设计链表" target="_blank">leetcode707-设计链表</a> <span class="text-muted">记得早睡~</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E5%B0%8F%E8%AF%BE%E5%A0%82/1.htm">算法小课堂</a><a class="tag" taget="_blank" href="/search/%E9%93%BE%E8%A1%A8/1.htm">链表</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a> <div>leetcode707思路本题也是用了虚拟头节点来进行解答，这样的好处是，不管是头节点还是中间的节点都可以当成是中间节点来处理，用同一套方法就可以进行处理，而不用考虑太多的边界条件。下面题目中最主要的实现就是添加操作addAtIndex和删除操作deleteAtIndex，对于在头节点和尾节点添加其实都是调用添加方法就可以，头节点设置index=0,尾节点设置index=sizeget获取某个节点</div> </li> <li><a href="/article/1880566433734258688.htm" title="Qt开发技术【C++ 实现类的二进制序列化与反序列化】" target="_blank">Qt开发技术【C++ 实现类的二进制序列化与反序列化】</a> <span class="text-muted">增援未来章北海</span> <a class="tag" taget="_blank" href="/search/QT/1.htm">QT</a><a class="tag" taget="_blank" href="/search/C%2B%2B%E5%AD%A6%E4%B9%A0/1.htm">C++学习</a><a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>一、思考Qt本身的QByteArray和QDataStreamQDataStream和QByteArray是Qt框架中用于数据序列化和反序列化的类。QDataStream可以将Qt数据类型（如QString、QByteArray等）序列化为二进制格式，并写入文件或网络流中。同时，也可以从文件或网络流中读取二进制数据并反序列化成相应的数据类型。但是在嵌入式中使用代码比较冗余二、实现一个比较简单的仅对</div> </li> <li><a href="/article/1880564707002216448.htm" title="在electron中实现一个桌面悬浮球" target="_blank">在electron中实现一个桌面悬浮球</a> <span class="text-muted"></span> <div>概要在electron+vue3搭建的应用中实现了一个桌面悬浮球/mini窗口的功能，支持任意拖拽、丝滑的菜单折叠展开动画效果。在实现过程中需要关注的一些点：1、管理悬浮球窗口创建以及配置：需要一个透明的窗口来承载视图。2、解决electron拖拽和点击事件冲突（核心）：因为使用-webkit-app-region:drag样式的方式会导致拖拽和点击事件冲突，所以需要通过渲染进程和主进程的通信来解</div> </li> <li><a href="/article/1880564669362532352.htm" title="【视觉惯性SLAM：十五、ORB-SLAM3中的IMU预积分】" target="_blank">【视觉惯性SLAM：十五、ORB-SLAM3中的IMU预积分】</a> <span class="text-muted">KeyPan</span> <a class="tag" taget="_blank" href="/search/%E8%A7%86%E8%A7%89%E6%83%AF%E6%80%A7SLAM/1.htm">视觉惯性SLAM</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%A7%86%E8%A7%89/1.htm">计算机视觉</a><a class="tag" taget="_blank" href="/search/%E8%A7%86%E8%A7%89%E6%A3%80%E6%B5%8B/1.htm">视觉检测</a> <div>15.1视觉惯性紧耦合15.1.1视觉惯性紧耦合的重要性视觉惯性紧耦合（Visual-InertialTightCoupling）在ORB-SLAM3中的作用不可替代，是实现高鲁棒性和高精度定位的核心技术。单一的视觉SLAM主要依赖于图像特征进行定位和建图，这种方法虽然能够在许多环境中获得良好的效果，但其鲁棒性容易受到动态变化、光照条件恶化以及环境特征稀缺等因素的限制。例如，昏暗场景或快速运动可能</div> </li> <li><a href="/article/1880564164527714304.htm" title="hive 创建访问用户_Hive权限控制和超级管理员的实现" target="_blank">hive 创建访问用户_Hive权限控制和超级管理员的实现</a> <span class="text-muted">weixin_39826089</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/%E5%88%9B%E5%BB%BA%E8%AE%BF%E9%97%AE%E7%94%A8%E6%88%B7/1.htm">创建访问用户</a> <div>Hive权限控制Hive权限机制：Hive从0.10可以通过元数据控制权限。但是Hive的权限控制并不是完全安全的。基本的授权方案的目的是防止用户不小心做了不合适的事情。先决条件：为了使用Hive的授权机制，有两个参数必须在hive-site.xml中设置：hive.security.authorization.enabledtrueenableordisablethehiveclientauth</div> </li> <li><a href="/article/1880563439370301440.htm" title="Nuqs：解锁URL状态管理" target="_blank">Nuqs：解锁URL状态管理</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>nuqs是一个强大的库，旨在使用URL查询字符串管理React应用程序的状态。这样做的好处是将应用程序状态与浏览器的地址栏同步，为浏览复杂界面的用户提供无缝体验。无论您是构建单页应用程序还是多路由平台，nuqs都提供了一个强大的框架，可用于直接在URL中处理状态。例子：https://nuqs.47ng.com/playground/basic-counter官网介绍：https://nuqs.4</div> </li> <li><a href="/article/1880563280867553280.htm" title="python连接485网关设备" target="_blank">python连接485网关设备</a> <span class="text-muted">dilqu</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Python相关视频讲解：python的or运算赋值用法用python编程Excel有没有用处？011_编程到底好玩在哪？查看python文件_输出py文件_cat_运行python文件_shel如何实现Python连接485网关设备1.流程图gantttitlePython连接485网关设备流程图section了解485网关设备:1dsection安装Python库:1dsection编写Pyt</div> </li> <li><a href="/article/1880563278363553792.htm" title="HIVE的权限控制和超级管理员的实现" target="_blank">HIVE的权限控制和超级管理员的实现</a> <span class="text-muted">weixin_34364071</span> <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>Hive用户权限管理从remote部署hive和mysql元数据表字典看，已经明确hive是通过存储在元数据中的信息来管理用户权限。现在重点是Hive怎么管理用户权限。首先要回答的是用户是怎么来的，发现hive有创建角色的命令，但没有创建用户的命令，显然Hive的用户不是在mysql中创建的。在回答这个问题之前，先初步了解下Hive的权限管理机制。Hive用户组和用户即Linux用户组和用户，和h</div> </li> <li><a href="/article/1880562899815034880.htm" title="Azure Synapse Dedicated SQL Pool通过配置选项和参数优化性能" target="_blank">Azure Synapse Dedicated SQL Pool通过配置选项和参数优化性能</a> <span class="text-muted">weixin_30777913</span> <a class="tag" taget="_blank" href="/search/%E4%BA%91%E8%AE%A1%E7%AE%97/1.htm">云计算</a><a class="tag" taget="_blank" href="/search/azure/1.htm">azure</a> <div>配置选项与参数分布键（DistributionKey）：•选择：在大数据量表中，选择经常用于JOIN、WHERE条件中的列作为分布键，如Date、ID等。•策略：对于范围查询，使用HASH分布避免数据倾斜；对于维度表，通常选择ROUND-ROBIN分布。索引：•类型：聚集列存储索引（CCI）针对大型数据扫描和聚合进行了优化。•策略：始终对大型事实表使用CCI，避免在大型表上使用传统的行存储索引。分</div> </li> <li><a href="/article/1880562554653175808.htm" title="如何在Node.js里实现依赖注入" target="_blank">如何在Node.js里实现依赖注入</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>什么是依赖注入依赖注入是一种用于在开发过程中实现控制反转（IoC）的技术。在IoC中，对程序流的控制是颠倒的：依赖项不是控制其依赖项的创建和管理的组件，而是从外部源提供给组件。在传统的编程模式中，一个组件可能会直接创建并管理它所依赖的其他组件，这会导致组件之间的耦合度较高，难以维护和测试。控制反转是一种设计原则，它改变了组件之间的控制关系。在IoC中，组件不再自己创建和管理它所依赖的组件，而是将这</div> </li> <li><a href="/article/1880562395433201664.htm" title="华为OD机试C卷-- 跳格子3（Java & JS & Python & C）" target="_blank">华为OD机试C卷-- 跳格子3（Java & JS & Python & C）</a> <span class="text-muted">飞码创造者</span> <a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAOD%E6%9C%BA%E8%AF%95%E9%A2%98%E5%BA%93/1.htm">华为OD机试题库</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>获取题库不需要订阅专栏，可直接私信我进入CSDN领军人物top1博主的华为OD交流圈观看完整题库、最新面试实况、考试报告等内容以及大佬一对一答疑。题目描述小明和朋友们一起玩跳格子游戏，每个格子上有特定的分数score=[1,-1,-6,7,-17,7]，从起点score[0]开始，每次最大的步长为k，请你返回小明跳到终点score[n-1]时，能得到的最大得分。输入描述第一行输入总的格子数量n第二</div> </li> <li><a href="/article/1880561891059757056.htm" title="2025年，游戏行业何去何从？65位业内大佬给出答案" target="_blank">2025年，游戏行业何去何从？65位业内大佬给出答案</a> <span class="text-muted">花生糖@</span> <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E5%88%9B%E4%B8%9A%E4%B9%8B%E8%B7%AF%EF%BC%9A%E4%BB%8E%E5%88%9B%E6%84%8F%E5%88%B0%E4%BC%81%E4%B8%9A/1.htm">技术创业之路：从创意到企业</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>2024年，游戏行业呈现出冰火两重天的景象：独立游戏领域如沐春风，爆款频出，开发者和粉丝们沉浸在创意的狂欢中；而AAA游戏业务却遭遇寒冬，裁员潮一波接一波，众多工作室黯然离场。站在2020年代下半叶的门槛上，我们不禁要问：游戏行业的未来将何去何从？为此，我们采访了65位游戏行业的领军人物，从创意领袖到初创公司创始人，从社区领袖到营销专家，他们给出了各自独到的见解和新年决心，为这个疯狂且不断发展的行</div> </li> <li><a href="/article/1880561133199355904.htm" title="集成AI离线免费，全平台毫秒级快速处理！" target="_blank">集成AI离线免费，全平台毫秒级快速处理！</a> <span class="text-muted">纪元A梦</span> <a class="tag" taget="_blank" href="/search/%E8%B5%84%E6%BA%90%E5%88%86%E4%BA%AB/1.htm">资源分享</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E7%A7%91%E6%8A%80/1.htm">科技</a><a class="tag" taget="_blank" href="/search/%E7%94%B5%E8%84%91%E8%BD%AF%E4%BB%B6/1.htm">电脑软件</a><a class="tag" taget="_blank" href="/search/%E6%8A%A0%E5%9B%BE/1.htm">抠图</a> <div>随着PS技术的发展，大家对图像的要求和处理更加的多样化，其中，抠图作为一种常见的图像处理操作，并不是每个小伙伴都完全掌握PS技能，对于那些复杂的抠图操作往往会显得捉襟见肘，近两年随着AI技术的进步，各类软件都和AI集合，希望通过AI快速、高效的实现某些操作；分享一款免费、离线并且内嵌AI模型的抠图工具：鲜艺AI抠图v3.1；获取方式：https://pan.baidu.com/s/1gej6HL4</div> </li> <li><a href="/article/1880560755137376256.htm" title="openwrt下oaf插件编译安装，实现上网行为监控" target="_blank">openwrt下oaf插件编译安装，实现上网行为监控</a> <span class="text-muted">月光技术杂谈</span> <a class="tag" taget="_blank" href="/search/OpenWRT/1.htm">OpenWRT</a><a class="tag" taget="_blank" href="/search/openwrt/1.htm">openwrt</a><a class="tag" taget="_blank" href="/search/%E5%81%A5%E5%BA%B7%E4%B8%8A%E7%BD%91/1.htm">健康上网</a><a class="tag" taget="_blank" href="/search/%E4%B8%8A%E7%BD%91%E7%AE%A1%E6%8E%A7/1.htm">上网管控</a><a class="tag" taget="_blank" href="/search/%E9%9D%92%E5%B0%91%E5%B9%B4%E6%A8%A1%E5%BC%8F/1.htm">青少年模式</a><a class="tag" taget="_blank" href="/search/%E5%81%A5%E5%BA%B7%E4%BD%BF%E7%94%A8%E5%B1%8F%E5%B9%95/1.htm">健康使用屏幕</a><a class="tag" taget="_blank" href="/search/Open/1.htm">Open</a><a class="tag" taget="_blank" href="/search/App/1.htm">App</a><a class="tag" taget="_blank" href="/search/Filter/1.htm">Filter</a><a class="tag" taget="_blank" href="/search/%E8%B7%AF%E7%94%B1%E5%99%A8/1.htm">路由器</a> <div>文章目录入门级APP青少年模式设备屏幕使用时间电脑浏览器使用时间限制Surpal介绍安装使用进阶级专业级旁路由方案openwrt路由器固件编译OAF(OpenAppFilter）安装编译带有oaf的固件固件烧写设备上电启动应用特征库设置黑白名单及应用访问限制骨灰级ref守护孩子视力，用科技“锁”住屏幕时间的秘籍马上又要寒假，除了说教，如何利用一些技术手段统计和限制孩子电子屏幕使用时间，做到健康上网</div> </li> <li><a href="/article/1880559743047626752.htm" title="JavaWeb合集17-拦截器（Interceptor）和过滤器（Filter）" target="_blank">JavaWeb合集17-拦截器（Interceptor）和过滤器（Filter）</a> <span class="text-muted">永恒之月℡</span> <a class="tag" taget="_blank" href="/search/JavaWeb%E5%90%88%E9%9B%86/1.htm">JavaWeb合集</a><a class="tag" taget="_blank" href="/search/1024%E7%A8%8B%E5%BA%8F%E5%91%98%E8%8A%82/1.htm">1024程序员节</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/javaweb/1.htm">javaweb</a><a class="tag" taget="_blank" href="/search/%E8%BF%87%E6%BB%A4%E5%99%A8/1.htm">过滤器</a><a class="tag" taget="_blank" href="/search/%E6%8B%A6%E6%88%AA%E5%99%A8/1.htm">拦截器</a> <div>十七、拦截器和过滤器在JavaWeb开发中，拦截器（Interceptor）和过滤器（Filter）都是用于在请求处理前后执行某些操作的机制。虽然它们的功能相似，但在实现方式、使用场景和灵活性方面有一些重要的区别。1、拦截器和过滤器的区别及选择1.1拦截器定义：拦截器是Spring框架提供的一个机制，用于在请求处理前后执行某些操作。它基于AOP（面向切面编程）的思想。作用：通常用于处理与业务逻辑相</div> </li> <li><a href="/article/1880558608932990976.htm" title="【视觉算法—视频目标跟踪】基于camshift实现视频目标实时追踪" target="_blank">【视觉算法—视频目标跟踪】基于camshift实现视频目标实时追踪</a> <span class="text-muted">明月下</span> <a class="tag" taget="_blank" href="/search/%E8%A7%86%E8%A7%89%E7%AE%97%E6%B3%95/1.htm">视觉算法</a><a class="tag" taget="_blank" href="/search/opencv/1.htm">opencv</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a> <div>本文代码功能：1.获取摄像头，实时显示2.鼠标获取第一帧中的目标roi区域3.在视频中实时对目标进行追踪。4.两种目标追踪的方式：‘meanshift’，‘camshift’5.保存视频代码准备新建test.py，复制以下代码：importcv2ascvimportnumpyasnpglobalmin_y,height,min_x,width#1代表打开外置摄像头,外置多个摄像头可依此枚举0，1，</div> </li> <li><a href="/article/46.htm" title="Maven" target="_blank">Maven</a> <span class="text-muted">Array_06</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>Maven Maven是基于项目对象模型(POM)，信息来管理项目的构建，报告和文档的软件项目管理工具。 Maven 除了以程序构建能力为特色之外，还提供高级项目管理工具。由于 Maven 的缺省构建规则有较高的可重用性，所以常常用两三行 Maven 构建脚本就可以构建简单的项目。由于 Maven 的面向项目的方法，许多 Apache Jakarta 项目发文时使用 Maven，而且公司</div> </li> <li><a href="/article/173.htm" title="ibatis的queyrForList和queryForMap区别" target="_blank">ibatis的queyrForList和queryForMap区别</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a> <div>一.说明 iBatis的返回值参数类型也有种：resultMap与resultClass，这两种类型的选择可以用两句话说明之： 1.当结果集列名和类的属性名完全相对应的时候，则可直接用resultClass直接指定查询结果类</div> </li> <li><a href="/article/300.htm" title="LeetCode[位运算] - #191 计算汉明权重" target="_blank">LeetCode[位运算] - #191 计算汉明权重</a> <span class="text-muted">Cwind</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%BD%8D%E8%BF%90%E7%AE%97/1.htm">位运算</a><a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a><a class="tag" taget="_blank" href="/search/%E9%A2%98%E8%A7%A3/1.htm">题解</a> <div>原题链接：#191 Number of 1 Bits 要求：写一个函数，以一个无符号整数为参数，返回其汉明权重。例如，‘11’的二进制表示为'00000000000000000000000000001011', 故函数应当返回3。汉明权重：指一个字符串中非零字符的个数；对于二进制串，即其中‘1’的个数。难度：简单分析：将十进制参数转换为二进制，然后计算其中1的个数即可。 “</div> </li> <li><a href="/article/427.htm" title="浅谈java类与对象" target="_blank">浅谈java类与对象</a> <span class="text-muted">15700786134</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> java是一门面向对象的编程语言，类与对象是其最基本的概念。所谓对象，就是一个个具体的物体，一个人，一台电脑，都是对象。而类，就是对象的一种抽象，是多个对象具有的共性的一种集合，其中包含了属性与方法，就是属于该类的对象所具有的共性。当一个类创建了对象，这个对象就拥有了该类全部的属性，方法。相比于结构化的编程思路，面向对象更适用于人的思维</div> </li> <li><a href="/article/554.htm" title="linux下双网卡同一个IP" target="_blank">linux下双网卡同一个IP</a> <span class="text-muted">被触发</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>转自： http://q2482696735.blog.163.com/blog/static/250606077201569029441/ 由于需要一台机器有两个网卡，开始时设置在同一个网段的IP，发现数据总是从一个网卡发出，而另一个网卡上没有数据流动。网上找了下，发现相同的问题不少：一、关于双网卡设置同一网段IP然后连接交换机的时候出现的奇怪现象。当时没有怎么思考、以为是生成树</div> </li> <li><a href="/article/681.htm" title="安卓按主页键隐藏程序之后无法再次打开" target="_blank">安卓按主页键隐藏程序之后无法再次打开</a> <span class="text-muted">肆无忌惮_</span> <a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%8D%93/1.htm">安卓</a> <div>遇到一个奇怪的问题，当SplashActivity跳转到MainActivity之后，按主页键，再去打开程序，程序没法再打开（闪一下），结束任务再开也是这样，只能卸载了再重装。而且每次在Log里都打印了这句话"进入主程序"。后来发现是必须跳转之后再finish掉SplashActivity 本来代码： // 销毁这个Activity fin</div> </li> <li><a href="/article/808.htm" title="通过cookie保存并读取用户登录信息实例" target="_blank">通过cookie保存并读取用户登录信息实例</a> <span class="text-muted">知了ing</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>通过cookie的getCookies()方法可获取所有cookie对象的集合；通过getName()方法可以获取指定的名称的cookie；通过getValue()方法获取到cookie对象的值。另外，将一个cookie对象发送到客户端，使用response对象的addCookie()方法。下面通过cookie保存并读取用户登录信息的例子加深一下理解。（1）创建index.jsp文件。在改</div> </li> <li><a href="/article/935.htm" title="JAVA 对象池" target="_blank">JAVA 对象池</a> <span class="text-muted">矮蛋蛋</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/ObjectPool/1.htm">ObjectPool</a> <div>原文地址： http://www.blogjava.net/baoyaer/articles/218460.html Jakarta对象池 ☆为什么使用对象池恰当地使用对象池化技术，可以有效地减少对象生成和初始化时的消耗，提高系统的运行效率。Jakarta Commons Pool组件提供了一整套用于实现对象池化</div> </li> <li><a href="/article/1062.htm" title="ArrayList根据条件+for循环批量删除的方法" target="_blank">ArrayList根据条件+for循环批量删除的方法</a> <span class="text-muted">alleni123</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>场景如下： ArrayList<Obj> list Obj-> createTime, sid. 现在要根据obj的createTime来进行定期清理。（释放内存） ------------------------- 首先想到的方法就是 for(Obj o:list){ if(o.createTime-currentT>xxx){ </div> </li> <li><a href="/article/1189.htm" title="阿里巴巴“耕地宝”大战各种宝" target="_blank">阿里巴巴“耕地宝”大战各种宝</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E5%B9%B3%E5%8F%B0%E6%88%98%E7%95%A5/1.htm">平台战略</a> <div>“耕地保”平台是阿里巴巴和安徽农民共同推出的一个 “首个互联网定制私人农场”，“耕地宝”由阿里巴巴投入一亿，主要是用来进行农业方面，将农民手中的散地集中起来不仅加大农民集体在土地上面的话语权，还增加了土地的流通与利用率，提高了土地的产量，有利于大规模的产业化的高科技农业的发展，阿里在农业上的探索将会引起新一轮的产业调整，但是集体化之后农民的个体的话语权将更少，国家应出台相应的法律法规保护</div> </li> <li><a href="/article/1316.htm" title="Spring注入有继承关系的类（1）" target="_blank">Spring注入有继承关系的类（1）</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>一个类一个类的注入 1.AClass类 package com.bijian.spring.test2; public class AClass { String a; String b; public String getA() { return a; } public void setA(Strin</div> </li> <li><a href="/article/1443.htm" title="30岁转型期你能否成为成功人士" target="_blank">30岁转型期你能否成为成功人士</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E6%88%90%E5%8A%9F/1.htm">成功</a> <div> 很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人</div> </li> <li><a href="/article/1570.htm" title="[Velocity三]基于Servlet+Velocity的web应用" target="_blank">[Velocity三]基于Servlet+Velocity的web应用</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/velocity/1.htm">velocity</a> <div>什么是VelocityViewServlet 使用org.apache.velocity.tools.view.VelocityViewServlet可以将Velocity集成到基于Servlet的web应用中，以Servlet+Velocity的方式实现web应用 Servlet + Velocity的一般步骤 1.自定义Servlet，实现VelocityViewServl</div> </li> <li><a href="/article/1697.htm" title="【Kafka十二】关于Kafka是一个Commit Log Service" target="_blank">【Kafka十二】关于Kafka是一个Commit Log Service</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/service/1.htm">service</a> <div>Kafka is a distributed, partitioned, replicated commit log service.这里的commit log如何理解？ A message is considered "committed" when all in sync replicas for that partition have applied i</div> </li> <li><a href="/article/1824.htm" title="NGINX + LUA实现复杂的控制" target="_blank">NGINX + LUA实现复杂的控制</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/lua+nginx+%E6%8E%A7%E5%88%B6/1.htm">lua nginx 控制</a> <div>安装lua_nginx_module 模块 lua_nginx_module 可以一步步的安装，也可以直接用淘宝的OpenResty Centos和debian的安装就简单了。。这里说下freebsd的安装： fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz tar zxvf lua-5.1.4.tar.gz cd lua-5.1.4 ma</div> </li> <li><a href="/article/1951.htm" title="java-14.输入一个已经按升序排序过的数组和一个数字，在数组中查找两个数，使得它们的和正好是输入的那个数字" target="_blank">java-14.输入一个已经按升序排序过的数组和一个数字，在数组中查找两个数，使得它们的和正好是输入的那个数字</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class TwoElementEqualSum { /** * 第 14 题：题目：输入一个已经按升序排序过的数组和一个数字，在数组中查找两个数，使得它们的和正好是输入的那个数字。要求时间复杂度是 O(n) 。如果有多对数字的和等于输入的数字，输出任意一对即可。例如输入数组 1 、 2 、 4 、 7 、 11 、 15 和数字 15 。由于 </div> </li> <li><a href="/article/2078.htm" title="Netty源码学习-HttpChunkAggregator-HttpRequestEncoder-HttpResponseDecoder" target="_blank">Netty源码学习-HttpChunkAggregator-HttpRequestEncoder-HttpResponseDecoder</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>今天看Netty如何实现一个Http Server org.jboss.netty.example.http.file.HttpStaticFileServerPipelineFactory： pipeline.addLast("decoder", new HttpRequestDecoder()); pipeline.addLast(&quo</div> </li> <li><a href="/article/2205.htm" title="java敏感词过虑-基于多叉树原理" target="_blank">java敏感词过虑-基于多叉树原理</a> <span class="text-muted">cngolon</span> <a class="tag" taget="_blank" href="/search/%E8%BF%9D%E7%A6%81%E8%AF%8D%E8%BF%87%E8%99%91/1.htm">违禁词过虑</a><a class="tag" taget="_blank" href="/search/%E6%9B%BF%E6%8D%A2%E8%BF%9D%E7%A6%81%E8%AF%8D/1.htm">替换违禁词</a><a class="tag" taget="_blank" href="/search/%E6%95%8F%E6%84%9F%E8%AF%8D%E8%BF%87%E8%99%91/1.htm">敏感词过虑</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E5%8F%89%E6%A0%91/1.htm">多叉树</a> <div>基于多叉树的敏感词、关键词过滤的工具包，用于java中的敏感词过滤 1、工具包自带敏感词词库，第一次调用时读入词库，故第一次调用时间可能较长，在类加载后普通pc机上html过滤5000字在80毫秒左右，纯文本35毫秒左右。 2、如需自定义词库，将jar包考入WEB-INF工程的lib目录，在WEB-INF/classes目录下建一个 utf-8的words.dict文本文件，</div> </li> <li><a href="/article/2332.htm" title="多线程知识" target="_blank">多线程知识</a> <span class="text-muted">cuishikuan</span> <a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a> <div> T1，T2，T3三个线程工作顺序，按照T1，T2，T3依次进行 public class T1 implements Runnable{ @Override </div> </li> <li><a href="/article/2459.htm" title="spring整合activemq" target="_blank">spring整合activemq</a> <span class="text-muted">dalan_123</span> <a class="tag" taget="_blank" href="/search/java+spring+jms/1.htm">java spring jms</a> <div>整合spring和activemq需要搞清楚如下的东东1、ConnectionFactory分： a、spring管理连接到activemq服务器的管理ConnectionFactory也即是所谓产生到jms服务器的链接 b、真正产生到JMS服务器链接的ConnectionFactory还得</div> </li> <li><a href="/article/2586.htm" title="MySQL时间字段究竟使用INT还是DateTime？" target="_blank">MySQL时间字段究竟使用INT还是DateTime？</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div> 环境：Windows XPPHP Version 5.2.9MySQL Server 5.1 第一步、创建一个表date_test（非定长、int时间） CREATE TABLE `test`.`date_test` (`id` INT NOT NULL AUTO_INCREMENT ,`start_time` INT NOT NULL ,`some_content`</div> </li> <li><a href="/article/2713.htm" title="Parcel: unable to marshal value" target="_blank">Parcel: unable to marshal value</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/marshal/1.htm">marshal</a> <div>在两个activity直接传递List<xxInfo>时，出现Parcel: unable to marshal value异常。在MainActivity页面（MainActivity页面向NextActivity页面传递一个List<xxInfo>）： Intent intent = new Intent(this, Next</div> </li> <li><a href="/article/2840.htm" title="linux进程的查看上（ps）" target="_blank">linux进程的查看上（ps）</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/linux+ps/1.htm">linux ps</a><a class="tag" taget="_blank" href="/search/linux+ps+-l/1.htm">linux ps -l</a><a class="tag" taget="_blank" href="/search/linux+ps+aux/1.htm">linux ps aux</a> <div>ps:将某个时间点的进程运行情况选取下来转载请出自出处：http://eksliang.iteye.com/admin/blogs/2119469 http://eksliang.iteye.com ps 这个命令的man page 不是很好查阅，因为很多不同的Unix都使用这儿ps来查阅进程的状态，为了要符合不同版本的需求，所以这个</div> </li> <li><a href="/article/2967.htm" title="为什么第三方应用能早于System的app启动" target="_blank">为什么第三方应用能早于System的app启动</a> <span class="text-muted">gqdy365</span> <a class="tag" taget="_blank" href="/search/System/1.htm">System</a> <div>Android应用的启动顺序网上有一大堆资料可以查阅了，这里就不细述了，这里不阐述ROM启动还有bootloader，软件启动的大致流程应该是启动kernel -> 运行servicemanager 把一些native的服务用命令启动起来（包括wifi, power, rild, surfaceflinger, mediaserver等等）-> 启动Dalivk中的第一个进程Zygot</div> </li> <li><a href="/article/3094.htm" title="App Framework发送JSONP请求(3)" target="_blank">App Framework发送JSONP请求(3)</a> <span class="text-muted">hw1287789687</span> <a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/%E8%B7%A8%E5%9F%9F%E8%AF%B7%E6%B1%82/1.htm">跨域请求</a><a class="tag" taget="_blank" href="/search/%E5%8F%91%E9%80%81jsonp/1.htm">发送jsonp</a><a class="tag" taget="_blank" href="/search/ajax%E8%AF%B7%E6%B1%82/1.htm">ajax请求</a><a class="tag" taget="_blank" href="/search/%E8%B6%8A%E7%8B%B1%E8%AF%B7%E6%B1%82/1.htm">越狱请求</a> <div>App Framework 中如何发送JSONP请求呢? 使用jsonp,详情请参考:http://json-p.org/ 如何发送Ajax请求呢? (1)登录 /*** * 会员登录 * @param username * @param password */ var user_login=function(username,password){ // aler</div> </li> <li><a href="/article/3221.htm" title="发福利，整理了一份关于“资源汇总”的汇总" target="_blank">发福利，整理了一份关于“资源汇总”的汇总</a> <span class="text-muted">justjavac</span> <a class="tag" taget="_blank" href="/search/%E8%B5%84%E6%BA%90/1.htm">资源</a> <div>觉得有用的话，可以去github关注：https://github.com/justjavac/awesome-awesomeness-zh_CN 通用 free-programming-books-zh_CN 免费的计算机编程类中文书籍精彩博客集合 hacke2/hacke2.github.io#2 ResumeSample 程序员简历</div> </li> <li><a href="/article/3348.htm" title="用 Java 技术创建 RESTful Web 服务" target="_blank">用 Java 技术创建 RESTful Web 服务</a> <span class="text-muted">macroli</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/REST/1.htm">REST</a> <div>转载：http://www.ibm.com/developerworks/cn/web/wa-jaxrs/ JAX-RS (JSR-311) 【 Java API for RESTful Web Services 】是一种 Java™ API，可使 Java Restful 服务的开发变得迅速而轻松。这个 API 提供了一种基于注释的模型来描述分布式资源。注释被用来提供资源的位</div> </li> <li><a href="/article/3475.htm" title="CentOS6.5-x86_64位下oracle11g的安装详细步骤及注意事项" target="_blank">CentOS6.5-x86_64位下oracle11g的安装详细步骤及注意事项</a> <span class="text-muted">超声波</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>前言：这两天项目要上线了，由我负责往服务器部署整个项目，因此首先要往服务器安装oracle，服务器本身是CentOS6.5的64位系统，安装的数据库版本是11g，在整个的安装过程中碰到很多的坑，不过最后还是通过各种途径解决并成功装上了。转别写篇博客来记录完整的安装过程以及在整个过程中的注意事项。希望对以后那些刚刚接触的菜鸟们能起到一定的帮助作用。安装过程中可能遇到的问题（注</div> </li> <li><a href="/article/3602.htm" title="HttpClient 4.3 设置keeplive 和 timeout 的方法" target="_blank">HttpClient 4.3 设置keeplive 和 timeout 的方法</a> <span class="text-muted">supben</span> <a class="tag" taget="_blank" href="/search/httpclient/1.htm">httpclient</a> <div>ConnectionKeepAliveStrategy kaStrategy = new DefaultConnectionKeepAliveStrategy() { @Override public long getKeepAliveDuration(HttpResponse response, HttpContext context) { long keepAlive</div> </li> <li><a href="/article/3729.htm" title="Spring 4.2新特性-@Import注解的升级" target="_blank">Spring 4.2新特性-@Import注解的升级</a> <span class="text-muted">wiselyman</span> <a class="tag" taget="_blank" href="/search/spring+4/1.htm">spring 4</a> <div>3.1 @Import @Import注解在4.2之前只支持导入配置类在4.2,@Import注解支持导入普通的java类,并将其声明成一个bean 3.2 示例演示java类 package com.wisely.spring4_2.imp; public class DemoService { public void doSomethin</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>

如何用原生 JS 实现手势解锁组件

一.声明：

二.知识点

1. change事件

规范 HTML5

接口 Event

冒泡 Yes

可取消 No

目标 Element

默认行为 undefined