代码改变世界

随笔分类 - Front-end

javascript —— HTTP头文件详解

2013-06-16 20:50 by MoltBoy, 1447 阅读, 收藏, 编辑
摘要: HTTP(超文本传输协议:HyperText Transfer Protocol)是浏览器和服务器通过internet进行相互通信的协议,也是网络上应用最为广泛的一种网络协议。HTTP规范由World Wide Web Consortium(W3C)和Internet Engineering Task Force(IETF)进行编制,文档是RFC2616。HTTP1.1是如今比较常用的版本,但是有些浏览器和服务器仍在使用老版本1.0。 HTTP协议由请求和响应构成。浏览器端向特定的URL发送HTTP请求,URL对应的服务器经过处理请求,然后返回HTTP响应。和许多Internet服务一样... 阅读全文

浏览器详谈及其内部工作机制 —— web开发必读

2013-05-05 23:08 by MoltBoy, 2849 阅读, 收藏, 编辑
摘要: 浏览器介绍 如今,浏览器格局基本上是五分天下,分别是:IE、Firefox、Safari、Chrome、Opera,而浏览器引擎就更加集中了,主要是四大巨头:IE的浏览器排版引擎Trident,目前随IE10发布了Trident6.0;Mozilla的排版引擎Gecko,今年4月2号发布了Gecko21预览版,稳定版本为Gecko20;Google Chrome和Apple Safari使用的是WebKit引擎,它已经成为市场占用率最高的排版引擎;另外还有Opera的Presto引擎,不过在今年的2月13号,Opera Software宣布未来产品将以Webkti和V8为主,逐步放弃基于... 阅读全文

面向对象 - javascript创建对象模式总结

2013-05-04 20:22 by MoltBoy, 891 阅读, 收藏, 编辑
摘要: 面向对象(Object-oriented,OO)是如今主流的编程模式,而面向对象又分为(OOA-面向对象分析、OOD-面向对象设计、OOP-面向对象编程),我们常常挂在嘴边都是OOP。通常,面向对象都有类得概念,javascript中没有涉及到类得概念,却有对象的概念。在ECMA-262中把对象定义为:“无序属性的集合,属性值可以为基本值、对象或函数”。实际上,对象可以理解为散列表,就是一组租名值对,其中值可以为数据或者函数。 了解了对象的概念,下一步当然是创建对象。在平日里讨论,经常能听到:“工厂模式”、“组合模式”...等一些关于创建对象的术语。下面的内容就具体讨论各模式的特点及其优... 阅读全文

javascript性能优化总结 —— 编程习惯篇

2013-05-03 21:00 by MoltBoy, 1987 阅读, 收藏, 编辑
摘要: 在google,网页呈现速度慢500毫秒将丢失20%的流量;在yahoo!,慢上400毫秒将丢失5%-9%的流量;在亚马逊(Amazon),慢上100毫秒将丢失1%的交易量...这是速度绝对成败的web时代,天下武学唯快不破,相信没人嫌弃网页打开速度太快吧! 那么要让网页速度更快,我们应该如何优化,应该保持怎样的编程习惯,让代码运行的更加流畅?在这里,郑重推荐《高性能网站建设指南》和《高性能网站建设进阶指南》,完全掌握这两本书的内容对你的前端生涯将是受益匪浅。 言归正传,javascript是解释型语言,执行速度自然比不上编译型语言,另外,计算机系统分配给浏览器的资源有限,分给web应... 阅读全文

canvas —— javascript实现各种复杂规律图案

2013-04-30 22:27 by MoltBoy, 2221 阅读, 收藏, 编辑
摘要: 在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, 1405 阅读, 收藏, 编辑
摘要: 上次帖子里详细描述了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, 405 阅读, 收藏, 编辑
摘要: 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, 920 阅读, 收藏, 编辑
摘要: 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, 6716 阅读, 收藏, 编辑
摘要: 经常谈论起函数和方法,也常常搞不清楚它们之间的界限,经常把两个混用。首先来看看,两者是如何定义的? 函数(function)是可以执行的javascript代码块,由javascript程序定义或javascript实现预定义。函数可以带有实际参数或者形式参数,用于指定这个函数执行计算要使用的一个或多个值,而且还可以返回值,以表示计算的结果。 方法(method)是通过对象调用的javascript函数。也就是说,方法也是函数,只是比较特殊的函数。假设有一个函数是fn,一个对象是obj,那么就可以定义一个method: obj.method = fn; obj.method(); ... 阅读全文

