摘要： 基础知识点 关于 prototype __proto__供js新手参考JavaScript 的一些基础知识点：在 JavaScript 中，所有对象 o 都拥有一个隐藏的原型对象（在 Firefox 中是 o.__proto__）。该隐藏原型对象拥有一个 constructor 成员，指向该对象的构造函数。当读取对象成员 o.member 时，会顺着原型链往上回溯。因此我们可以得到o.constructor === o.__proto__.constructor. 这是最基本的知识点，不多说。在 JavaScript 中，所有函数声明在解析后，都自动拥有一个 prototype 成员。该 pr 阅读全文

摘要： 用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 阅读全文

摘要： 前面有转载玉伯的 一篇关于 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... 阅读全文

摘要： 您或许正在或准备参与一个WepApp项目，您或许正在Google搜索mobile development相关的文章，您或许是一名专业的WEB前 端工程师，您或许想学习Mobile前端开发方面的技术，如果您被我说中了，呵呵那么这篇文章将为您带来意想不到的惊喜！当您看到这篇文章时，哥已经默认 认为您是一名资深的WEB前端工程师，如果您不是，可能您会遇见许多不理解或听不懂的专业术语或前端技术（包括WEB、Mobile）。但是这没有关系， 给自己一点信心吧，用心的阅读下去……自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形 阅读全文

摘要： 现在的canvas开发，没有成熟的工具，如果要做动画，就要写原始脚本来实现，蛋蛋的忧伤。学着从0开始来做动画引擎资源，如下这张图----------------------------------我的可爱的分割线--------------------------------------这个简单的动画引擎，主要是想实现canvas开发中，开发可以像平时用div一样的实现元素的嵌套，我用一个Bitmap.js 类 来 做 类似 img，还有一个sprite.js类，来做类似flash里面的moveclip的电影帧播放，sprite实现了各自不同的帧率。在下面的demo中，你可以看到两个跑步速率不 阅读全文

摘要： #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 阅读全文

摘要： 【连接】本文转自豆瓣社区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，学术一些 阅读全文

摘要： 众所周知，javascript是不支持二进制文件和数据的。传统的做法，是把二进制文件转成字符，然后在浏览器里，通过某些技巧把对应字符串换成数字，然后做其它处理（传统方法会在后面讲到）。这种处理方式不标准，需要某些“技巧”，甚至通过“欺骗”浏览器才能实现。随着浏览器的进化，出现了新的方案。XMLHttpRequest Level 2增加了对二进制数据的上传和下载支持，它可以和File System API,Web Audio API等配合使用。我们的新方案就利用它这个功能。先睹为快，这里是个demo.XHR2方案XMLHttpRequest Level 2引入responseType和respo 阅读全文

摘要： WebSocket是用于浏览器或其他客户端，建立与web服务器的双向、可靠通信渠道的协议。与其他方法相比的最大好处是，不需要使用多个XML HTTP请求来完成，或者是必须让一个正常的HTTP链接尽可能长时间的保持Open. 历时11年，WebSocket终于被批准成为IETF的建议标准：RFC6455.其前身是WHATWG （Web Hypertext Application Technology Working Group）的工作。而Web Socket的API,是W3C的工作。 WebSocket可以只打开一个到服务器的链接，并且在此链接上交换信息。其优势在于减少了传统方法的复杂性，提.. 阅读全文

摘要： 以前写弹出层的时候，有用过，就是查询 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 阅读全文

摘要： 现在做跨域，说不会jsonp都不好意思。 那么getJSON 是可以做jsonp的getJSON("xx.com?jsoncallback=?",function(){ xx00 }); jq只有在url里发现有 =? 的时候，才会启动jsonp模式，然后把后面的回调函数赋 给 一个 临时 的全局变量 jsonp+new DATE(); 然后用这个全局变量替换了 =？ 中的 ？然后发送请求。 注意，jsoncallback=? 这里的jsoncallback不是必须的，可以自定义你也可以是_callback=? ，唯一必须的是 =? 这个，jq只有在url 里面发现了 这个 阅读全文

