JavaScript
RayChase
博客搬家了: https://www.raychase.net/
展开
-
JavaScript重构(四):JavaScript编码规则
没有规矩,不成方圆,JavaScript带来了灵活性,也带来了不受控的变量和访问,所以要用规则限制它。一支成熟的团队,还是一支新鲜的团队,规则应当是不一样的,我只是列出一些常见的或者有效的办法,来约束跳跃的开发人员,思维可以任意飞跃,代码却要持续受控。当然,任何规则都是建立在一定的认知基础之上的,面向对象JavaScript的基础是必备的,否则一切无从谈起。 变量和方法控制:模块开发不...2011-04-13 00:12:00 · 99 阅读 · 0 评论 -
JavaScript重构(二):JS的动态加载
前一节留下了一个问题,如果JS分门别类也清晰了,那我现在需要在必要的情况下才加载某一模块的JS,这个怎么实现呢? 方法一,最简单也是最容易被接受的方法,通过后台代码来控制,还是少些复杂的JS吧,通过一个标签、一个分支判断,就可以做到,何乐而不为呢? 方法二,如果要使用纯JS来控制,那么看看这样如何:$.ajax(){ url:"xxx/play.js"; …… ...2011-04-10 22:54:00 · 106 阅读 · 0 评论 -
JavaScript重构(三):JavaScript的测试
进行JavaScript重构时,我希望引入易于使用的测试框架来保证重构的顺利进行,未来能持续通过测试代码对JavaScript逻辑的正确性做保障。JsUnit (http://sourceforge.net/projects/jsunit/,http://www.jsunit.net/)JsUnit是一个独立的JavaScript单元测试框架,和JUnit差不多,没有上手难度,包括传统的s...2011-04-12 00:30:00 · 96 阅读 · 0 评论 -
JavaScript实现继承的几种方式
在这篇文章中,介绍了原型链继承的情形,事实上,JavaScript虽没有给出继承的关键字,但是我们依然能够拿出一些好办法实现。 1、原型链继承: var Base = function() { this.level = 1; this.name = "base"; this.toString = function(){ return...2012-01-07 23:21:37 · 137 阅读 · 0 评论 -
同步、异步转化和任务执行
正如动静是相对的概念,有了它们,世界才充满盎然生气;变和不变也是哲学上的对立统一,在代码的世界里也一样;同步异步呢?在这一篇文字里面已经很粗略地提到了同步和异步各自有些什么好处,接下来,我不妨说一些同步和异步互相转化的故事。 先来看看这一段代码: setTimeout(function(){ while(true){ alert("In"); }},0);wh...2012-01-24 22:23:00 · 144 阅读 · 0 评论 -
Backbone.js介绍
注:教程请参见这里(本文有很多内容都是从这里翻译的),官方网站在这里;综合例子参见这里。 Backbone.js是一个前端MVC框架,model能够绑定键值对和自定义事件,集合具备可枚举方法的富API,视图具备事件处理能力,并且可以通过RESTful的JSON接口和你已有的API通信。 View Backbone里的视图就是用来反映数据模型的,可以监听事件并响应,通过利用U...2012-05-08 22:57:41 · 240 阅读 · 0 评论 -
d3介绍
D3.js是一个基于数据的操作文档的JavaScript库,主要用于各异的图表的输出,支持DIV这种图案生成,也支持SVG这种图案的生成(如果你对SVG不熟悉,请先看一下这篇文章,它介绍了SVG、VML和Canvas)。D3帮助你屏蔽了浏览器差异,做出来图案的效果可以说是炫目得一塌糊涂,可是代码却很简洁。在我第一次听人介绍D3的时候,确实被其示例震撼到了,大量的例子在这里可以找到。这...2012-10-31 00:17:49 · 477 阅读 · 0 评论 -
关于CommonJS
老实说,之前我对CommonJS也是一无所知,直到不久前Node.js火起来,我去研究它,才了解到Node.js其实是CommonJS的一个部分实现,我才关注起CommonJS来。 以前我们说起HTML,我们说起JavaScript,大家的印象似乎都停留在了“网页”上面,从2005年开始,因为Ajax的缘故,有一种叫做“前端程序员”的新型物种诞生了。可是现在,前端程序员不甘心...2012-03-26 00:37:54 · 209 阅读 · 0 评论 -
Function Invocation Patterns
今天看到微博上大家在讨论一个JavaScript的小问题,问题虽小,还是有思考的价值。我看到不少人对其展开了讨论,有很多答案,也有很多有意思的观点。学JavaScript的人很多,但是学好真不容易,哪怕就是基础的部分。先看一下下面的代码:1234567891011121314var value = 5...2012-11-04 17:46:58 · 126 阅读 · 0 评论 -
你没有抓住Promises的要点
注:这篇文章翻译自《You're Missing the Point of Promises》,阅读这篇文章,你首先需要对于JavaScript中的Promises是什么有了解,否则,你可以先看一看这篇文章(英文),或者这篇文章(中文)掌握基础。有一些修改,另受水平所限,翻译的不当之处请参阅原文。Promises是一种令代码异步行为更加优雅的抽象。如果用最基本的编码方式,代码是这种连续的形式...2013-04-21 20:52:21 · 145 阅读 · 0 评论 -
DNS劫持
想谈一谈这个话题是因为最近有一位朋友抱怨他的博客在某些用户某些时候访问的时候,被莫名其妙地加上了广告,他检查来检查去,始终发现不了网站本身有什么问题,后来他才了解到了DNS劫持一说。DNS劫持其实这不是一个新概念了,在几年前,中国一些不讲道德的运营商,尤其是地方运营商就开始捕捉用户浏览器的访问记录,然后根据不同用户的访问行为,有选择地往用户访问的网页里面推送广告。因为运营商掌握着DNS主...2013-04-30 13:59:01 · 357 阅读 · 0 评论 -
JavaScript使用for循环时出现的问题
这个问题的讨论最初来自公司内部邮件,我只是把这个问题的讨论内容记录下来。有一些项目组在定位问题的时候发现,在使用“for(x in array)”这样的写法的时候,在IE浏览器下,x出现了非预期的值。具体说,如果自定义了Array.prototype.indexOf方法(譬如源于某prototype污染),也许是因为老版本IE浏览器并不支持array.indexOf方法,而开发者又很想用...2013-05-26 00:36:01 · 453 阅读 · 0 评论 -
Flot介绍
最近在项目里面要用到JavaScript来绘制图表,JQuery的插件Flot是一个不错的选择。和我之前介绍过的D3不同,它的唯一目的就是用来绘制曲线图的,即便是它的不同插件的功能,也基本上都在这个范畴之内。Flot采用Canvas绘制图形(Web总共就有三种常见方式来绘制图形,不了解的同学请看这篇文章),在数据量非常大的时候,你需要考虑浏览器端的性能问题。顺便提一句,D3是采用SVG来...2012-12-22 18:56:38 · 874 阅读 · 0 评论 -
JQuery表格插件介绍:Flexigrid和DataTables
JQuery的表格插件有很多。Flexigrid和DataTables是我最近使用的,并且功能比较强大,在这里介绍一下。如果你在寻找前端绘制表格的插件,可以考虑它们。Flexigrid官方Flexigrid的特性展示:列宽度可拖拽调整高度和宽度可拖拽调整列头可排序主题支持支持XML/JSON格式的Ajax数据源支持分页可以显示/隐藏列表格搜索功能...2012-12-27 11:35:36 · 368 阅读 · 0 评论 -
用JavaScript截图
使用JavaScript截图,这里我要推荐两款开源组件:一个是Canvas2Image,它可以将Canvas绘图编程PNG/JPEG/BMP的图像;但是光有它还不够,我们需要给任意DOM(至少是绝大部分)截图,这就需要html2canvas,它可以将DOM对象转换成一个canvas对象。两者的功能结合起来,就可以把页面上的DOM截图成PNG或者JPEG图像了,很酷。Canvas2Imag...2013-01-08 23:13:58 · 301 阅读 · 0 评论 -
Dart,你凭什么挑战JavaScript?
不妨先来打量一下JavaScript。JavaScript是唯一至今主流且基于原型的语言,虽然说支持面向对象,但是无论是封装、继承、多态,实现起来总需要用到一些tricky的办法,而且也不甚完美。事实上,为了抢市场,从1995年JavaScript设计完成到发布,只有短短的7、8个月的时间,极度缺乏谨慎的语言特性和规范的评估。而和微软JScript的竞争,使得EcmaScript标准仓促问世...2012-09-26 08:46:41 · 1291 阅读 · 2 评论 -
程序员,都去写一写前端代码吧
你可以认为我是一个极端的人,就像有许多人专注于自己的领域而不屑于其它“肤浅”的工作范畴一样。比如我见过不少认为做portal没有技术含量的判定,做工程都是充满苦逼行为的言论,最近则还有那些“大数据”崇拜者的疯狂吐槽……我的极端则有些不同,我的极端在于我认为绝大多数优秀的程序员,都要尝试多方面的事情。并不只有底层开发或者机器学习充满睿智的挑战,我做了几年网站,很难说这就是我最初的兴趣,虽然也在接触...2013-01-19 01:16:26 · 229 阅读 · 0 评论 -
几道容易出错的JavaScript题目
下面这几道JavaScript题目大多来自于周五的一个小分享。都是很小的题目,但是很容易犯错。有一些是语言特性使然,有一些则是语言本身没有设计好而留下的陷阱。结果就是,遇到的人很容易陷进去骂娘,这些东西是略有些反直觉,感兴趣的不妨看看,平时我们还是尽量少些这样似是而非的代码。1.12345678910111213141...2013-07-07 10:34:06 · 181 阅读 · 0 评论 -
JavaScript重构(一):模块划分和命名空间
通常我们的团队中,开发人员在Java语言层面具备相当的技术素养,经验丰富,而且有许多成熟的、合理的规约,类型繁多的代码隐患检查工具,甚至在团队间还有计划内的评审和飞检。但是前端的代码不似后台,就像一个没人疼的孩子,不仅仅容易被低估、被轻视,导致质量低劣、可维护性差,技能上,更缺少优秀的前端开发人员。JavaScript是前台代码中重要组成部分,随着版本的延续,产品越做越大,JavaScript...2011-04-10 22:20:00 · 105 阅读 · 0 评论 -
JavaScript重构(九):自定义的JavaScript产品框架
产品做到一定程度,JavaScript不仅仅需要几个层面上的重构,而需要将这些合理的、零散的重构集成起来、系统化,最终形成一套适合自己产品的前端框架。以某套产品的前端框架为例,包含了这么几个组件:1、通用工具组件,提供了UI组件最基础的通用能力,包括:日志、缓存、数据共享、数据异步加载、原生对象扩展、Ajax产品定制化等等。2、共享UI组件,包括:通用弹出框、通用按钮等。3、产品...2011-08-14 18:14:00 · 205 阅读 · 1 评论 -
转:解剖JavaScript中的null和undefined
在JavaScript开发中,被人问到:null与undefined到底有啥区别?一时间不好回答,特别是undefined,因为这涉及到undefined的实现原理。于是,细想之后,写下本文,请各位大侠拍砖。总所周知:null == undefined但是:null !== undefined 那么这两者到底有啥区别呢?请听俺娓娓道来...null这是一个对象,但是为空...2011-04-16 08:06:00 · 121 阅读 · 0 评论 -
JavaScript重构(五):利用原型和闭包,完成组件方法
var Player = (function(){ Player = function(){ //这只是个空壳 throw new Error("Can not instantiate a Player object."); }; Player.MIN_EXTENDED_TIME = 1; Player.MAX_EXTENDED_TIME = 3; Player._...2011-04-16 17:53:00 · 89 阅读 · 0 评论 -
JavaScript重构(六):利用继承来做事
终于要说到JavaScript的继承了,原型链继承是最常用的一种方式:function Video(){}; function Movie(){}; Movie.prototype = new Video(); Movie.prototype.constructor = Movie; //不要丢失构造器 啰嗦一句,如果我拿到的是方法的实例,一样可以做继承:fun...2011-04-18 22:25:00 · 92 阅读 · 0 评论 -
JavaScript重构(七):重用老代码
在Java中,有这样一段老代码:class Round{ public void drawRound(); //画圆 } 现在新代码希望能和它共存,使用一个Person的对象来控制,只不过,可能drawRound,也可能drawRect啊:class Rect{ public void drawRect(); //画方 } 好,废话少说,...2011-04-22 23:51:00 · 79 阅读 · 0 评论 -
JavaScript 的 delete 用法
1、var o = {};o.x = new Object(); delete o.x; // 上一行new的Object对象依然存在,只是删掉了o.x这个属性,因此千万不要把delete类似成析构函数了 2、var global = 42; delete global; // 删除Global.global 3、并不是所有的属性都能被delete。例如,p...2011-01-09 11:59:00 · 251 阅读 · 0 评论 -
疯狂的跨域技术
[转]疯狂的跨域技术 原帖地址:http://itgeeker.com/mathml/readpaper?pid=53JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能...2011-01-09 19:39:00 · 78 阅读 · 0 评论 -
服务器端JavaScript
JSConf2010的重要议题之一:node.js。不要觉得服务器端JavaScript是个新概念。其实老早就有了,从九六年Netscape普及JavaScript的时候,服务器端和客户端都是考虑到了的,只不过只有客户端健壮发展起来了,服务端的故事直到现在才被慢慢提起。看看有什么优势:最大的优势,不过是统一了服务端和客户端的开发语言,真正可以看到客户端服务端一起开发和一统天下的格局,兴...2011-01-11 00:05:00 · 166 阅读 · 0 评论 -
JSConf 2010 (一):介绍、Google Chrome Frame 和 GitHub
一年一度的JSConf大会又召开,这是2010的官网 http://jsconf.us/2010: 真是够简陋的。其中的Sliders请看这里:http://devthought.com/2010/05/03/jsconf-2010-slidesChris Williams 和 Iterative Designs 创立了JSConf,这是JavaScript开发者的第一个专业会议。这应...2011-01-12 00:15:00 · 197 阅读 · 0 评论 -
JSConf 2010 (二):JS的模式编程、微格式 和 MooTools
模式编程(programming to the patterns)JS的通用库最基本的目的是给你解决浏览器兼容性差异,Prototype和JQuery是做得最好的两个库。JQuery对Dom的DSL化封装,还有对method chain的大量使用,几乎让你感觉在声明行为,所以它让非常多的对啰嗦的Dom编程厌烦的前端程序员迅速“上瘾”。但是,我们知道DSL化的JQuery还不够,因为它很好的...2011-01-13 00:01:00 · 119 阅读 · 0 评论 -
JavaScript重构(八):JSDoc和JSLint
JSDoc可以生成类似于JavaDoc一样的API文档,这对于前端开发是必不可少的。下载jsdoc-tookit(http://code.google.com/p/jsdoc-toolkit/)和jsdoc-tookit-ant-task(http://code.google.com/p/jsdoc-toolkit-ant-task/),CSDN的转义功能有问题,所以把尖括号都换成了书名号...2011-04-30 20:29:00 · 104 阅读 · 0 评论 -
JSConf 2010 (三):Raphaël、优化前端性能
提到Raphaël,就得先说说SVG,可缩放矢量图形(Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。 SVG图形格式优点:1. 图像文件可读,易于修改和编辑 ...2011-01-14 00:48:00 · 100 阅读 · 0 评论 -
JavaScript重构(汇总帖)
前一阵集中一段时间做了JavaScript的重构,留下了一点点脚印,在这里汇总一下。如果您对这一专题感兴趣,或者希望补充一些内容,欢迎留言,我会在后续更新进去。谢谢。 JavaScript重构(一):模块划分和命名空间模块划分是JavaScript重构的原则之一,也是代码可维护性提升的一条重要途径。 JavaScript重构(二):JS的动态加载很多JS framework...2011-05-15 21:28:00 · 226 阅读 · 0 评论 -
JavaScript并发下载
在IE6/7里JavaScript会从两个方面阻碍页面呈现:script标签下面的网页资源在script加载完之前会停止请求、下载。 script标签下面的html元素在script加载完之前会停止渲染。 在ie6/7 firefox2/3 Safari3 Chrome1 和 opera下 script标签会阻碍下载: 虽然在ie8,safari4,chrome2下scr...2011-08-21 13:34:00 · 208 阅读 · 0 评论 -
JavaScript重构(十):强化对象封装和模块封装
1、类本身就是一种封装形式,先来看看最简单的封装,JavaScript中没有private关键字,对于私有成员,不如我们统一一个以下划线开头的命名来标识:var User = function(name){ this._name = name; this.getName = function(){ return _name; };}; 2、不过,上面的办法还...2011-09-19 22:44:19 · 126 阅读 · 0 评论 -
Javascript Memoizer
以下来自John Hann的实现,这段代码引起了我的注意,它用巧妙的方法把方法调用的结果缓存起来了。 代码解析:// memoize: 使用memoization来缓存的通用方法 // func: 要被缓存的方法 // context: 方法执行上下文 // Note: 方法必须是外部可访问的,参数是可字符序列化的 function memoize (func, con...2011-06-20 23:52:00 · 136 阅读 · 0 评论 -
随手记:为系统设计一套简易的JavaScript框架需要考虑的要素
最近在工作中做前端的重构,其中一个重要步骤就是设计一套简易的前端框架,把所想到的随手记下来: 物理和分布 js文件布局 模块化 依赖关系梳理 加载梳理 技能储备 JavaScript进阶 JavaScript面向对象 JQuery(或其他JavaScript基础框架)熟悉使用 规范和规则 JavaScript规范 对象化示例代码 框架内容 模型定...2011-06-21 23:25:00 · 101 阅读 · 0 评论 -
转:IE6终极备忘:修复IE6下 25+ Bugs
IE6终极备忘:修复IE6下 25+ Bugs[译]IE6终极备忘:修复IE6下 25+ Bugs2010年01月08日 | HTML/CSS, JavaScript去年就想将IE的bug系统地整理下,但一直都忙于工作、学习没有完成,看到这篇E文后,我毫不犹豫的放下了手中的工作将之翻译出来。 由于是第一次译文,所以错误在所难免,欢迎大家批评指正。原文:Ultimate IE6 Ch...2011-06-27 23:40:00 · 166 阅读 · 0 评论 -
JavaScript 3D图表
在说3D图表以前,首先要明确两个概念,一个是数据的维度,一个是呈现数据载体的维度。对于数据的维度,一维的数据呈现,但是呈现的载体是二维的平面图,比如饼图:已经能够很清晰地观察到数据的分布情况。数据如果增加一个维度,变成二维,呈现载体依然是二维的平面图:数据表达依然是清晰的。但是,倘若再增加一维,这个时候就面临了两个问题:数据的维度增加,复杂性也增大了;计算机发展到现在,...2013-08-24 19:36:38 · 502 阅读 · 0 评论