彻底理解javascript的回调函数(推荐)

2013-04-24 14:54 by MoltBoy, 61599 阅读, 收藏, 编辑
摘要: 在javascript中回调函数非常重要,它们几乎无处不在。像其他更加传统的编程语言都有回调函数概念,但是非常奇怪的是,完完整整谈论回调函数的在线教程比较少,倒是有一堆关于call()和apply()函数的,或者有一些简短的关于callback的使用示例。 函数也是对象 想弄明白回调函数,首先的清楚地明白函数的规则。在javascript中,函数是比较奇怪的,但它确确实实是对象。确切地说,函数是用Function()构造函数创建的Function对象。Function对象包含一个字符串,字符串包含函数的javascript代码。假如你是从C语言或者java语言转过来的,这也许看起来很奇... 阅读全文

如何让自己的javascript代码具有可维护性?

2013-04-21 20:26 by MoltBoy, 907 阅读, 收藏, 编辑
摘要: 为雅安祈福!!愿好人一生平安!! 现在的Web程序不再是简简单单文字和图片的排版输出,稍微大点的网站都有成千上万行javascript代码,执行各种复杂的功能提供用户不同的交互体验。往往当你进入一家企业,很多情况并不是让你开发新的web程序,而是让你基于原有的成果开展工作,如果代码不具备可维护性,那么此项工作就会变得相当难以进展。 那么什么是可维护性呢?它具有什么特征呢? - 易读易懂 —— 不需要原作者解释,就能直接读懂源代码,并能轻松基于这些源码开展下一步工作; - 可扩展 —— 代码的构架能适应未来功能的扩展; - 数据灵活性 —— 改动代码中的某些数据,只需修改少量代码而... 阅读全文

javascript习惯性的细节问题 —— 重谈细节,别只顾优雅

2013-04-17 18:28 by MoltBoy, 595 阅读, 收藏, 编辑
摘要: 晚饭之前,浏览了下博客园,阅读了梦想天空(山边小溪)翻译的《JavaScript初学者应注意的七个细节》的原文,写的非常不错。平常不注意的点点习惯,可能积累到最后成为致命的问题。正所谓,小病不医成大患,一定要防微杜渐。 一、简化代码 这是每个程序员最起码的素养和习惯,随着经验的不断丰富,一定学会回顾总结,写出简洁高效的代码。要想成为杰出的IT人员,忌讳只为完成任务而工作,除非你只是为了混口饭吃!至于如何简化代码,可以坚持阅读行业顶级人士的代码风格和习惯,当然不只是为了简洁代码而做这些工作,懂其然懂其所以然! 具体如何简化,山边小溪已经列举了部分例子,另外可以灵活地使用“||”-逻辑或... 阅读全文

最简单的手风琴效果 —— 无动画