摘要： 我们知道javascript是通过语句来构造代码的组织结构的，这种组织结构的基本形式是“代码分块”,而代码分块带来的语法效果，是信息隐藏。一般来说，所谓信息隐藏指的是变量或者成员的可见性问题，而这个可见性的区间，则依赖语法的称述，这被称作作用域，这是对作用域的一种通俗描述，作用域包括语法作用域和变量作用域两个部分，这两个部分是一个语言中，模块化层次的全部体现。javascript中的语法作用域有四种，大部分被严格限制在“语句/批语句”作用域内，with就在其中。其实如果代码可读性好的代码，with是个非常有用的语句，但是目前很多网上文章包括 犀牛书，都不推荐使用with，这是为什么。至少我是经 阅读全文

摘要： 内网的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的问题解决办 阅读全文

摘要： 在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 阅读全文

摘要： 一、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 阅读全文

摘要： Js开发在整个行业的现状主要的有两点ž维护成本高ž多人协作项目的困境Js项目维护成本过高经历过10年的ie统治时期的浏览器世界一成不变，和06年开始ajax的兴起带动垂死的javascript的复兴，浏览器市场也开始翻天覆地的快速变化，排版引擎和js脚本引擎开始得到不断的优化，js的执行效率不断的得到提高，但是………..我们的js一直没变过. 现在所有的主流 Web 浏览器都遵守 ECMA-262 第三版，即实现的是JavaScript 1.5版 时间 2000ž那么，js依然是当年的js，浏览器和对web的需求早已经不复当年。当年那个为做表单验证而生的js语言，如今承担的是复杂的界面ui和交 阅读全文

摘要： 关于canvas的save()和restore()，前面一直以为canvas的画面也会保存，然后restore后把画面恢复，那么就这样把自己给绕进去了，那么save和restore之间的操作还有何意义？？？ 摸爬滚打后理解了save 保存的是画布的坐标旋转缩放 以及fillstyle 和 其他等等的相关属性，已经画好了的图画不在之列。做了个菊花 和 前面做的图片旋转移动 的 demo 来巩固下。依然先看效果---------------------代码分割线--------------------------------------------------------------------- 阅读全文

摘要： 一张 图片，在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 ... 阅读全文

摘要： 像这样，你很可能切片的数据不对 导致 切片的范围 超出了 图片本身的范围，那么在chrome下，这个切片drawImage的时候 会是什么都没有，和没有drawImage一样，chrome默认你啥都没找到，这点在开发中是需要留意下的 阅读全文

摘要： 我们都知道 ， 对象的属性读写在原型链上操作方式。我们先来回顾下。值的赋予对象的命名属性可以通过为该命名属性赋值来创建，或重新赋值。即，对于：var objectRef = new Object();//创建一个普通的 JavaScript 对象。可以通过下面语句来创建名为 “testNumber” 的属性：objectRef.testNumber = 5;/* – 或- */objectRef["testNumber"] = 5;在赋值之前，对象中没有“testNumber” 属性，但在赋值后，则创建一个属性。之后的任何赋值语句都不需要再创建这个属性，而只会重新设置它的值 阅读全文

摘要： combo是为了减少请求数, 但是全combo成一个不好, 最佳实践还是合理拆分成几个文件, 真实环境里能减小加载总时间, 并在一定程度上提高 浏览器端缓存的利用率; 现在seajs的例子里都是用的config的preload来支持服务器端combo, 但是有个问题: seajs要等preload数组里所有项目都加载完, 才会开始处理具体的seajs.use调用, 比如: seajs.config({ preload: ['m1', 'm2+m3'] });seajs.use(['m1'], function(m1) { /*位置1*/ }); 阅读全文

摘要： Canvas 相当有趣的一项功能就是可以引入图像，它可以用于图片合成或者制作背景等。而目前仅可以在图像中加入文字（标准说明中并没有包含绘制文字的功能）。只要是 Gecko 支持的图像（如 PNG，GIF，JPEG等）都可以引入到 canvas 中，而且其它的 canvas 元素也可以作为图像的来源。引入图像只需要简单的两步：第一当然是来源图片，不是简单的 URL 路径，但可以是一个 JavaScript 的 Image 对象引用，又或者其它的 canvas 元素。然后用 drawImage 方法将图像插入到 canvas 中。先来看看第一步，基本上有四种可选方式：引用页面内的图片我们可以通过 阅读全文

