摘要：对于文件的下载，可以说是一个十分常见的话题，前端的很多项目中都会有这样的需求，比如 highChart 统计图的导出，在线图片编辑中的图片保存，在线代码编辑的代码导出等等。而很多时候，我们只给了一个链接，用户需要右键点击链接，然后选择“另存为”，这个过程虽说不麻烦，但还是需要两步操作，倘若用户想保存... 阅读全文
再探@font-face及webIcon制作
2014-01-27 01:50 by Barret李靖, 5620 阅读, 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李靖, 17882 阅读, 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李靖, 36669 阅读, 137 推荐, 收藏, 编辑
摘要：我们会骂 12306 的网站界面挫，效果差，速度慢，回头看看自己写的代码，是不是也一样的狗血！在前端，很多看似简单的东西，内藏无数玄机。本文将以一个小小的登录框为入口，谈一谈如何完善自己的程序。在很多人眼里，前端就是 DIV+CSS+JQuery，甚至还有些人停留在 table 布局的迷雾当中（这些... 阅读全文
JavaScript异步编程原理
2014-01-05 11:01 by Barret李靖, 24406 阅读, 44 推荐, 收藏, 编辑
摘要：众所周知，JavaScript 的执行环境是单线程的，所谓的单线程就是一次只能完成一个任务，其任务的调度方式就是排队，这就和火车站洗手间门口的等待一样，前面的那个人没有搞定，你就只能站在后面排队等着。在事件队列中加一个延时，这样的问题便可以得到缓解。A: 嘿，哥们儿，快点！B: 我要三分钟，你先等着，完了叫你~A: 好的，记得叫我啊~ 你（C）也等着吧，完了叫你~C: 嗯！...告诉后面排队的人一个准确的时间，这样后面的人就可以利用这段时间去干点别的事情，而不是所有的人都排在队列后抱怨。我写了一段程序来解决这个问题：/*** @author Barret Lee* @email barret. 阅读全文
浅谈模块化加载的实现原理
2013-12-29 20:18 by Barret李靖, 11041 阅读, 7 推荐, 收藏, 编辑
摘要：相信很多人都用过 seajs、 requirejs 等这些模块加载器，他们都是十分便捷的工程管理工具，简化了代码的结构，更重要的是消除了各种文件依赖和命名冲突问题，并利用 AMD / CMD 规范统一了格式。如果你不太明白模块化的作用，建议看看玉伯写的一篇文章。为什么他们会想到使用模块化加载呢，我觉... 阅读全文
细说websocket - php篇
2013-12-25 11:24 by Barret李靖, 61043 阅读, 13 推荐, 收藏, 编辑
摘要：下面我画了一个图演示 client 和 server 之间建立 websocket 连接时握手部分，这个部分在 node 中可以十分轻松的完成，因为 node 提供的 net 模块已经对 socket 套接字做了封装处理，开发者使用的时候只需要考虑数据的交互而不用处理连接的建立。而 php 没有，从 socket 的连接、建立、绑定、监听等，这些都需要我们自己去操作，所以有必要拿出来再说一说。 +--------+ 1.发送Sec-WebSocket-Key +---------+ | | -----------------------------... 阅读全文
细说WebSocket - Node篇
2013-12-20 13:42 by Barret李靖, 41424 阅读, 24 推荐, 收藏, 编辑
摘要：在上一篇提高到了 web 通信的各种方式，包括 轮询、长连接 以及各种 HTML5 中提到的手段。本文将详细描述 WebSocket协议 在 web通讯 中的实现。 一、WebSocket 协议 1. 概述 websocket协议允许不受信用的客户端代码在可控的网络环境中控制远程主机。该协议包含一个 阅读全文
JavaScript之web通信
2013-12-17 22:01 by Barret李靖, 11521 阅读, 15 推荐, 收藏, 编辑
摘要：web通信，一个特别大的topic，涉及面也是很广的。因最近学习了 javascript 中一些 web 通信知识，在这里总结下。文中应该会有理解错误或者表述不清晰的地方，还望斧正！一、前言1. comet技术浏览器作为 Web 应用的前台，自身的处理功能比较有限。浏览器的发展需要客户端升级软件，同时由于客户端浏览器软件的多样性，在某种意义上，也影响了浏览器新技术的推广。在 Web 应用中，浏览器的主要工作是发送请求、解析服务器返回的信息以不同的风格显示。AJAX 是浏览器技术发展的成果，通过在浏览器端发送异步请求，提高了单用户操作的响应性。但 Web 本质上是一个多用户的系统，对任何用户来说 阅读全文
PJAX的实现与应用
2013-12-06 10:14 by Barret李靖, 41640 阅读, 7 推荐, 收藏, 编辑
摘要：一、前言web发展经历了一个漫长的周期，最开始很多人认为Javascript这们语言是前端开发的累赘，是个鸡肋，那个时候人们还享受着从一个a链接蹦到另一个页面的web神奇魔术。后来随着JavaScript的不断更新换代，他的功能不仅仅是为网页添加一点特效了，语言本身的加强以及对DOM操作能力的提升让他在前端大放光彩。尤其是ajax的出现，让JavaScript以及整个web的发展翻开了崭新的一页。利用ajax局部刷新页面，相信很多人玩得相当熟练了。如果整个页面的刷新都是使用ajax，我们可以称之为一个webapp，所有的逻辑都是在当页处理，这种形式的页面带来的体验是十分不错的，减少了那些比较“ 阅读全文
JavaScript模板引擎原理，几行代码的事儿
2013-12-03 16:35 by Barret李靖, 33438 阅读, 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李靖, 4988 阅读, 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李靖, 2503 阅读, 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李靖, 8291 阅读, 4 推荐, 收藏, 编辑
摘要：很多人都会问这样一个问题，我们在登录的时候，密码会不会泄露？随便进一个网站，登录时抓包分析，可以看到自己的密码都是明文传输的，在如此复杂的web环境下，我们没有百分的把握保证信息在传输过程中不被截获，那不使用明文如何告诉服务器自己的身份呢？在一些高度通信安全的网络中，数据传输会使用HTTPS作为传输协议，但是通常情况下我们没必要使用HTTPS传输，虽说安全，但传输数据都需要加密解密，很费时。我们可以使用一些加密方式（如md5）对密码进行加密，如果仅仅只对密码加密那肯定是没有任何作用，所以可以在密码中加入一些其他的字符，合并之后使这个密码成为一个临时密码~username:password:在上 阅读全文
chrome浏览器渲染白屏问题剖析
2013-11-04 13:26 by Barret李靖, 6734 阅读, 0 推荐, 收藏, 编辑
摘要：刚截图十几次，终于捕捉到了这个白屏现象，hiahia~~大家可以很清晰地看到下边还木有渲染完毕的透明层，这是一个十分普遍的问题，经常遇到。我的浏览器版本是到目前为止应该是最新版(release版本)，之前的版本应该也存在类似的问题。只要处理好代码，这种体验相当不好的白屏问题是可以避免的，Qzone的页面貌似就没有这个现象。首先我们来聊一聊这个问题是怎么产生的，这涉及到chrome浏览器对网页的解析和渲染。渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。下面是渲染引擎在取得内容之后的基本流程：解析html以构建dom树->构建render树->布局render树- 阅读全文