缓次郎
缓次郎

实现下拉刷新功能

下拉刷新主要用于移动端网页，PC端网页并没有 touch 事件所以需要自行模拟。实现该功能主要依赖如下几个事件：

  • touchstart
  • touchmove
  • touchend

从事件名我们很容易就能看出这几个事件分别代表什么含义。在事件回调函数里面，可以获取 touchList，该 list 中的每一个元素表示一个触摸点的信息。可以看出，触摸事件可以监听到多个触摸点，例如多个手指滑动屏幕就会有多个触摸点。实现下来刷新功能，我们只考虑一个触摸点即可。

思路

下拉刷新的思路很简单：

  1. 触摸开始时保存初始触摸点在屏幕上的坐标
  2. 触摸移动时计算移动的触摸点和初始坐标点的距离，如果距离大于阈值，则触发刷新回调
  3. 触摸结束后重置触摸状态

值得注意的是，在 touchmove 的时候，计算下拉距离的同时也要显示下拉加载提示元素，具体思路就是设置提示元素的 min-height，设置 min-height 使动画生效。

<html>

<head>
    <title>Pulldown refreshtitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style>
        body {
            margin: 0;
            background-color: #eee;
        }

        #tip-wrap {
            height: 0;
            overflow: hidden;
            text-align: center;
            background-color: #ccc;
            font-size: 0.9rem;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            pointer-events: none;
            transition: min-height 0.2s ease;
        }
    style>
head>

<body>
    <div id="tip-wrap">
        <div id="tip">松开刷新div>
    div>

    <div id="wrap">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique delectus dolores dolore commodi minus,
        corrupti, veritatis totam repudiandae facilis dolorum beatae labore nesciunt vel fugit illum quo distinctio
        praesentium accusamus.
    div>

    <script>
        let state = undefined // start | moving | end
        let touchStartY = undefined;
        let touchTrigger = 100;
        let dist = 0
        const tip = document.querySelector('#tip-wrap')
        const tipmsg = document.querySelector('#tip')
        const wrap = document.querySelector('#wrap')

        window.addEventListener('touchstart', (e) => {
            console.log('touchstart', e.touches)
            if (!window.scrollY)
                touchStartY = e.touches[0].screenY;
            state = 'start'
        }, false)

        window.addEventListener('touchmove', (e) => {
            // console.log('touchmove', e.touches)
            const screenY = e.touches[0].screenY

            if (state === 'start') {
                touchStartY = screenY
                state = 'moving'
            }

            dist = screenY - touchStartY

            if (dist > 0) {
                e.preventDefault();
                tip.style.minHeight = Math.min(dist, 50) + 'px'
            }
        }, { passive: false })

        window.addEventListener('touchend', (e) => {
            console.log('touchend', e.touches)
            if(dist >= 50 && !window.scrollY) {
                alert('refresh')
            }
            touchStartY = 0
            tip.style.minHeight = 0
        }, false)
    script>
body>

html>

