摘要：
@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... 阅读全文
随笔分类 - JavaScript
进阶正则表达式
2014-01-18 00:32 by Barret李靖, 17994 阅读, 收藏, 编辑
摘要：
关于正则表达式，网上可以搜到一大片文章，我之前也搜集了一些资料，并做了排版整理，可以看这篇文章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李靖, 36764 阅读, 收藏, 编辑
摘要：
我们会骂 12306 的网站界面挫，效果差，速度慢，回头看看自己写的代码，是不是也一样的狗血！在前端，很多看似简单的东西，内藏无数玄机。本文将以一个小小的登录框为入口，谈一谈如何完善自己的程序。在很多人眼里，前端就是 DIV+CSS+JQuery，甚至还有些人停留在 table 布局的迷雾当中（这些... 阅读全文
JavaScript异步编程原理
2014-01-05 11:01 by Barret李靖, 24472 阅读, 收藏, 编辑
摘要：
众所周知，JavaScript 的执行环境是单线程的，所谓的单线程就是一次只能完成一个任务，其任务的调度方式就是排队，这就和火车站洗手间门口的等待一样，前面的那个人没有搞定，你就只能站在后面排队等着。在事件队列中加一个延时，这样的问题便可以得到缓解。A: 嘿，哥们儿，快点！B: 我要三分钟，你先等着，完了叫你~A: 好的，记得叫我啊~ 你（C）也等着吧，完了叫你~C: 嗯！...告诉后面排队的人一个准确的时间，这样后面的人就可以利用这段时间去干点别的事情，而不是所有的人都排在队列后抱怨。我写了一段程序来解决这个问题：/*** @author Barret Lee* @email barret. 阅读全文
浅谈模块化加载的实现原理
2013-12-29 20:18 by Barret李靖, 11061 阅读, 收藏, 编辑
摘要：
相信很多人都用过 seajs、 requirejs 等这些模块加载器，他们都是十分便捷的工程管理工具，简化了代码的结构，更重要的是消除了各种文件依赖和命名冲突问题，并利用 AMD / CMD 规范统一了格式。如果你不太明白模块化的作用，建议看看玉伯写的一篇文章。为什么他们会想到使用模块化加载呢，我觉... 阅读全文
细说websocket - php篇
2013-12-25 11:24 by Barret李靖, 61188 阅读, 收藏, 编辑
摘要：
下面我画了一个图演示 client 和 server 之间建立 websocket 连接时握手部分，这个部分在 node 中可以十分轻松的完成，因为 node 提供的 net 模块已经对 socket 套接字做了封装处理，开发者使用的时候只需要考虑数据的交互而不用处理连接的建立。而 php 没有，从 socket 的连接、建立、绑定、监听等，这些都需要我们自己去操作，所以有必要拿出来再说一说。 +--------+ 1.发送Sec-WebSocket-Key +---------+ | | -----------------------------... 阅读全文
细说WebSocket - Node篇
2013-12-20 13:42 by Barret李靖, 41521 阅读, 收藏, 编辑
摘要：
在上一篇提高到了 web 通信的各种方式，包括 轮询、长连接 以及各种 HTML5 中提到的手段。本文将详细描述 WebSocket协议 在 web通讯 中的实现。 一、WebSocket 协议 1. 概述 websocket协议允许不受信用的客户端代码在可控的网络环境中控制远程主机。该协议包含一个 阅读全文
JavaScript之web通信
2013-12-17 22:01 by Barret李靖, 11580 阅读, 收藏, 编辑
摘要：
web通信，一个特别大的topic，涉及面也是很广的。因最近学习了 javascript 中一些 web 通信知识，在这里总结下。文中应该会有理解错误或者表述不清晰的地方，还望斧正！一、前言1. comet技术浏览器作为 Web 应用的前台，自身的处理功能比较有限。浏览器的发展需要客户端升级软件，同时由于客户端浏览器软件的多样性，在某种意义上，也影响了浏览器新技术的推广。在 Web 应用中，浏览器的主要工作是发送请求、解析服务器返回的信息以不同的风格显示。AJAX 是浏览器技术发展的成果，通过在浏览器端发送异步请求，提高了单用户操作的响应性。但 Web 本质上是一个多用户的系统，对任何用户来说 阅读全文
PJAX的实现与应用
2013-12-06 10:14 by Barret李靖, 41720 阅读, 收藏, 编辑
摘要：
一、前言web发展经历了一个漫长的周期，最开始很多人认为Javascript这们语言是前端开发的累赘，是个鸡肋，那个时候人们还享受着从一个a链接蹦到另一个页面的web神奇魔术。后来随着JavaScript的不断更新换代，他的功能不仅仅是为网页添加一点特效了，语言本身的加强以及对DOM操作能力的提升让他在前端大放光彩。尤其是ajax的出现，让JavaScript以及整个web的发展翻开了崭新的一页。利用ajax局部刷新页面，相信很多人玩得相当熟练了。如果整个页面的刷新都是使用ajax，我们可以称之为一个webapp，所有的逻辑都是在当页处理，这种形式的页面带来的体验是十分不错的，减少了那些比较“ 阅读全文
JavaScript模板引擎原理，几行代码的事儿
2013-12-03 16:35 by Barret李靖, 33539 阅读, 收藏, 编辑
摘要：
一、前言什么是模板引擎，说的简单点，就是一个字符串中有几个变量待定。比如：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李靖, 4995 阅读, 收藏, 编辑
摘要：
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李靖, 2512 阅读, 收藏, 编辑
摘要：
ECMAScript 6 是JavaScript的下一个标准，正处在快速开发之中，大部分已经完成了，预计将在2014年正式发布。Mozilla将在这个标准的基础上，推出JavaScript 2.0。ECMAScript 6 的目标，是使得JavaScript可以用来编写复杂的应用程序、函数库和代码的自动生成器（code generator）。最新的浏览器已经部分支持ECMAScript 6 的语法，可以通过《ECMAScript 6 浏览器兼容表》查看浏览器支持情况。ECMAScript 6 新内容一览let, const (定义块级局部变量), 函数在块级域中解构: let {x, y} = 阅读全文
chrome浏览器渲染白屏问题剖析
2013-11-04 13:26 by Barret李靖, 6787 阅读, 收藏, 编辑
摘要：
刚截图十几次，终于捕捉到了这个白屏现象，hiahia~~大家可以很清晰地看到下边还木有渲染完毕的透明层，这是一个十分普遍的问题，经常遇到。我的浏览器版本是到目前为止应该是最新版(release版本)，之前的版本应该也存在类似的问题。只要处理好代码，这种体验相当不好的白屏问题是可以避免的，Qzone的页面貌似就没有这个现象。首先我们来聊一聊这个问题是怎么产生的，这涉及到chrome浏览器对网页的解析和渲染。渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。下面是渲染引擎在取得内容之后的基本流程：解析html以构建dom树->构建render树->布局render树- 阅读全文
玩转正则之highlight高亮
2013-10-07 05:16 by Barret李靖, 5057 阅读, 收藏, 编辑
摘要：
程序员在编写代码的时候少不了和字符串以及“查询”打交道，两者的交集中有一个叫做正则表达式的的东西，这家伙用好了可以提高编程效率，用不好的话...你可以先去好好学一学。 关于正则的使用，举个简单的例子：var m = location.href.match(/(\w+:)\/{0,3}([^\/]+)(?:(\/[^\?#]*))?(?:(\?[^#]+|.+))?(?:(#.*))?/);var res = { protocol: m[1], host: m[2], path: m[3], search: m[4], hash: m[5]};console.... 阅读全文
阿里面试的一点感受
2013-09-26 21:30 by Barret李靖, 14350 阅读, 收藏, 编辑
摘要：
刚坐下不久，面试官到了，他告诉我他花名是”李牧“，表示不认识啊，囧。问我有没有写阿里的笔试题，当时就帮同事做了下，模糊记得自己也做了一份，然后他来了个干瞪眼，说：“你自己做没做都不知道，那来这儿干嘛！“，语塞了几秒钟，回答说：”我有收到不用笔试直接过来面试的短信= =||“。 先给了我四道题目，他趁我做题之际把我的博客和github都瞄了一通。面试题目都比较有深度，我觉得要构思几道不错的题目还挺难的，虽说记得原题，我就不贴出来了，就大概说说他都考核了哪些知识吧～ 1. 值类型 引用类型的理解，如var a = {"x": 1};var b = a;a.x = 2;b.x; 阅读全文
对闭包机制的深入理解
2013-09-23 21:17 by Barret李靖, 4717 阅读, 收藏, 编辑
摘要：
对于JavaScript初学者来说，闭包是一个很神秘的东西，不管看多少遍，依旧搞不清楚闭包是什么，更不明白其内部是什么样的处理机制（更可恶的是每次面试都会被问到）。 说的含糊一点，闭包就是代码块和该代码块上下文（context）相互作用的产物。看一个例子：function foo(){ var x = 1; return function (){ alert(++x); //2 }}var bar = foo();bar(); 先问一个问题，这里到底谁是闭包？是foo还是那个匿名函数？闭包的产生原理 在JavaScript中，函数可以用来分隔作用域，当... 阅读全文
JavaScript中需要注意的几个问题
2013-09-22 15:40 by Barret李靖, 2562 阅读, 收藏, 编辑
摘要：
JavaScript是一门弱语言，她使用起来不像C/C++那样有十分繁琐的内存管理、类型定义等，所以学习JavaScript的门槛相对来说也比较低。门槛低并不意味着这门语言很简单，我们在使用的时候会遇到各种千奇百怪的问题，有些是因为浏览器的兼容性引起的，有些是因为JS语法本身所引起的，还有些是因为ECMAScript标准的改变而引起的，总之，这样的问题很多，下面列举几个比较容易忽略的点 1. switch的case判断var t = event.keyCode;switch (t) { case '65': alert("Yay!"); break;} 当k 阅读全文
前端编码规范之JavaScript
2013-08-14 23:55 by Barret李靖, 13897 阅读, 收藏, 编辑
摘要：
上次浅谈了下关于CSS的编码规范，大部分童鞋持赞同意见，仍存在一些童鞋不太理解这些规范的意义。 如果是个人或者小作坊开发，其实这些所谓的编码规范也没啥意思，因为大家写好的代码直接就给扔到网上去了，很少有打包、压缩、校检等过程，别人来修改你代码的情况也比较少。但是，对于一定规模的团队来说，这些东西还是挺有必要的！一个是保持代码的整洁美观，同时良好的代码编写格式和注释方式可以让后来者很快地了解你代码的大概思路，提高开发效率。 那么这次，继续抛砖引玉，说说Javascript一些需要引起注意的地方（这些东西也是团队开发的时候大家集思广益总结出来的）。不规范写法举例1.句尾没有分号var is... 阅读全文
一个不陌生的JS效果-marquee,用css3来实现
2013-07-26 22:25 by Barret李靖, 15581 阅读, 收藏, 编辑
摘要：
关于marquee，就不多说了，可以戳这里。毕竟他是一个很古老的元素，现在的标准里头也不推荐使用这个标签了。但平时一些项目中会经常碰到这样的效果，每次都是重新写一遍，麻烦！JS类实现marquee今天倒弄了一个类，还不全，打个草稿吧~ 下次就凑合着用吧。DEMO在这里，戳我/*** @author 靖鸣君* @email jingmingjun92@163.com* @description 滚动* @class Marquee* @param {Object}*/var Marquee = function(){ this.direction = "top"; this. 阅读全文
解读jQuery中extend函数
2013-07-20 13:59 by Barret李靖, 2641 阅读, 收藏, 编辑
摘要：
$.extend.apply( null, [ true, { "a" : 1, "b" : 2 } ] );//console.log(window.a);//window.location.reload();$.extend.apply( null, [ true, { "a" : 1, "b" : 2 } ].concat( { "c" : 3, "d" : 4 } ) );//console.log(window.a)一、问题： 1. null在这里是干啥？ 2. w 阅读全文