代码改变世界

随笔分类 - Others

从登录框看前端

2014-01-13 15:30 by Barret李靖, 35234 阅读, 收藏, 编辑
摘要:我们会骂 12306 的网站界面挫,效果差,速度慢,回头看看自己写的代码,是不是也一样的狗血!在前端,很多看似简单的东西,内藏无数玄机。本文将以一个小小的登录框为入口,谈一谈如何完善自己的程序。在很多人眼里,前端就是 DIV+CSS+JQuery,甚至还有些人停留在 table 布局的迷雾当中(这些... 阅读全文

JavaScript异步编程原理

2014-01-05 11:01 by Barret李靖, 22695 阅读, 收藏, 编辑
摘要:众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着。在事件队列中加一个延时,这样的问题便可以得到缓解。A: 嘿,哥们儿,快点!B: 我要三分钟,你先等着,完了叫你~A: 好的,记得叫我啊~ 你(C)也等着吧,完了叫你~C: 嗯!...告诉后面排队的人一个准确的时间,这样后面的人就可以利用这段时间去干点别的事情,而不是所有的人都排在队列后抱怨。我写了一段程序来解决这个问题:/*** @author Barret Lee* @email barret. 阅读全文

浅谈模块化加载的实现原理

2013-12-29 20:18 by Barret李靖, 10218 阅读, 收藏, 编辑
摘要:相信很多人都用过 seajs、 requirejs 等这些模块加载器,他们都是十分便捷的工程管理工具,简化了代码的结构,更重要的是消除了各种文件依赖和命名冲突问题,并利用 AMD / CMD 规范统一了格式。如果你不太明白模块化的作用,建议看看玉伯写的一篇文章。为什么他们会想到使用模块化加载呢,我觉... 阅读全文

细说WebSocket - Node篇

2013-12-20 13:42 by Barret李靖, 38350 阅读, 收藏, 编辑
摘要:在上一篇提高到了 web 通信的各种方式,包括 轮询、长连接 以及各种 HTML5 中提到的手段。本文将详细描述 WebSocket协议 在 web通讯 中的实现。 一、WebSocket 协议 1. 概述 websocket协议允许不受信用的客户端代码在可控的网络环境中控制远程主机。该协议包含一个 阅读全文

ECMAScript 6中的let和const关键词

2013-11-28 21:46 by Barret李靖, 4536 阅读, 收藏, 编辑
摘要: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关... 阅读全文

OAuth认证原理及HTTP下的密码安全传输

2013-11-26 14:58 by Barret李靖, 7445 阅读, 收藏, 编辑
摘要:很多人都会问这样一个问题,我们在登录的时候,密码会不会泄露?随便进一个网站,登录时抓包分析,可以看到自己的密码都是明文传输的,在如此复杂的web环境下,我们没有百分的把握保证信息在传输过程中不被截获,那不使用明文如何告诉服务器自己的身份呢?在一些高度通信安全的网络中,数据传输会使用HTTPS作为传输协议,但是通常情况下我们没必要使用HTTPS传输,虽说安全,但传输数据都需要加密解密,很费时。我们可以使用一些加密方式(如md5)对密码进行加密,如果仅仅只对密码加密那肯定是没有任何作用,所以可以在密码中加入一些其他的字符,合并之后使这个密码成为一个临时密码~username:password:在上 阅读全文

chrome浏览器渲染白屏问题剖析

2013-11-04 13:26 by Barret李靖, 5057 阅读, 收藏, 编辑
摘要:刚截图十几次,终于捕捉到了这个白屏现象,hiahia~~大家可以很清晰地看到下边还木有渲染完毕的透明层,这是一个十分普遍的问题,经常遇到。我的浏览器版本是到目前为止应该是最新版(release版本),之前的版本应该也存在类似的问题。只要处理好代码,这种体验相当不好的白屏问题是可以避免的,Qzone的页面貌似就没有这个现象。首先我们来聊一聊这个问题是怎么产生的,这涉及到chrome浏览器对网页的解析和渲染。渲染引擎首先通过网络获得所请求文档的内容,通常以8K分块的方式完成。下面是渲染引擎在取得内容之后的基本流程:解析html以构建dom树->构建render树->布局render树- 阅读全文

SEO:让搜索引擎对你的网站更有亲和力(译)

2013-11-01 15:40 by Barret李靖, 2458 阅读, 收藏, 编辑
摘要:人可以通过查看网站信息了解网站的内容,但是搜索引擎只对标签感兴趣,对内容的识别能力是很低的,如何让蜘蛛通过标签认识你的文章内容呢~原文网址:http://schema.org/docs/gs.html本文地址:http://www.cnblogs.com/hustskyking/p/let-your-page-understood-by-search-engine.html译者:Barret Lee日期:2013-11-01许多站长应该对HTML标签十分熟悉,HTML标签告诉浏览器如何去呈现标签的内容,比如阿凡达,告诉浏览器用大标题的形式显示“阿凡达”。但是,HTML标签本身并没有给出任何信息 阅读全文

前端学习的那些往事

2013-10-31 17:00 by Barret李靖, 2962 阅读, 收藏, 编辑
摘要:上次如何培育新人一文中也提到了自己学习前端的一些事儿,这两天几个新人问我当初是如何逐步学习前端的,因为以前也没做过什么记录,时间虽不长,记忆却开始模糊了,趁着还有些感觉,把这些往事都写下来。 之前看聂微东大哥的文章,有一篇说到了他学习前端的经历(说说我的web前端之路,分享些前端的好书),主要... 阅读全文

阿里面试的一点感受

2013-09-26 21:30 by Barret李靖, 13778 阅读, 收藏, 编辑
摘要:刚坐下不久,面试官到了,他告诉我他花名是”李牧“,表示不认识啊,囧。问我有没有写阿里的笔试题,当时就帮同事做了下,模糊记得自己也做了一份,然后他来了个干瞪眼,说:“你自己做没做都不知道,那来这儿干嘛!“,语塞了几秒钟,回答说:”我有收到不用笔试直接过来面试的短信= =||“。 先给了我四道题目,他趁我做题之际把我的博客和github都瞄了一通。面试题目都比较有深度,我觉得要构思几道不错的题目还挺难的,虽说记得原题,我就不贴出来了,就大概说说他都考核了哪些知识吧~ 1. 值类型 引用类型的理解,如var a = {"x": 1};var b = a;a.x = 2;b.x; 阅读全文

浅谈叶小钗面试的几个问题

2013-06-27 19:37 by Barret李靖, 3250 阅读, 收藏, 编辑
摘要:问题:链接地址:http://www.cnblogs.com/yexiaochai/p/3158443.html① 作用域问题var a = 6;setTimeout(function () { alert(a); a = 666;}, 1000);a = 66;这道题,我可耻的没有答起,我面试结束刚刚上出租就知道这道题很水了。。。。考察作用域的,当时活生生的被大神气场照住了,周围人的集体智商都减低了!!!② 语义化标签这道题我确实没辙,之前其实差点写类似的博客,却没有写,今天结束后补上吧!1)tite与h1的区别2)b与strong的区别3)i与em的区别PS:不要小看这些题,8... 阅读全文

正则表达式30分钟入门教程

2013-06-04 10:41 by Barret李靖, 9599 阅读, 收藏, 编辑
摘要:正则表达式30分钟入门教程目录本文目标如何使用本教程正则表达式到底是什么东西?入门测试正则表达式元字符字符转义重复字符类分枝条件反义分组后向引用零宽断言负向零宽断言注释贪婪与懒惰处理选项平衡组/递归匹配还有些什么东西没提到本文目标30分钟内让你明白正则表达式是什么,并对它有一些基本的了解,让你可以在自己的程序或网页里使用它。如何使用本教程最重要的是——请给我30分钟,如果你没有使用正则表达式的经验,请不要试图在30秒内入门——除非你是超人 :)别被下面那些复杂的表达式吓倒,只要跟着我一步一步来,你会发现正则表达式其实并没有你想像中的那么困难。当然,如果你看完了这篇教程之后,发现自己明白了很多, 阅读全文