摘要： 在真正开始之前，我们需要先探讨 canvas 的网格（grid）或者坐标空间（coordinate space）。在前一页的HTML模板里有一个150像素宽， 150像素高的 canvas 对象。我在画面上叠加上默认网格，如右图。通常网格的1个单元对应 canvas 上的1个像素。网格的原点是定位在左上角（坐标(0,0)）。画面里的所有物体的位置都是相对这个原点。这样，左上角的蓝色方块的位置就是距左边x像素和距上边Y像素（坐标(x, y)）。后面的教程中我们将学会如何把移动原点，旋转以及缩放网格。不过现在我们会使用默认的状态。canvas 只支持一种基本形状——矩形，所以其它形状都是有一个或多 阅读全文

摘要： <canvas>看起来很像<img>，唯一不同就是它不含src和alt属性。它只有两个属性，width和height，两个都是可选的，并且都可以DOM或者CSS来设置。如果不指定width 和 height，默认的是宽300像素，高150像素。虽然可以通过CSS来调整canvas的大小，但渲染图像会缩放来适应布局的（如果你发现渲染结果看上去变形了，不必一味依赖CSS，可以尝试显式指定canvas的width 和 height 属性值）。id 属性不是<canvas>专享的，就像标准的HTLM标签一样，任何一个HTML元素都可以指定其id值。一般，为元素指定i 阅读全文

摘要： 1）网络之间的联系越来越紧密2012年，HTML 5将会增加对更多实用API的支持，让网站彼此连接。例如，Facebook上运行在iframe标签中的Zynga游戏，通过使用新的postMessage API，将可以直接在Facebook框架内进行通信。而在HTML 5之前，窗口内的通信必须依赖远程服务器，或许借助让人爱恨交加的黑客。除API外，HTML 5还将新增跨域资源共享(Cross-Origin Resource Sharing，即CORS)，这将有助于实现不同网站之间的信息共享。例如，通过CORS，初创企业可以为用户提供照片编辑服务，从Facebook上下载照片、编辑修改、重新上传。 阅读全文

摘要： html5，喊啊喊，喊的好久了，我们一帮jser也在后面摇旗呐喊了多年，但是事情总是很缓慢的在往前发展，但是毕竟它还是在发展的。奶奶的。从n久之前，已经不只n遍下过决心要学习要系统的学习html5了，逛各大网站，翻w3c文档，但是每次都是热火一会又放下了，因为我的工作是要兼容ie6的，国内的ie6是占了50%以上市场份额的，于是，每次给自己鼓起了百倍的信心要学htm5的先进生产力，但是不久又还是偃旗息鼓的回去捡起被我吐槽了一百遍一百遍的ie6继续过着jser的刀耕火种的日子.........前面和武汉的一同事聊html5，我一直以为我这么久的在关注html5的发展，应该对其还是有一定了解的，探 阅读全文

摘要： 在一些很小的项目里，连用jquery都还觉的大的时候，你就可以用我的这个库了。一个库或者框架，是应需求而生的，当你的项目实际上只需要简单的一个好用的选择器 一个ajax 封装 一个兼容的事件封装的时候，你当然就会觉的jquery都太臃肿了，好吧，我那jquery剥离了这几个功能出来，本来我是只剥离jquery的domready 的， 但是发现这个东西牵扯到了jquery的事件模型的封装，那我就把jquery的事件也一并的剥离了下来，然后自己写了一个ajax封装。ok，一个最简单的js开发库成型了。代码在下面： /* * 简易的开发js库 暂命名为 --- 呃没有命名 * $选择器,aj... 阅读全文

摘要： 一个弹出框，圆角，带阴影，还半透明的阴影，那么，你肯定会想到用png了，是的，ie下，大家别无他法。一般会这样来做<div id=”box” style=”背景图片，if==ie6（加滤镜）”><div id=”boxcenter” style=”">这里是弹出框的内容</div></div>ok,一个漂亮的圆角阴影半透明的弹出框出来了，但是，在ie6下面，你会发现这个弹出框只可远观而不可亵玩，你 里面的按钮啊什么的都无法捕捉到你的鼠标事件，杯具发生了。你在里面的按钮啊什么的都用不了。为什么？这个，真的很难说，归咎于ie6的私有滤镜了， 阅读全文

摘要： <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 阅读全文

摘要： 是这样的，一个大的盒子里面有两盒子，并成为子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>预设的效果是类似下面这样的嗯，你用上面 阅读全文