caibinghong
caibinghong

指尖下的js ——多触式web前端开发之一：对于Touch的处理

水果公司的那些small and cute的设备给我们提供了前所未有的用户体验。当用户在iphone和ipad上运指如飞
的时候，那些使用objective-c写出优秀应用的开发人员们心里一定充满了成就感，因为正是他们（而不是水果
）让iOS的世界变的丰富多彩。然而对于我们这些以web为自己事业核心的程序员来说，这种让人欲罢不能的多
触式体验似乎跟我们关系不大，因为浏览器那一小块地方就是我们和用户的全部交集了。而许多网站为了让iOS
的用户能够在多触式体验下使用自己的服务，都专门花钱开发objective-c的本地程序作为自己web service的客
户端。 
    其实，对于一个web程序员或者一个网站来说，如果你的需求仅仅是让iPhone/iPad用户能够正常使用你的
服务，那现有的html4页面完全能够满足（也许需要一点点重构，但是很容易）；如果再往上一点，你需要让你
的web客户端看起来像是用objective-c实现的一样，也并非不可能，只需要将我们熟悉的javascript搬到iOS设
备上来就行。 
    本文从一个多触式网页开发初学者的角度，首先简单介绍一下iOS上的浏览器（这里主要指Safari）所支持的
多触式事件模型，然后将触控（Touch）这种简单的动作升级为手势（Gestrue），最后将javascript + html + 
css构建的应用脱离浏览器，放到iOS设备的屏幕上成为一个本地link并和植物大战僵尸放到一起。 
    iOS上的Safari也支持click 和mouseover等传统的交互事件，只是不推荐在iOS的浏览器应用上使用click和
mouseover，因为这两个事件是为了支持鼠标点击而设计出来的。Click事件在iOS上会有半秒左右的延迟，原
因是iOS要highlight接收到click的element。而mouseover/out等事件则会被手指的点击触发。所以，在iOS上
，应当抛弃传统的交互事件模型而接受一个新的事件模型。Touch事件和更高级的Gesture事件，能让你的网页
交互起来像native应用一样。 
    处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：

touchstart:  // 手指放到屏幕上的时候触发
touchmove:  // 手指在屏幕上移动的时候触发
touchend:  // 手指从屏幕上拿起的时候触发
touchcancel:  // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详。。

Gesture事件则是对touch事件的更高级的封装，主要处理手指slide、rotate、scale等动作，将在下一篇文章
详述。 
    在开始描述touch事件之前，需要先描述一下多触式系统中特有的touch对象（android和iOS乃至nokia最新
的meego系统都模拟了类似的对象，这里只针对iOS，因为我只有iPad可用于测试。。）。这个对象封装一次
屏幕触摸，一般来自于手指。它在touch事件触发的时候产生，可以通过touch event handler的event对象取到
（一般是通过event.changedTouches属性）。这个对象包括一些重要的属性： 

client / clientY：// 触摸点相对于浏览器窗口viewport的位置
pageX / pageY：// 触摸点相对于页面的位置
screenX /screenY：// 触摸点相对于屏幕的位置
identifier： // touch对象的unique ID

CSS代码

.spirit {              /* 方块的class名称*/
         position: absolute;
         width: 50px;
         height: 50px;
         background-color: red;
}

然后，在body下定义一个接收事件的容器，这里body的height必须是100%才能占满整个viewport： 

Html

<body style=”height: 100%;margin:0;padding:0”>
 
<div id=”canvas”  style=”position: relative;width:100%;height: 100%;”></div>
 
</body>

定义touchstart的事件处理函数，并绑定事件：

Javascript代码

// define global variable
 
var canvas = document.getElementById(“canvas”),
       spirit, startX, startY;
    // touch start listener
 
function touchStart(event) {
         event.preventDefault();
         if (spirit ||! event.touches.length) return;
         var touch = event.touches[0];
         startX = touch.pageX;
         startY = touch.pageY;
         spirit = document.createElement(“div”);
         spirit.className = “spirit”;
         spirit.style.left = startX;
         spirit.style.top = startY;
         canvas.appendChild(spirit);
}
 
// add touch start listener
canvas.addEventListener(“touchstart”, touchStart, false);

