- 博客(47)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 websocket驾到
在没有websocket之前，大家都如何实现信息推送的呢？很久很久以前有个技术叫推送，使用的概念叫Webcasting。大体意思就是用户来服务端注册一个或者多个通道，然后服务端确定给某些个通道或某个通道发送消息。很久以前有个flash技术，利用flash插件与服务端进行相互推送。不久以前有个comet，比如有Polling、Long Polling（当有消息的时候才返回），至于HTTP发起是在
2013-10-25 12:06:49
2791
1
原创 移动webApp大前端（二）
响应式布局：在上一篇文章中先介绍了viewport以及媒体标签的用法，利用viewport检测当前运行环境浏览器视口大小，然后用@media进行有针对性的编写样式。接下来我们继续深入一起探讨webApp的必备之---响应式布局：sorry，先缓一缓，我们先来说一下webApp吧，算是对上一篇的补充。webApp区别于传统web开发，也有别于应用App。它是伴随智能手机的普及而流行的
2014-03-27 15:19:49
1045
原创 移动端webApp之大前端(一)
移动端包括ipad、itocuch手机等未来移动设备对于webApp等基于浏览器的网站网页都是用基于移动端浏览器内核。而如今流行的手机浏览器基本都是基于webkit内核作为核心。由于移动端的手机屏幕跟pc端不同，分辨率也是五花八门，所以对于移动端前端页面布局就是很大的挑战。不过我们既然知道了移动端跟pc端不同 就可以有针对性的进行开发，毕竟移动端的浏览器不牵扯到太多pc端似的各种坑爹的兼容
2014-03-26 11:54:35
1700
原创 js实例化以及constructor探究
js实例化以及constructor探究先来一个构造函数：function Person(name){ this.name=name;}对其添加原型链：Person.prototype={getName:function(){ return this.name;}}对其实例化：var person=new Person('xiaopu')
2014-03-14 16:16:06
1919
原创 js预编译解析执行过程分析
javascript编译解析执行顺序分析先来看几道题，大家先猜一下alert的结果1.var a=2;function show(){window.setTimeout(function(){a=22},1000)var a=4;window.setTimeout(function(){ a=222},3000)}show();alert(a);====
2014-03-14 14:20:40
2877
原创 mouseover以及mouseout事件问题解决方案
mouseover事件：鼠标进入元素或者在元素内部游走时候触发该事件；mouseout事件：鼠标离开该元素触发事件；现在我们有一个div，div中包含一个span，需求需要在鼠标在div内部时候监听鼠标位置；即mouseover事件，真正测试时候发现鼠标在进入span时候会触发mouseout事件然后再触发mouseover事件，一般情况下我们不会认为鼠标进入div内部的span就是离
2014-02-27 11:23:41
6768
转载 window.name实现跨域请求
如a.com网站想通过JS获取b.com网站的数据。1 在a.com网站添加一个空HTML页。名称为：http://a.com/null.html2 在a.com网站需要获取数据页面(如：http://a.com/getDomainData.html)内容如下： 跨域获取数据 function domainData(url, fn) {
2014-02-26 11:24:13
1913
原创 类之间降低耦合javaScript
这篇文章其实是作为js自定义事件的补充，在那篇文章中我们说到了自定义事件对于避免类的污染作用，这篇主要讲讲自定义事件在类之间相互调用的解耦作用：还是举个例子吧：假设我们需要实现一个功能，点击登录，登录成功后，页面一部分出现一个欢迎您的信息；为了便于说明我举了这个功能比较简单的例子，在这个例子中我们需要两个组件（也就是两个类），第一个是登陆模块类login（代表登陆组件），第二个是欢迎信
2014-02-13 17:10:57
1655
原创 ie下获得跳转来源修复
一般情况下我们从现在某个网页要跳转到某个网页往往会用到location.href="www.xxx.com"；这种方式在标准浏览器都没问题，但是ie下却丢失了referer即跳转来源；很多情况下我们在一个网站中需要统计用户是通过哪个网站跳转过来，然后计算是否该给另个网站小费。ie下这个bug就让很多网站丢失了一大笔银子。解决方法看代码：非ie下; function gogo(url
2014-01-23 15:25:11
959
转载 淘宝组合查询算法
前端有多少事情可以做，能做到多好。一直在关注各大公司UED方面的知识，他们也代表了前端的力量，而且也很乐意和大家分享，把应用到项目的知识归类整理，再写成博客搬到网上来，充实这前端的内容，也是为想追寻和学习的人提供了场所，为想接触到一些前沿的知识提供了去处，感谢有这么一群人。大的科技公司基本都有自己的前端部门或团队，在网上也能看到他们的动态，像淘宝、阿里巴巴、腾讯、百度等等。前段时间在淘宝U
2014-01-23 15:14:25
1210
原创 写给前端的http缓存详解
http提供了非常强大的缓存机制，文章分为三部分，我们先来统一梳理一下一个缓存请求的过程，然后从请求头以及响应头缓存相关字段进行解析，最后总结一下前端需要了解的对于缓存的操作一 . 缓存过程：当一个用户发起一个静态资源请求的时候,浏览器会通过以下几步来获取资源当第一次发送请求，http返回200的状态码，如果没有关闭缓存请求的话（没标明不使用缓存，下述）则会在返回头中返回包含l
2013-12-30 13:16:58
14726
原创 写给前端的http详解
昨天工作时候在请求服务器时间时候遇到一个请求缓存问题。就这个问题细究的话 应该是一篇关于http缓存的讲解，不过在讲解缓存之前，还是要巩固一下http请求，特整理如下：希望对大家日后有所帮助。阅读目录：什么是http协议：引用百度百科的话说来就是：http协议其实就是超文本传输协议，超文本传输协议 (HTTP-Hypertext transfer protocol) 是一种详细
2013-12-26 16:46:14
5516
2
原创 js页面之间传参方式集合
总有一款适合你。。。如果想了解iframe有关传值请参看之前文章：iframe跨不跨域通讯方式集合；这篇主要是说说其他几种页面之间传值的实现：实现一：url传值这种传值方式就是通过在url后面增加参数，然后打开该url后页面获取参数信息，再用js进行处理。main.html:function post(){ url= "other.html?name="+es
2013-12-24 15:41:56
7767
原创 js代理监听动态添加元素事件(类似jquery的delegate事件)
很多时候我们需要监听动态添加的元素事件。举个例子：页面中有一个div，div中有一个button以及一个table，我们需要在点击button的时候相应的table行进行排序,而根据特定需求ajax返回数据中的table值是变化的，table变化导致了原先的button必须被移除掉，然后在对应业务地方再添加上一个对table进行排序功能的button。换句话说 这个button的功能是
2013-12-23 11:08:32
8715
原创 真正的快速排序算法javascript实现
原理分析：其基本思想是选取其中一个值，经过一轮排序，将小于此值的数据放置其左（右）边，大于此值的数据放置于其右（左）边，这样就完成一次快速排序，进而通过递归对左右两侧分别进行快速排序，直到排序组内都剩余1项为止。还是以数组[1,4,7,2,6,8,3,5,9]举例：假设我们选取中间值6作为中间比较值那么经过一次快速排序之后结果应该是[1,4,2,3,5][6][7,8,9]然后
2013-12-19 11:43:49
4503
原创 javascript之冒泡排序算法
原理分析： 其原理是从头开始临近的数字两两进行比较，比较一轮战罢，最小的或者最大的被交换到第一位或者最后一位， 其余的再从头进行两两比较，直到比较大到倒数第一位，此轮战罢，最小的或者最大的排到了倒数第二位；。。依次类推递归 以我们数组[1,4,7,2,6,8,3,5,9]举例： 第一轮排序： 两两比较之后将最小值放置最后一位
2013-12-19 11:24:59
1277
原创 我的富文本编辑器
先截个图看看效果：前面讲过execCommand以及光标选区操作，富文本中核心应用便是如此。大体思路就是根据浏览器兼容性利用execCommand以及选区去在可编辑话的iframe中进行插入代码以及样式。我们来一步步实现：第一步：首先建立一个html文档
2013-12-17 12:21:27
1730
原创 js之文件上传（含进度条，回调）向下兼容
之前分享过一篇拖拽上传预览的实现是基于html5的，在那篇文章中，我们实现了拖拽预览，对于上传并没有特别提及到：这篇算作对文件上传的补充吧在html5之前我们上传文件一般都会用form表单进行提交，from.submit()即可ok,添加需求如下：1.上传成功后执行回调函数2.上传过程显示上传进度条这两种需求都不为过，很多现实中都会需要用到如果是ajax上传就可以很简单的实
2013-12-16 16:26:49
4859
原创 js瀑布流实现思路
百度图片以及qq空间等还有一些像蘑菇街 发现啦之类的网站都用的是瀑布流布局模式，这种模式优点就是合理动态布局，使得图片页面表现有很强的视觉感染力，可以使得客户快速发现自己喜欢的图片。并且大量图片处理时候减少浏览器处理图片消耗；在操作效果上像瀑布似的哗哗的出现图片 故而得此名（纯属想象）闲来之余，实现一个自己的瀑布流demo，发现一些问题 总结一些经验，统统分享给大家：实现思路如下：
2013-12-16 14:00:51
3665
原创 javaScript获取元素位置以及元素页面大小总结
js获取元素位置以及元素页面大小总结：一：元素位置：js中获取元素位置也就是元素的left以及top位置利用el.offset即可。el.offsetLeft以及el.offsetTop获取的是元素边框外部到目标位置距离；而我们如果要获得元素相对于页面的绝对位置就不得不循环元素父元素然后将循环值相加得到的即为元素真实的绝对位置代码如下：获取元素相对页面位置var getPo
2013-12-09 13:58:13
1486
原创 富文本编辑的利器execCommand
富文本编辑中一个非常关键的document属性execCommand(command,boole,val);这个属性可以得到并且编辑我们当前选则文档节点内容。我们上一节讲过createRange以及createTextRange，都是针对文档去创建并保存一个range选区，一般不会用来去做富文本编辑这种需求，而只是单纯的去做单个或者几个选取插入以及对光标处理效果；如果非得要用这两个去实现富
2013-11-26 13:59:44
4993
原创 js光标选区操作
拿input框来举例子：平时我们操作input或者textArea需要用到该技术情况下一般有两处：一：点击一个按钮在input框中特定位置插入一段文本；二：选中一段文本进行操作实现两个效果时候ie以及非ie实现方式不同。具体看看各自是如何实现的：非ie下实现第一个效果一般都会用到三个步骤1、获取选区起始坐标偏移量：非ie下可以应用ele.selectionStart以及ele.
2013-11-26 10:27:29
3286
1
原创 HTML5之Web Worker
Web Worker是什么：web worker是html5提供的一个多线程解决方案，（以下我们简称为wWorker），大家都知道js是单线程执行的，所谓多线程解决方案也就是不需要js在执行时候摁着一个线程可劲使用，比如有些时候我们不小心会弄出死循环 或者大量计算时候，浏览器就会在它执行的线程中去执行我们的计算，从而导致ui渲染线程挂起浏览器就over了，这就是单线程处理的结果，多线程
2013-11-18 16:06:26
1096
原创 iframe及其跨域通讯方式集合
iframe通讯分为两种情况，一个是同域下通讯，另一个是跨域通信先看看同域下父子页面通讯：我们写两个页面便于比较分析：父页面parent.html: function say() { alert("我是父页面方法"); } function callChild(){ myFrame.w
2013-11-18 11:51:44
11374
1
原创 javascript深度拷贝分析
先来介绍一下深拷贝是如何而来的。深拷贝是对比与浅拷贝而言的，我们都知道js中分为基本类型以及引用类型，基本类型都是保存在栈里面的，而引用类型仅仅是把地址保存在栈里面，而值是存在于堆里面，浅拷贝仅仅是拷贝栈里面东西；也就是说对于基本类型而言在栈里面重新开辟一个空间保存复制后的值和址，而对于引用类型而言仅仅是把地址复制过来，而这个地址指向的依然是原来址指向的那个堆里面的值，这样一来如果我们浅复
2013-11-14 16:05:44
2112
原创 js文本框监听
主流浏览器包括firefox、chrome以及ie高版本都支持oninput方法监听文本框变化，此外ie有自己的监听方法：onpropertychange方法。根据这些我们就可以做兼容各种浏览器的文本框监听方法：var inputArea=document.getElementById('myInput');if(window.addEventListener){inputArea.a
2013-11-14 10:09:10
1801
原创 canvas讲解进阶篇五
进阶三篇我们讲过了剪裁缩放 所用到的canvas方法也就是drawImage，我们也知道了drawImage方法有三套用法可以直接将图像放置于绘图环境、可以将图像缩放放置于绘图环境也可以将图像剪裁后放置绘图环境。利用我们讲过的图像剪裁缩放可以制作背景图片滚动效果，例如制作游戏程序时候背景图片的部分显示等功能。大家可以发散思维的。这篇文章主要讲图像制作包含两个大部分：离屏canvas以及
2013-11-13 15:53:28
3271
2
原创 canvas讲解进阶篇四
贝塞尔曲线、坐标变换以及图像合成我们之前说过：canvas的元素大小与绘图环境大小不一定相同，例如我们通过css定义canvas的宽高后，改变的只是canvas元素的宽高，而绘图环境的宽高还是不变的，当我们在canvas内部作图时候，绘图环境会默认的缩放到canvas元素大小，这时候如果我们绘制1像素那么该1像素就会被缩放同样倍数。很多时候我们需要根据用户鼠标位置去操作canvas环境。这
2013-11-12 14:42:37
1546
原创 canvas讲解进阶篇三
承上启下：上篇我们说过了canvas中绘图的颜色阴影以及渐变操作，这些有时候是给我们绘图锦上添花有时候是审美需要，无论如何 都是canvas不可获取的一部分，canvas中还有一些操作可以为你实现比较复杂的效果例如文本书写、剪裁缩放、以及图像合成、滤镜通道（后续）等。这篇文章主要为大家介绍一下文本以及剪裁缩放。文本文本的描边与填充在实际操作时候跟其他基本图形一样，只是调用方法有所不同，
2013-11-08 14:50:58
1957
1
原创 canvas讲解进阶篇二
上篇我们讲解过canvas的基础图形绘制，包括线段矩形以及圆弧。看上去这三个组合能完成很多东西（毕竟不是ps），但是实际canvas功能很强大的，可以实现ps中大部分功能，甚至在js控制下完成flash的东东。这一篇我们讲解的东西不是为了让canvas多么绚丽，而是在实际中我们的画布不能那么光秃秃黑乎乎的，总要有点颜色效果吧，这叫做客户体验。哈哈下面我们依次来说说canvas的颜色（填充透
2013-11-06 17:35:20
1417
1
原创 canvas讲解进阶篇一
html5中最强大的武器当属canvas莫属。从文字处理到电子游戏，canvas都会提供给你而且总体而言运行速度相当快，而且编码良好的canvas应用程序无需修改即可在任何兼容html5浏览器中进行运行。偶尔因为canvas更新而浏览器版本跟不上导致细微差别。而针对低版本ie的兼容我们过会儿再说。我们先从canvas基本开始走起：实现canvas首先要在页面中定义一个canvas元素，
2013-11-06 14:02:41
2499
3
原创 扯扯javascript之自定义事件
如果您看到这篇文章 说明您知道js中事件这个东西，js中操作少不了事件的参与，小到click mouse等事件，大到面向对象处理事件。说白了，js就是一个处理事件的东东。。只是作用环境不同或者不明显而已。向上追溯祖宗八代 肯定能找到相关事件。。只是那个时代的js不像现在这么多功能，在加上各个浏览器大哥之间怄气，可苦了我们这帮做js的小弟了。暂定一下 咱回来，别跑偏了。。。自定义事件也是
2013-10-30 16:52:16
2432
1
原创 bind与call比较分析
对很多人来说，都知道call和bind是可以改变函数作用域的，那么很多情况下我们函数中后面用bind而为什么不用call呢，bind的出现是否多余呢？下面就来比较一下call和bind函数执行过程中各起什么作用。我们写一段js代码用来分析：function $(a){return document.getElementById(a)}function ab(params){
2013-10-28 16:51:42
927
原创 javascript事件处理方式之捕获冒泡
javascript在事件处理机制上经历了三个阶段 html事件处理、dom0级事件处理、dom2级事件处理。html事件处理：形如该单击操作是通过onclick特性并将一些js代码作为值来定义。正因为这个值是js，因此不能使用一些未经转义的html语法字符，例如""等，要想使用双引号，上述例子需要修改为：在html中定义事件处理通常都会调用页面其他地方定义的函数脚本，
2013-10-28 15:11:05
1467
原创 正则表达式精讲
正则表达式讲解：首先要知道正则表达式到底是干什么用的？•测试字符串是否匹配格式：例如测试手机号邮箱是否符合规则 •替换文本内容：可以在一串文本中查找需要的内容进行批量替换•根据匹配规则从文本中查找需要的内容：例如可以根据输入选择下拉框显示内容；总之正则表达式在web2.0时代显得是那么强势流行，下面我们说说正则表达式如何构建首先要了解RegExp对象，这是一个跟ar
2013-10-25 11:49:55
1098
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人