摘要:对于文件的下载,可以说是一个十分常见的话题,前端的很多项目中都会有这样的需求,比如 highChart 统计图的导出,在线图片编辑中的图片保存,在线代码编辑的代码导出等等。而很多时候,我们只给了一个链接,用户需要右键点击链接,然后选择“另存为”,这个过程虽说不麻烦,但还是需要两步操作,倘若用户想保存... 阅读全文
再探@font-face及webIcon制作
2014-01-27 01:50 by Barret李靖, 5639 阅读, 2 推荐, 收藏, 编辑
摘要:@font-face 不能说他是什么新东西了,在 CSS2.0 规范中就有了这玩意儿,IE4.0 开始就已经出现,只是当时用的不是特别广泛,后来在 CSS2.1 草案中又被删掉。随着 web 的急速发展,@font-face 价值越来越凸显,然后再次被纳入 CSS3 草案中。@font-face 是个什么东西,本文不做过多说明,不太清楚的童鞋可以看这里 http://www.w3schools.com/css/css3_fonts.asp。需要强调的是他的书写格式:@font-face { font-family: ; src: [][, []]*; [font-weigh... 阅读全文
进阶正则表达式
2014-01-18 00:32 by Barret李靖, 17964 阅读, 15 推荐, 收藏, 编辑
摘要:关于正则表达式,网上可以搜到一大片文章,我之前也搜集了一些资料,并做了排版整理,可以看这篇文章http://www.cnblogs.com/hustskyking/archive/2013/06/04/RegExp.html,作为基础入门讲解,这篇文章说的十分到位。记得最开始学习正则,是使用 php 做一个爬虫程序。为了获取指定的信息,必须用一定的方式把有规律的数据匹配出来,而正则是首选。下面是当时写的爬虫程序的一个代码片段:$regdata = "/((?[^){0,1}⊙(?.{12})\S*\s/";//获取页面$html = file_get_contents( 阅读全文
从登录框看前端
2014-01-13 15:30 by Barret李靖, 36733 阅读, 137 推荐, 收藏, 编辑
摘要:我们会骂 12306 的网站界面挫,效果差,速度慢,回头看看自己写的代码,是不是也一样的狗血!在前端,很多看似简单的东西,内藏无数玄机。本文将以一个小小的登录框为入口,谈一谈如何完善自己的程序。在很多人眼里,前端就是 DIV+CSS+JQuery,甚至还有些人停留在 table 布局的迷雾当中(这些... 阅读全文
JavaScript异步编程原理
2014-01-05 11:01 by Barret李靖, 24450 阅读, 44 推荐, 收藏, 编辑
摘要:众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着。在事件队列中加一个延时,这样的问题便可以得到缓解。A: 嘿,哥们儿,快点!B: 我要三分钟,你先等着,完了叫你~A: 好的,记得叫我啊~ 你(C)也等着吧,完了叫你~C: 嗯!...告诉后面排队的人一个准确的时间,这样后面的人就可以利用这段时间去干点别的事情,而不是所有的人都排在队列后抱怨。我写了一段程序来解决这个问题:/*** @author Barret Lee* @email barret. 阅读全文
浅谈模块化加载的实现原理
2013-12-29 20:18 by Barret李靖, 11057 阅读, 7 推荐, 收藏, 编辑
摘要:相信很多人都用过 seajs、 requirejs 等这些模块加载器,他们都是十分便捷的工程管理工具,简化了代码的结构,更重要的是消除了各种文件依赖和命名冲突问题,并利用 AMD / CMD 规范统一了格式。如果你不太明白模块化的作用,建议看看玉伯写的一篇文章。为什么他们会想到使用模块化加载呢,我觉... 阅读全文
细说websocket - php篇
2013-12-25 11:24 by Barret李靖, 61157 阅读, 13 推荐, 收藏, 编辑
摘要:下面我画了一个图演示 client 和 server 之间建立 websocket 连接时握手部分,这个部分在 node 中可以十分轻松的完成,因为 node 提供的 net 模块已经对 socket 套接字做了封装处理,开发者使用的时候只需要考虑数据的交互而不用处理连接的建立。而 php 没有,从 socket 的连接、建立、绑定、监听等,这些都需要我们自己去操作,所以有必要拿出来再说一说。 +--------+ 1.发送Sec-WebSocket-Key +---------+ | | -----------------------------... 阅读全文
细说WebSocket - Node篇
2013-12-20 13:42 by Barret李靖, 41480 阅读, 24 推荐, 收藏, 编辑
摘要:在上一篇提高到了 web 通信的各种方式,包括 轮询、长连接 以及各种 HTML5 中提到的手段。本文将详细描述 WebSocket协议 在 web通讯 中的实现。 一、WebSocket 协议 1. 概述 websocket协议允许不受信用的客户端代码在可控的网络环境中控制远程主机。该协议包含一个 阅读全文
JavaScript之web通信
2013-12-17 22:01 by Barret李靖, 11563 阅读, 15 推荐, 收藏, 编辑
摘要:web通信,一个特别大的topic,涉及面也是很广的。因最近学习了 javascript 中一些 web 通信知识,在这里总结下。文中应该会有理解错误或者表述不清晰的地方,还望斧正!一、前言1. comet技术浏览器作为 Web 应用的前台,自身的处理功能比较有限。浏览器的发展需要客户端升级软件,同时由于客户端浏览器软件的多样性,在某种意义上,也影响了浏览器新技术的推广。在 Web 应用中,浏览器的主要工作是发送请求、解析服务器返回的信息以不同的风格显示。AJAX 是浏览器技术发展的成果,通过在浏览器端发送异步请求,提高了单用户操作的响应性。但 Web 本质上是一个多用户的系统,对任何用户来说 阅读全文
PJAX的实现与应用
2013-12-06 10:14 by Barret李靖, 41692 阅读, 7 推荐, 收藏, 编辑
摘要:一、前言web发展经历了一个漫长的周期,最开始很多人认为Javascript这们语言是前端开发的累赘,是个鸡肋,那个时候人们还享受着从一个a链接蹦到另一个页面的web神奇魔术。后来随着JavaScript的不断更新换代,他的功能不仅仅是为网页添加一点特效了,语言本身的加强以及对DOM操作能力的提升让他在前端大放光彩。尤其是ajax的出现,让JavaScript以及整个web的发展翻开了崭新的一页。利用ajax局部刷新页面,相信很多人玩得相当熟练了。如果整个页面的刷新都是使用ajax,我们可以称之为一个webapp,所有的逻辑都是在当页处理,这种形式的页面带来的体验是十分不错的,减少了那些比较“ 阅读全文
JavaScript模板引擎原理,几行代码的事儿
2013-12-03 16:35 by Barret李靖, 33502 阅读, 36 推荐, 收藏, 编辑
摘要:一、前言什么是模板引擎,说的简单点,就是一个字符串中有几个变量待定。比如:var tpl = 'Hei, my name is , and I\'m years old.';通过模板引擎函数把数据塞进去,var data = { "name": "Barret Lee", "age":... 阅读全文
ECMAScript 6中的let和const关键词
2013-11-28 21:46 by Barret李靖, 4990 阅读, 2 推荐, 收藏, 编辑
摘要:ECMAScript 6中多了两个定义变量的关键词,一个是let,另一个是const,后者顾名思义就是常量定义,前者的作用域范围是块级的。一般写过js的童鞋都知道,同其他语言一样,JS中的变量作用域是函数域而不是块级分割的,但是涉及到变量提升(hosting),闭包等问题的时候,很多有经验的程序员依然会头疼。var a = 5;if(true){ var a = 10;}console.log(a);//10上面的结果是10,但是我们看到,在if block内外都有一个a的定义,按我们正常的理解来看,这两个a应该占用的是不同的内存,而事实上,他们共用同一个内存。为此,ES 6中的let关... 阅读全文
ECMAScript 6 简介
2013-11-26 22:31 by Barret李靖, 2510 阅读, 3 推荐, 收藏, 编辑
摘要:ECMAScript 6 是JavaScript的下一个标准,正处在快速开发之中,大部分已经完成了,预计将在2014年正式发布。Mozilla将在这个标准的基础上,推出JavaScript 2.0。ECMAScript 6 的目标,是使得JavaScript可以用来编写复杂的应用程序、函数库和代码的自动生成器(code generator)。最新的浏览器已经部分支持ECMAScript 6 的语法,可以通过《ECMAScript 6 浏览器兼容表》查看浏览器支持情况。ECMAScript 6 新内容一览let, const (定义块级局部变量), 函数在块级域中解构: let {x, y} = 阅读全文
OAuth认证原理及HTTP下的密码安全传输
2013-11-26 14:58 by Barret李靖, 8335 阅读, 4 推荐, 收藏, 编辑
摘要:很多人都会问这样一个问题,我们在登录的时候,密码会不会泄露?随便进一个网站,登录时抓包分析,可以看到自己的密码都是明文传输的,在如此复杂的web环境下,我们没有百分的把握保证信息在传输过程中不被截获,那不使用明文如何告诉服务器自己的身份呢?在一些高度通信安全的网络中,数据传输会使用HTTPS作为传输协议,但是通常情况下我们没必要使用HTTPS传输,虽说安全,但传输数据都需要加密解密,很费时。我们可以使用一些加密方式(如md5)对密码进行加密,如果仅仅只对密码加密那肯定是没有任何作用,所以可以在密码中加入一些其他的字符,合并之后使这个密码成为一个临时密码~username:password:在上 阅读全文
chrome浏览器渲染白屏问题剖析
2013-11-04 13:26 by Barret李靖, 6763 阅读, 0 推荐, 收藏, 编辑
摘要:刚截图十几次,终于捕捉到了这个白屏现象,hiahia~~大家可以很清晰地看到下边还木有渲染完毕的透明层,这是一个十分普遍的问题,经常遇到。我的浏览器版本是到目前为止应该是最新版(release版本),之前的版本应该也存在类似的问题。只要处理好代码,这种体验相当不好的白屏问题是可以避免的,Qzone的页面貌似就没有这个现象。首先我们来聊一聊这个问题是怎么产生的,这涉及到chrome浏览器对网页的解析和渲染。渲染引擎首先通过网络获得所请求文档的内容,通常以8K分块的方式完成。下面是渲染引擎在取得内容之后的基本流程:解析html以构建dom树->构建render树->布局render树- 阅读全文