代码改变世界

随笔分类 - Javascript

kmdjs集成uglifyjs2打造极致的编程体验

2016-06-14 19:13 by 【当耐特】, 856 阅读, 收藏, 编辑
摘要:回顾 "上篇" 文章大概展示了kmdjs0.1.x时期的编程范式: 如下面所示,可以直接依赖注入到function里, 也可以直接在代码里把full namespace加上来调用,如: 而且,在循环依赖的场景,因为执行顺序的问题,会导致第一种方式注入undefined,所以循环依赖的情况下只能用fu 阅读全文

kmdjs和循环依赖

2016-06-13 18:26 by 【当耐特】, 831 阅读, 收藏, 编辑
摘要:循环依赖 循环依赖是非常必要的,有的程序写着写着就循环依赖了,可以提取出一个对象来共同依赖解决循环依赖,但是有时会破坏程序的逻辑自封闭和高内聚。所以没解决好循环依赖的模块化库、框架、编译器都不是一个好库、框架、编译器。 kmdjs的本质就是{},从{}扩展出的tree。从很早的版本就开始,是支持循环 阅读全文

observejs改善组件编程体验

2015-05-18 08:49 by 【当耐特】, 1628 阅读, 收藏, 编辑
摘要:传送门 observejs:https://github.com/kmdjs/observejs 本文演示:http://kmdjs.github.io/observejs/list/ 本文代码:https://github.com/kmdjs/observejs/tree/master/examp 阅读全文

transformjs:让天下没有难做的生意!不对,是特效!

2014-09-24 10:51 by 【当耐特】, 7136 阅读, 收藏, 编辑
摘要: 写在前面 transform是css3新增的一个属性,可是令开发者费解的是,其内部又有大量的属性如旋转、缩放、扭曲、平移,这也就导致了获取或者是设置transform中一个或者多个属性变得异常麻烦。 transform.js意义 让前端没有难做的特效 告别style.xxxTransform= 阅读全文

kmdjs指令大全

2014-09-22 10:31 by 【当耐特】, 1182 阅读, 收藏, 编辑
摘要:### 调试通过下面方式,可以输出kmdjs声称的类: 在kmd.js后面加上?debug可以在console面板查看到依赖关系和输出的class。### 依赖可视化通过下面方式,可以输出使用canvas绘制的项目依赖关系图: 依赖关系,甚至是循环依赖在图中都能体现出来。### 合并js... 阅读全文

kmdjs api reference

2014-09-21 09:23 by 【当耐特】, 1143 阅读, 收藏, 编辑
摘要:## 总览kmdjs的主要就两个API:kmdjs.config和define## kmdjs.configkmdjs.config是用于项目整体配置,一般的配置如下所示:```javascriptkmdjs.config({ name:"HelloKMD", baseUrl: "js"... 阅读全文

AMD and CMD are dead之KMDjs内核之分号

2014-07-16 17:28 by 【当耐特】, 930 阅读, 收藏, 编辑
摘要:在老版本的kmdjs中,强制了分号的要求。但是总感觉不爽,因为在开发Ket - Kmdjs Extension Tools的时候,总需要导入一些开源的库,然后痛苦就来了,总是报错,一查,就是缺少分号!!后来一想,既能jslint可以检测哪里缺少分号,那么是不是可以在使用jslint在缺少的地方加分号?把jslint当作库来用,而不是工具,所以立刻看了看jslint源码,然后码了一段: 上面... 阅读全文

AMD and CMD are dead之KMDjs内核之依赖分析

2014-07-13 21:10 by 【当耐特】, 1424 阅读, 收藏, 编辑
摘要:有人说js中有三座大三:this、原型链和scope tree,搞懂了他们就算是js成人礼。当然还有其他不同看法的js成人礼,如熟悉js的:OOP、AP、FP、DOP、AOP。当然还听说一种最牛B的js成人礼:熟悉jQuery……= =!因为$里面可以放下全世界,比如$(“全世界”)…这篇文章主要讲... 阅读全文

AMD and CMD are dead之KMDjs集成Blob一键下载全部build包

2014-07-06 14:58 by 【当耐特】, 1050 阅读, 收藏, 编辑
摘要:更新 不zuo,[A/C]MD就不会死,所以kmdjs赢来来其伟大的版本0.0.6,该版本主要的更新有: 移除去了kmdjs.get(..).then的支持,只支持kmdjs.get(…,function(){ }) 作此更改有三点目的: 1.让build之后js文件尽量小,因为可以省去promise库 2.让require.async的用户平滑过渡到kmdjs.get 3.k... 阅读全文

AMD and CMD are dead之KMDjs在JS工程化的努力

