代码改变世界

随笔分类 - JavaScript

揭秘 0.1 + 0.2 != 0.3

2016-10-25 10:13 by Barret Lee, 3952 阅读, 收藏, 编辑
摘要:“0.1 + 0.2 = ?”,这道题如果给小学生,他会立马告诉你答案是 0.3,但是交给一些程序去计算,结果就不是那么简单了。 事实上,不仅仅是 JS,在其他采用 IEEE754 浮点数标准的语言中,0.1 + 0.2 都不会等于 0.3,但是 0.2 + 0.3 却等于 0.5,这是为何?想必这 阅读全文

ECMAScript 6 扫盲

2016-07-11 12:40 by Barret Lee, 11993 阅读, 收藏, 编辑
摘要:ECMAScript 6 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中绝大多数的特性。 阅读全文

如何快速定位不小心暴露到全局的变量

2015-07-09 11:40 by Barret Lee, 2431 阅读, 收藏, 编辑
摘要:今天在查看页面控制台的时候,无意中看到了一个暴露到全局的变量 i,全局变量是不会被压缩工具压缩成简写的字母,这个被频繁使用的变量名暴露到全局也是个相当大的隐患,可能一个不小心就覆盖了第二次暴露到全局的同名变量。刚开始我就怀疑是自己出现了这样愚蠢的错误:function A() { // 在一个... 阅读全文

细嗅Promise

2014-09-29 20:39 by Barret Lee, 9522 阅读, 收藏, 编辑
摘要:读完这篇文章,预计会消耗你 40 分钟的时间。Ajax 出现的时候,刮来了一阵异步之风,现在 Nodejs 火爆,又一阵异步狂风刮了过来。需求是越来越苛刻,用户对性能的要求也是越来越高,随之而来的是页面异步操作指数般增长,如果不能恰当的控制代码逻辑,我们就会陷入无穷的回调地狱中。ECMAScript... 阅读全文

如何让你的JavaScript代码更加语义化

2014-08-20 23:07 by Barret Lee, 8828 阅读, 收藏, 编辑
摘要:语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签。其作用不容小觑:赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形式会显得不够直接,而且在一定程度上也有冗余。优化搜索引擎(SEO),结构良好的网页对搜索引擎的亲和力是... 阅读全文

ECMAScript 6入门

2014-05-02 21:42 by Barret Lee, 5234 阅读, 收藏, 编辑
摘要:预计在2014年底,ECMAScript 6将会正式发布,他的草案在13年3月份被冻结,后续提出新特性将会移至ECMASript 7中。目前还没有哪款浏览器实现了ES6的全部内容,兼容性最强的一款要数FireFox了。具体情况可以在这里查看。关于 ECMAScript 6 草案,我在博客里头复制了一... 阅读全文

NodeJS写个爬虫,把文章放到kindle中阅读

2014-04-28 01:41 by Barret Lee, 7002 阅读, 收藏, 编辑
摘要:这两天看了好几篇不错的文章,有的时候想把好的文章 down 下来放到 kindle 上看,便写了个爬虫脚本,因为最近都在搞 node,所以就很自然的选择 node 来爬咯~本文地址:http://www.cnblogs.com/hustskyking/p/spider-with-node.html,... 阅读全文

深入浅出NodeJS——数据通信,NET模块运行机制

2014-04-22 02:11 by Barret Lee, 9092 阅读, 收藏, 编辑
摘要:互联网的运作,最根本的驱动就是信息的交互,NodeJS 在数据交互这一块做的很带感,异步编程让人很惬意,关于 NodeJS 的数据通信,最基础的两个模块是 NET 和 HTTP,前者是基于 TCP 的封装,后者本质还是 TCP 层,只不过做了比较多的数据封装,我们视之为更高层。本文先述说 NodeJ... 阅读全文

换个标签写前端模板

2014-04-13 14:21 by Barret Lee, 2689 阅读, 收藏, 编辑
摘要:前端模板中,我们通常使用 script/textarea 来存放模板代码,然后使用 innerHTML/value 属性来获取模板内容进行解析和拼装。关于 tplEngine 这个 Javascript 模板引擎,之前也写了篇 文章 介绍过,这里就不赘述了。除了使用 script 标签,textarea 也可以达到同样的效果,但是本文叙述的重点并不是如何去解析一个 JavaScript 模板。W3C工作组在 HTML 中加入了一个新的标签 ——TEMPLATE。他提供了一个可以定义 HTML 代码片段的机制,下面就来详细说说这个 TEMPLATE 标签。本文地址:http://www.cnbl 阅读全文

百万数据如何在前端快速流畅显示?

2014-03-25 00:54 by Barret Lee, 9837 阅读, 收藏, 编辑
摘要:如果要在前端呈现大量的数据,一般的策略就是分页。前端要呈现百万数据,这个需求是很少见的,但是展示千条稍微复杂点的数据,这种需求还是比较常见,只要内存够,javascript 肯定是吃得消的,计算几千上万条数据,js 效率根本不在话下,但是 DOM 的渲染浏览器扛不住,CPU 稍微搓点的电脑必然会卡爆。本文的策略是,显示三屏数据,其他的移除 DOM。本文地址:http://www.cnblogs.com/hustskyking/p/million-data-show-in-front-end.html,转载请注明源地址。一、 策略下面是我简单勾画的一个草图,我们把一串数据放到一个容器当中,这串数 阅读全文

Javascript分号,加还是不加?

2014-03-16 15:51 by Barret Lee, 6592 阅读, 收藏, 编辑
摘要:关于这个问题,网上已经有很多人讨论过了,我先说说自己对这个问题的回答:加!(但非必须)有些人写代码,懒得加分号,除非是迫不得已才勉强放一个分号上去。如果你可以保证你写的代码不出现任何 bug,那当然是没有问题,但是很多 JSer 新人,对一些隐含的问题并不是特别清楚,很容易在不知不觉中写出一堆 bug,我们先来了解下 JS 词法语法解析的时候,哪些情况下会自动插入分号。一、自动插入分号的规则注:鼠标滑过文字可以看到翻译原文1. 程序从左到右解析,当纳入下一个 token 无法匹配任何语法:如该 token 跟之前的 token 之间有至少一个 LineTerminal 行终结符违反分割该 to 阅读全文

你所不知道的JavaScript数组

2014-03-03 13:56 by Barret Lee, 10480 阅读, 收藏, 编辑
摘要:相信每一个 javascript 学习者,都会去了解 JS 的各种基本数据类型,数组就是数据的组合,这是一个很基本也十分简单的概念,他的内容没多少,学好它也不是件难事情。但是本文着重要介绍的并不是我们往常看到的 Array,而是 ArrayBuffer。我写的很多东西都是因为要完成某些特定的功能而刻意总结的,可以算是备忘,本文也是如此!前段时间一直在研究 Web Audio API 以及语音通信相关的知识,内容侧重于音频流在 AudioContext 各个节点之间的流动情况,而现在要摸清楚音频到流底是个什么样的数据格式,所以对 ArrayBuffer 的研究就显得格外重要了。本文地址:http 阅读全文

让你的页面瞬间全屏

2014-03-01 03:11 by Barret Lee, 14623 阅读, 收藏, 编辑
摘要:@update 文章下方有更新,提到了更多全屏的知识以及错误的矫正。页面全屏是一个体验非常棒的功能,他可以让你的视觉焦点聚集在你想关注的元素块上。很多浏览器都支持全屏,按下 F11,哦了! 页面全屏了~但是本文要说的并不是这种全屏。当页面中有个小 DEMO 或者小游戏要展示的时候,用户期望,这个 DEMO 或者游戏可以在全屏下展示,本文就教你如何来展示。如果你是非 IE 浏览器进入的该页面,你可能已经看到了页面上发生了一点小变化,多个东西:没错,多了个“进入全屏”的按钮,这就是本文要介绍的内容!本文地址:http://www.cnblogs.com/hustskyking/p/javascri 阅读全文

[Voice communications] 声音的滤波

2014-02-28 13:57 by Barret Lee, 2620 阅读, 收藏, 编辑
摘要:本系列文章主要是介绍 Web Audio API 的相关知识,以及 web语音通信 中会遇到的一些问题,阐述可能存在错误,还请多多斧正!通过设备获取音频流会不可避免的渗入一些杂音,这些杂音可能来自你周边的环境,也有可能来自录音设备本身,一些低频的声音还好,人耳难以分辨出来,但是那些高频的白噪声对音质的影响是特别大的,如我们听收音机没有调到正确的频率上,会听到吱吱兹兹的刺耳的杂音。这些杂音不仅增大了音频流信号本身的体积,而且我们的耳朵也不喜欢,所以在传输之前必须对音频做相应的滤波处理。本文地址:http://www.cnblogs.com/hustskyking/p/webAudio-filte 阅读全文

[Voice communications] 声道的转换

2014-02-27 13:17 by Barret Lee, 1195 阅读, 收藏, 编辑
摘要:本系列文章主要是介绍 Web Audio API 的相关知识,以及 web语音通信 中会遇到的一些问题,阐述可能存在错误,还请多多斧正!很多粤语剧都提供了两个声道,一个左声道为粤语,一个右声道有国语。观看者可以自由切换声道,那么切换声道的原理是什么呢?在播放器中,只需要把不同的声道切换到声轨就行了,因为有左右两个声道,所以播放器至少是包含两个声轨的。如果我们想听粤语,只需要将右声道声轨的声音设置为 0,或者临时删掉右声道声轨。本文主要是利用 GainNode 节点控制音量的属性实现两个音轨之间的相互切换,Cross-fading 的意思可以在后面的 DEMO 中用耳朵体会出来~本文地址:htt 阅读全文

[Voice communications] 音量的控制

2014-02-26 12:56 by Barret Lee, 2146 阅读, 收藏, 编辑
摘要:改变音频的音量是音频处理中最基础的部分,我们可以利用 GainNode 来构建 Mixers 的结构块。GainNode 的接口是很简单的:interface GainNode : AudioNode { readonly attribute AudioParam gain;};通过调节 GainNode.gain.value 就可以实现音频大小的调控了。下文会先介绍使用 Processor 来处理,这是一个最通用的节点,可以处理很多东西。在上文看得到的音频流中我们也使用了该节点。本文地址:http://www.cnblogs.com/hustskyking/p/webAudio-vol... 阅读全文

[Voice communications] 看得到的音频流

2014-02-22 20:45 by Barret Lee, 1774 阅读, 收藏, 编辑
摘要:上文介绍了 Web Audio API 的相关知识,以及如何在你的 web 程序中引入 音频流,内容都是介绍性的,所以没有写太多 DEMO。本文重点讲解如何利用 Web Audio API 中的中间节点拿到音频信号的信息,并将信息转化成信号图绘制到 canvas 中。从上文中我们了解到,AudioContext 是音频播放和处理的一个环境,大概的流程是这个样子: +---------------+------------------------------------+ | AudioContext | | +---... 阅读全文

[Voice communications] 让音乐响起来

2014-02-20 12:47 by Barret Lee, 2047 阅读, 收藏, 编辑
摘要:本系列文章主要是介绍 Web Audio API 的相关知识,由于该技术还处在 web 草案阶段(很多标准被提出来,至于取舍需要等待稳定版文档来确定,草案阶段的文档很多都会被再次编辑甚至重写、全部删除等,不适合作为正式参考),很多 API 都是未确定的,目前支持 Web Audio API 的浏览器是较新版的 Google Chrome 和 FireFox,其他浏览器暂时还没有兼容。现在的网络硬件环境还没有达到普遍语音通信的条件,但是 web语音通信 一定会成为后期 web 研究的一个重要话题,凭着一点个人兴趣,拿出来研究研究~本文主要介绍 Web Audio API 的相关特性,以及音频源的 阅读全文

[解惑]JavaScript事件机制

2014-02-17 21:18 by Barret Lee, 15883 阅读, 收藏, 编辑
摘要:群里童鞋问到关于事件传播的一个问题:“事件捕获的时候,阻止冒泡,事件到达目标之后,还会冒泡吗?”。初学 JS 的童鞋经常会有诸多疑问,我在很多 QQ 群也混了好几年了,耳濡目染也也收获了不少,以后会总结下问题的结论,顺便说说相关知识的扩展~如果贸然回答还会冒泡,这不太好的,稍微严谨点考虑 0级 DOM 事件模型的话,这个答案是否定的。但是在 2级 DOM 事件模型中,答案是肯定的,这个问题值得探讨记录下。本文地址:http://www.cnblogs.com/hustskyking/p/problem-javascript-event.html一、问题结论netscape 和 微软 曾经的战争 阅读全文

JavaScript多文件下载

2014-02-12 21:50 by Barret Lee, 33201 阅读, 收藏, 编辑
摘要:对于文件的下载,可以说是一个十分常见的话题,前端的很多项目中都会有这样的需求,比如 highChart 统计图的导出,在线图片编辑中的图片保存,在线代码编辑的代码导出等等。而很多时候,我们只给了一个链接,用户需要右键点击链接,然后选择“另存为”,这个过程虽说不麻烦,但还是需要两步操作,倘若用户想保存... 阅读全文

再探@font-face及webIcon制作

2014-01-27 01:50 by Barret Lee, 4709 阅读, 收藏, 编辑
摘要:@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 Lee, 15246 阅读, 收藏, 编辑
摘要:关于正则表达式,网上可以搜到一大片文章,我之前也搜集了一些资料,并做了排版整理,可以看这篇文章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 Lee, 34447 阅读, 收藏, 编辑
摘要:我们会骂 12306 的网站界面挫,效果差,速度慢,回头看看自己写的代码,是不是也一样的狗血!在前端,很多看似简单的东西,内藏无数玄机。本文将以一个小小的登录框为入口,谈一谈如何完善自己的程序。在很多人眼里,前端就是 DIV+CSS+JQuery,甚至还有些人停留在 table 布局的迷雾当中(这些... 阅读全文

JavaScript异步编程原理

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

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

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

细说websocket - php篇

2013-12-25 11:24 by Barret Lee, 54967 阅读, 收藏, 编辑
摘要:下面我画了一个图演示 client 和 server 之间建立 websocket 连接时握手部分,这个部分在 node 中可以十分轻松的完成,因为 node 提供的 net 模块已经对 socket 套接字做了封装处理,开发者使用的时候只需要考虑数据的交互而不用处理连接的建立。而 php 没有,从 socket 的连接、建立、绑定、监听等,这些都需要我们自己去操作,所以有必要拿出来再说一说。 +--------+ 1.发送Sec-WebSocket-Key +---------+ | | -----------------------------... 阅读全文

细说WebSocket - Node篇

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

JavaScript之web通信

2013-12-17 22:01 by Barret Lee, 9071 阅读, 收藏, 编辑
摘要:web通信,一个特别大的topic,涉及面也是很广的。因最近学习了 javascript 中一些 web 通信知识,在这里总结下。文中应该会有理解错误或者表述不清晰的地方,还望斧正!一、前言1. comet技术浏览器作为 Web 应用的前台,自身的处理功能比较有限。浏览器的发展需要客户端升级软件,同时由于客户端浏览器软件的多样性,在某种意义上,也影响了浏览器新技术的推广。在 Web 应用中,浏览器的主要工作是发送请求、解析服务器返回的信息以不同的风格显示。AJAX 是浏览器技术发展的成果,通过在浏览器端发送异步请求,提高了单用户操作的响应性。但 Web 本质上是一个多用户的系统,对任何用户来说 阅读全文

PJAX的实现与应用

2013-12-06 10:14 by Barret Lee, 38593 阅读, 收藏, 编辑
摘要:一、前言web发展经历了一个漫长的周期,最开始很多人认为Javascript这们语言是前端开发的累赘,是个鸡肋,那个时候人们还享受着从一个a链接蹦到另一个页面的web神奇魔术。后来随着JavaScript的不断更新换代,他的功能不仅仅是为网页添加一点特效了,语言本身的加强以及对DOM操作能力的提升让他在前端大放光彩。尤其是ajax的出现,让JavaScript以及整个web的发展翻开了崭新的一页。利用ajax局部刷新页面,相信很多人玩得相当熟练了。如果整个页面的刷新都是使用ajax,我们可以称之为一个webapp,所有的逻辑都是在当页处理,这种形式的页面带来的体验是十分不错的,减少了那些比较“ 阅读全文

JavaScript模板引擎原理,几行代码的事儿

2013-12-03 16:35 by Barret Lee, 29186 阅读, 收藏, 编辑
摘要:一、前言什么是模板引擎,说的简单点,就是一个字符串中有几个变量待定。比如: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 Lee, 4354 阅读, 收藏, 编辑
摘要: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 Lee, 2087 阅读, 收藏, 编辑
摘要: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 Lee, 4160 阅读, 收藏, 编辑
摘要:刚截图十几次,终于捕捉到了这个白屏现象,hiahia~~大家可以很清晰地看到下边还木有渲染完毕的透明层,这是一个十分普遍的问题,经常遇到。我的浏览器版本是到目前为止应该是最新版(release版本),之前的版本应该也存在类似的问题。只要处理好代码,这种体验相当不好的白屏问题是可以避免的,Qzone的页面貌似就没有这个现象。首先我们来聊一聊这个问题是怎么产生的,这涉及到chrome浏览器对网页的解析和渲染。渲染引擎首先通过网络获得所请求文档的内容,通常以8K分块的方式完成。下面是渲染引擎在取得内容之后的基本流程:解析html以构建dom树->构建render树->布局render树- 阅读全文

玩转正则之highlight高亮

2013-10-07 05:16 by Barret Lee, 3991 阅读, 收藏, 编辑
摘要:程序员在编写代码的时候少不了和字符串以及“查询”打交道,两者的交集中有一个叫做正则表达式的的东西,这家伙用好了可以提高编程效率,用不好的话...你可以先去好好学一学。 关于正则的使用,举个简单的例子: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 Lee, 13221 阅读, 收藏, 编辑
摘要:刚坐下不久,面试官到了,他告诉我他花名是”李牧“,表示不认识啊,囧。问我有没有写阿里的笔试题,当时就帮同事做了下,模糊记得自己也做了一份,然后他来了个干瞪眼,说:“你自己做没做都不知道,那来这儿干嘛!“,语塞了几秒钟,回答说:”我有收到不用笔试直接过来面试的短信= =||“。 先给了我四道题目,他趁我做题之际把我的博客和github都瞄了一通。面试题目都比较有深度,我觉得要构思几道不错的题目还挺难的,虽说记得原题,我就不贴出来了,就大概说说他都考核了哪些知识吧~ 1. 值类型 引用类型的理解,如var a = {"x": 1};var b = a;a.x = 2;b.x; 阅读全文

对闭包机制的深入理解

2013-09-23 21:17 by Barret Lee, 3689 阅读, 收藏, 编辑
摘要:对于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 Lee, 2118 阅读, 收藏, 编辑
摘要: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 Lee, 11205 阅读, 收藏, 编辑
摘要:上次浅谈了下关于CSS的编码规范,大部分童鞋持赞同意见,仍存在一些童鞋不太理解这些规范的意义。 如果是个人或者小作坊开发,其实这些所谓的编码规范也没啥意思,因为大家写好的代码直接就给扔到网上去了,很少有打包、压缩、校检等过程,别人来修改你代码的情况也比较少。但是,对于一定规模的团队来说,这些东西还是挺有必要的!一个是保持代码的整洁美观,同时良好的代码编写格式和注释方式可以让后来者很快地了解你代码的大概思路,提高开发效率。 那么这次,继续抛砖引玉,说说Javascript一些需要引起注意的地方(这些东西也是团队开发的时候大家集思广益总结出来的)。不规范写法举例1.句尾没有分号var is... 阅读全文

一个不陌生的JS效果-marquee,用css3来实现

2013-07-26 22:25 by Barret Lee, 12176 阅读, 收藏, 编辑
摘要:关于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 Lee, 1915 阅读, 收藏, 编辑
摘要:$.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 阅读全文

【屌丝之作】3D遥控坦克大战

2013-06-03 23:55 by Barret Lee, 8239 阅读, 收藏, 编辑
摘要:昨天参加了hack day的一个比赛,赛制大致是:24小时,自由组队2~4人,任意发挥。运气比较好,拿了第三名和最佳创意奖。建议先看看这个demo,bug是有的,chrome下玩玩,测试测试就行,O(∩_∩)O~ DEMO:http://qianduannotes.sinaapp.com/3dtank/html/index.html基本效果:关于懒得去SAE上折腾,没把那另外一半的功能补上,不过我还是介绍下这几个没补上功能吧。 1. 音效。开始音乐是比较古老的坦克大战开机音乐。 ① 开始音效 点击播放 ② 发子弹 点击播放 ③ 击中坦克点击播放 ④ 爆炸 点击... 阅读全文

删除数组中的某个元素

2013-05-31 23:55 by Barret Lee, 529 阅读, 收藏, 编辑
摘要:在之前的文章中也介绍过类似的东西,主要操作的方式是利用splice这个便利函数。我们要删除,Arr数组中的元素b,具体做法是://第一步是获取b在Arr中的位置var index = Arr.indexOf(b);//第二步就是利用splice删除该元素Arr.splice(b, 1);简单点写就是:Arr.splice(Arr.indexOf(b), 1); //这里的b可以是任意对象注:并非所有浏览器都支持indexOf这个函数,可能你需要自己写一个遍历函数获取到需要查询元素b的索引值。下面是我随便写的一个Array对象的扩展:Array.prototype.index = functio 阅读全文

JavaScript 键盘event.keyCode值列表

2013-05-29 22:23 by Barret Lee, 379 阅读, 收藏, 编辑
摘要:疑问:keypress时的键值与下面列出的不一样,没具体研究!keydown和keyup时正常。网上收集的KeyCode值方便大家查找:常用:function direction(evt){ var evt = evt || window.event; switch(evt.keyCode) { case 37: case 65: return "left"; case 38: case 87: return "up"; case 39: case 68: ... 阅读全文

Javascript综合应用小案例(续)

2013-05-05 00:41 by Barret Lee, 1384 阅读, 收藏, 编辑
摘要:上一篇文章,弄了一个 取词和 标红 功能的小应用,但是存在一些bug,今天修修补补,顺便也把ajax部分补上了~Demo地址::http://qianduannotes.sinaapp.com/getKeyword/代码部分:var GetKeywords = { str: "", limit: 11, keywords:[], url: "./tool.php", //page id getId: function(){ this.id = this._("wp").getAttribute("data-page&quot 阅读全文

JavaScript垃圾回收机制

2013-04-27 15:14 by Barret Lee, 7005 阅读, 收藏, 编辑
摘要:一、垃圾回收的必要性 下面这段话引自《JavaScript权威指南(第四版)》 由于字符串、对象和数组没有固定大小,所有当他们的大小已知时,才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时,解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存,最终都要释放这些内存以便他们能够被再用,否则,JavaScript的解释器将会消耗完系统中所有可用的内存,造成系统崩溃。 这段话解释了为什么需要系统需要垃圾回收,JS不像C/C++,他有自己的一套垃圾回收机制(Garbage Collection)。JavaScript的解释器可以检测到何时程序不再使用一... 阅读全文

如何向开源社区提问题

2013-04-22 16:24 by Barret Lee, 1079 阅读, 收藏, 编辑
摘要:大家提问题前,请仔细阅读下这篇文章。高质量的提问,不光有助于问题的快速解决,还能赢得社区的尊重。如何向开源社区提问题使用软件产品,或多或少都会遇到问题。对于商业产品,我们可以咨询客服寻求帮助。对于公司自己研发的产品,我们可以直接请教专家同事。但对于开源软件,在遇到问题时,如何才能及时有效地寻求帮助呢?本文以开源类库Sea.js为例,说说我心目中的最佳实践。提问前遇到问题时,心里都很着急。在决定向开源社区提交问题前,最好先做做以下功课:尝试从官方文档中找到答案确保自己阅读过至少一次官方文档。这样在遇到问题时,如果能回忆起只言片语,就可以再去读一遍相关文档,问题往往也就解决了。Google 是你的 阅读全文

JS动态构建一棵目录树

2013-04-22 11:17 by Barret Lee, 3669 阅读, 收藏, 编辑
摘要:在使用frameset布局的时候,经常会用到目录树,我们可以把一棵树写死,但是更多的情况是,这棵树需要随时被改动,所以我们期望的是他能够被动态的构建。MVC,算是了解一点,那本文就把这棵树根据M-V-C给拆开分解吧。点击链接demo→下面就来看看这棵树是怎么构建的。 Module [数据层]var tree = { "id": 0, "a1": { "id": 1, "name": "a1", "children": { ... 阅读全文

利用XMLHttpRequest响应头部的Date来做倒计时

2013-04-13 13:46 by Barret Lee, 2621 阅读, 收藏, 编辑
摘要:关键词:倒计时 XMLHttpRequest readyState Date AJAXProblem [问题描述]先看看这个:(搜狗团购网站)还剩多久多久,这个东西你是怎么做的。不推荐方案脑残方案一: 把截止时间保存到cookie中,然后与现在时间做差值,进行比较。 方案评价: 1. 如果用户cookie没开怎么办? 2. cookie不宜过多,cookie过期管理等麻烦!脑残方案二: 把服务器的本地时间作为参数送到客户端,然后js相关处理 方案评价: 因网络延迟等原因存在误差屌丝看完变高富帅^_^ 先给你看一张图:(向服务器请求的某个任意文件)好像有的同学瞬间就... 阅读全文

JavaScript操控光标,你会么?

2013-04-11 17:15 by Barret Lee, 993 阅读, 收藏, 编辑
摘要:QQ群里经常有人问怎么设置textarea中光标的位置,所见即所得中如果选中文本。如果你也不会,请往下看:关键词:javascript 光标 位置 鼠标取词 createRange getSelectiongetPosition先上代码,你也可以测试下效果。这是一个Demo~<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>测试</title> <style type="text/css"> </ 阅读全文

摸透select和他的儿子们options

2013-04-11 13:59 by Barret Lee, 797 阅读, 收藏, 编辑
摘要:关键词:select option options selectedIndex remove add关于select的→API,自己去看,不多说了。select & option & optgroupoptgroup就是起到一个分组的作用。<!--common--><select id="s1"> <option value="--s--" selected="selected">----select----</option> <option value=&quot 阅读全文

打开窗口,关闭窗口

2013-04-10 16:06 by Barret Lee, 1504 阅读, 收藏, 编辑
摘要:关键词:window.open() window.close() showModalDialog() 兼容性 测试等。 本文默认你对以上函数参数有基本了解。window.open window.open如果没有加第三个参数,则浏览器一般都会在新的标签页打开(除非你设置了新建窗口打开) 而有的时候,我们需要他弹出来。就想这个一样: 上述方式是:window.open(/*URL*/"",/*Name*/"",/*args*/"width=300,height=400"); 但是搜狗是不会挺你的话的,他不会新建一个你设定的窗口打开,而是在 阅读全文

JavaScript跨域(3):HTTP access control (CORS)跨域

2013-04-09 11:08 by Barret Lee, 1182 阅读, 收藏, 编辑
摘要:网上看了很多博客和文档,感觉还是Mozilla大大写的最简单、最好懂,不过文字很长。。 原文链接:https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS 要整篇翻译,我肯定吃不消,当然也没这个必要,下面就提要说一点吧,这个方法还存在兼容性问题,尽管有相应的解决手段,但是觉得用起来不是特别爽。Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource... 阅读全文

JavaScript跨域(2):JSONP跨域

2013-04-03 22:02 by Barret Lee, 1089 阅读, 收藏, 编辑
摘要:祭祖归来,继续细说跨域~ 话说上次我们讲到了啥玩意儿是跨域,至于怎么跨域还没开始动笔。今天就说说JSONP跨域。 JSONP(JSON with padding)是JSON的一种“使用模式”,它是非官方协议允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。 P.S: 1.楼主懂一点点php,所以DEMO中的后台语言就用PHP来演示。 2.为了方便测试,楼主弄了SAE和BAE。Prelude [前奏] 如果我们请求一个JSON数据:(SAE地址:http://qiandu... 阅读全文

JavaScript跨域(1):什么是跨域,如何跨域

2013-03-31 19:05 by Barret Lee, 8140 阅读, 收藏, 编辑
摘要:无数次看到:Origin null is not allowed by Access-Control-Allow-Origin, 网络没有让你绝望,但是或许会让你蛋疼,因为你找了半天没看到一个比较实用的解决方案,亦或者水平不够,别人写的东西累赘没看懂,抑或是。。。 网上看到了一篇文章——跨域资源共享的10中方式,已经放在自己的家里了O(∩_∩)O~ 跨域也是平时项目中比较让人头疼的一个玩意儿,上文只是简要地提出了有哪些跨域方式,这里呢,将向大家详细说明,各种使用频率比较高的跨域方式。 什么是跨域:Across-domain solution(CDS) is a means ofinf... 阅读全文

Javascript本地储存(3):离线web应用

2013-03-30 13:03 by Barret Lee, 1156 阅读, 收藏, 编辑
摘要:前两篇文章分别介绍了Cookie应用和另一种本地储存方式,无论是cookie、userData还是localStorage都是一段保存在客户端磁盘的一段文本,他们可以被主动删除,但是本文要讲的“应用程序缓存”是HTML5中新增的一个技术,他允许web应用将应用程序自身本地保存到用户的浏览器中,他是不会随着用户清楚浏览器缓存而被清除的。不像localStorage和sessionS只是保存web应用程序相关的数据,他是将应用程序本身保存起来——应用程序所需运行的所有文件(HTML、CSS、JavaScript、图片等)。——《Javascript权威指南(第六版)》Page-594 “应用... 阅读全文

JavaScript本地储存(2):userData和localStorage

2013-03-28 23:25 by Barret Lee, 1859 阅读, 收藏, 编辑
摘要:上文对cookie的知识进行了归纳,同时也提到了cookie的大小是有限制的。cookie 是有大小限制的,每个 cookie 所存放的数据不能超过4kb,如果 cookie 字符串的长度超过4kb,则该属性将返回空字符串。——上文提要 如果我们需要在客户端储存比较大容量的数据,怎么办?下面给大家介绍userData和localStorage的基本知识和一些应用。先说明下为什么把两个东西扯到一起说,因为后面写了个对象,把UserData和localStorage包装到了一起O(∩_∩)O~Conception [基本概念] 毫无疑问,无论是UserData还是localStorage都... 阅读全文

JavaScript本地储存(1):cookie在前端

2013-03-27 12:13 by Barret Lee, 2962 阅读, 收藏, 编辑
摘要:以前心里总是默念着这句:“知道资源在哪儿就是成功的一半”。对于很多知识的学习,好像也一直停留在知道它在哪儿的地步,看来现在需要有所改变了! 那就从cookie开始吧~ Cookie(复数形态Cookies),中文名称为小型文本文件或小甜饼,指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端(Client Side)上的数据(通常经过加密)。定义于RFC2109(已废弃),最新取代的规范是RFC2965。Clasification [分类] 说到底,cookie就是保存在客户端的一段字符串(注意:不是数组)。 cookie可以手动设置,也可以由服务器产生,当客户端... 阅读全文

在Javascript中模仿接口(一)

2012-09-22 12:27 by Barret Lee, 159 阅读, 收藏, 编辑
摘要:本文从ITeye导入在JavaScript中模仿接口——本文摘自《JavaScript设计模式》一、用注释描述接口/* interface Composite { function add(child); function remove(child); function getChild(index); } interface FormItem { function save(); }*/var CompositeForm = function(id, method, action){ //......};/... 阅读全文

如何设计一个支持方法链式调用的JavaScript库

2012-09-18 09:37 by Barret Lee, 153 阅读, 收藏, 编辑
摘要:本文从ITeye导入可以先了解下javascript链式调用的实现方式//设计一个支持方法链式调用的JavaScript库/* 常见于大多数JavaScript库中的特性 ———————————————————————————————————————————————————————————————————— 特性 | 说明 ———————————————————————————————————————————————————————————————————— 事件 | 添加和删除事... 阅读全文

javascript链式调用的实现方式

2012-09-18 08:58 by Barret Lee, 1400 阅读, 收藏, 编辑
摘要:本文从ITeye导入在我们所用到的库中,可以看到很多诸如$(window).addEvent('load', function(){ $('test').show().setStyle('color', 'red').addEvent('click', function(e){ $(this).setStyle('color', 'yellow'); });});的链式调用,那么这样的链式结构是怎么实现的呢,下面我们利用代码来探讨一番:先分解下,我们队$函数已经很熟悉了,他通常返回一 阅读全文

javascript的灵活性

2012-09-17 09:32 by Barret Lee, 466 阅读, 收藏, 编辑
摘要:本文从ITeye导入如果你偏爱过程式编程,你可以这样:/*Start and stop animations using functions.*/function startAnination() { ....}function stopAnination(){ ....}这种做法很简单,但是你无法创建可以保存状态并且具有一些仅对其内部状态进行操作的方法的动画对象。下面的代码定义了一个类,你可以用它创建这种对象:/*Anim class.*/ var Anim = function(){ .... }; Anim.prototype.start = function(){ ... 阅读全文

平时积累的一点东西

2012-09-16 01:25 by Barret Lee, 389 阅读, 收藏, 编辑
摘要:本文从ITeye导入** ☆★☆★☆★☆★☆★☆JavaScript草稿集☆★☆★☆★☆★☆★☆** By 靖鸣君★JQuery★<!--<script type="text/javascript" src="http:code.jquery.com/jquery-latest.js"></script>-->★★★★★★★★公共部分★★★★★★★★ function printf(obj) { document.write(obj +... 阅读全文