摘要：
Ajax简介 Ajax是Asynchronous Javascript and XML的缩写，这个术语由Jesse James Carrett创造，最早出现在他于2005年2月发表的文章“Ajax: A New Approach to Web Applications”。其主要的特点就是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。 Ajax并非一门新的开发语言，而是一组技术的专用术语，包括DHTML和XMLHTTPRequest对象，而DHTML通常是指HTML、CSS和javascript组合使用。Ajax的本质也就是从服务器动态请求数据后使用这些数据更改页面。... 阅读全文
随笔分类 - Javascript
加快javascript代码运行 —— 避免长时间运行
2013-05-23 19:38 by MoltBoy, 2966 阅读, 收藏, 编辑
摘要：
前面一篇讨论了XHR对象已经异步的部分观点，异步能解决许多长时间运行交互问题，但它绝不是适用于任何地方。 长时间运行的原因 javascript运行在浏览器环境中，因而分配的资源数量是十分有限的，不同于桌面程序能随意控制它们想要的内存大小和CPU时间，Javascript被严格限制了。甚至长时间运行脚本都有一定约束，假如代码运行超过了特定的时间限制或者运行的语句数量超出特定约束，浏览器就会弹出错误提示框，询问是继续运行还是停止它。 出现这种情况的原因主要有两个：过长或过深嵌套的函数调用；进行了大量的迭代处理。for(var i = 0, len = obj.length; i < l.. 阅读全文
javascirpt系列之 - XMLHttpRequest对象(续篇)
2013-05-15 22:42 by MoltBoy, 1989 阅读, 收藏, 编辑
摘要：
—— 生命中最可贵的东西永远是时间，多挤点时间充实自己，别再肆意糟蹋青春。 接着昨天的内容。前面说的4个重要的步骤，已经都得到实现，在这里XMLHttpRequest还有两个方法，setRequestHeader()方法设置HTTP请求的头信息。abort()方法终止正在进行中的请求。一般极少这样做，并且终止之前，应当先清除onreadystatechange事件处理程序。(指派一个空函数给onreadystatechange，若给它null值，会发生难以预料的错误) xhr.setRequestHeader(header, value)，调用此方法之前必须进行以下步骤： 确保sta... 阅读全文
面向对象 - javascript创建对象模式总结
2013-05-04 20:22 by MoltBoy, 907 阅读, 收藏, 编辑
摘要：
面向对象（Object-oriented，OO）是如今主流的编程模式，而面向对象又分为（OOA-面向对象分析、OOD-面向对象设计、OOP-面向对象编程），我们常常挂在嘴边都是OOP。通常，面向对象都有类得概念，javascript中没有涉及到类得概念，却有对象的概念。在ECMA-262中把对象定义为：“无序属性的集合，属性值可以为基本值、对象或函数”。实际上，对象可以理解为散列表，就是一组租名值对，其中值可以为数据或者函数。 了解了对象的概念，下一步当然是创建对象。在平日里讨论，经常能听到：“工厂模式”、“组合模式”...等一些关于创建对象的术语。下面的内容就具体讨论各模式的特点及其优... 阅读全文
javascript性能优化总结 —— 编程习惯篇
2013-05-03 21:00 by MoltBoy, 2010 阅读, 收藏, 编辑
摘要：
在google，网页呈现速度慢500毫秒将丢失20%的流量；在yahoo！，慢上400毫秒将丢失5%-9%的流量；在亚马逊（Amazon），慢上100毫秒将丢失1%的交易量...这是速度绝对成败的web时代，天下武学唯快不破，相信没人嫌弃网页打开速度太快吧！ 那么要让网页速度更快，我们应该如何优化，应该保持怎样的编程习惯，让代码运行的更加流畅？在这里，郑重推荐《高性能网站建设指南》和《高性能网站建设进阶指南》，完全掌握这两本书的内容对你的前端生涯将是受益匪浅。 言归正传，javascript是解释型语言，执行速度自然比不上编译型语言，另外，计算机系统分配给浏览器的资源有限，分给web应... 阅读全文
canvas —— javascript实现各种复杂规律图案
2013-04-30 22:27 by MoltBoy, 2319 阅读, 收藏, 编辑
摘要：
在HTML5中新增的元素中，个人最喜欢的就是canvas元素。这个元素负责在页面里设定一个区域，然后在这个区域内通过javascript动态绘制图形。目前大部分浏览器新版本都支持此元素。 canvas元素具备绘图能力的上下文环境，另外还建议了一个名为WebGL的3D上下文，但是目前大部分浏览器对canvas的3D上下文支持不够好，特别是老版本的浏览器，甚至在window xp中缺少支持必要的绘图驱动程序。 那么，今天我们就在2d上下文中，共同探讨下这个非常有意思的新元素。 要使用canvas元素，必须先设置其width和height，默认值分别为300和150。设置的时候有点奇怪，使... 阅读全文
Javascript动画系列之 —— lightbox实现（二）
2013-04-26 21:02 by MoltBoy, 1439 阅读, 收藏, 编辑
摘要：
上次帖子里详细描述了lightbox实现思路，本想将整个原生的lightbox源码放出来，但是觉得留点思考的余地更好。 本文中就贴上淡入淡出和滑动的JS原生代码，通过测试，能兼容IE8、Firefox、Chrome。function bind(fn, context){ //函数绑定，传递context上下文 var args = Array.prototype.slice.call(arguments, 2); return function(){ var innerArgs = Array.prototype.slice.call(arguments); ... 阅读全文
javascript中this对象之 —— 意乱情迷
2013-04-25 23:45 by MoltBoy, 430 阅读, 收藏, 编辑
摘要：
javascript函数中的this对象和其他语言比较起来很很大不同，甚至在严格模式和非严格模式下都有不同。 大多数情况下，this对象是有函数的调用对象决定。在任务执行过程中，this对象不能被修改。ECMAScript 5引入了bind方法来设置调用中的this对象，实际上就是传递上下文，下次有时间，可以具体讨论下bind方法，很多框架都已经实现了，也就是说早就有了实际标准 —— 先上车后买票。 就这么些颇为空洞，下面就使用几个例子function fn(){ return this;}alert(fn() === window); //true 这个例子，结果和原因都比... 阅读全文
斐波那契数列javascript实现 —— 极为有趣的数列（应用极为广泛）
2013-04-24 21:49 by MoltBoy, 951 阅读, 收藏, 编辑
摘要：
function calculateFibonacci(num){ ////算法主体，学习算法的朋友可以自己画画，fibonacci在自然规律中无处不在 return (num === 0 || num === 1) ? num : (arguments.callee(num - 1) + arguments.callee(num - 2));}function doStuff(num, successCallback, errorCallback){ //主体函数 try{ var results = []; for(... 阅读全文
javascript中函数和方法的区别
2013-04-24 16:20 by MoltBoy, 7397 阅读, 收藏, 编辑
摘要：
经常谈论起函数和方法，也常常搞不清楚它们之间的界限，经常把两个混用。首先来看看，两者是如何定义的？ 函数（function）是可以执行的javascript代码块，由javascript程序定义或javascript实现预定义。函数可以带有实际参数或者形式参数，用于指定这个函数执行计算要使用的一个或多个值，而且还可以返回值，以表示计算的结果。 方法（method）是通过对象调用的javascript函数。也就是说，方法也是函数，只是比较特殊的函数。假设有一个函数是fn，一个对象是obj，那么就可以定义一个method： obj.method = fn; obj.method(); ... 阅读全文
彻底理解javascript的回调函数（推荐）
2013-04-24 14:54 by MoltBoy, 62077 阅读, 收藏, 编辑
摘要：
在javascript中回调函数非常重要，它们几乎无处不在。像其他更加传统的编程语言都有回调函数概念，但是非常奇怪的是，完完整整谈论回调函数的在线教程比较少，倒是有一堆关于call()和apply()函数的，或者有一些简短的关于callback的使用示例。 函数也是对象 想弄明白回调函数，首先的清楚地明白函数的规则。在javascript中，函数是比较奇怪的，但它确确实实是对象。确切地说，函数是用Function()构造函数创建的Function对象。Function对象包含一个字符串，字符串包含函数的javascript代码。假如你是从C语言或者java语言转过来的，这也许看起来很奇... 阅读全文
如何让自己的javascript代码具有可维护性？
2013-04-21 20:26 by MoltBoy, 930 阅读, 收藏, 编辑
摘要：
为雅安祈福！！愿好人一生平安！！ 现在的Web程序不再是简简单单文字和图片的排版输出，稍微大点的网站都有成千上万行javascript代码，执行各种复杂的功能提供用户不同的交互体验。往往当你进入一家企业，很多情况并不是让你开发新的web程序，而是让你基于原有的成果开展工作，如果代码不具备可维护性，那么此项工作就会变得相当难以进展。 那么什么是可维护性呢？它具有什么特征呢？ - 易读易懂 —— 不需要原作者解释，就能直接读懂源代码，并能轻松基于这些源码开展下一步工作； - 可扩展 —— 代码的构架能适应未来功能的扩展； - 数据灵活性 —— 改动代码中的某些数据，只需修改少量代码而... 阅读全文
javascript习惯性的细节问题 —— 重谈细节，别只顾优雅
2013-04-17 18:28 by MoltBoy, 611 阅读, 收藏, 编辑
摘要：
晚饭之前，浏览了下博客园，阅读了梦想天空（山边小溪）翻译的《JavaScript初学者应注意的七个细节》的原文，写的非常不错。平常不注意的点点习惯，可能积累到最后成为致命的问题。正所谓，小病不医成大患，一定要防微杜渐。 一、简化代码 这是每个程序员最起码的素养和习惯，随着经验的不断丰富，一定学会回顾总结，写出简洁高效的代码。要想成为杰出的IT人员，忌讳只为完成任务而工作，除非你只是为了混口饭吃！至于如何简化代码，可以坚持阅读行业顶级人士的代码风格和习惯，当然不只是为了简洁代码而做这些工作，懂其然懂其所以然！ 具体如何简化，山边小溪已经列举了部分例子，另外可以灵活地使用“||”-逻辑或... 阅读全文
Javascript动画系列之 —— lightbox实现（一）
2013-04-15 00:14 by MoltBoy, 646 阅读, 收藏, 编辑
摘要：
随着DOM和动态JS、CSS操作的出现，网页的交互性效果变得越来越强大，而比较明显的体会就是日渐丰富多样的图片查看和浏览方式。貌似印证了某句名言：只有你想不到的，没有你做不到的，当然前提是都在如今的技术规范之内。 那lightbox是什么样的效果，内部的实现原理是什么，总结起来无非这么几点： ①、当点击图片时，就会弹出一个图片覆盖层，而不是直接进入实际图片； ②、图片覆盖层显示之时，一个半透明的灰层覆盖整个页面(opacity)，模糊化被覆盖的页面内容； ③、图片覆盖层会有一些从图片到图片的导航方法。 Lightbox的出现刺激了其他多种类似的图库的发展，这个图库并没有使用任何框... 阅读全文
javascript动画系列之 —— 获取坐标
2013-04-12 16:45 by MoltBoy, 647 阅读, 收藏, 编辑
摘要：
最近公司业务需要，不得不提前原来的计划，提前开始研究无框架的Javascript动画。不使用任何框架，就算实现一个简单的slide和fide都需要大费周章，但感觉乐在其中，毕竟曾经接触过flash开发。 跟flash一样，动画的原理就是由一帧一帧静态画面连贯组成的貌似动态效果，其实放慢足够的倍数，就一张张静态画面。看过胶片式电影的朋友都明白，只要每秒超过24帧，而其间的间隔人眼难以觉察到。关于动画原理，这里就不加赘述了。 想把元素框移动起来，首先要找到元素框的位置，也就是元素框在页面的坐标，不同的参照物有不同的坐标位置。先来普及几个基本概念吧！ offsetWidthclientWi... 阅读全文
javascript表单之 —— 选择框操作方法详解
2013-04-11 15:10 by MoltBoy, 1194 阅读, 收藏, 编辑
摘要：
表单元素的选择框有单选和多选之分，都是通过<select>和<option>元素来创建，多选选择框只须添加multiple特性：multiple="multiple"，建议不要缩写，为更好地兼容xhtml。 选择框既然是表单元素之一，当然会继承表单字段的共有的属性和方法，例如：disable、form、name、readOnly、tabIndex、type、value、focus()、blur()；另外还有共有的表单事件：例如：blur、change、focus。这些共有的属性和方法都具有明显的语义性，所以在这里就不加详解了，着实想不起可以googl 阅读全文
javascript表单之 —— 文本框输入验证详细解读
2013-04-10 18:24 by MoltBoy, 1067 阅读, 收藏, 编辑
摘要：
在前端开发中经常会遇到限制文本框输入特定的字符类型，或者过滤某些字符。而HTML提供的文本框本身没有验证的手段和功能，因此必须使用JS来完成这项功能，完善此项功能还得综合运用事件和DOM接口。废话不多说了，看看如何让普通的文本框变成完美的输入功能控件。 一、屏蔽字符 过滤掉某些不需要出现的字符。例如：手机号码不能包含非数字字符，邮政编码也是如此。响应文本框输入字符操作的是keypress事件，因此，可以通过阻止这个事件的默认行为来屏蔽此类字符的输入。下列代码为只允许用户输入数值：（本文重思路轻代码，都是用DOM0级的事件方式，如需兼容各浏览器的实现代码，请另外联系） elemen... 阅读全文
透过Javascript一些变量定义及简单运算实验看JS内部运行机制
2013-04-07 20:16 by MoltBoy, 430 阅读, 收藏, 编辑
摘要：
非常经典的几道面试题：if(!("a" in window)){ var a = true;}alert(a);以上题目运行结果为“indefined"，其实把”a“看做a是不是更容易理解。变量a在全局作用域定义,而全局作用域（global）变量都是window对象的属性，因而a in window自然为true，剩下的就不用解释了吧！另外，全局变量对象的声明：VO（global）{a:undefined}。举一反三类推，”a“ in top 或者 ”a“ in self呢，结果跟window是一样的，上诉运行环境中，top就是window，而self基本上可以跟 阅读全文
CSS浮动规则详解（推荐）
2013-04-07 00:17 by MoltBoy, 707 阅读, 收藏, 编辑
摘要：
CSS中float是在一系列详细规则控制浮动元素的摆放位置，可以想象成一个氢气球在封闭盒子里漂浮的平面图。具体的规则有如下几点：1、浮动元素的左边（右边）外边界不能超出其包含块的左边（右边）的内边界，绝对不会越位溢出的。什么？什么叫包含块？不知道的朋友到前面几篇帖子看看。2、浮动元素的左边（右边）外边界必须是包含块中之前出现的浮动元素的右边（左边）外边界，请注意前后出现的左右的顺序，也就是说只能挨着先出现的浮动元素的右边边界摆放，除非后出现的浮动元素的顶端在先出现的浮动元素的底端下面。如此，浮动元素之间就不会发生重叠，这也是浮动相比定位的优势所在。另外，浮动元素与其他元素不会发生折叠。3、左浮 阅读全文
简单的几个案例，对动态添加HTML进行了性能比较（包括innerHTML)
2013-03-31 23:06 by MoltBoy, 1014 阅读, 收藏, 编辑
摘要：
在网上查阅了不少关于innerHTML的性能比较，一直只是间接的得到结果，今天就自己动手写了下非常简单的几个动态添加HTML方法的性能比较，当然，这其中的有许多考虑不周的地方，纯粹是为了比较运行时间，并没有考虑内存等资源的消耗，算不上真正的性能比较！下次有时间，进行个完整的性能测试，包括CPU,内存等资源消耗... 废话不多说了，代码里面有动态添加HTML的方法的简单说明，少了几种比较复杂的方法，例如：利用cloneNode（），理论上比直接create性能能提高30%左右，当然不同的浏览器实际测试时间很大不同。下面看看详细的测试代码！<html> <head> ... 阅读全文