注意addEventListener('touchmove', cb, { passive: false })， { passive: false } 能达到下拉页面时页面不会整体向下移动的效果。

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

  • 第四章：高级特性与最佳实践 - 第四节 - Tailwind CSS CSS 提取和打包优化
    在现代前端工程中，CSS的提取和打包优化对于项目性能至关重要。本节将详细介绍如何在使用TailwindCSS的项目中实现CSS的高效提取和打包优化。CSS提取策略MiniCssExtractPlugin配置//webpack.config.jsconstMiniCssExtractPlugin=require('mini-css-extract-plugin')module.exports={mo
  • 如何设计一个高并发的秒杀架构？ 老程不秃 数据结构Java后端架构java数据结构程序人生spring
    写在前面高并发下如何设计秒杀系统？这是一个高频面试题。这个问题看似简单，但是里面的水很深，它考查的是高并发场景下，从前端到后端多方面的知识。秒杀一般出现在商城的促销活动中，指定了一定数量（比如：10个）的商品（比如：手机），以极低的价格（比如：0.1元），让大量用户参与活动，但只有极少数用户能够购买成功。这类活动商家绝大部分是不赚钱的，说白了是找个噱头宣传自己。虽说秒杀只是一个促销活动，但对技术要
  • 【电商项目】-设置跨域配置实现前后端分离 总是幸福的老豌豆 日常工作总结解决跨域请求
    前言最近在开发前后端分离的电商项目，前端框架是VUE，后端是我们熟悉的springboot框架，做过前后端分离项目的同学，‍肯定晓得我们项目会存在跨域请求的问题，下面贴出项目中的配置类，来解决跨域请求问题：packagecom.zcw.config;importorg.springframework.context.annotation.Bean;importorg.springframework
  • 程序调用Sql Server存储过程超时，但是数据库执行存储过程无异常的问题剖析 .Net 爱好者 c#.net.netcore
    在前端程序调用存储过程时出现执行超时，而直接在数据库中执行存储过程没有问题，这种情况可能与以下几个因素有关：1.查询计划缓存和参数嗅探SQLServer会为存储过程生成并缓存查询计划，以便在后续执行时提高性能。然而，查询计划是基于第一次执行时的参数生成的，这被称为“参数嗅探”。如果第一次执行时的参数与后续执行时的参数差异较大，可能会导致不适合的查询计划，从而影响性能。重新编译存储过程会使SQLSe
  • ARM N2微架构介绍 「已注销」 CPU微架构verilog
    简介之前在“ARMV2处理器微架构介绍”一文中介绍了面向服务器、云计算等应用的ARMV2处理器微架构，V系列具有更强性能，N系列强调性能和功耗等方向的平衡，本文就将介绍一下ARMN2处理器微架构相比较前代的一些提升。尽管ARM还具备一代N1/V1的服务器端处理器，但严格意义讲N2是ARM相对成熟的第一代服务器端处理器IP。前端Front-End前端的设计相比较前代可以说是巨大提升，预测和取指依然是
  • js中的export、import、export default等导入导出全解 庸懒 笔记
    前端因为规范不同，所以不同的环境会有不同的导入导出方法，因为经常弄混所以特地记一下方便以后查阅记忆，本笔记都是自己总结或查阅资料得出，如有错误请帮忙指出。因为前端的导入导出主要分为commonjs和ES6modules两种标准，其中commonjs主要用于node环境，而ES6modules主要用于浏览器环境，但是ES6modules是兼容commonjs标准的，所以这就很容易让人弄混，本文也将从
  • html-to-image的使用及图片变形和无图问题修复 庸懒 前端
    html-to-image的使用及图片变形和无图问题修复最近迭代的时候因为新增了一个需求，需要前端提供素材及样式给后端，后端同步渲染，但是因为部分样式问题后端无法实现所以决定前端将页面生成图片然后传递给后端使用，本文记录一下使用的过程及遇到的部分问题。技术调研现在将页面元素转换成图片的插件有很多，普遍使用的技术原理都是利用canvas或者SVG将页面元素转换成画布或者svg元素，然后再转成图片。这
  • 带你深入了解防抖Debounce和节流Throttle 全马必破三 笔记前端javascript
    前言：防抖（Debounce）和节流（Throttle）是两种在前端开发中常用的优化技术，它们主要用于处理频繁触发的事件（如滚动、窗口调整大小、键盘输入等），以减少不必要的计算，从而提高性能和优化用户体验。一、防抖概念所谓防抖，就是指触发事件后，在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。简而言之，防抖确保函数在一段时间内只执行一次，且是在最后一次触发事件后执行。
  • Node.js--exports 对象详解：用法、示例与最佳实践 还是鼠鼠 node.jsnode.jswebjavascript前端vscode
    目录1.exports对象介绍2.基础示例：使用exports导出对象文件名：math.js（JavaScript）3.在另一个文件中使用require进行导入文件名：app.js（JavaScript）4.运行程序5.exports的限制6.其他exports使用方式示例1：导出单个函数示例2：导出类7.结论1.exports对象介绍在Node.js中，exports是module.export
  • JavaScript语言的游戏开发 凌嘉遥 包罗万象golang开发语言后端
    JavaScript游戏开发入门指南在互联网迅速发展的今天，游戏已经成为了我们日常生活中不可或缺的一部分。无论是手机游戏、网页游戏，还是大型的3D游戏，它们的背后都离不开强大的编程技术。JavaScript作为一种广泛应用的编程语言，使得游戏开发变得更加灵活和高效。本文将深入探讨JavaScript在游戏开发中的应用，带领读者了解如何使用JavaScript开发自己的游戏。1.JavaScript
  • JavaScript 中 Map 数据结构的使用 前端javascript
    解释Map是一种js数据结构，与数组的map方法并非一种，要区分开来Map数据结构来管理数据，能提高代码的可读性Map相比较对象格式存储速度要更快Map数据结构//创建一个Map对象constformData=newMap();//添加表单元素的值到Map中formData.set('username','Tom');formData.set('password','123456');//获取表单
  • 【Node.js】模块分类与 `require` 用法详解 Peter-Lu #NodeJSnode.jsjavascript前端
    文章目录一、Node.js模块概述1.模块的定义2.模块的作用二、Node.js模块的分类1.核心模块2.文件模块3.第三方模块4.全局模块三、`require`的用法详解1.`require`的基本用法2.模块导出机制3.模块的缓存机制4.`require`的动态引入四、模块的实际应用场景1.项目结构优化2.复用代码五、总结Node.js是一个强大的JavaScript运行环境，广泛应用于服务器
  • N个utils(处理日期) 庖丁解java java
    解释一下为什么会在java学习教程中放js的代码.1,最直接的肯定是我有时候会写js,而一些经典的逻辑,又不想新开前端文章,索性就放一起.2,java的面向对象太完善了,这也是我写文章的原因,导致写java代码很难学习到面向过程的编程思想,正好,原生js的代码,很大程度上写起来用的思维方式,很雷同面向过程的思考方式.算个补全,对写java代码,理解java代码,大有裨益.(这不是作者胡乱找补,写j
  • 这些 JavaScript 编码习惯，让你最大程度提高你的项目可维护性！ 快乐非自愿 javascript开发语言ecmascript
    前言：因为JavaScript语言是一门极其松散、极其自由的语言，这意味着我们可以随心所欲的操作它，这是他的优点，但同时也是它的缺点。在编码过程中，我们需要一种良好的规范或者习惯来保持应用程序的一致性和可维护性。而今天我们要说的就是，怎么在日常编码中通过一些的良好的编码习惯，从你编码的基础层面就能使得你的JavaScript代码可以更好维护。什么是可维护性？很多人学习前端，可能是从各种不同的渠道获
  • 前端开发：Web蜜罐详解 三掌柜666 前端网络安全
    前言在当今数字化时代，网络安全威胁日益复杂，攻击手段层出不穷。对于前端开发人员来说，不仅要关注代码的性能和用户体验，还需要具备应对安全威胁的能力。在网络安全领域，Web蜜罐作为一种主动防御技术，正逐渐受到关注，它通过模拟真实的Web应用程序，吸引攻击者并记录其行为，为安全专家提供了宝贵的情报。对于前端开发人员来说，了解Web蜜罐的工作原理、特点和应用场景具有重要意义。那么本文就来探讨Web蜜罐的工
  • Angular 16 Standalone 项目创建指南 t0_54program 编程问题解决手册angular.js前端javascript个人开发
    在前端开发领域，Angular一直是一个强有力的框架，尤其是在处理复杂的单页应用时。随着Angular16的发布，引入了Standalone组件的概念，这为开发者提供了一种新的方式来组织和管理组件。今天，我将详细介绍如何从头开始创建一个基于Angular16的Standalone项目，并解决一些常见的问题。环境准备首先，确保你的开发环境已安装Node.js和npm（NodePackageManag
  • JavaScript 内置对象-Math对象 咖啡の猫 javascript开发语言
    在JavaScript编程中，处理各种数学运算和数值操作是不可避免的任务。幸运的是，JavaScript提供了一个非常有用的内置对象——Math对象，它包含了大量用于执行常见数学任务的方法和属性。本文将详细介绍Math对象的主要特性和使用方法，帮助你更高效地进行数学相关的编程工作。一、什么是Math对象？Math是一个内置的对象，提供了对数学常量和函数的访问。与其它全局对象不同，Math不是一个构
  • JavaScript基础-变量的作用域 難釋懷 javascript开发语言
    在学习JavaScript的过程中，理解变量的作用域是至关重要的。作用域决定了变量的可见性和生命周期，即在程序的哪些部分可以访问这些变量。正确理解和应用变量作用域不仅能帮助编写更清晰、更高效的代码，还能避免一些常见的编程错误。本文将详细介绍JavaScript中的变量作用域概念、类型及其应用场景。一、什么是作用域？作用域（Scope）是指变量的有效范围，在这个范围内，变量是可以被访问和使用的。Ja
  • 前端面试：axios 是否可以取消请求？ returnShitBoy 前端
    在实际工作中，取消请求的场景通常出现在以下几种情况中：用户导航离开页面：如果用户在请求数据的过程中快速切换到另一个页面，可以通过取消未完成的请求来优化性能。输入框的搜索提示：当用户在输入框中输入内容时，可以结合防抖的方式取消之前的请求，从而只保留最新的请求，避免发送过多的请求。取消请求的实现方式Axios提供了CancelToken的功能来实现请求的取消。以下是具体的代码示例：importaxio
  • Vue3使用ECharts入门示例 牧小七 Vueecharts前端javascript
    ApacheECharts介绍一个基于JavaScript的开源可视化图表库。官方网址使用示例第一步：NPM安装EChartsnpminstallecharts--save第二步：使用EChartsimport*asechartsfrom'echarts';constmain=ref()consttu=()=>{//基于准备好的dom，初始化echarts实例varmyChart=echarts.
  • 以下列举了一些典型的JavaScript网页设计实例，它们展示了多样化的功能和交互体验，非常适合初学者及中级开发者学习借鉴如下: 一一代码 javascript
    1.动态导航栏-功能描述：创建响应导航栏，当用户滚动页面时，导航栏固定在页面顶部，并显示当前页面部分。-技术点：-`window.scroll`事件监控页面滚动。-`classList`动态添加/移除CSS类。-`IntersectionObserver`检测元素是否进入视口。-示例代码：```javascriptwindow.addEventListener('scroll',()=>{cons
  • 如何快速开发一款AI小程序？基于微信云开发的实战指南 一键难忘 人工智能小程序微信
    如何快速开发一款AI小程序？基于微信云开发的实战指南引言微信小程序凭借其轻便、易推广等特点，已成为应用开发的重要方式之一。而AI技术的快速发展让智能化应用成为可能。通过微信云开发（CloudBase）与小程序结合，开发者可以实现从前端到后端的一站式AI应用开发。本文将深入讲解如何利用微信云开发快速搭建一款AI小程序，展示从模型训练到云端部署的完整流程。准备工作在开始开发之前，确保完成以下准备工作：
  • Sass：深度解析与实战应用 li_Michael_li sass前端css
    在前端开发的浪潮中，CSS预处理器因其强大的功能和灵活性而备受推崇。其中，Sass（SyntacticallyAwesomeStylesheets）无疑是这些预处理器中的佼佼者。本文将深入解析Sass的核心概念、语法特性以及实战应用，并通过代码样例展示其强大的功能。Sass是什么？Sass（SyntacticallyAwesomeStylesheets）是一种CSS预处理器，它允许我们使用变量、嵌
  • 深入理解 GPU 渲染加速与合成层（Composite Layers）
    一、前端视角下的GPU加速1.CPU与GPU的协作模式在前端渲染流程中，GPU加速通过硬件并行计算能力显著提升图形处理效率。传统浏览器渲染依赖CPU处理DOM解析、样式计算和布局，但CPU的串行处理模式在处理大规模图形数据（如复杂动画、3D变换、高清图像）时易成为性能瓶颈。GPU的介入解决了这一核心矛盾：流处理器核心并行计算：GPU拥有数千个小型核心，可同时处理大量像素数据，例如同时对元素的所有像
  • Crawl4AI 与 BrowserUseTool 的详细对比 燃灯工作室 Lmplement人工智能学习数学建模
    以下是Crawl4AI与BrowserUseTool的详细对比，涵盖功能、技术实现、适用场景等核心维度：1.核心定位对比工具Crawl4AIBrowserUseTool类型专为AI优化的网络爬虫框架浏览器自动化工具（模拟人类操作浏览器）核心目标高效获取结构化数据供AI训练/推理处理需要浏览器交互的动态网页任务典型应用大规模数据抓取、知识库构建登录受限网站、抓取JavaScript渲染内容2.技术实
  • 【CSS 面经】如何画一条 0.5px 的线 ️ Peter-Lu #CSS面经css前端javascriptcss3html
    文章目录一、为什么浏览器中0.5px难以实现？二、实现0.5px线条的几种方法1.使用`transform:scale()`实现缩放2.使用`border`和`transform`结合3.使用`box-shadow`实现0.5px4.使用伪元素`::after`结合`transform`三、如何选择合适的方法？在前端开发中，我们经常会遇到这样一个问题：如何画一条0.5px的线？由于像素是浏览器渲染
  • 前端CSS：CSS画一条0.5px的线的方法 DTcode7 HTML网站开发#前端基础入门三大核心之CSSHTMLCSSwebcss3网页开发
    前端CSS：CSS画一条0.5px的线的方法引言基本概念和作用说明基本概念作用说明示例一：使用`transform:scale()`方法代码示例说明示例二：使用透明度技巧代码示例说明示例三：使用伪元素代码示例说明示例四：使用`border`属性代码示例说明示例五：结合媒体查询和像素比例代码示例说明功能使用思路不同角度的功能使用实际开发中的使用技巧自行拓展内容实现自定义宽度线条使用CSS动画增强视觉
  • HTML5前端页面设计,HTML5网页前端设计 设计师马丁 HTML5前端页面设计
    HTML5网页前端设计编辑锁定讨论上传视频《HTML5网页前端设计》是2017年6月清华大学出版社出版的图书，作者是周文洁。书名HTML5网页前端设计作者周文洁ISBN9787302463597定价59.50元出版社清华大学出版社出版时间2017年6月HTML5网页前端设计内容简介编辑本书是一本从零开始学习的Web前端开发教材，无须额外的基础。全书以项目驱动为宗旨，详细介绍了HTML5、CSS3与
  • AI人工智能对前端的冲击？ 理想不理想v 人工智能前端
    ‌AI人工智能对前端开发的冲击主要体现在以下几个方面‌：‌代码生成与自动化‌：AI工具如GPT-4和GitHubCopilot能够自动生成高质量的前端代码，从简单的组件到复杂的应用程序，这不仅提高了开发效率，还降低了人为错误的可能性。自动化代码生成工具可以显著减少开发者编写重复性代码的时间，使他们能够专注于创新和解决复杂问题‌。‌跨平台开发支持‌：AI可以帮助生成适用于不同平台的代码，简化跨平台开
  • 浅析AI对前端程序员工作的威胁和机遇 minstbe AI应用与观察人工智能前端
    这几年，AI技术发展得很快，尤其是像ChatGPT这种工具，搞得不少前端程序员开始担心饭碗问题。这种担心倒也不是没道理，因为AI确实在某些方面很“卷”，但咱们换个角度想想，也许这背后藏着更多的机会呢？咱们今天就i来聊聊这个事儿。威胁：有些活，AI真能干了基础代码不求人以前写个网页小功能，要查文档、搜StackOverflow、试错调试啥的，但现在不一样了，你问ChatGPT，分分钟把代码甩给你，而
  • ASM系列五 利用TreeApi 解析生成Class lijingyao8206 ASM字节码动态生成ClassNodeTreeAPI
       前面CoreApi的介绍部分基本涵盖了ASMCore包下面的主要API及功能，其中还有一部分关于MetaData的解析和生成就不再赘述。这篇开始介绍ASM另一部分主要的Api。TreeApi。这一部分源码是关联的asm-tree-5.0.4的版本。          在介绍前，先要知道一点， Tree工程的接口基本可以完
  • 链表树——复合数据结构应用实例 bardo 数据结构树型结构表结构设计链表菜单排序
    我们清楚：数据库设计中，表结构设计的好坏，直接影响程序的复杂度。所以，本文就无限级分类（目录）树与链表的复合在表设计中的应用进行探讨。当然，什么是树，什么是链表，这里不作介绍。有兴趣可以去看相关的教材。 需求简介： 经常遇到这样的需求，我们希望能将保存在数据库中的树结构能够按确定的顺序读出来。比如，多级菜单、组织结构、商品分类。更具体的，我们希望某个二级菜单在这一级别中就是第一个。虽然它是最后
  • 为啥要用位运算代替取模呢 chenchao051 位运算哈希汇编
        在hash中查找key的时候，经常会发现用&取代%，先看两段代码吧，     JDK6中的HashMap中的indexFor方法： /** * Returns index for hash code h. */ static int indexFor(int h, int length) {
  • 最近的情况 麦田的设计者 生活感悟计划软考想
          今天是2015年4月27号      整理一下最近的思绪以及要完成的任务             1、最近在驾校科目二练车，每周四天，练三周。其实做什么都要用心，追求合理的途径解决。为
  • PHP去掉字符串中最后一个字符的方法 IT独行者 PHP字符串
    今天在PHP项目开发中遇到一个需求，去掉字符串中的最后一个字符 原字符串1,2,3,4,5,6, 去掉最后一个字符","，最终结果为1,2,3,4,5,6 代码如下： $str = "1,2,3,4,5,6,"; $newstr = substr($str,0,strlen($str)-1); echo $newstr;
  • hadoop在linux上单机安装过程 _wy_ linuxhadoop
    1、安装JDK     jdk版本最好是1.6以上，可以使用执行命令java -version查看当前JAVA版本号，如果报命令不存在或版本比较低，则需要安装一个高版本的JDK，并在/etc/profile的文件末尾，根据本机JDK实际的安装位置加上以下几行：    export JAVA_HOME=/usr/java/jdk1.7.0_25  
  • JAVA进阶----分布式事务的一种简单处理方法 无量 多系统交互分布式事务
    每个方法都是原子操作： 提供第三方服务的系统，要同时提供执行方法和对应的回滚方法 A系统调用B,C,D系统完成分布式事务 =========执行开始======== A.aa(); try { B.bb(); } catch(Exception e) { A.rollbackAa(); } try { C.cc(); } catch(Excep
  • 安墨移动广 告：移动DSP厚积薄发 引领未来广 告业发展命脉 矮蛋蛋 hadoop互联网
    　　“谁掌握了强大的DSP技术，谁将引领未来的广 告行业发展命脉。”2014年，移动广 告行业的热点非移动DSP莫属。各个圈子都在纷纷谈论，认为移动DSP是行业突破点，一时间许多移动广 告联盟风起云涌，竞相推出专属移动DSP产品。 　　到底什么是移动DSP呢? 　　DSP(Demand-SidePlatform)，就是需求方平台，为解决广 告主投放的各种需求，真正实现人群定位的精准广
  • myelipse设置 alafqq IP
      在一个项目的完整的生命周期中，其维护费用，往往是其开发费用的数倍。因此项目的可维护性、可复用性是衡量一个项目好坏的关键。而注释则是可维护性中必不可少的一环。 注释模板导入步骤  安装方法： 打开eclipse/myeclipse 选择 window-->Preferences-->JAVA-->Code-->Code
  • java数组 百合不是茶 java数组
    java数组的   声明  创建  初始化；   java支持C语言      数组中的每个数都有唯一的一个下标 一维数组的定义 声明： int[] a = new int[3];声明数组中有三个数int[3] int[] a 中有三个数，下标从0开始，可以同过for来遍历数组中的数
  • javascript读取表单数据 bijian1013 JavaScript
    利用javascript读取表单数据，可以利用以下三种方法获取： 1、通过表单ID属性：var a = document.getElementByIdx_x_x("id"); 2、通过表单名称属性：var b = document.getElementsByName("name"); 3、直接通过表单名字获取：var c = form.content.
  • 探索JUnit4扩展：使用Theory bijian1013 javaJUnitTheory
    理论机制（Theory） 一.为什么要引用理论机制（Theory）         当今软件开发中，测试驱动开发（TDD — Test-driven development）越发流行。为什么 TDD 会如此流行呢？因为它确实拥有很多优点，它允许开发人员通过简单的例子来指定和表明他们代码的行为意图。 TDD 的优点：     &nb
  • [Spring Data Mongo一]Spring Mongo Template操作MongoDB bit1129 template
    什么是Spring Data Mongo Spring Data MongoDB项目对访问MongoDB的Java客户端API进行了封装，这种封装类似于Spring封装Hibernate和JDBC而提供的HibernateTemplate和JDBCTemplate，主要能力包括 1. 封装客户端跟MongoDB的链接管理 2. 文档-对象映射，通过注解:@Document(collectio
  • 【Kafka八】Zookeeper上关于Kafka的配置信息 bit1129 zookeeper
    问题： 1. Kafka的哪些信息记录在Zookeeper中 2. Consumer Group消费的每个Partition的Offset信息存放在什么位置 3. Topic的每个Partition存放在哪个Broker上的信息存放在哪里 4. Producer跟Zookeeper究竟有没有关系？没有关系！！！   //consumers、config、brokers、cont
  • java OOM内存异常的四种类型及异常与解决方案 ronin47 java OOM 内存异常
          　OOM异常的四种类型： 　　　 　　一：　StackOverflowError ：通常因为递归函数引起（死递归，递归太深）。-Xss 128k 一般够用。     　  二：　out Of memory: PermGen Space：通常是动态类大多，比如web 服务器自动更新部署时引起。-Xmx
  • java-实现链表反转-递归和非递归实现 bylijinnan java
    20120422更新： 对链表中部分节点进行反转操作，这些节点相隔k个： 0->1->2->3->4->5->6->7->8->9 k=2 8->1->6->3->4->5->2->7->0->9 注意1 3 5 7 9 位置是不变的。 解法： 将链表拆成两部分： a.0-&
  • Netty源码学习-DelimiterBasedFrameDecoder bylijinnan javanetty
    看DelimiterBasedFrameDecoder的API，有举例： 接收到的ChannelBuffer如下： +--------------+ | ABC\nDEF\r\n | +--------------+ 经过DelimiterBasedFrameDecoder(Delimiters.lineDelimiter())之后，得到： +-----+----
  • linux的一些命令 -查看cc攻击-网口ip统计等 hotsunshine linux
    Linux判断CC攻击命令详解 2011年12月23日 ⁄ 安全 ⁄ 暂无评论 查看所有80端口的连接数 netstat -nat|grep -i '80'|wc -l 对连接的IP按连接数量进行排序 netstat -ntu | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -n 查看TCP连接状态 n
  • Spring获取SessionFactory ctrain sessionFactory
    String sql = "select sysdate from dual"; WebApplicationContext wac = ContextLoader.getCurrentWebApplicationContext(); String[] names = wac.getBeanDefinitionNames(); for(int i=0; i&
  • Hive几种导出数据方式 daizj hive数据导出
    Hive几种导出数据方式   1.拷贝文件   如果数据文件恰好是用户需要的格式，那么只需要拷贝文件或文件夹就可以。 hadoop fs –cp source_path target_path   2.导出到本地文件系统   --不能使用insert into local directory来导出数据，会报错 --只能使用
  • 编程之美 dcj3sjt126com 编程PHP重构
    我个人的 PHP 编程经验中，递归调用常常与静态变量使用。静态变量的含义可以参考 PHP 手册。希望下面的代码，会更有利于对递归以及静态变量的理解   header("Content-type: text/plain"); function static_function () { static $i = 0; if ($i++ < 1
  • Android保存用户名和密码 dcj3sjt126com android
    转自：http://www.2cto.com/kf/201401/272336.html 我们不管在开发一个项目或者使用别人的项目，都有用户登录功能，为了让用户的体验效果更好，我们通常会做一个功能，叫做保存用户，这样做的目地就是为了让用户下一次再使用该程序不会重新输入用户名和密码，这里我使用3种方式来存储用户名和密码 1、通过普通 的txt文本存储 2、通过properties属性文件进行存
  • Oracle 复习笔记之同义词 eksliang Oracle 同义词Oracle synonym
    转载请出自出处：http://eksliang.iteye.com/blog/2098861 1.什么是同义词       同义词是现有模式对象的一个别名。       概念性的东西，什么是模式呢？创建一个用户，就相应的创建了 一个模式。模式是指数据库对象，是对用户所创建的数据对象的总称。模式对象包括表、视图、索引、同义词、序列、过
  • Ajax案例 gongmeitao Ajaxjsp
    数据库采用Sql Server2005 项目名称为:Ajax_Demo 1.com.demo.conn包 package com.demo.conn; import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException; //获取数据库连接的类public class DBConnec
  • ASP.NET中Request.RawUrl、Request.Url的区别 hvt .netWebC#asp.nethovertree
      如果访问的地址是：http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree%3C&n=myslider#zonemenu那么Request.Url.ToString() 的值是：http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree<&
  • SVG 教程 （七）SVG 实例，SVG 参考手册 天梯梦 svg
    SVG 实例 在线实例 下面的例子是把SVG代码直接嵌入到HTML代码中。 谷歌Chrome，火狐，Internet Explorer9，和Safari都支持。 注意：下面的例子将不会在Opera运行，即使Opera支持SVG - 它也不支持SVG在HTML代码中直接使用。   SVG 实例 SVG基本形状 一个圆 矩形 不透明矩形 一个矩形不透明2 一个带圆角矩
  • 事务管理 luyulong javaspring编程事务
    事物管理 spring事物的好处 为不同的事物API提供了一致的编程模型 支持声明式事务管理 提供比大多数事务API更简单更易于使用的编程式事务管理API 整合spring的各种数据访问抽象 TransactionDefinition 定义了事务策略 int getIsolationLevel()得到当前事务的隔离级别 READ_COMMITTED 
  • 基础数据结构和算法十一：Red-black binary search tree sunwinner AlgorithmRed-black
      The insertion algorithm for 2-3 trees just described is not difficult to understand; now, we will see that it is also not difficult to implement. We will consider a simple representation known
  • centos同步时间 stunizhengjia linux集群同步时间
    做了集群，时间的同步就显得非常必要了。 以下是查到的如何做时间同步。 在CentOS 5不再区分客户端和服务器，只要配置了NTP，它就会提供NTP服务。 1)确认已经ntp程序包： # yum install ntp 2)配置时间源（默认就行，不需要修改） # vi /etc/ntp.conf server pool.ntp.o
  • ITeye 9月技术图书有奖试读获奖名单公布 ITeye管理员 ITeye
    ITeye携手博文视点举办的9月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 9月试读活动回顾：http://webmaster.iteye.com/blog/2118112本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）：      《NFC：Arduino、Andro
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他