随笔分类 -  JavaScript

mobile touch事件
摘要：touch.js 众所周知，mobile与pc 前端开发的不同中，有一点就是事件的不同，mobile上有touchstart,touchmove,touchend等，而pc上用最多的应该还是我们的click事件。mobile上，自己又喜欢用zepto.js库（喜欢有时候就是一种先入为主的感觉），但是 阅读全文
posted @ 2014-09-02 14:48 hlily 阅读(1381) 评论(0) 推荐(2)
fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别
摘要：之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html，fastclick可以解决在手机上点击事件的300ms延迟；另外我们也知道zepto的touch模块，帮助我们实现了很多手机上的事件，比如tap等，tap... 阅读全文
posted @ 2014-05-22 20:49 hlily 阅读(6305) 评论(0) 推荐(1)
基于jquery的相册预览gallery
摘要：众多有图片的产品，都要加个图片预览功能。然后市面上就出现了各种各样的相册，下面也提供一个基于jquery的相册。源码：https://github.com/lilyH/gallery版本: v0.1版功能：（1）支持鼠标点击，键盘左右的图片下一张，下一张 （2）支持屏幕缩放的时候，重新计算图片的位置，保证图片位置屏幕的中间样子:功能还比较简单，希望自己能坚持一直修改下去。。。 阅读全文
posted @ 2014-04-03 11:22 hlily 阅读(293) 评论(0) 推荐(1)
利用二分法获得截取字符串长度
摘要：问题：固定宽度的容器，当字符串长度大于容器宽度的时候，后面出省略号。有同学会说，这还用的到JS吗？用CSS就好了，white-space:nowrap;text-overflow: ellipsis;overflow:hidden 。嗯，是这样的。不过有时候问题比这还负责，比如说，文字后面还需要跟一个图标，当字符串长度过长的时候，文字要有省略号，但是图标还要显示。这种时候就没办法了，需要用到JS来做字符串的截断。下面利用二分法来实现截取需要的字符串，希望能够有更简洁的方式来交流：/**** 放一个span在页面上，el是这个span的dom元素节点，把需要截取的字符串放到span里面，然后通过 阅读全文
posted @ 2014-03-20 16:10 hlily 阅读(380) 评论(0) 推荐(0)
[译]FastClick: native-like tapping for touch apps
摘要：原文地址：http://labs.ft.com/2011/08/fastclick-native-like-tapping-for-touch-apps/这篇文章是一篇老文了，现在才看到，真是落后啊。快速点击：像原生一样的触发app这篇博客最初是发表在Assanka的博客上的，后来12年1月的时候Assanka被金融时代收购了，成为了现在的FT实验室。12年8月的时候，把FastClick放到了GitHub上，将会一直使用GitHub来托管。利用JavaScript API 来实现触摸事件和手势是一个非常直观的尝试。随着Webkit浏览器对web标准更多的支持，Web apps 越来越接近原生 阅读全文
posted @ 2014-02-26 11:41 hlily 阅读(2093) 评论(0) 推荐(1)
app内嵌web的一些问题记录
摘要：问题（1）webview里面出现大图预览，点击手机上的返回，应该是图片预览消失问题（2）键盘输入的时候，键盘会把输入框遮挡----------------------------------------------------------------------------------------一、手机上的返回按键用户的体验应该是手机上按“返回”以后，返回到上一个浏览器的页面。比如下面的的例子，假设我们从http://b.com这个 url跳转到 http://a.com 这个URL下，看到了下面图（1）所示的内容，然后呢，点击图片以后，看到大图预览的页面（图2）；在做大图预览的时候，因为这 阅读全文
posted @ 2013-11-06 18:31 hlily 阅读(2032) 评论(2) 推荐(0)
优化JS的一些小tip
摘要：请问您的母语是什么？一些人回答C语言，一些人回答PHP语言，一些人回答JS语言，当然大部分人的答案还是汉语。回归正题，JS至少也算的上前端工程师的第二语言。所以平时在使用的时候，也应该尽量做到言简意赅，比如能使用“赞”的时候，就不要使用“非常好非常好”这样的重复叠词。 避免重复的获得元素在一个代码块中，需要操作DOM对象的时候，需要获得这个DOM对象，会经常有这样的代码出现(以Qwrap为例)：// : (W('#items').addClass("hide");...W('#items').removeClass("hide&qu 阅读全文
posted @ 2013-06-13 15:11 hlily 阅读(232) 评论(0) 推荐(0)
在线播放视频
摘要：这算是一篇翻译的文字~主要参考dive into html5 中关于video的章节简介几乎在 浏览器上看到的视频，都是通过第三方插件播放的。视频文件其实包括了两部分知识，一是视频的容器格式，一是视频的编码格式。而我们常说的mp4视频，其实mp4在技术上指的的这个视频的容器格式。视频播放的三步骤：（1）视频播放器 解析 视频的容器格式，得到视频里面视频流和音频流的组织方式（知道去哪里找对于的视频流和音频流）（2） 解析 视频流 在屏幕上展示一系列的画面（3）解析 音频流 把声音发送到扬声器视频容器格式：指的是如何来存储数据（规定了这个视频文件中的音频流和视频流的存储方式）编码格式：视频流或音频 阅读全文
posted @ 2013-03-12 17:17 hlily 阅读(3537) 评论(0) 推荐(0)
Ajax同步发送、字符串按步长截断
摘要：Ajax同步发送：(1)闭包的使用多个Ajax请求,同步发送(能同步发送几个?让浏览器自己去决定吧).同步发送,每个ajax请求单独处理自己的请求.for(var i=0;i<len;i++){ Ajax.post(url,param,(function(param,i){ return function(txt){ var res = txt.evalExp();//解析返回的json对象 //这里可以利用i处理每一个ajax请求 } }(param,i)) );}(2) 队列ps:别人写的，找不到连接了，悲剧~function Buffer... 阅读全文
posted @ 2012-09-04 16:48 hlily 阅读(1033) 评论(1) 推荐(0)
文件上传_HTML5与SWFUpload（2）
摘要：一、不支持HTML5上传的只能是flash~不过发现网上关于swfupload的文章实在太多了，还有中文手册~下载地址：http://code.google.com/p/swfupload/英文手册：http://demo.swfupload.org/Documentation/中文手册：http://leeon.me/upload/other/swfupload.html（需要注意下更新时间~）1、就像手册中提到的，用swfupload做上传的时候，需要在页面中加个JS<script type="text/javascript" src="http://w 阅读全文
posted @ 2012-07-24 12:04 hlily 阅读(1303) 评论(0) 推荐(0)
文件上传_HTML5与SWFUpload（1）
摘要：要实现文件上传，要兼顾IE6份额还不小的市场情况，除了fashion的HTML5，SWFUpload还得用作降级方案。Nicholas有一个系列关于利用HTML5上传文件的博客“Working with files in JavaScript”，另外，这里还有一篇也很详细的利用HTML5上传文件的文章（中文版哦）http://www.html5rocks.com/zh/tutorials/file/dndfiles/#toc-slicing-files一、利用HTML5进行文件上传（来自Nicholas）1、上传文件，可以点击按钮选择文件上传；也可以拖拽上传插曲：--------------- 阅读全文
posted @ 2012-07-09 17:27 hlily 阅读(4647) 评论(1) 推荐(6)
对于初学者有效的JavaScript设计模式（3）
摘要：去年的这个时候看了一遍这个文章，说实话，看了等于没看。1、看了也没有理解，2、看了也没有在实际中用到，3、看了就忘了今年的这个时候又看到这个文章，隐隐约约觉得，“呀，我看过，还翻译过”，但是却对内容完全想不起来了。去年看这个模块的时候，看的云里雾里的，完全没懂。现在嘛，再来看这个模式，觉得豁然开朗啊，因为自己也就是在用这个模式来构建的代码。四、模块模式模块模式是基于对象字面量的形式，所以首先来看看对象字面量。对象字面量对象字面量，一个对象由 一组以逗号分割的名称/值对 包裹在一对{}中组成。名称可以使字符串或标识符，在最后一对名/值后不能加逗号。模块模式在传统的软件工程中，模块模式最初被定义为 阅读全文
posted @ 2012-07-03 17:03 hlily 阅读(410) 评论(0) 推荐(0)
实训项目“你画我猜”总结_前端篇
摘要：为期4周的实训就要结束了，感谢团队中的每一名同学，才有了我们今天的成果。我们这个5人小团队（产品一位，测试一位，开发三位（两名后台，一名前端）），来自不同的学校，带着刚毕业的学生气一起组成了我们的“飞虎队”。从产品刚提出的手机版，被开发一致否决，决定做WEB版本开始，我们几乎每天开会，讨论需求，进度，接下来要做的事，优先级。最后我们采用了mysql+redis+php+js(html5+flashcanvas.js) 这样的技术组成，完成了web版的"你画我猜"项目+管理后台，为期4周，进行了2期的产品开发。作为组内的前端人员，也只能说说前端的工作了。1、登录页：用js实现 阅读全文
posted @ 2012-05-29 15:31 hlily 阅读(4924) 评论(3) 推荐(1)
对于初学者有效的JavaScript设计模式（2）
摘要：二、 构造模式利用prototype 来构造自己的函数。 1 function Car(model,year,miles){ 2 this.model = model; 3 this.year = year; 4 this.miles = miles; 5 } 6 Car.prototype.toString = function(){ 7 return this.model + " has done " + this.miles + " miles"; 8 }; 9 var civic = new Car("Honda Civi... 阅读全文
posted @ 2012-04-12 14:30 hlily 阅读(294) 评论(0) 推荐(0)
对于初学者有效的JavaScript设计模式（1）
摘要：原文：http://addyosmani.com/resources/essentialjsdesignpatterns/book/1、一个设计模式必要的部分：(1)名称和描述Pattern Name and description(2)内容提示 context outline——是对用户哪方面需求的响应(3)问题陈述——正在解决的问题的声明，让别人能够理解模式的意图(4)解决方案——用户的问题是如何得到解决的，给出一个可理解的列表，包括步骤和想法(5)设计方案——模式设计的描述，特别要说明关于用户交互的行为描述(6)实现——模式如何实施的指南(7)插图——模式中类的可视化描述(8)例子——用 阅读全文
posted @ 2012-04-12 14:24 hlily 阅读(366) 评论(0) 推荐(0)
JQuery的结构-Dive into jQuery
摘要：原文参考：http://www.splashnology.com/article/the-structure-of-jquery-dive-into-source-code/2517/Jquery很流行了，那么它到底是怎么构造的，记得一位老师说过“结构是宝，一懂百了；结构不懂，一窍不通”。这句话深深地在我脑海里。。。。。总体结构1 (function( window, undefined ) {2 var document = window.document,3 navigator = window.navigator,4 location = window.location;... 阅读全文
posted @ 2012-03-21 23:03 hlily 阅读(2226) 评论(3) 推荐(6)