摘要：
昨天参加了hack day的一个比赛，赛制大致是：24小时，自由组队2~4人，任意发挥。运气比较好，拿了第三名和最佳创意奖。建议先看看这个demo，bug是有的，chrome下玩玩，测试测试就行，O(∩_∩)O~ DEMO：http://qianduannotes.sinaapp.com/3dtank/html/index.html基本效果:关于懒得去SAE上折腾，没把那另外一半的功能补上，不过我还是介绍下这几个没补上功能吧。 1. 音效。开始音乐是比较古老的坦克大战开机音乐。 ① 开始音效 点击播放 ② 发子弹 点击播放 ③ 击中坦克点击播放 ④ 爆炸 点击... 阅读全文
随笔分类 - JavaScript
删除数组中的某个元素
2013-05-31 23:55 by Barret李靖, 768 阅读, 收藏, 编辑
摘要：
在之前的文章中也介绍过类似的东西，主要操作的方式是利用splice这个便利函数。我们要删除，Arr数组中的元素b，具体做法是：//第一步是获取b在Arr中的位置var index = Arr.indexOf(b);//第二步就是利用splice删除该元素Arr.splice(b, 1);简单点写就是：Arr.splice(Arr.indexOf(b), 1); //这里的b可以是任意对象注：并非所有浏览器都支持indexOf这个函数，可能你需要自己写一个遍历函数获取到需要查询元素b的索引值。下面是我随便写的一个Array对象的扩展：Array.prototype.index = functio 阅读全文
JavaScript 键盘event.keyCode值列表
2013-05-29 22:23 by Barret李靖, 689 阅读, 收藏, 编辑
摘要：
疑问：keypress时的键值与下面列出的不一样，没具体研究！keydown和keyup时正常。网上收集的KeyCode值方便大家查找：常用：function direction(evt){ var evt = evt || window.event; switch(evt.keyCode) { case 37: case 65: return "left"; case 38: case 87: return "up"; case 39: case 68: ... 阅读全文
Javascript综合应用小案例（续）
2013-05-05 00:41 by Barret李靖, 1671 阅读, 收藏, 编辑
摘要：
上一篇文章，弄了一个 取词和 标红 功能的小应用，但是存在一些bug，今天修修补补，顺便也把ajax部分补上了~Demo地址：：http://qianduannotes.sinaapp.com/getKeyword/代码部分：var GetKeywords = { str: "", limit: 11, keywords:[], url: "./tool.php", //page id getId: function(){ this.id = this._("wp").getAttribute("data-page" 阅读全文
JavaScript垃圾回收机制
2013-04-27 15:14 by Barret李靖, 9637 阅读, 收藏, 编辑
摘要：
一、垃圾回收的必要性 下面这段话引自《JavaScript权威指南（第四版）》 由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。 这段话解释了为什么需要系统需要垃圾回收，JS不像C/C++，他有自己的一套垃圾回收机制（Garbage Collection）。JavaScript的解释器可以检测到何时程序不再使用一... 阅读全文
如何向开源社区提问题
2013-04-22 16:24 by Barret李靖, 1702 阅读, 收藏, 编辑
摘要：
大家提问题前，请仔细阅读下这篇文章。高质量的提问，不光有助于问题的快速解决，还能赢得社区的尊重。如何向开源社区提问题使用软件产品，或多或少都会遇到问题。对于商业产品，我们可以咨询客服寻求帮助。对于公司自己研发的产品，我们可以直接请教专家同事。但对于开源软件，在遇到问题时，如何才能及时有效地寻求帮助呢？本文以开源类库Sea.js为例，说说我心目中的最佳实践。提问前遇到问题时，心里都很着急。在决定向开源社区提交问题前，最好先做做以下功课：尝试从官方文档中找到答案确保自己阅读过至少一次官方文档。这样在遇到问题时，如果能回忆起只言片语，就可以再去读一遍相关文档，问题往往也就解决了。Google 是你的 阅读全文
JS动态构建一棵目录树
2013-04-22 11:17 by Barret李靖, 4616 阅读, 收藏, 编辑
摘要：
在使用frameset布局的时候，经常会用到目录树，我们可以把一棵树写死，但是更多的情况是，这棵树需要随时被改动，所以我们期望的是他能够被动态的构建。MVC，算是了解一点，那本文就把这棵树根据M-V-C给拆开分解吧。点击链接demo→下面就来看看这棵树是怎么构建的。 Module [数据层]var tree = { "id": 0, "a1": { "id": 1, "name": "a1", "children": { ... 阅读全文
利用XMLHttpRequest响应头部的Date来做倒计时
2013-04-13 13:46 by Barret李靖, 3909 阅读, 收藏, 编辑
摘要：
关键词：倒计时 XMLHttpRequest readyState Date AJAXProblem [问题描述]先看看这个：（搜狗团购网站）还剩多久多久，这个东西你是怎么做的。不推荐方案脑残方案一： 把截止时间保存到cookie中，然后与现在时间做差值，进行比较。 方案评价： 1. 如果用户cookie没开怎么办？ 2. cookie不宜过多，cookie过期管理等麻烦！脑残方案二： 把服务器的本地时间作为参数送到客户端，然后js相关处理 方案评价： 因网络延迟等原因存在误差屌丝看完变高富帅^_^ 先给你看一张图：（向服务器请求的某个任意文件）好像有的同学瞬间就... 阅读全文
JavaScript操控光标，你会么？
2013-04-11 17:15 by Barret李靖, 1484 阅读, 收藏, 编辑
摘要：
QQ群里经常有人问怎么设置textarea中光标的位置，所见即所得中如果选中文本。如果你也不会，请往下看：关键词：javascript 光标 位置 鼠标取词 createRange getSelectiongetPosition先上代码，你也可以测试下效果。这是一个Demo~<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>测试</title> <style type="text/css"> </ 阅读全文
摸透select和他的儿子们options
2013-04-11 13:59 by Barret李靖, 1249 阅读, 收藏, 编辑
摘要：
关键词：select option options selectedIndex remove add关于select的→API，自己去看，不多说了。select & option & optgroupoptgroup就是起到一个分组的作用。<!--common--><select id="s1"> <option value="--s--" selected="selected">----select----</option> <option value=" 阅读全文
打开窗口，关闭窗口
2013-04-10 16:06 by Barret李靖, 2185 阅读, 收藏, 编辑
摘要：
关键词：window.open() window.close() showModalDialog() 兼容性 测试等。 本文默认你对以上函数参数有基本了解。window.open window.open如果没有加第三个参数，则浏览器一般都会在新的标签页打开（除非你设置了新建窗口打开） 而有的时候，我们需要他弹出来。就想这个一样： 上述方式是：window.open(/*URL*/"",/*Name*/"",/*args*/"width=300,height=400"); 但是搜狗是不会挺你的话的，他不会新建一个你设定的窗口打开，而是在 阅读全文
JavaScript跨域（3）：HTTP access control (CORS)跨域
2013-04-09 11:08 by Barret李靖, 1532 阅读, 收藏, 编辑
摘要：
网上看了很多博客和文档，感觉还是Mozilla大大写的最简单、最好懂，不过文字很长。。 原文链接：https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS 要整篇翻译，我肯定吃不消，当然也没这个必要，下面就提要说一点吧，这个方法还存在兼容性问题，尽管有相应的解决手段，但是觉得用起来不是特别爽。Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource... 阅读全文
JavaScript跨域（2）：JSONP跨域
2013-04-03 22:02 by Barret李靖, 1444 阅读, 收藏, 编辑
摘要：
祭祖归来，继续细说跨域~ 话说上次我们讲到了啥玩意儿是跨域，至于怎么跨域还没开始动笔。今天就说说JSONP跨域。 JSONP（JSON with padding）是JSON的一种“使用模式”，它是非官方协议允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。 P.S： 1.楼主懂一点点php，所以DEMO中的后台语言就用PHP来演示。 2.为了方便测试，楼主弄了SAE和BAE。Prelude [前奏] 如果我们请求一个JSON数据：（SAE地址：http://qiandu... 阅读全文
JavaScript跨域（1）：什么是跨域，如何跨域
2013-03-31 19:05 by Barret李靖, 9826 阅读, 收藏, 编辑
摘要：
无数次看到：Origin null is not allowed by Access-Control-Allow-Origin, 网络没有让你绝望，但是或许会让你蛋疼，因为你找了半天没看到一个比较实用的解决方案，亦或者水平不够，别人写的东西累赘没看懂，抑或是。。。 网上看到了一篇文章——跨域资源共享的10中方式，已经放在自己的家里了O(∩_∩)O~ 跨域也是平时项目中比较让人头疼的一个玩意儿，上文只是简要地提出了有哪些跨域方式，这里呢，将向大家详细说明，各种使用频率比较高的跨域方式。 什么是跨域：Across-domain solution(CDS) is a means ofinf... 阅读全文
Javascript本地储存（3）：离线web应用
2013-03-30 13:03 by Barret李靖, 1798 阅读, 收藏, 编辑
摘要：
前两篇文章分别介绍了Cookie应用和另一种本地储存方式，无论是cookie、userData还是localStorage都是一段保存在客户端磁盘的一段文本，他们可以被主动删除，但是本文要讲的“应用程序缓存”是HTML5中新增的一个技术，他允许web应用将应用程序自身本地保存到用户的浏览器中，他是不会随着用户清楚浏览器缓存而被清除的。不像localStorage和sessionS只是保存web应用程序相关的数据，他是将应用程序本身保存起来——应用程序所需运行的所有文件（HTML、CSS、JavaScript、图片等）。——《Javascript权威指南（第六版）》Page-594 “应用... 阅读全文
JavaScript本地储存（2）：userData和localStorage
2013-03-28 23:25 by Barret李靖, 2635 阅读, 收藏, 编辑
摘要：
上文对cookie的知识进行了归纳，同时也提到了cookie的大小是有限制的。cookie 是有大小限制的，每个 cookie 所存放的数据不能超过4kb，如果 cookie 字符串的长度超过4kb，则该属性将返回空字符串。——上文提要 如果我们需要在客户端储存比较大容量的数据，怎么办？下面给大家介绍userData和localStorage的基本知识和一些应用。先说明下为什么把两个东西扯到一起说，因为后面写了个对象，把UserData和localStorage包装到了一起O(∩_∩)O~Conception [基本概念] 毫无疑问，无论是UserData还是localStorage都... 阅读全文
JavaScript本地储存（1）：cookie在前端
2013-03-27 12:13 by Barret李靖, 4766 阅读, 收藏, 编辑
摘要：
以前心里总是默念着这句：“知道资源在哪儿就是成功的一半”。对于很多知识的学习，好像也一直停留在知道它在哪儿的地步，看来现在需要有所改变了！ 那就从cookie开始吧~ Cookie（复数形态Cookies），中文名称为小型文本文件或小甜饼，指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端（Client Side）上的数据（通常经过加密）。定义于RFC2109（已废弃），最新取代的规范是RFC2965。Clasification [分类] 说到底，cookie就是保存在客户端的一段字符串（注意：不是数组）。 cookie可以手动设置，也可以由服务器产生，当客户端... 阅读全文
在Javascript中模仿接口（一）
2012-09-22 12:27 by Barret李靖, 315 阅读, 收藏, 编辑
摘要：
本文从ITeye导入在JavaScript中模仿接口——本文摘自《JavaScript设计模式》一、用注释描述接口/* interface Composite { function add(child); function remove(child); function getChild(index); } interface FormItem { function save(); }*/var CompositeForm = function(id, method, action){ //......};/... 阅读全文
如何设计一个支持方法链式调用的JavaScript库
2012-09-18 09:37 by Barret李靖, 395 阅读, 收藏, 编辑
摘要：
本文从ITeye导入可以先了解下javascript链式调用的实现方式//设计一个支持方法链式调用的JavaScript库/* 常见于大多数JavaScript库中的特性 ———————————————————————————————————————————————————————————————————— 特性 | 说明 ———————————————————————————————————————————————————————————————————— 事件 | 添加和删除事... 阅读全文
javascript链式调用的实现方式
2012-09-18 08:58 by Barret李靖, 1966 阅读, 收藏, 编辑
摘要：
本文从ITeye导入在我们所用到的库中，可以看到很多诸如$(window).addEvent('load', function(){ $('test').show().setStyle('color', 'red').addEvent('click', function(e){ $(this).setStyle('color', 'yellow'); });});的链式调用，那么这样的链式结构是怎么实现的呢，下面我们利用代码来探讨一番：先分解下，我们队$函数已经很熟悉了，他通常返回一 阅读全文