2013-04-16 20:39 by MoltBoy, 478 阅读, 收藏, 编辑
摘要: 试验CSS效果时,顺便试试这样的效果,居然可以实现类似的手风琴效果,只是不是具体控制,因而没有动画效果!纯属娱乐,毫无技术含量!<html><head> <title></title> <style type="text/css"> body{margin: 0;padding: 0;} table{margin:20px auto;width:730px; hieght:200px;border: #F00 solid 2px;padding: 3px;} table td{width: 50px;height: 阅读全文

Javascript动画系列之 —— lightbox实现(一)

2013-04-15 00:14 by MoltBoy, 600 阅读, 收藏, 编辑
摘要: 随着DOM和动态JS、CSS操作的出现,网页的交互性效果变得越来越强大,而比较明显的体会就是日渐丰富多样的图片查看和浏览方式。貌似印证了某句名言:只有你想不到的,没有你做不到的,当然前提是都在如今的技术规范之内。 那lightbox是什么样的效果,内部的实现原理是什么,总结起来无非这么几点: ①、当点击图片时,就会弹出一个图片覆盖层,而不是直接进入实际图片; ②、图片覆盖层显示之时,一个半透明的灰层覆盖整个页面(opacity),模糊化被覆盖的页面内容; ③、图片覆盖层会有一些从图片到图片的导航方法。 Lightbox的出现刺激了其他多种类似的图库的发展,这个图库并没有使用任何框... 阅读全文

javascript动画系列之 —— 获取坐标

2013-04-12 16:45 by MoltBoy, 622 阅读, 收藏, 编辑
摘要: 最近公司业务需要,不得不提前原来的计划,提前开始研究无框架的Javascript动画。不使用任何框架,就算实现一个简单的slide和fide都需要大费周章,但感觉乐在其中,毕竟曾经接触过flash开发。 跟flash一样,动画的原理就是由一帧一帧静态画面连贯组成的貌似动态效果,其实放慢足够的倍数,就一张张静态画面。看过胶片式电影的朋友都明白,只要每秒超过24帧,而其间的间隔人眼难以觉察到。关于动画原理,这里就不加赘述了。 想把元素框移动起来,首先要找到元素框的位置,也就是元素框在页面的坐标,不同的参照物有不同的坐标位置。先来普及几个基本概念吧! offsetWidthclientWi... 阅读全文

javascript表单之 —— 选择框操作方法详解

2013-04-11 15:10 by MoltBoy, 1022 阅读, 收藏, 编辑
摘要: 表单元素的选择框有单选和多选之分,都是通过<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, 983 阅读, 收藏, 编辑
摘要: 在前端开发中经常会遇到限制文本框输入特定的字符类型,或者过滤某些字符。而HTML提供的文本框本身没有验证的手段和功能,因此必须使用JS来完成这项功能,完善此项功能还得综合运用事件和DOM接口。废话不多说了,看看如何让普通的文本框变成完美的输入功能控件。 一、屏蔽字符 过滤掉某些不需要出现的字符。例如:手机号码不能包含非数字字符,邮政编码也是如此。响应文本框输入字符操作的是keypress事件,因此,可以通过阻止这个事件的默认行为来屏蔽此类字符的输入。下列代码为只允许用户输入数值:(本文重思路轻代码,都是用DOM0级的事件方式,如需兼容各浏览器的实现代码,请另外联系) elemen... 阅读全文

透过Javascript一些变量定义及简单运算实验看JS内部运行机制

2013-04-07 20:16 by MoltBoy, 416 阅读, 收藏, 编辑
摘要: 非常经典的几道面试题: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, 668 阅读, 收藏, 编辑
摘要: CSS中float是在一系列详细规则控制浮动元素的摆放位置,可以想象成一个氢气球在封闭盒子里漂浮的平面图。具体的规则有如下几点:1、浮动元素的左边(右边)外边界不能超出其包含块的左边(右边)的内边界,绝对不会越位溢出的。什么?什么叫包含块?不知道的朋友到前面几篇帖子看看。2、浮动元素的左边(右边)外边界必须是包含块中之前出现的浮动元素的右边(左边)外边界,请注意前后出现的左右的顺序,也就是说只能挨着先出现的浮动元素的右边边界摆放,除非后出现的浮动元素的顶端在先出现的浮动元素的底端下面。如此,浮动元素之间就不会发生重叠,这也是浮动相比定位的优势所在。另外,浮动元素与其他元素不会发生折叠。3、左浮 阅读全文

简单的几个案例,对动态添加HTML进行了性能比较(包括innerHTML)

2013-03-31 23:06 by MoltBoy, 966 阅读, 收藏, 编辑
摘要: 在网上查阅了不少关于innerHTML的性能比较,一直只是间接的得到结果,今天就自己动手写了下非常简单的几个动态添加HTML方法的性能比较,当然,这其中的有许多考虑不周的地方,纯粹是为了比较运行时间,并没有考虑内存等资源的消耗,算不上真正的性能比较!下次有时间,进行个完整的性能测试,包括CPU,内存等资源消耗... 废话不多说了,代码里面有动态添加HTML的方法的简单说明,少了几种比较复杂的方法,例如:利用cloneNode(),理论上比直接create性能能提高30%左右,当然不同的浏览器实际测试时间很大不同。下面看看详细的测试代码!<html> <head> ... 阅读全文