2013年8月2日
摘要: 基础知识点 关于 prototype __proto__供js新手参考JavaScript 的一些基础知识点:在 JavaScript 中,所有对象 o 都拥有一个隐藏的原型对象(在 Firefox 中是 o.__proto__)。该隐藏原型对象拥有一个 constructor 成员,指向该对象的构造函数。当读取对象成员 o.member 时,会顺着原型链往上回溯。因此我们可以得到o.constructor === o.__proto__.constructor. 这是最基本的知识点,不多说。在 JavaScript 中,所有函数声明在解析后,都自动拥有一个 prototype 成员。该 pr阅读全文
posted @ 2013-08-02 19:03 落叶满长沙 阅读(161) 评论(0) 编辑
2013年7月1日
摘要: 用raphael.js 给 svg画布里面添加个元素,嗯就圓好了,男人一般都喜欢圆形的东西,比如xx , xxx , 还有xxx$(document).ready(function() { var paper = Raphael(0,0,360,360); var myCircle = paper.circle(180,180,30).attr('stroke','#FFF'); myCircle.hover(function() { myCircle.glow().attr('stroke','#FFF'); }, functi阅读全文
posted @ 2013-07-01 19:08 落叶满长沙 阅读(1281) 评论(1) 编辑
2013年1月31日
摘要: 前面有转载玉伯的 一篇关于 new functionName 猜想的blog。 newFn() 的实际构造过程可以等价为以下伪代码:var o = {__proto__: Fn.prototype};Fn.apply(o);return o;但是有这么一个问题因为 整个 blog 的论点都是建立在,使用一个规规矩矩的构造函数的情况下。你知道的,js是弱类型语言,对于任何数据,都缺乏强制的类型检测,那么,如果function Dog(name) { this.name = name; Dog.prototype = { shout: function() { alert...阅读全文
posted @ 2013-01-31 18:54 落叶满长沙 阅读(142) 评论(0) 编辑
2013年1月14日
摘要: 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相关的文章,您或许是一名专业的WEB前 端工程师,您或许想学习Mobile前端开发方面的技术,如果您被我说中了,呵呵那么这篇文章将为您带来意想不到的惊喜!当您看到这篇文章时,哥已经默认 认为您是一名资深的WEB前端工程师,如果您不是,可能您会遇见许多不理解或听不懂的专业术语或前端技术(包括WEB、Mobile)。但是这没有关系, 给自己一点信心吧,用心的阅读下去……自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形阅读全文
posted @ 2013-01-14 15:28 落叶满长沙 阅读(633) 评论(0) 编辑
2012年10月11日
摘要: 现在的canvas开发,没有成熟的工具,如果要做动画,就要写原始脚本来实现,蛋蛋的忧伤。学着从0开始来做动画引擎资源,如下这张图----------------------------------我的可爱的分割线--------------------------------------这个简单的动画引擎,主要是想实现canvas开发中,开发可以像平时用div一样的实现元素的嵌套,我用一个Bitmap.js 类 来 做 类似 img,还有一个sprite.js类,来做类似flash里面的moveclip的电影帧播放,sprite实现了各自不同的帧率。在下面的demo中,你可以看到两个跑步速率不阅读全文
posted @ 2012-10-11 15:17 落叶满长沙 阅读(298) 评论(0) 编辑
2012年9月11日
摘要: #Typed Arrays- Other*Usage stats:GlobalSupport:58.43%JavaScript typed arrays provide a mechanism for accessing raw binary data much more efficiently.Show all versionsIEFirefoxChromeSafariOperaiOS SafariOpera MiniAndroid BrowserBlackberry Browser2.112.03.22.27.013.04.0-4.12.38.014.020.05.14.2-4.33.0C阅读全文
posted @ 2012-09-11 10:49 落叶满长沙 阅读(323) 评论(1) 编辑
2012年9月10日
摘要: 【连接】本文转自豆瓣社区http://www.douban.com/note/225494734/1、http://www.html5rocks.com/en/tutorials/webgl/typed_arrays/这篇写得比我好。2、至于一些很方便库,可以直接看aurora.js这个项目,为了解析音频文件,这个项目下了很大功夫...https://github.com/ofmlabs/aurora.js【前言】JS其实是众所周知的弱类型语言。所以一般来说不属于严肃编程领域,直到近年才受到关注,WEB 2.0以及很多新技术的兴起。把它抬上了严肃编程的范畴。这里主要记录最近碰到的JS,学术一些阅读全文
posted @ 2012-09-10 18:36 落叶满长沙 阅读(632) 评论(0) 编辑
摘要: 众所周知,javascript是不支持二进制文件和数据的。传统的做法,是把二进制文件转成字符,然后在浏览器里,通过某些技巧把对应字符串换成数字,然后做其它处理(传统方法会在后面讲到)。这种处理方式不标准,需要某些“技巧”,甚至通过“欺骗”浏览器才能实现。随着浏览器的进化,出现了新的方案。XMLHttpRequest Level 2增加了对二进制数据的上传和下载支持,它可以和File System API,Web Audio API等配合使用。我们的新方案就利用它这个功能。先睹为快,这里是个demo.XHR2方案XMLHttpRequest Level 2引入responseType和respo阅读全文
posted @ 2012-09-10 17:45 落叶满长沙 阅读(647) 评论(1) 编辑
2012年9月9日
摘要: WebSocket是用于浏览器或其他客户端,建立与web服务器的双向、可靠通信渠道的协议。与其他方法相比的最大好处是,不需要使用多个XML HTTP请求来完成,或者是必须让一个正常的HTTP链接尽可能长时间的保持Open. 历时11年,WebSocket终于被批准成为IETF的建议标准:RFC6455.其前身是WHATWG (Web Hypertext Application Technology Working Group)的工作。而Web Socket的API,是W3C的工作。 WebSocket可以只打开一个到服务器的链接,并且在此链接上交换信息。其优势在于减少了传统方法的复杂性,提..阅读全文
posted @ 2012-09-09 10:42 落叶满长沙 阅读(740) 评论(0) 编辑
2012年6月20日
摘要: 以前写弹出层的时候,有用过,就是查询 a , b 两元素是否有包含关系。回顾记录一下。比如一个弹出层,a 然后 点击除开a以外的任何地方就要把a给关闭了。那么,首先应该是给body添加一个click的处理函数用来接收事件的冒泡。然后 在这个处理函数内event = event? event: window.eventvar obj = event.srcElement ? event.srcElement:event.target; 这个obj 就是你点击的那个对象了然后,然后怎么判断?obj 就是a 以外的地方呢?两种方法,1,判断你的层在obj的parentNode的链里面,,或者就是ob阅读全文
posted @ 2012-06-20 11:14 落叶满长沙 阅读(525) 评论(0) 编辑
2012年6月11日
摘要: 现在做跨域,说不会jsonp都不好意思。 那么getJSON 是可以做jsonp的getJSON("xx.com?jsoncallback=?",function(){ xx00 }); jq只有在url里发现有 =? 的时候,才会启动jsonp模式,然后把后面的回调函数赋 给 一个 临时 的全局变量 jsonp+new DATE(); 然后用这个全局变量替换了 =? 中的 ?然后发送请求。 注意,jsoncallback=? 这里的jsoncallback不是必须的,可以自定义你也可以是_callback=? ,唯一必须的是 =? 这个,jq只有在url 里面发现了 这个阅读全文
posted @ 2012-06-11 17:38 落叶满长沙 阅读(514) 评论(0) 编辑
2012年5月23日
摘要: 我们知道javascript是通过语句来构造代码的组织结构的,这种组织结构的基本形式是“代码分块”,而代码分块带来的语法效果,是信息隐藏。一般来说,所谓信息隐藏指的是变量或者成员的可见性问题,而这个可见性的区间,则依赖语法的称述,这被称作作用域,这是对作用域的一种通俗描述,作用域包括语法作用域和变量作用域两个部分,这两个部分是一个语言中,模块化层次的全部体现。javascript中的语法作用域有四种,大部分被严格限制在“语句/批语句”作用域内,with就在其中。其实如果代码可读性好的代码,with是个非常有用的语句,但是目前很多网上文章包括 犀牛书,都不推荐使用with,这是为什么。至少我是经阅读全文
posted @ 2012-05-23 16:32 落叶满长沙 阅读(993) 评论(3) 编辑
2012年4月27日
摘要: 内网的linux系统要安装nodejs以及express等系列的框架,因为系统是局域网和互联网是物理隔离的,所以,没法像官网的安装教程那样直接install了,只能手动安装,这里已经我们自己的linux 系统suse10 为例:1 Nodejs环境搭建1.1 安装1) 从官网http://www.nodejs.org下载软件压缩包2) 安装命令tar -zxvf node-v0.6.15.tar.gz./configuremakemake install3) 默认安装目录/usr/local/bin//usr/local/lib/1.2 安装时提示openssl not found的问题解决办阅读全文
posted @ 2012-04-27 09:08 落叶满长沙 阅读(1526) 评论(0) 编辑
2012年4月24日
摘要: 在SuSE10上,源码编译安装nodejs0.6.10,使用./configure --prefix=/usr/local/, 提示:Checking for openssl: not foundChecking for function SSL_library_init: not foundChecking for header openssl/crypto.h: not found/usr/local/src/node-v0.6.10/wscript:374: error: Could not autodetect OpenSSL support. Make sure OpenSSL de阅读全文
posted @ 2012-04-24 17:43 落叶满长沙 阅读(416) 评论(0) 编辑
2012年4月13日
摘要: 一、requirejs初始化执行流程1 if (isBrowser)2 req(cfg)3 context.configure()4 context.require(cfg.deps || [], cfg.callback)5 resume()6 req.load7 req.attach(url, context, moduleName);二、require()细节1 可通过require.config方法配置baseUrl2 文件名一般不用加".js",如果有".js"文件一定是与引入requirejs的html在同一个目录三、够狠,一个newCont阅读全文
posted @ 2012-04-13 17:57 落叶满长沙 阅读(379) 评论(1) 编辑
2012年4月10日
摘要: Js开发在整个行业的现状主要的有两点ž维护成本高ž多人协作项目的困境Js项目维护成本过高经历过10年的ie统治时期的浏览器世界一成不变,和06年开始ajax的兴起带动垂死的javascript的复兴,浏览器市场也开始翻天覆地的快速变化,排版引擎和js脚本引擎开始得到不断的优化,js的执行效率不断的得到提高,但是………..我们的js一直没变过. 现在所有的主流 Web 浏览器都遵守 ECMA-262 第三版,即实现的是JavaScript 1.5版 时间 2000ž那么,js依然是当年的js,浏览器和对web的需求早已经不复当年。当年那个为做表单验证而生的js语言,如今承担的是复杂的界面ui和交阅读全文
posted @ 2012-04-10 11:44 落叶满长沙 阅读(8557) 评论(1) 编辑
2012年4月6日
摘要: 关于canvas的save()和restore(),前面一直以为canvas的画面也会保存,然后restore后把画面恢复,那么就这样把自己给绕进去了,那么save和restore之间的操作还有何意义??? 摸爬滚打后理解了save 保存的是画布的坐标旋转缩放 以及fillstyle 和 其他等等的相关属性,已经画好了的图画不在之列。做了个菊花 和 前面做的图片旋转移动 的 demo 来巩固下。依然先看效果---------------------代码分割线---------------------------------------------------------------------阅读全文
posted @ 2012-04-06 11:18 落叶满长沙 阅读(218) 评论(0) 编辑
2012年4月1日
摘要: 一张 图片,在canvas中 怎么 做 旋转 同时移动,直接上demo先。用chrome才看的到哦亲-----------------------------我是可爱的源码分割线------------------------------------ 1 var width = 600; 2 var height = 300; 3 var imgs = []; 4 5 var X = 74, Y = 74; 6 var X1=452,Y1=74; 7 var rotation=0; 8 var rotation1=0 9 10 ...阅读全文
posted @ 2012-04-01 16:27 落叶满长沙 阅读(231) 评论(1) 编辑
2012年3月29日
摘要: 像这样,你很可能切片的数据不对 导致 切片的范围 超出了 图片本身的范围,那么在chrome下,这个切片drawImage的时候 会是什么都没有,和没有drawImage一样,chrome默认你啥都没找到,这点在开发中是需要留意下的阅读全文
posted @ 2012-03-29 11:35 落叶满长沙 阅读(169) 评论(0) 编辑
摘要: 我们都知道 , 对象的属性读写在原型链上操作方式。我们先来回顾下。值的赋予对象的命名属性可以通过为该命名属性赋值来创建,或重新赋值。即,对于:var objectRef = new Object();//创建一个普通的 JavaScript 对象。可以通过下面语句来创建名为 “testNumber” 的属性:objectRef.testNumber = 5;/* – 或- */objectRef["testNumber"] = 5;在赋值之前,对象中没有“testNumber” 属性,但在赋值后,则创建一个属性。之后的任何赋值语句都不需要再创建这个属性,而只会重新设置它的值阅读全文
posted @ 2012-03-29 11:13 落叶满长沙 阅读(188) 评论(1) 编辑
2012年3月15日
摘要: combo是为了减少请求数, 但是全combo成一个不好, 最佳实践还是合理拆分成几个文件, 真实环境里能减小加载总时间, 并在一定程度上提高 浏览器端缓存的利用率; 现在seajs的例子里都是用的config的preload来支持服务器端combo, 但是有个问题: seajs要等preload数组里所有项目都加载完, 才会开始处理具体的seajs.use调用, 比如: seajs.config({ preload: ['m1', 'm2+m3'] });seajs.use(['m1'], function(m1) { /*位置1*/ }); 阅读全文
posted @ 2012-03-15 18:03 落叶满长沙 阅读(2863) 评论(1) 编辑
2012年3月13日
摘要: Canvas 相当有趣的一项功能就是可以引入图像,它可以用于图片合成或者制作背景等。而目前仅可以在图像中加入文字(标准说明中并没有包含绘制文字的功能)。只要是 Gecko 支持的图像(如 PNG,GIF,JPEG等)都可以引入到 canvas 中,而且其它的 canvas 元素也可以作为图像的来源。引入图像只需要简单的两步:第一当然是来源图片,不是简单的 URL 路径,但可以是一个 JavaScript 的 Image 对象引用,又或者其它的 canvas 元素。然后用 drawImage 方法将图像插入到 canvas 中。先来看看第一步,基本上有四种可选方式:引用页面内的图片我们可以通过 阅读全文
posted @ 2012-03-13 10:55 落叶满长沙 阅读(201) 评论(0) 编辑
2012年3月12日
摘要: 在真正开始之前,我们需要先探讨 canvas 的网格(grid)或者坐标空间(coordinate space)。在前一页的HTML模板里有一个150像素宽, 150像素高的 canvas 对象。我在画面上叠加上默认网格,如右图。通常网格的1个单元对应 canvas 上的1个像素。网格的原点是定位在左上角(坐标(0,0))。画面里的所有物体的位置都是相对这个原点。这样,左上角的蓝色方块的位置就是距左边x像素和距上边Y像素(坐标(x, y))。后面的教程中我们将学会如何把移动原点,旋转以及缩放网格。不过现在我们会使用默认的状态。canvas 只支持一种基本形状——矩形,所以其它形状都是有一个或多阅读全文
posted @ 2012-03-12 10:59 落叶满长沙 阅读(174) 评论(0) 编辑
2012年3月10日
摘要: <canvas>看起来很像<img>,唯一不同就是它不含src和alt属性。它只有两个属性,width和height,两个都是可选的,并且都可以DOM或者CSS来设置。如果不指定width 和 height,默认的是宽300像素,高150像素。虽然可以通过CSS来调整canvas的大小,但渲染图像会缩放来适应布局的(如果你发现渲染结果看上去变形了,不必一味依赖CSS,可以尝试显式指定canvas的width 和 height 属性值)。id 属性不是<canvas>专享的,就像标准的HTLM标签一样,任何一个HTML元素都可以指定其id值。一般,为元素指定i阅读全文
posted @ 2012-03-10 10:45 落叶满长沙 阅读(166) 评论(0) 编辑
2012年3月9日
摘要: 1)网络之间的联系越来越紧密2012年,HTML 5将会增加对更多实用API的支持,让网站彼此连接。例如,Facebook上运行在iframe标签中的Zynga游戏,通过使用新的postMessage API,将可以直接在Facebook框架内进行通信。而在HTML 5之前,窗口内的通信必须依赖远程服务器,或许借助让人爱恨交加的黑客。除API外,HTML 5还将新增跨域资源共享(Cross-Origin Resource Sharing,即CORS),这将有助于实现不同网站之间的信息共享。例如,通过CORS,初创企业可以为用户提供照片编辑服务,从Facebook上下载照片、编辑修改、重新上传。阅读全文
posted @ 2012-03-09 10:13 落叶满长沙 阅读(89) 评论(0) 编辑
2012年3月8日
摘要: html5,喊啊喊,喊的好久了,我们一帮jser也在后面摇旗呐喊了多年,但是事情总是很缓慢的在往前发展,但是毕竟它还是在发展的。奶奶的。从n久之前,已经不只n遍下过决心要学习要系统的学习html5了,逛各大网站,翻w3c文档,但是每次都是热火一会又放下了,因为我的工作是要兼容ie6的,国内的ie6是占了50%以上市场份额的,于是,每次给自己鼓起了百倍的信心要学htm5的先进生产力,但是不久又还是偃旗息鼓的回去捡起被我吐槽了一百遍一百遍的ie6继续过着jser的刀耕火种的日子.........前面和武汉的一同事聊html5,我一直以为我这么久的在关注html5的发展,应该对其还是有一定了解的,探阅读全文
posted @ 2012-03-08 15:17 落叶满长沙 阅读(1366) 评论(0) 编辑
摘要: 在一些很小的项目里,连用jquery都还觉的大的时候,你就可以用我的这个库了。一个库或者框架,是应需求而生的,当你的项目实际上只需要简单的一个好用的选择器 一个ajax 封装 一个兼容的事件封装的时候,你当然就会觉的jquery都太臃肿了,好吧,我那jquery剥离了这几个功能出来,本来我是只剥离jquery的domready 的, 但是发现这个东西牵扯到了jquery的事件模型的封装,那我就把jquery的事件也一并的剥离了下来,然后自己写了一个ajax封装。ok,一个最简单的js开发库成型了。代码在下面: /* * 简易的开发js库 暂命名为 --- 呃没有命名 * $选择器,aj...阅读全文
posted @ 2012-03-08 14:46 落叶满长沙 阅读(415) 评论(2) 编辑
2012年3月2日
摘要: 一个弹出框,圆角,带阴影,还半透明的阴影,那么,你肯定会想到用png了,是的,ie下,大家别无他法。一般会这样来做<div id=”box” style=”背景图片,if==ie6(加滤镜)”><div id=”boxcenter” style=”">这里是弹出框的内容</div></div>ok,一个漂亮的圆角阴影半透明的弹出框出来了,但是,在ie6下面,你会发现这个弹出框只可远观而不可亵玩,你 里面的按钮啊什么的都无法捕捉到你的鼠标事件,杯具发生了。你在里面的按钮啊什么的都用不了。为什么?这个,真的很难说,归咎于ie6的私有滤镜了,阅读全文
posted @ 2012-03-02 17:05 落叶满长沙 阅读(106) 评论(0) 编辑
摘要: <div style=”width:700px;height:700px;background:#00CC99″><div style=”background:#330066;width:500px;height:500px;”><div style=”float:left;background:#FF3366;”><div style=”width:300px;height:300px;”></div><div style=”width:100%;height:100%;background:red;position:abso阅读全文
posted @ 2012-03-02 17:04 落叶满长沙 阅读(367) 评论(0) 编辑
摘要: 是这样的,一个大的盒子里面有两盒子,并成为子left和字right吧,两都是50%的float:left;<style>.c {width:887px;height:100px;background:blue;}.l ,.r{width:50%;float:left;height:50px;background:red;}</style><div class=”c”><div class=”l”></div><div class=”r”></div></div>预设的效果是类似下面这样的嗯,你用上面阅读全文
posted @ 2012-03-02 17:04 落叶满长沙 阅读(135) 评论(0) 编辑