首先，我们将方块spirit作为一个全局对象，因为我们现在要测试单根手指所以屏幕上最好只有一个物体在移动

（等会有多触实例）。在touchStart这个事件处理函数中，我们也首先判断了是否已经产生了spirit，也就是是
否已经有一个手指放到屏幕上，如果是，直接返回。 
    和传统的event listener一样，多触式系统也会产生一个event对象，只不过这个对象要多出一些属性，比如
这里的event.touches，这个数组对象获得屏幕上所有的touch。注意这里的event.preventDefault()，在传统的
事件处理函数中，这个方法阻止事件的默认动作，触摸事件的默认动作是滚屏，我们不想屏幕动来动去的，所
以先调用一下这个函数。我们取第一个touch，将其pageX/Y作为spirit创建时的初始位置。接下来，我们创建
一个div，并且设置className，left，top三个属性。最后，我们把spirit对象appendChild到容器中。这样，
当第一根手指放下的时候，一个红色的，50px见方的方块就放到屏幕上了。 
    然后，我们要开始处理手指在屏幕上移动的事件： 

Javascript代码

function touchMove(event) {
         event.preventDefault();
         if (!spirit || !event.touches.length) return;
         var touch = event.touches[0],
              x = touch.pageX – startX,
              y = touch.pageY – startY;
         spirit.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';    
}
 
Canvas.addEventListener(“touchmove”, touchMove, false);

在touch move listener中，我们使用webkit特有的css属性：webkitTransform来移动方块，这个属性具体怎么用请google之。建议构造面向iOS设备的网页的时候尽量使用webkit自己的特性，不但炫，更可以直接利用硬件来提高性能。 

    最后，我们处理touchend事件。手指提起的时候方块从屏幕上移除。

function touchEnd(event) {
         If (!spirit) return;
         canvas.removeChild(spirit);
         spirit = null;
}
 
canvas.addEventListener(“touchend”, touchEnd, false);

在你的ipad或者iphone上测试一下以上代码。如果不出意外的话，一个完整的多触式web程序就诞生了。。 
这种事件处理模式虽然能够满足我们开发多触式网页应用的需求，但是start – move – end的流程有点繁琐，
能不能封装一些常用的动作让我们用一个event handler就能解决问题呢。没错，Gesture事件就是为了这个目
的设计出来的，它封装了手指的scale, slide, rotate等常用的动作。不过，下一章我们再来讨论这个问题。。 
附件是一个更加复杂一些的例子，每根手指放下的时候都会产生一个不同颜色的方块，手指动的时候方块跟着
动，手指提起的时候方块消失，请下载查看试用。 
通过附件所包含的实例，我们可以看出一些较为隐蔽的特性。首先，这里我们没有再使用event.touches取所有
touch的对象，而是使用event.changedTouches这个数组，用来取得所有跟本次事件相关的touch。但是，这
里我发现一个奇怪的特性，不知道是我的ipad有问题还是本来就是这样，就是在有多根手指放在屏幕上的时候
，如果提起一根手指，touchend事件的changedTouches中会包含所有手指的touch对象，然后，其他几根留
在屏幕上的手指会重新触发touchstart，并刷新所有的touch对象（identifier都不一样了）。如果这是一个所有
设备都有的特性，那么将给编程者带来一些不便，不知道水果为啥要这么处理。 
对touch event的介绍我们点到为止，这里给大家推荐两篇文档： 
1. Safari dom additions reference 
2. Safari web content guide
对于有志于开发多触式网页应用的程序员来说，apple的developer站点是一个应该经常光顾的地方。

附件：ios-multi.rar