2014-07-03 12:20 by 【当耐特】, 1196 阅读, 收藏, 编辑
摘要:总览 kmdjs发布了最接近最终版本的0.0.4版本https://github.com/kmdjs/kmdjs,你已经完全可以在项目中使用。我已经无法用语言形容其完美程度。借用我发的微博: 模块管理 kmdjs仅仅需要一处配置,即main.js上部的kmdjs.config,用于配置项目名称、baseUrl,并且列出所有Class和其于路径的mapping。在开发桌面程序的时候,这个... 阅读全文

AMD and CMD are dead之Why Namespace?

2014-07-01 08:56 by 【当耐特】, 1309 阅读, 收藏, 编辑
摘要:缘由 当我看到_Franky兄的微博的时候: 我觉得我有必要出来详细说说KMDjs到底有什么本质上的优势了,连教主_Franky、貘吃馍香都不能理解他的好处,那么可想而知,在前端圈、或是全端圈、或是IT圈,能够理解KMDjs优势的码夫更加是屈指可数。 Why Namespace? KMDjs是能方便组织Namespace,并且Class Base。针对namespace,... 阅读全文

AMD and CMD are dead之KMD.js之懒

2014-06-30 10:05 by 【当耐特】, 1715 阅读, 收藏, 编辑
摘要:缘由 “懒”在软件设计中,有着重大的意义。最常见的两种“懒”,便是: 懒得计算 懒得加载 “懒得计算”常见于服务器端: 比如Multiplayer Online Role-PlayingGame,客户端主动计算,游戏服务器平滑过渡,在性能、游戏同步性找一个合适恰当的点。其目的是节约服务器端CPU、内存等的消耗,把许多消耗性能的计算分布在玩家电脑上; 比如cache,任何ca... 阅读全文

AMD and CMD are dead之KMD.js版本0.0.2发布

2014-06-28 18:55 by 【当耐特】, 1220 阅读, 收藏, 编辑
摘要:更新 正式从UglifyJS切换至UglifyJS2 增加依赖可视化功能 压缩代码更加方便 统一风格:如main的class名也不能省略 优化了kmdjs管道 修复了无数bug 通过src开启debug模式 代码格式强制分号结束,不然报错 问题 1.从UglifyJS切换至UglifyJS2,主要是Ug... 阅读全文

AMD and CMD are dead之JS工程化终极解决方案KMD.js版本0.0.1发布

2014-06-24 10:56 by 【当耐特】, 1283 阅读, 收藏, 编辑
摘要:回顾 经过两天晚上疯狂的开发调试,伴随着大量掉落的头发和酸痛的颈椎,KMD.js赢来了第一个稳定版本。在此期间KMD规范也有所修改和完善。 这两天主要完成的功能有: 按需加载 版本控制 模块管理 便捷调试 依赖打包 性能优化 依赖可视 在此,要感谢那些伟大的项目(虽然部分将要死去),但依然感谢: windjshttp://windjs.org/... 阅读全文

AMD and CMD are dead之KMD.js依赖可视化工具发布