你可能感兴趣的:(web前端开发)

  • electron-vue 安装环境、构建+打包（mac和windows）这一篇就够了 阿毛sky electronvue前端
    由于公司需要，下一个项目需要做CS开发，技术选型分析后，选择了electron（Electron是一个使用JavaScript,HTML和CSS等Web技术创建原生程序的框架）研究发现，electron与vue-cli3.0脚手架做了很好的融合，对于我们这种用惯了vue，以及elementUI这些UI框架的Web前端开发工程师来说，实在太友好了，不过，这是一门国外框架技术，不仅是环境搭建、安装、文
  • javascript的成熟分类：“成熟分类”之路 lizi88888 javascript开发语言ecmascript
    JavaScript是一门广泛应用于Web前端开发的高级编程语言，具有交互性强、界面效果丰富等优点。其在Web开发中的广泛应用越来越受到业界的关注，从最初的“套壳”式编程到现在的成熟分类，JavaScript已经发生了巨大的变化。ES5ES5标准于2009年发布，是JavaScript发展的一个重要里程碑。这个版本添加了一些新的语言特性，例如：严格模式、Object.create()方法、Func
  • AI前端开发：拥抱未来，提升薪资！ 前端
    在AI时代，数字化转型浪潮席卷全球，前端开发人才的需求量也随之水涨船高。而更进一步，掌握AI写代码工具等AI前端开发技能，则成为提升竞争力，获得高薪的关键。本文将深入探讨AI前端开发如何助力你提升薪资水平，开启职业发展新篇章。AI前端开发的市场价值：高薪的秘密传统的Web前端开发工作，常常面临着重复性工作繁多、开发周期长、人效低下的问题。而AI前端开发的出现，彻底改变了这一现状。熟练掌握AI前端开
  • 大学生HTML期末大作业——HTML+CSS+JavaScript美食网站（西餐） 无·糖 Web前端期末大作业html课程设计css大学生javascript美食大作业
    HTML+CSS+JS【美食网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目美食网站（西餐）精美响应式含JQuery7页二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单
  • html自学学多久,HTML和CSS要学多久？ 入门需要多长时间？ 安检 html自学学多久
    HTML和CSS要学多久？相信很多想要学习网页前端开发的小伙伴都会有这个疑问，今天W3Cschool小编就来和大家探讨一下这个问题。作为Web前端开发的基础，HTML和CSS是都是非常基础的语言，但是想要以此为工作的话，只是掌握HTML和CSS还是不够的，JS也需要学习。这样还不够，最好还能花一些时间学习一下近几年非常火的HTML5和CSS3，这样才能算是完全掌握了Web前端相关技术。如果单说HT
  • web前端三大主流框架 109702008 人工智能编程前端框架人工智能
    Claude3OpusWeb前端开发中，目前有三个主流的框架：1.React：React是由Facebook开发的一款JavaScript库，用于构建用户界面。它采用组件化的开发模式，将界面拆分成多个独立且可复用的组件，使开发和维护更加高效。React的核心思想是虚拟DOM（VirtualDOM）和单向数据流，通过高效的DOMdiff算法进行页面更新，提供出色的性能和用户体验。2.Angular：
  • python web开发框架对比,python的web框架有哪些 2401_84503581 人工智能
    大家好，小编为大家解答pythonweb框架主要的三大基本框架的问题。很多人还不知道pythonweb开发框架对比，现在让我们一起来看看吧！本篇文章给大家谈谈pythonweb开发框架有哪些，以及pythonweb前端开发框架，希望对各位有所帮助，不要忘了收藏本站喔。1.Django框架官网：https://github.com/django/django.git优点：是一个高层次PythonWe
  • Web前端学习重点笔记 HeHolly 前端学习笔记
    第一章：Web前端开发技术综述第二章：HTML基础第三章：格式化文本与段落标记：标题字标记：大——小字体标记：水平线标记：段落缩进标记：默认5个字符位置拼音标记：何(he)原样显示标记：特殊符号：显示结果说明符号代码空格 >大于号>加粗倾斜删除线下划线上标下标加粗倾斜变小字号变大字号第四章：列表有序列表……type="1(默认)|A|a|i|I"无序列表……type="disc(默
  • 前端开发：Web前端和HTML qincjun 前端html
    一、解释1.Web前端开发？Web前端开发是指创建用户在浏览器中直接交互和体验的部分的过程。‌前端开发主要涉及HTML、CSS和JavaScript这三大核心技术。HTML用于构建网页内容的骨架，CSS用于设置和控制网页的外观和布局，而JavaScript则赋予网页动态交互能力。‌‌Web（全称WorldWideWeb）是一种基于超文本和HTTP协议的全球性的、动态交互的、跨平台的分布式图形信息系
  • 11个精美网页——Web前端开发技术课程大作业，期末考试，Dreamweaver简单网页制作 web学生网页设计 web前端web前端网页设计网页设计与制作网页作业
    HTML实例网页代码,本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。精彩专栏推荐❤【作者主页——获取更多优质源码】❤【web前端期末大作业——毕设项目精品实战案例(1000套)】文章目录一、网页介绍一、网页效果二、代码展示1.HTML代码2.CSS代
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • JavaScript 中 xml 的解析（dom4j 解析器），web前端开发规范手册 2401_84094868 程序员前端javascriptxml
    创建元素：Elementschool=DocumentHelper.createElement(“school”);创建文本：school.addText(“光明小学”);指定位置添加：list.add(1,school);回写xml：和在末尾添加一样7、获取属性值attributeValue()：获取属性值publicstaticvoidmain(String[]args)throwsDocum
  • HTML 文本标签 一壶浊酒.. 前端开发html前端
    一个静态页面绝大部分都是由文字、图片、超链接、音频、视频组成。动态页面和静态页面的区别在于：是否与服务器进行数据交互标题标签这是一级标题这是二级标题这是三级标题这是四级标题这是五级标题这是六级标题web前端开发床前明月光，疑是地上霜。举头望明月，低头思故乡这是普通文本这是粗体文本这是粗体文本斜体文本斜体文本斜体文本--->(a+b)2=a2+b2+2abH2SO4是指硫酸分子水果原价：6元现在：5
  • 利用PHP和Selenium自动化采集数据、实现爬虫抓取 IT大数据小助手 phpselenium自动化
    随着互联网时代的到来，抓取互联网上的数据成为越来越重要的工作。在web前端开发领域，我们经常需要获取页面中的数据来完成一系列的交互操作，为了提高效率，我们可以将这个工作自动化。本文将介绍如何利用PHP和Selenium进行自动化数据采集和爬虫抓取。一、什么是SeleniumSelenium是一个免费的开源自动化测试工具，主要用于自动化测试Web应用程序，可以模拟真实的用户行为，实现自动交互。使用S
  • 新书速览|HTML5+CSS3 Web前端开发与实例教程：微课视频版 全栈开发圈 前端html5css3
    《HTML5+CSS3Web前端开发与实例教程：微课视频版》本书内容《HTML5+CSS3Web前端开发与实例教程：微课视频版》秉承“思政引领，立德树人”的教育理念，自然融入多维度、深层次的思政元素，全面对标企业和行业需求；引入现代Web前端开发的核心技术，如Flex布局、Grid布局，以及人工智能编程插件，同时融入企业开发实践，确保学习内容与实际工作紧密相关。全书以一个完整案例为主线，结合综合项
  • 王者荣耀官网首页（xd原文件） 无名指的等待712 HTML5css3xd前端
    1web前端开发者链接：https://pan.baidu.com/s/1nl9XmiyWnMs9gPCP1sN-3w提取码：hhss本文件是王者荣耀官网首页的XD源文件，玩游戏不如自己创造一个游戏。本文件可以锻炼一下大家的HTML5和css3的基础功底。
  • 60 个前端 Web 开发流行语你都知道哪些？ web18224617243 面试学习路线阿里巴巴android前端后端
    ??个人网站:【海拥】【摸鱼小游戏】??风趣幽默的前端学习课程：??28个案例趣学前端??想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】??免费且实用的计算机相关知识题库：??进来逛逛给大家安利一个免费且实用的前端刷题（面经大全）网站，??点击跳转到网站。不想在你朋友讨论Web前端开发时感到一头雾水？今天海海给大家带来了60个Web前端开发的术语，看看你知道的有多少。以下列表是按照字母顺序排
  • html语言三要素是,Web前端开发的三要素是什么？ KNSTY html语言三要素是
    Web前端开发是由网页制作演变而来的，现在很多网站开发会用到web前端开发。Web前端开发主要包括三个要素分别是：HTML、CSS、JavaScript等，但是随着互联网时代的飞速发展，前端开发技术的三要素也演变成现今的HTML5、CSS3、jQuery，首先，第一要素为HTML5.HTML5是超文本标记语言的第五次重大修改，HTML5在HTML的基础上引进了新的功能，可以真正改变用户与文档的交互
  • 大学生HTML期末大作业——HTML+CSS+JavaScript购物商城（美食） 无·糖 Web前端期末大作业html课程设计cssjavascript大学生大作业web网页设计
    HTML+CSS+JS【购物商城】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目购物商城美食7页含jQuery登录注册二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证
  • web前端开发篇（6）---flex布局详解 布呐呐na 前端cssjavascript
    1flex布局原理flex是flexibleBox的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们为父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局父盒子称为容器container，子元素称为项目item布局原理：通过给父盒子添加flex属性
  • 通过鼠标的拖动改变DOM的高度和宽度 ganyuanmen html+cssjavascriptdomjavascriptjquery
    好久不写博客了......。web前端开发中，通过鼠标的拖动改变控件高度和宽度的做法有多种。我以前使用的方法是：为控件添加mousemove事件，当鼠标移到边距时，显示cursor为e-resize，表示可以拖动。在mousedown事件中设置document的鼠标事件，在mouseup中移除document的鼠标事件。这样的做法导致：当鼠标移到控件上后，每动一下鼠标，就需要运行一次move事件。
  • 前端开发是做什么的？工作职责有哪些？ 黑马程序员官方 javascript前端开发语言
    我们介绍Web网站工作流程的时候提到，前端开发，主要的职责就是将数据以好看的样式呈现出来。说白了，就是开发网页程序，如下图所示：那在讲解web前端开发之前，我们先需要对web前端开发有一个整体的认知。主要明确一下三个问题：1）网页有哪些部分组成？文字、图片、音频、视频、超链接、表格等；2）我们看到的网页，背后本质是什么？程序员写的前端代码（备注：在前后端分离的开发模式中）3）前端代码是如何转换成用
  • 常见的Web前端开发框架推荐 M乔木 日常分享前端框架前端html5javascriptbootstrapvue.js
    常见的Web前端开发框架推荐随着互联网的快速发展，Web前端开发变得越来越重要。一个好的前端框架可以帮助开发者更高效地完成项目，提高代码的可维护性和可扩展性。本文将为大家介绍几个常见的Web前端开发框架，并给出一些示例代码。BootstrapBootstrap是一个流行的前端框架，它提供了一套用于快速开发响应式网站和应用的工具。Bootstrap基于HTML、CSS和JavaScript，可以与任
  • [HTML]Web前端开发技术26（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页 猫佛 喵喵画网页html前端html5计算机学习javascriptcss3
    希望你开心，希望你健康，希望你幸福，希望你点赞！最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！喵喵喵，你对我真的很重要！目录前言数据类型数据类型-字符型数据类型-数值型数据类型-布尔型数据类型-其它类型变量转义字符运算符和表达式算术运算符和表达式关系运算符和表达式关系运算符和表达式逻辑运算符和表达式赋值运算符和表达式位运算符和表达式条件运算符和表达式课后练习网页标题：事件处理
  • [HTML]Web前端开发技术25（HTML5、CSS3、JavaScript ）JavaScript基础消息对话框告警框确认框提示框命名规范1标识符2关键字3保留字注释标识符和变量——喵喵画网页 猫佛 html前端html5计算机学习javascriptcss3
    希望你开心，希望你健康，希望你幸福，希望你点赞！最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！喵喵喵，你对我真的很重要！目录前言JavaScript程序代码消息对话框消息对话框-告警框消息对话框-确认框消息对话框-提示框JavaScript注释标识符和变量命名规范1.标识符2.关键字3.保留字课后练习网页标题：HTML属性的事件处理器的应用网页标题：调用外部js文件的Java
  • Delphi Web前端开发教程（9）：基于TMS WEB Core框架 xyzhan Delphi前端DelphiWeb前端开发教程TMSWEBCoreWEB开发
    3、RESTServers服务端(后端)框架REST服务端特点：-为远程资源提供一个RESTAPI接口。也可以为其他网络内容提供服务；-包括在DelphiEnterprise&Architect企业版和架构师版中的RAD服务器、DataSnap、WebBroker；-开源框架：DelphiMVCFramework、MARS-Curiosity、SynopsemORMotORM/SOA/MVCFra
  • 推荐十四款常见的Web前端开发框架 Java学习之平凡之路 资源收集
    在做web开发的时候经常会遇到一个问题，那就是，选择什么样的框架来做前端开发。下面封程中把目前常用的一些前端的框架简单的给大家介绍一下.1.BootstrapBoostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美，直观并且给力的web设计工具包，可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件，栅格系统以及一些常用的JavaScript插件。Bootst
  • java web ui 框架有哪些_web前端开发框架有哪些 祝昊 javawebui框架有哪些
    展开全部常见的web前端开发框架如下：1、Bootstrap：主流框架之一636f70793231313335323631343130323136353331333431356661，Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得Web开发更加快捷。2、html5-boilerplate：该框架可以快速构建健壮，且适应力强的webapp或网站。3、Meteor：
  • Web前端开发 今天你改bug了吗？ JavaWeb前端javascript开发语言
    一、概述1.1什么是HTML、CSS？二、HTML2.1HTML快速入门2.2基础标签和样式2.2.1标题（1）标题排版输入！加回车，直接生成HTML基本结构标签。焦点访谈：中国底气新思想夯实大国粮仓新浪政务>正文焦点访谈：中国底气新思想夯实大国粮仓2023年03月02日21:50央视网（2）样式1（3）样式2使用优先级：id选择器>类选择器>元素选择器（4）超链接2.2.2正文（1）正文排版（2
  • jsonp 常用util方法 hw1287789687 jsonpjsonp常用方法jsonp callback
    jsonp 常用java方法 (1)以jsonp的形式返回:函数名(json字符串) /*** * 用于jsonp调用 * @param map : 用于构造json数据 * @param callback : 回调的javascript方法名 * @param filters : <code>SimpleBeanPropertyFilter theFilt
  • 多线程场景 alafqq 多线程
    0 能不能简单描述一下你在java web开发中需要用到多线程编程的场景？0 对多线程有些了解，但是不太清楚具体的应用场景，能简单说一下你遇到的多线程编程的场景吗？ Java多线程 2012年11月23日 15:41 Young9007 Young9007 4 0 0 4 Comment添加评论关注(2) 3个答案 按时间排序 按投票排序 0 0 最典型的如： 1、
  • Maven学习——修改Maven的本地仓库路径 Kai_Ge maven
          安装Maven后我们会在用户目录下发现.m2 文件夹。默认情况下，该文件夹下放置了Maven本地仓库.m2/repository。所有的Maven构件(artifact)都被存储到该仓库中，以方便重用。但是windows用户的操作系统都安装在C盘，把Maven仓库放到C盘是很危险的，为此我们需要修改Maven的本地仓库路径。    
  • placeholder的浏览器兼容 120153216 placeholder
    【前言】 自从html5引入placeholder后，问题就来了， 不支持html5的浏览器也先有这样的效果， 各种兼容，之前考虑，今天测试人员逮住不放， 想了个解决办法，看样子还行，记录一下。   【原理】 不使用placeholder，而是模拟placeholder的效果， 大概就是用focus和focusout效果。   【代码】 <scrip
  • debian_用iso文件创建本地apt源 2002wmj Debian
    1.将N个debian-506-amd64-DVD-N.iso存放于本地或其他媒介内，本例是放在本机/iso/目录下 2.创建N个挂载点目录 如下： debian:~#mkdir –r /media/dvd1 debian:~#mkdir –r /media/dvd2 debian:~#mkdir –r /media/dvd3 …. debian:~#mkdir –r /media
  • SQLSERVER耗时最长的SQL 357029540 SQL Server
    对于DBA来说，经常要知道存储过程的某些信息： 1.   执行了多少次 2.   执行的执行计划如何 3.   执行的平均读写如何 4.   执行平均需要多少时间 列名          &
  • com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil 7454103 eclipse
    今天eclipse突然报了com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil 错误，并且工程文件打不开了，在网上找了一下资料，然后按照方法操作了一遍，好了，解决方法如下： 错误提示信息： An error has occurred.See error log for more details. Reason: com/genuitec/
  • 用正则删除文本中的html标签 adminjun javahtml正则表达式去掉html标签
    使用文本编辑器录入文章存入数据中的文本是HTML标签格式，由于业务需要对HTML标签进行去除只保留纯净的文本内容，于是乎Java实现自动过滤。 如下： public static String Html2Text(String inputString) { String htmlStr = inputString; // 含html标签的字符串 String textSt
  • 嵌入式系统设计中常用总线和接口 aijuans linux 基础
                   嵌入式系统设计中常用总线和接口         任何一个微处理器都要与一定数量的部件和外围设备连接，但如果将各部件和每一种外围设备都分别用一组线路与CPU直接连接，那么连线
  • Java函数调用方式——按值传递 ayaoxinchao java按值传递对象基础数据类型
    Java使用按值传递的函数调用方式，这往往使我感到迷惑。因为在基础数据类型和对象的传递上，我就会纠结于到底是按值传递，还是按引用传递。其实经过学习，Java在任何地方，都一直发挥着按值传递的本色。   首先，让我们看一看基础数据类型是如何按值传递的。   public static void main(String[] args) { int a = 2;
  • ios音量线性下降 bewithme ios音量
    直接上代码吧   //second 几秒内下降为0 - (void)reduceVolume:(int)second { KGVoicePlayer *player = [KGVoicePlayer defaultPlayer]; if (!_flag) { _tempVolume = player.volume;
  • 与其怨它不如爱它 bijian1013 选择理想职业规划
            抱怨工作是年轻人的常态，但爱工作才是积极的心态，与其怨它不如爱它。         一般来说，在公司干了一两年后，不少年轻人容易产生怨言，除了具体的埋怨公司“扭门”，埋怨上司无能以外，也有许多人是因为根本不爱自已的那份工作，工作完全成了谋生的手段，跟自已的性格、专业、爱好都相差甚远。  
  • 一边时间不够用一边浪费时间 bingyingao 工作时间浪费
    一方面感觉时间严重不够用，另一方面又在不停的浪费时间。 每一个周末，晚上熬夜看电影到凌晨一点，早上起不来一直睡到10点钟，10点钟起床，吃饭后玩手机到下午一点。 精神还是很差，下午像一直野鬼在城市里晃荡。 为何不尝试晚上10点钟就睡，早上7点就起，时间完全是一样的，把看电影的时间换到早上，精神好，气色好，一天好状态。 控制让自己周末早睡早起，你就成功了一半。 有多少个工作
  • 【Scala八】Scala核心二：隐式转换 bit1129 scala
    Implicits work like this: if you call a method on a Scala object, and the Scala compiler does not see a definition for that method in the class definition for that object, the compiler will try to con
  • sudoku slover in Haskell (2) bookjovi haskellsudoku
    继续精简haskell版的sudoku程序，稍微改了一下，这次用了8行，同时性能也提高了很多，对每个空格的所有解不是通过尝试算出来的，而是直接得出。   board = [0,3,4,1,7,0,5,0,0, 0,6,0,0,0,8,3,0,1, 7,0,0,3,0,0,0,0,6, 5,0,0,6,4,0,8,0,7,
  • Java-Collections Framework学习与总结-HashSet和LinkedHashSet BrokenDreams linkedhashset
            本篇总结一下两个常用的集合类HashSet和LinkedHashSet。         它们都实现了相同接口java.util.Set。Set表示一种元素无序且不可重复的集合；之前总结过的java.util.List表示一种元素可重复且有序
  • 读《研磨设计模式》-代码笔记-备忘录模式-Memento bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; /* * 备忘录模式的功能是，在不破坏封装性的前提下，捕获一个对象的内部状态，并在对象之外保存这个状态，为以后的状态恢复作“备忘”
  • 《RAW格式照片处理专业技法》笔记 cherishLC PS
    注意，这不是教程！仅记录楼主之前不太了解的 一、色彩（空间）管理 作者建议采用ProRGB（色域最广），但camera raw中设为ProRGB，而PS中则在ProRGB的基础上，将gamma值设为了1.8（更符合人眼） 注意：bridge、camera raw怎么设置显示、输出的颜色都是正确的（会读取文件内的颜色配置文件），但用PS输出jpg文件时，必须先用Edit->conv
  • 使用 Git 下载 Spring 源码 编译 for Eclipse crabdave eclipse
    使用 Git 下载 Spring 源码 编译 for Eclipse   1、安装gradle，下载 http://www.gradle.org/downloads 配置环境变量GRADLE_HOME，配置PATH  %GRADLE_HOME%/bin，cmd，gradle -v   2、spring4 用jdk8 下载 https://jdk8.java.
  • mysql连接拒绝问题 daizj mysql登录权限
    mysql中在其它机器连接mysql服务器时报错问题汇总 一、[running][email protected]:~$mysql -uroot -h 192.168.9.108 -p   //带-p参数，在下一步进行密码输入 Enter password:    //无字符串输入 ERROR 1045 (28000): Access
  • Google Chrome 为何打压 H.264 dsjt applehtml5chromeGoogle
    Google 今天在 Chromium 官方博客宣布由于 H.264 编解码器并非开放标准，Chrome 将在几个月后正式停止对 H.264 视频解码的支持，全面采用开放的 WebM 和 Theora 格式。 Google 在博客上表示，自从 WebM 视频编解码器推出以后，在性能、厂商支持以及独立性方面已经取得了很大的进步，为了与 Chromium 现有支持的編解码器保持一致，Chrome
  • yii 获取控制器名 和方法名 dcj3sjt126com yiiframework
    1. 获取控制器名 在控制器中获取控制器名:  $name = $this->getId(); 在视图中获取控制器名:    $name = Yii::app()->controller->id;    2. 获取动作名  在控制器beforeAction()回调函数中获取动作名:  $name =
  • Android知识总结（二） come_for_dream android
    明天要考试了，速速总结如下   1、Activity的启动模式        standard：每次调用Activity的时候都创建一个（可以有多个相同的实例，也允许多个相同Activity叠加。）        singleTop：可以有多个实例，但是不允许多个相同Activity叠加。即，如果Ac
  • 高洛峰收徒第二期：寻找未来的“技术大牛” ——折腾一年，奖励20万元 gcq511120594 工作项目管理
    高洛峰，兄弟连IT教育合伙人、猿代码创始人、PHP培训第一人、《细说PHP》作者、软件开发工程师、《IT峰播》主创人、PHP讲师的鼻祖！ 首期现在的进程刚刚过半，徒弟们真的很棒，人品都没的说，团结互助，学习刻苦，工作认真积极，灵活上进。我几乎会把他们全部留下来，现在已有一多半安排了实际的工作，并取得了很好的成绩。等他们出徒之日，凭他们的能力一定能够拿到高薪，而且我还承诺过一个徒弟，当他拿到大学毕
  • linux expect heipark expect
    1. 创建、编辑文件go.sh   #!/usr/bin/expect spawn sudo su admin expect "*password*" { send "13456\r\n" } interact    2. 设置权限   chmod u+x go.sh  3.
  • Spring4.1新特性——静态资源处理增强 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • idea ubuntuxia 乱码 liyonghui160com
      1.首先需要在windows字体目录下或者其它地方找到simsun.ttf 这个 字体文件。 2.在ubuntu 下可以执行下面操作安装该字体： sudo mkdir /usr/share/fonts/truetype/simsun sudo cp simsun.ttf /usr/share/fonts/truetype/simsun fc-cache -f -v
  • 改良程序的11技巧 pda158 技巧
    有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点，程序你只写一次，但以后会无数次的阅读。当你第二天回头来看你的代码 时，你就要开始阅读它了。当你把代码拿给其他人看时，他必须阅读你的代码。因此，在编写时多花一点时间，你会在阅读它时节省大量的时间。   让我们看一些基本的编程技巧：   尽量保持方法简短 永远永远不要把同一个变量用于多个不同的
  • 300个涵盖IT各方面的免费资源（下）——工作与学习篇 shoothao 创业免费资源学习课程远程工作
    工作与生产效率:   A. 背景声音 Noisli:背景噪音与颜色生成器。 Noizio:环境声均衡器。 Defonic:世界上任何的声响都可混合成美丽的旋律。 Designers.mx:设计者为设计者所准备的播放列表。 Coffitivity:这里的声音就像咖啡馆里放的一样。 B. 避免注意力分散 Self Co
  • 深入浅出RPC uule rpc
    深入浅出RPC-浅出篇 深入浅出RPC-深入篇   RPC Remote Procedure Call Protocol 远程过程调用协议   它是一种通过网络从远程计算机程序上请求服务，而不需要了解底层网络技术的协议。RPC协议假定某些传输协议的存在，如TCP或UDP，为通信程序之间携带信息数据。在OSI网络通信模型中，RPC跨越了传输层和应用层。RPC使得开发
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他