2014-06-20 11:34 by 【当耐特】, 1133 阅读, 收藏, 编辑
摘要:使用 require("MyAapp.DepTree", function (DepTree) { DepTree(({ renderTo: "holder", width: "820", height: "580", data: [ { "name": "System" }, { "nam... 阅读全文

AMD and CMD are dead之KMD规范

2014-06-20 09:26 by 【当耐特】, 2393 阅读, 收藏, 编辑
摘要:What’s KMD? 乱世出英雄,KMD名字的由来充满了杀气。 Kill AMD and CMD KMD为替代混乱的AMD和CMD世界而生,一统天下。或者让这个混乱的世界更加混乱,导致: KMD AMD CMD三分天下 KMD的目标从来都是远大的: JS工程化终极解决方案 使用KMDjs的工程师从来都是: 尼玛,什么东西,这么NB? KMD规范 0.KMD只暴露两个关键字,一个是def... 阅读全文

AMD and CMD are dead之js模块化黑魔法

2014-06-16 09:28 by 【当耐特】, 6127 阅读, 收藏, 编辑
摘要:缘由 在2013-03-06 13:58的时候,曾甩下一片文章叫:《为什么不使用requirejs和seajs》,并放下豪言说发布一款完美的模块化库,再后来就把那篇文章删了,再然后就没有然后。该用seajs还用seajs,甚至我码的SCJ都是用requirejs组织起来的。 时光飞逝,岁月流... 阅读全文

码农干货系列【19】--Promise.js with AJAX

2013-05-05 10:12 by 【当耐特】, 3268 阅读, 收藏, 编辑
摘要:更新 新增Promise.timeout方法,检测task执行超时并且自动reject使用 Promise.timeout(f1(), 2000).then(f2, function () { alert("timeout"); }).wait(5000).then(f3); function f1() { var promise = Promise(); setTimeout(function () { console.... 阅读全文

码农干货系列【18】--getting started with Promise.js(总)

2013-05-03 15:30 by 【当耐特】, 4010 阅读, 收藏, 编辑
摘要:引用Promise.js 你可以点击这里下载。ps:如果使用了SCJ Framework,请使用SCJ.createPromise代替下面的Promisedone/resolvepromise.js提供了done和resolve方法,done负责注册成功的回调函数,resolve负责触发。 function cb() { alert('success') } var prms = Promise() prms.done(cb) setTimeout(function() { ... 阅读全文

码农干货系列【10】--光线追踪进阶:javascript玩转3D纹理映射

2013-03-18 07:59 by 【当耐特】, 6570 阅读, 收藏, 编辑
摘要:简介 本文在光线追踪的基础之上,为了追求渲染速度和效率,去除了光线的反射、去除了透视投影(如我前面两篇干货8和干货9,所以渲染虽然是3D场景,其实不是真实看到的,但不影响实验),进行了一些有趣的尝试。此文将分享这两天尝试的成果:3D雕刻。 3D雕刻,顾名思义--在... 阅读全文

码农干货系列【9】--javascript光线追踪基础

2013-03-12 16:31 by 【当耐特】, 3213 阅读, 收藏, 编辑
摘要:简介 光线追踪(ray tracing)(也叫raytracing或者光束投射法)是一个在二维(2D)屏幕上呈现三维(3D)图像的方法。为了尝试光线追踪算法,并且尽可能得保证javascript代码精炼,我做了一些尝试。 射线与球体相交检测 最开始尝试了射线与球体的相交检测(不计算交点),只判断相交还是未相交。代码如下所示: var Vector3 = function (x, y, z)... 阅读全文

码农干货系列【8】--世界上最简单的3D渲染(no webgl)

2013-03-10 21:02 by 【当耐特】, 4130 阅读, 收藏, 编辑
摘要:简介 进行上图所示的3D格子地板的渲染,需要进行Canvas的像素级别操作,从视点连接屏幕(屏幕就是canvas)中的所有像素点,形成大量的射线,倘若射线与地板相交,把交点以及交点的颜色反馈给屏幕(canvas)。如下图所示: 像素操作 在进行3D渲染之前,必须了解Canvas的像素操作相关概念。在给定了width和height的canvas上,在坐标(x ,y)上的像素的inde... 阅读全文

码农干货系列【6】--javascript异步编程之:世界上最短的Promise库

2013-02-24 21:12 by 【当耐特】, 6212 阅读, 收藏, 编辑
摘要:类库源码 var Promise = function () { this.thens = []; }; Promise.prototype = { resolve: function () { var t = this.thens.shift(), n; t && (n = t.apply(null, ... 阅读全文

码农干货系列【5】--lambda in js:lambda.js 1.0.0发布

2012-12-27 21:55 by 【当耐特】, 6193 阅读, 收藏, 编辑
摘要:lambda.js的由来 作为一个当耐特程序员,对lambda一定不陌生。随着当耐特版本的更新迭代,C#也由委托==〉匿名委托==〉lambda表达式。由于javascript语言的约束,没有提供相应的lambda的机制,所以就有了lambda.js,让广大jser也可以 (a,b)=>a.xx==”yyy”&&b>11 一把! Query Operator 而lambda最常用的地方就是... 阅读全文

码农干货系列【4】--图像识别之矩形区域搜索

2012-07-23 07:37 by 【当耐特】, 8231 阅读, 收藏, 编辑
摘要:简介 定位某个图片的矩形区域是非常有用的,这个可以通过手动的选择某个区域来实现定位,图片相关的软件都提供了这个功能;也可以像本篇一个通过程序来实现智能定位。前者会有误差,效率低下;后者选区精度高,效率高。 应用场景 1.精灵编辑器或者css sprites辅助工具(当我们需要逆着TexturePacker行事的时候),如下图所示: 2.手写识别输入 因为我们不能保证用户输入... 阅读全文

HTML5 OO实践

2012-03-29 08:42 by 【当耐特】, 7611 阅读, 收藏, 编辑
摘要:简介人工智能(Artificial Intelligence) ,英文缩写为AI。它是研究、开发用于模拟、延伸和扩展智能的理论、方法、技术及应用系统的一门新的技术科学。本篇从严格意义上说属于人工智能的范畴,但也是基础中的基础。本篇的目的是要赋予小球解散和集合两项基本指令(智商),本篇内容中相关算法适用于子弹追踪等塔防类游戏当中。基础类二维向量(2D vector)可谓2D游戏或是动画里最常用型别了。这里二维向量用Vector2类实现,用(x, y)表示。 Vector2亦用来表示空间中的点(point),而不另建类。先看代码:1 (function(window){2varVector2=fu 阅读全文

HTML5 Canvas【所见===所得】编程工具正式发布

2012-03-28 08:28 by 【当耐特】, 10945 阅读, 收藏, 编辑
摘要:+ - 使用指南 基本使用: var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18... 阅读全文

HTML5 【IE9割绳子】制作教程来袭····

2012-03-26 08:04 by 【当耐特】, 7854 阅读, 收藏, 编辑
摘要:回顾 与“Angry Birds”一样,2010年发布的“割绳子”是一款火爆的手机游戏,首先推出的是iOS版,于去年6月份推出Android版。它的游戏内容是:一个叫Om Nom的绿怪兽饿了,你必须喂他糖果,而要得到糖果,你要先割断绳子以及操纵安全气袋和泡泡,过程中还要收集星星来获取额外积分。 为了进一步宣传IE9和华丽的Web应用程序,微软与该款游戏的开发商ZeptoLab联合推出了HTML... 阅读全文

HTML5热门游戏制作---没有99美元的Impact也行

2012-03-06 08:38 by 【当耐特】, 8238 阅读, 收藏, 编辑
摘要:Impact 简介Impact is a JavaScript Game Engine that allows you to develop stunning HTML5 Games for desktop and mobile browsers.Impact 一款让开发者在桌面浏览器和移动终端浏览器开发优秀的HTML5游戏的javascript游戏引擎。官网地址:http://impactjs.com/售价:99美元其中的最受欢迎且耳熟能详的莫过于下面这款:这是一个打字射击游戏,该游戏被国外很多网站评选为二十款优秀游戏之一。综合分析了一下该款游戏,总体感觉----注重细节。游戏技术要素1.资 阅读全文

绕中心旋转

2011-12-12 07:33 by 【当耐特】, 21579 阅读, 收藏, 编辑
摘要:一.简介 本文告诉读者在Canvas中怎么绕中心旋转,通过此方法模拟出一个2D平面内的水珠,涉及的知识点和技巧包括:Jscex基础知识,贝塞尔曲线的绘制,合理利用CanvasRenderingContext2D的translate和rotate等API。 二.绘制椭圆 在模拟水滴之前,我们先思考一下怎么在canvas当中绘制一个椭圆。 大家可以很容易想到 下面几种方案: 1.根据椭圆笛卡尔坐标系方程绘制 2.根据椭圆极坐标方程绘制 3.根据椭圆曲率变化绘制 4.利用四条贝塞尔曲线绘制 第四中,也是性能最好的一种,这样可以避免复杂的计算,充分利用Ca... 阅读全文

HTML5游戏制作完全指南

2011-12-08 18:28 by 【当耐特】, 17446 阅读, 收藏, 编辑
摘要:简介 创建画布 游戏循环 Hello world 创建player 键盘控制 a:使用jQuery Hotkeys b:移动player 添加更多游戏元素 炮弹 敌人 使用图片 碰撞检测 声音 简介 你想使用HTML5的Canvas制作一款游戏吗?跟着这个教程,你将立刻上道儿。 阅读该教程需要至少熟悉javascript相关知识。 你可以先玩这款游戏或者直接阅读文章并且下载游戏源码。 创建画布 在画任何东西之前,我们必须创建一个画布。因... 阅读全文

怎么把CanvasLoading插件嵌入你的游戏

2011-12-07 17:01 by 【当耐特】, 3155 阅读, 收藏, 编辑
摘要:一.简介 CanvasLoading插件适用于任何基于Canvas游戏的loading过程展示。 二.插件源码 Loading = function (text, fontSize,baseFontSize, color, position, interval, font, bolder) { this.text = text; this.fontSize = fontSize; this.baseFontSize=baseFontSize; this.color = colo... 阅读全文

Jscex版Loading插件V11.12.05发布

2011-12-05 17:22 by 【当耐特】, 2760 阅读, 收藏, 编辑
摘要:一.简介 本插件适用于基于Canvas的游戏loading过程中的显示。 更新内容: a.loading显示的文字可配置 b.文字大小可配置 c.文字位置可配置 d.文字与文字的间距可配置 e.文字颜色、字体、是否加粗可配置 二.插件源码 Vector2 = function (x, y) { this.x = x || 0; this.y = y || 0; }; Loading = function (text, fontSize, color, pos... 阅读全文

Jscex版Loading插件预览版本抢先看

2011-12-04 17:30 by 【当耐特】, 2611 阅读, 收藏, 编辑
摘要:一.简介 在大量游戏制作过程当中,必不可少的一个重要元素就是Loading.在大量的flash游戏当中我们经常可以看到,比如《XXX》的Loading 一个好的Loading,可以给用户不错... 阅读全文

借来的创意

2011-12-01 08:54 by 【当耐特】, 3976 阅读, 收藏, 编辑
摘要:一.简介 计数是一种最简单基本的运算,计数器就是实现这种运算的逻辑电路,计数器在数字系统中主要是对脉冲的个数进行计数,以实现测量、计数和控制的功能,同时兼有分频功能,计数器是由基本的计数单元和一些控制门所组成,计数单元则由一系列具有存储信息功能的各类触发器构成,这些触发器有RS触发器、T触发器、D触发器及JK触发器等。计数器在数字系统中应用广泛,如在电子计算机的控制器中对指令地址进行计数,以便顺序取出下一条指令,在运算器中作乘法、除法运算时记下加法、减法次数,又如在数字仪器中对脉冲的计数等等。计数器可以用来显示产品的工作状态,一般来说主要是用来表示产品已经完成了多少份的折页配页工作。它主... 阅读全文

你必须知道的10个提高Canvas性能技巧

2011-11-29 17:07 by 【当耐特】, 22557 阅读, 收藏, 编辑
摘要:你还在抱怨自己写的canvas demo徘徊在10帧以下吗?你还在烦恼打开自己写的应用就听见CUP风扇转吗?你正在写一个javascript Canvas库吗?那么下面九点就是你必须知道的! 一.预渲染 错误代码: var canvas = document.getElementById("myCanvas"); var context = this.canvas.getContext('2d'); var drawAsync = eval(Jscex.compile("async", function () { while (true) 阅读全文

Text Particle Systems

2011-11-25 08:41 by 【当耐特】, 2752 阅读, 收藏, 编辑
摘要:一.简介 在一些企业广告或者网站需要一些动态文字特效的时候,往往有下面这几种选择: 1.Flash制作的文字特效 2.制作一个动态的GIF 3.Javascript+dom+css 4.SVG 二.javascript+Canvas文字特效 这篇我为大家介绍第五种,也是最强大的一种,上面四种都有局限性。 我使用的是javascript+Canvas,当然我们依然用Jscex,为什么Canvas制作文字特效最强大?? 因为Canvas支持像素级别操作,它不仅可以宏观上制作一些文字特效,也可以深入实现文字粒子系统特效----Text Particle Systems。 当然... 阅读全文

每周优秀代码赏析—Jscex内核【一】

2011-11-24 08:49 by 【当耐特】, 4925 阅读, 收藏, 编辑
摘要:一.简介 Jscex is JavaScript implementation of F#'s Computation Expressions. 它的灵感的源于F#,它为JavaScript语... 阅读全文

参赛作品

2011-11-22 07:29 by 【当耐特】, 5939 阅读, 收藏, 编辑
摘要:一.简介 3D贪吃蛇是贪吃蛇游戏的3D版本。通过摄取食物,累积数量来通关,随着摄取食物的增加,蛇身体会慢慢变长变肥大。游戏开放了许多快捷键,方便玩家操作。游戏一共七个关卡,一关比一关难。最后一关的随机障碍物更加是玩家的噩梦。为了获取更好的游戏体验,推荐使用谷歌浏览器或者枫树浏览器。 二.游戏框架和开发团队 这个游戏是使用Jscex作为动画引擎,使用Three.js框架作为3D引擎开发的HTML5游戏. 使用到的HTML5特性主要包括Canvas, CSS3 (按钮),没有使用WebGL。后期打算加入localStorage存储关卡信息。 在游戏中, 控制小蛇躲避前方的障碍物... 阅读全文

Canvas+Video打造酷炫播放体验

2011-11-21 08:32 by 【当耐特】, 15262 阅读, 收藏, 编辑
摘要:一.简介 直到现在,仍然不存在一项旨在网页上显示视频的标准。 今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。如: <video src="movie.ogg" controls="controls"></video>二.Canvas+VideoHTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。 drawImage函数有三种函数原 阅读全文

Jscex没有xxxAsync().stop()怎么办?

2011-11-17 22:09 by 【当耐特】, 2250 阅读, 收藏, 编辑
摘要:今天一同事问我Jscex怎么没有stop啊? 异步任务就像断线的风筝,我们没法让它说停就停,但是我们在放飞它之前,可以装个定时炸弹。 通常我们可以这样退出一个异步任务: va... 阅读全文

令人震撼的表白,你hold住吗?

2011-11-15 09:02 by 【当耐特】, 16648 阅读, 收藏, 编辑
摘要:一.简介 为什么程序员单身的多呢?因为面向对象的编程中,经常会遇到一个错误:找不到对象。 本文也属于单身程序员的福音范畴,让单身程序员勇敢示爱·····,但是老天保佑你的示爱对象不要用IE678~~ 本文动画效果全部基于Jscex,然后结合一些函数、粒子系统、重力场实现。下一篇带来作品讲解,本篇先饱饱眼福。 二.作品一:心碎 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head& 阅读全文

爱♥曲线,单身程序猿福音

2011-11-07 08:41 by 【当耐特】, 9400 阅读, 收藏, 编辑
摘要:一.笛卡尔♥ 笛卡尔(René Descartes)是17 世纪著名的法国哲学家、数学家,有着“现代哲学之父”的称号。笛卡尔对数学的贡献也是功不可没,他创造了解析几何,开创了数学、物理学、天文学、地质学等诸多学科的新时代。 传闻,笛卡尔曾流落到瑞典,邂逅美丽的瑞典公主克里斯蒂娜(Christina)。笛卡尔发现克里斯蒂娜公主聪明伶俐,便做起了 公主的数学老师, 于是两人完全沉浸在了数学的世界中。国王知道后,认为笛卡尔配不上自己的女儿,不但强行拆散他们,还没收了之后笛卡尔写给公主的所有信件。后来,笛卡尔染上黑死病,在临死前给公主寄去了最后一封信,信中只有一行字:r=a(1-sinθ)。 阅读全文

再说AutoComplete

2011-11-04 12:16 by 【当耐特】, 5158 阅读, 收藏, 编辑
摘要:一.简述 昨天support一同事,帮她的客户做类似下面的效果(自动完成): 以前在搜房的时候,弄过这个,调用楼盘字典: 这是一个小功能,也是一个大功能。因为它可以做大,也可以做小。 二.搜房的AutoComplete 比如上面我们看到搜房的这个就做大了,你要看到这样一个效果,其实搜房做了这么几件事: 1.数据库作业。把每天的楼盘字典存入XML,每个城市的对应一个X... 阅读全文

2011-11-01 13:57 by 【当耐特】, 3418 阅读, 收藏, 编辑
摘要:一.简介 圆锥,数学领域术语,有两种定义。 解析几何定义:圆锥面和一个截它的平面(满足交线为圆)组成的空间几何图形叫圆锥。 立体几何定义:以直角三角形的一条直角边所在直线为旋转轴,其余两边旋转形成的面所围成的旋转体叫做圆锥。该直角边叫圆锥的轴 。 二.圆锥模拟 通过以上两个定义,我可以模拟出圆锥上所有的点: var pointPositions = []; for (var i = -100; i < 200; i += 10) { var xTemp = getRandomNumber(-i, i); ... 阅读全文

WAVE

2011-10-31 10:53 by 【当耐特】, 3467 阅读, 收藏, 编辑
摘要:一.简介 波,在空间以特定形式传播的物理量或物理量的扰动。由于是以特定的形式传播,这个物理量(或其扰动,下同)成为空间位置和时间的函数,而且是这样的函数,即在时间t出现在空间r处周围的分布,会在时间(t+t┡)出现在空间(r+vt┡)的周围。 v一般说是个常矢量,就是有关物理量(或其扰动)的传播速度。物理量函数称为波函数,数学上它是一个叫波动方程的在特定边界条件下的解。 物理定义:某一物理量的扰动或振动在空间逐点传递时形成的运动。不同形式的波虽然在产生机制、传播方式和与物质的相互作用等方面存在很大差别,但在传播时却表现出多方面的共性,可用相同的数学方法描述和处理。 二.实现 ... 阅读全文

每周优秀代码赏析系列【二】----Jif

2011-10-30 12:06 by 【当耐特】, 3015 阅读, 收藏, 编辑
摘要:一.简介 Jif是一个轻量级的events,Jif提供了事件监听on、发送send和清空clear接口,我们可以为其扩展remove 等接口。 Jif也是观察者模式的一种优雅实现。 二.... 阅读全文

每周优秀代码赏析系列【一】----LINQ In Javascript

2011-10-20 19:49 by 【当耐特】, 7043 阅读, 收藏, 编辑
摘要:一.LINQ简介 LINQ,语言集成查询(Language INtegrated Query)是一组用于c#和Visual Basic语言的扩展。它允许编写C#或者Visual Basic代码以查询... 阅读全文

世界上最短的时钟代码!更短的,有木有?

2011-10-16 09:15 by 【当耐特】, 15115 阅读, 收藏, 编辑
摘要:一.简介Processing.js作者是John Resig,这是继Jquery之后,他的第二个力作。Processing.js提供了教学可视化的编程语言及运行环境。通过编写processing程序,教师可以将复杂的物理、化学、数学原理形象的展示给学生。比如绘制各种曲线图,波线,粒子,绘制分子结构,当然在生理卫生课上还可以绘制一群小蝌蚪在游泳等动态的图形。Processing.js是一个开放的编程... 阅读全文

javascript异步编程系列【十一】----HTML5 canvas编程入门游戏发布

2011-10-08 07:41 by 【当耐特】, 6062 阅读, 收藏, 编辑
摘要:一.简介1976年,Gremlin平台推出了一款经典街机游戏Blockade。游戏中,两名玩家分别控制一个角色在屏幕上移动,所经之处砌起围栏。角色只能向左、右方向90度转弯,游戏目标保证让对方先撞上屏幕或围栏。 听起来有点复杂?其实就是下面这个样子: 基本上就是两条每走一步都会长大的贪吃蛇比谁后完蛋,玩家要做的就是避免撞上障碍物和越来越长的身体。更多照片、视频可以看 GamesDBase 的介绍。 Blockade 很受欢迎,类似的游戏先后出现在 Atari 2600、TRS-80、苹果 2 等早期游戏机、计算机上。但真正让这种游戏形式红遍全球的还是21年后随诺基亚手机走向世界的贪吃蛇游戏—— 阅读全文

CnBlogs博文demo演示技巧比较:jsfiddle完胜

2011-10-07 20:46 by 【当耐特】, 20272 阅读, 收藏, 编辑
摘要:一.简介如果你是一名前端博主,你希望通过代码+演示来透彻的讲解一些技巧,并且无缝嵌入你的博客,那么jsfiddle是一个很好的选择。本文将比较博客园前端dev们各种演示方式,大家可以挑选自己喜欢的方式。二.jsFiddle简介jsFiddle的官方网站:http://jsfiddle.net/它包括了顶端的控制按钮,如下图:分别代表:运行、保存、重置、代码格式化,代码语法错误检查下面的4个windows你可以分别调试HTML,CSS,Javascript,右下角显示代码的运行结果。在左边的操作区,你可以选择相关的js类库,支持的还是相当全的。当然,也支持自定义的类库,这个很不错。这个工具可以有 阅读全文

HTML5实验室系列【目录】

2011-09-30 19:23 by 【当耐特】, 3852 阅读, 收藏, 编辑
摘要: 阅读全文

摄像机、投影、3D旋转、缩放

2011-09-23 08:18 by 【当耐特】, 19373 阅读, 收藏, 编辑
摘要:简述3D效果分两种,一种是伪3D骨架,一种是3D实体.3D骨架:是通过大量的计算将3D世界中所有点投影到二维平面中。3D实体:通过摄像机向投影面发射射线与世界中的物体交汇,把与物体交汇点的颜色渲染到投影面(光线追踪的基础) 。本系列的所有演示都是3D骨架,非3D实体。本文将穿插图片、公式、代码、演示... 阅读全文

javascript异步编程系列【十】—Jscex+Easeljs制作坦克大战

2011-09-15 08:01 by 【当耐特】, 5184 阅读, 收藏, 编辑
摘要:一.简介为了利用当今和未来的硬件,您可以对代码进行并行化,以将工作分摊在多个处理器上。 往往,并行化需要线程和锁的低级操作,但是Jscex不用,因为javascript这种解释型语言,仅仅需要一个线程来解释它,已其他线程无关,且不冲突!二.回顾上面介绍了一下Easeljs以及其优势,并且利用Easeljs+Jscex实现了坦克的右移以及开炮,但是还存在许多问题,比如移动不能开炮,开炮不能移动。这篇主要利用Jscex并行编程模型搭起游戏的基本框架,并且解决坦克的转弯和开火。三.架构设计昨天我仔细想了想,不管是任何东西,拆得越细就越好控制。如果使用Easeljs的tick(也就相当于Jscex的. 阅读全文

javascript异步编程系列【八】--Jscex版火拼俄罗斯

2011-09-09 07:13 by 【当耐特】, 6038 阅读, 收藏, 编辑
摘要:一.简介俄罗斯方块(Tetris, 俄文:Тетрис)是一款风靡全球的电视游戏机和掌上游戏机游戏,它由俄罗斯人阿列克谢·帕基特诺夫发明,故得此名。俄罗斯方块的基本规则是移动、旋转和摆放游戏自动输出的各种方块,使之排列成完整的一行或多行并且消除得分。由于上手简单、老少皆宜,从而家喻户晓,风靡世界。 二.需求分析(完全按照QQ游戏的制作,如下图:)三.技术分析与实现1.方块位置定位解决方案:建立盒子... 阅读全文

javascript异步编程系列【七】----扫盲,我们为什么要用Jscex

2011-09-07 08:45 by 【当耐特】, 5559 阅读, 收藏, 编辑
摘要:有人问我,不用Jscex是怎么把算法拆烂拆散的?为什么要用Jscex?为什么不用? 那么就从高中演讲冒泡培训说起吧··· 【冒泡排序】基本思想(以升序举例):§形象比喻:像水面冒泡一样每次从水底浮到水面.§具体而言:比较相邻的两个数据元素,反序则交换。经过一趟排序后,最小值元素移到最上位置,其他较小的元素也向最上端位置移动(一趟起泡) 。 §代码实现:对于有n个数据元素的数据序列,共需n-1趟排序... 阅读全文

javascript异步编程系列【六】----Jscex版愤怒的小鸟之冲锋陷阵鸟

2011-08-25 07:48 by 【当耐特】, 4298 阅读, 收藏, 编辑
摘要:上一篇的的主角=>红色小鸟:体型小,重量轻,进击弱,无殊效,可在迁移转变时祛除绿猪。 合适进击玻璃与木头,进击混凝土较弱。 黄色小鸟:体型较小,重量较轻,殊效为加快,应用进步击弱,应用掉队击中等。进击木头较强,进击玻璃与混凝土很弱。 对,没有错,它就这这篇文章的主角!   需求解析:冲锋陷阵鸟,在不点击加快的景象下,和红色小鸟样,当点击了加快按钮,X轴标的目标速度变成本来的3倍,Y轴标的目标变... 阅读全文

javascript异步编程系列【五】----Jscex制作愤怒的小鸟

2011-08-24 08:01 by 【当耐特】, 7969 阅读, 收藏, 编辑
摘要:Jscex真的能制作愤怒的小鸟?在我没有接触Jscex之前,我也不相信!但是只要解决了重力场运动和碰撞的两大物理问题,Jscex版的愤怒小鸟,那就是囊中之物。如果关注这个系列的话,在javascript异步编程系列【二】----Jscex模拟重力场与google苹果logo的比较中,模拟了苹果在重力场下的自由落体运动。那么我们可以轻松的帮它扩展一个水平方向上的速度.看效果请按: 可以看得出来,有点... 阅读全文

javascript异步编程系列【四】----Jscex+Jquery UI打造游戏力度条

2011-08-23 07:55 by 【当耐特】, 4319 阅读, 收藏, 编辑
摘要:如果大家玩过桌球类游戏的话,对力度条的概念一定不会陌生,如下图:还有竖直方向上的力度条,如下图:其实,类似的条条无处不在!比如进游戏时候的进度条、魔兽世界里法师施法过程中读的条等等······引入jquery ui,我们可以轻松得到下面这个静止的力度条:html: <div class="progressbar" style="width: 20%"></div>js: $(function(){$(".progressbar").progressba 阅读全文

javascript异步编程系列【二】----自由落体

2011-08-19 07:49 by 【当耐特】, 5964 阅读, 收藏, 编辑
摘要:重力场:地球重力作用的空间。在该空间中,每一点都有惟一的一个重力矢量与之相对应。各种网络游戏,不管是3D的还是第一视角的,或者横版游戏(如冒险岛),模拟一个重力场是必须的。先回顾一下谷歌在牛顿诞辰,logo换成了自由落体的苹果。<html><scriptlanguage="javascript">varh=0,v=1;window.setTimeout(aa,2000);functionaa(){vari=self.setInterval("bb()",25);}functionbb(){varf=document.getElem 阅读全文

javascript异步编程系列【一】----用Jscex画圆

2011-08-16 08:54 by 【当耐特】, 12928 阅读, 收藏, 编辑
摘要:一.简介 关注老赵的jscex很久了,jscex利用eval(str)的无限可能,从“$async” 到“async”,从不支持if else等 到支持 if else等·,jscex正在不断完善和优化当中。jscex完全可以投入生产环境了··二.画圆 昨天讲完pi,今天来画圆吧! 在支持html5的浏览器中执行下面代码:<!DOCTYPEHTML><html><body><canvasid="myCanvas"width="480"height="300"sty 阅读全文

新浪网易的评论块制作

2010-06-30 20:39 by 【当耐特】, 4087 阅读, 收藏, 编辑
摘要:最近老在项目表现层折腾,sql好久没写。不过没关系,产品要数据的时候也就是select xxx from tablename,然后身后苦苦等待数据的姑娘看见了select xxxx from tablename,身不由己地一阵狂赞-----好厉害啊。我猜她们在想:写一句话能出来这么多数据,技术牛B啊。隔行如隔山,这些赞美全当“春风过驴儿”。新浪的评论块如下图:网易的如下图:我做的的如下(借用了园里的页面哈):技术要点:1。因为 textarea里面不能放图片,所以和新浪的做法一样,选用iframe放内容,然后隐藏一个textarea用于提交。2 。JQqery tab 插件的使用(文盲... 阅读全文