Exodia-CSDN博客

翻译使用PhantomJS测试JavaScript

使用PhantomJS测试JavaScript教程说明主题：PhantomJS难度：容易预计完成时间：30分钟我认为我不需要说服你，测试你的JavaScript代码是一个好主意。但是，测试需要DOM操作的JavaScript代码有时候确是繁琐的。这意味着你需要在浏览器中测试代码而不能使用终端，对吗？错了，

2012-12-19 10:21:31 30772 3

原创有道词典导致webkit内核浏览器ctrl键的意外触发

昨日，做小工具开发的时候，在脚本中写了这么以下这么一段代码：$(‘body’).on(‘keydown’, function(ev){ if(ev.ctrlKey){ rangeSelect = !rangeSelect; this.Select(rangeSelect); }}); 代码主要功能是能够选择容器内的元素，支持两种

2012-10-14 16:09:41 4806 4

原创 Box2D基本概念的学习记录

Box2D基本概念的学习记录原文地址关于Box2DBox2D 是一个用于游戏的 2D 刚体仿真库。程序员可以在游戏中使用它,让物体的运动更加可信,让世界看起来更具交互性。从游戏引擎的视角来看,物理引擎就是一个为程序化动画 (procedural animation)的系统。Box2D是用C++开发的一款物理引擎, 而本文用的是Box2dWeb,即Box2D的JS版本。一些基本概

2013-04-06 12:11:03 3011

原创使用HTML5 Notication API实现一个定时提醒工具

在初识Chrome Notification API 这篇博文介绍了Notification API以及chrome的实现，同时也对相关的API做了一个简单的封装，在本文中将利用封装过的API实现一个定时提醒工具。工具的主要目的是：自己经常坐在电脑前，一坐就是好几个小时，希望有工具能够每小时提醒自己起来活动休息一会。主要功能有：用户可以设置周期性的提醒时间，比如

2012-10-07 21:39:40 5237 2

原创初识Chrome Notification API

chrome在很早之前就推出了桌面通知API，chrome自己的API标准可以参考这个链接：http://dev.chromium.org/developers/design-documents/desktop-notifications/api-specification ，同时notification也纳入了W3C的标准，目前还是草案，两者差别在于：W3C仅定义了Notification

2012-09-28 17:53:14 11757 1

原创攻克CSS记录（1）— 选择器

一直觉得自己CSS很搓很搓很搓~~~，入职后决心要加强，以前学CSS都是看比较实践的书籍，如《精通CSS》这些，大多是技巧，靠记忆~~ 发现这样学来实在是根基不牢，永远都要跟着别人后头走。个人觉得要在某个领域中强大，基础原理是必不可少的，于是有了本人第一篇CSS学习的文章，文章主要是根据《CSS权威指南》来对自己的一些不牢靠的知识进行记录巩固，发现对这本书真是相见恨晚，以前学CSS太浮躁了，地

2012-08-16 23:33:38 3424

原创浏览器，PHP, MYSQL字符编码的一些记录

以前PHP/MYSQL的时候就耳闻过一些中文编码的问题，不过一直都是前后统一的Unicode编码，所以也没遇到太多问题。这次正式入职，公司MYSQL使用的是gb2312的字符集，因此在插入中文的时候也遇到了一些问题。插入流程： 1、前台发起添加数据请求，数据中包含中文，编码为Unicode； 2、后台PHP脚本通过$_POST获得中文数据，接

2012-08-01 11:36:54 2964 1

原创每天挤一点，实现自己的selector函数（4）——表达式提取函数的实现

在（3）中说到对子表达式求值的步骤如下：1、输入子表达式字符串，如"div:last-child"，"ul"，"li.class"，2、对字符串预处理，除去两端空格，除去二元运算符两边多余的空格，3、获得第一项非二元组表达式组，上述为:"div:last-child"4、将非二元组分解为表达式，上述为"div"，":last-child"5、

2012-03-30 12:41:51 2172

原创每天挤一点，实现自己的selector函数（3）——子表达式的分析

在（2）中描述了选择器的基本思路和求值步骤，最关键的步骤在于对子表达式的求值，也就是实现XX.selector函数，下面说说思路：子表达式就是不带','的CSS合法字符串，形式为"expr1 binOp expr2 binOp expr3"，其中binOp是二元运算符，expr是由一元表达式组成的字符串，如："div > ul li.class"，XX.selector的目标就是求出

2012-03-24 19:48:46 1361

原创每天挤一点，实现自己的selector函数（2）——主要思路与基本结构

在（1）中进行了初步的语义分析，根据这几天反复的试验，，暂时选定了一个主要的算法流程来实现选择器，如下：输入：字符串exprs, 由','连接的选择符，形式为"expr1, expr2, expr3 .."如"div .main #x, div, [type]" 输出：符合选择符条件的DOM元素集合ret 1、将输入exprs以','

2012-03-22 22:23:27 1970

原创每天挤一点，实现自己的selector函数（1）-语义分析-v1.02(最后修改于2012年3月19日)

心血来潮的看了两章编译原理，就现学现用，试试自己实现下类似jQuery的选择器，凡事总有个过程，循序渐进慢慢来搞，这次先做个大致的函数结构，内部细节慢慢实现。能不能实现就随缘吧~~哈哈~~ 其实相对实现一个编译器的流程来说，实现选择器已经是非常之容易的了，大部分工作集中在编译器的第一步：词法分析。而且很多工作已经被简化了，如映射为词法单元。接着做一些简单的语法分析（

2012-03-18 01:22:23 2625

原创《Javascript:权威指南（影印版）》中的一个错误

P401,Line8-9：Like the onsubmit handler, onreset is triggered only by a genuine Reset button. Calling the reset() moethod of a form does not trigger onreset. 事实是，直接调用form的reset方法会触发对应的reset事件，但直

2012-01-01 10:25:22 2100

原创在chrome浏览器中，元素absolute/relative定位的一个BUG

前几日，用EXT的一个组件的API（setAutoScroll）设置容器滚动条属性（overflow）发现的这个问题。问题描述如下：··可能描述得有点乱，觉得描述有点糊涂的，可以直接复制代码自己操作下就很容易明白了。~~ 我们知道可以通过JS设置元素的overflow属性来设置是否显示滚动条，取值有auto, hidden, v

2011-11-30 13:07:07 7702

原创 2011年9月23日，百度前端面试题对话记录（3）

面试官:让你设计一个placeholder的input输入框，你该怎么设计？ placeholder知道吗？我：placeholder? 有点印象，记不清了~~~面试官：就是占位符文本，起提示作用的，在搜索输入框中经常见到。（注：如下图，这题也是今年的淘宝校招笔试题之一，从每次的面试中都是受益颇多~）我：大致是用户鼠标点击的时候，占位符文本消失，失去焦点的时候判断文本是

2011-11-22 16:33:12 4075 4

原创 2011年9月23日，百度前端面试题对话记录（2）

声明：时间有些久远，对话记录不是完整的，有些其实省略了很大部分的废话。面试官：知道AJAX么？我：知道，（这里让我咬文嚼字的说概念是说出不来的）大概意思就是异步请求或提交数据而页面不进行跳转。面试官：用AJAX,如何知道响应成功了？我：监听状态改变事件，判断返回值的状态码，一般是判断200和304状态妈。面试官：200和304

2011-11-08 17:21:03 15563 29

原创 FireFox中JS引擎对函数声明式的解析与其他浏览器的差异

在FireFox和FireBug中的一个Bug这篇文章中，偶然发现了FireFox下的函数声明问题，一直没有得到权威的资料来解决。11月26日面试新浪微博的时候，面试官也问到了这个问题，当然他没看我的BLOG，并从他口中得知，这个不是BUG，而是FF的Monkey引擎就是这样解析的，当然我的回答是：“个人推测，在FF下对语句快内的函数声明转化为函数表达式”。面试官说不是，当然也没给出具体答案

2011-10-30 11:56:24 4818 1

原创 2011年9月23日，百度前端面试题对话记录（1）

面试官：如何判断一个对象是否为数组。我：，说判断对象的constructor是否指向Array, 接着判断对应的特殊属性，如length,splice之类。（这里紧张了下，其实我最肯定会用instanceof判断的）面试官：这些都是很容易冒充的。我：那instanceof判断。面试官：嗯，在平常应用中，这个是没问题的，但是在极端或者非常特殊的情况下会出现问题，你知道

2011-09-24 22:22:18 5980 7

转载 setTimeout与setInterval在不同浏览器下的差异

setTimeout与setInterval是window对象的两个非常神奇方法，用于实现定时或延时调用一个函数或一段代码。（新手可能认为setTimeout与setInterval是javascript函数，这是错误的。新手容易将javascript对象函数与DOM对象方法

2011-09-20 11:56:12 2104

原创 WEB前端题集解答（2）

下面的题目来自淘宝,稍微做了下改动下面是一个网友积分列表，请用Javascirpt将列表积分从高到低重新排序，小王70 小李68 小张80 小四50 小五40 小六30 解决方案：首先要获得积分元素集合，即em元素集合；获得之后

2011-09-18 23:46:11 1920 2

原创《JavaScirpt》设计模式（7）——桥接模式

1、简介：桥接模式的作用在于“将抽线与实现分离开来，以便二者独立变化”。例如我们经常使用的各种跨操作系统的浏览器，比如FF，在Windows系统下，你可以用FF浏览器，在Linux下也可以使用FF，而两者的表现基本是没有差异的，提供的JS之类的接口也是相同

2011-09-18 23:28:35 1067

原创 WEB前端题集解答（1）

下面的题目来自阿里前端。1.用CSS实现布局让我们一起来做一个页面首先，我们需要一个布局。请使用CSS控制3个div，实现如下图的布局：2.用javascript优化布局由于我们的用户群喜欢放

2011-09-16 20:16:20 1908 4

原创《JavaScirpt设计模式》（6）——工厂模式

1、简介：一个类或对象往往会包含别的对象。在创建这种对象时，你可能习惯于使用常规方法，即用new关键字和类构造函数。问题在于这会导致两个类之间产生依赖性。比如：现在有几个PC生厂商，生产台式机，每个台式机的组成部分都是CPU、Hardisk、Mont

2011-09-13 20:19:59 945 1

原创利用window.name属性，实现用户页面跳转或刷新后，数据依然保留

很多朋友在做一些需要用户输入数据的页面时，都希望提交表单刷新后用户填写的信息依然存在，或者有时候从一个页面切换到另一个页面的时候需要获得上一个页面的数据，目前有几种办法能够保存页面跳转后依然保存填写的信息。大致的流程可以是这样，监听window的unl

2011-09-04 12:59:23 5032 2

原创 FireFox和FireBug的一个BUG

前几日，和朋友解说javascript预解析机制的时候，给了下面的示例代码：var a = 1;function a(){ alert(1111);};alert(a);毫无疑问，结果应该是弹出1，简单的说，浏览器在执行JS代码时，第一步先扫描代码块，遇到

2011-09-03 12:17:12 1587 2

原创《JavaScirpt设计模式》（5）——链式调用

用过JQuery的同学们肯定知道$这个函数了，也肯定知道JQ中方法的链式调用的强大，其实链式调用只不过是一种语法招数，能让你通过重用一个初始操作来达到用少量代码表达复杂操作的目的。这种技术包含两个部分：一个创建代码HTML元素对象的工厂，以及一批对这个HTML元素执行某些操作的方

2011-08-30 18:39:31 2226 3

原创《JavaScirpt设计模式》（4）——单例模式

1、简介单例模式是JS中最基本但又最有用的模式之一。这种模式提供了一种将代码组织为一个逻辑单位的手段。通过确保单例对象只存在一份实例，你可以确保自己的所有代码使用的都是同样的全局资源。2、最基本的单例相对于其他语言，在JS

2011-08-24 12:46:29 1047 1

原创《JavaScript设计模式》（3）——继承

1、简介在JS中继承是一个非常复杂的话题，比其他任何面向对象语言中的继承都复杂得多。在大多数其他面向对象语言中，继承一个类只需使用一个关键字即可。在JS中想要达到继承公用成员的目的，需要采取一系列措施。JS属于原型式继承，得益于这种灵活性，我们既可以使用标准的基于

2011-08-20 18:20:47 1224 2

原创《JavaScirpt设计模式》(2)——封装和信息隐藏

1. 简介：封装是面向对象设计的基石，封装是什么，封装有何用，这些常识性的问题在这里不做介绍。尽管JS是一种面向对象的语言，但是它不具备用以将成员声明为公用或私用的任何内置机制。与上篇讲述的接口一样，我们将自己想办法实现这种特性。这里主要利用了JS的闭包

2011-08-12 15:12:54 838

原创《精通JavaScript》总结

这书看完大概有半个月了吧，读书笔记只做到了前7章和第10章

2011-07-26 17:18:49 778

原创《JavaScript设计模式》(1)——接口

1. javascript接口简介在javascript中没有内置的创建或实现接口的方法，同样也没有内置的方法可以用于判断一个对象是否实现了与一个对象相同的一套方法，这使对象很难互换使用。由于javascript的灵活性，添加这些特性并非难事。关于什么是接口，

2011-07-26 16:48:05 4259 2

原创《精通JavaScript》读书笔记(六)

使用Ajax使用Ajax的步骤主要有：创建Ajax对象，Ajax对象打开连接，Ajax对象发送数据，Ajax获得响应。1. 创建Ajax对象不同的浏览器有着不同的创建方法，因此我们需要封装一个创建Ajax对象的方法，大部分标准浏览器都支持原生的XMLHttpRequest

2011-07-21 17:15:40 831

原创《精通JavaScript》读书笔记（五）

1.鼠标位置1)首先需要确定的两个变量是：光标相对于整个页面的x和y位置。如下所示/* * 获取鼠标相对于整个页面的偏移量 * @param {Object} e */var getX = function(evt){ evt = evt || window.event; return evt.pageX || evt.clientX + document.body

2011-07-06 22:19:19 632

原创《精通JavaScript》读书笔记（四）

1.元素的尺寸找出元素的的高度和宽度可以很容易，也可以很困难，取决于它所处的不同场合，在大多数情况下，我们只需要利用前面自己封装的getStyle函数即可，如下所示：var getHeight = function(elem){ return parseInt(getStyle(elem, 'height'));};var getWidth = functio

2011-07-05 00:28:51 831 1

原创《精通JavaScript》读书笔记（三）

1.访问样式信息访问和设置CSS属性的主要工具是元素自身的样式属性。假设需要获取元素的高度，则可以编写类似这样的代码： elem.style.height。设置元素的高度则可以执行这样的代码：elem.style.height = 100px。使用CSS属性时应注意两点：首先，JavaScript要求你在设置任何几何属性时必须明确

2011-06-28 23:59:00 602

原创《精通JavaScript》读书笔记（二）

获取元素的内容 (1)操作元素内的文本假如有HTML代码：some content text，有以下几种方法可以操作元素P内的文本：一种方式是通过DOM的方式： domElem.firstChild.nodeValue,该方式只能操作第一段文本。另一种则是通过innerText属性获得，通过innerT

2011-06-26 11:28:00 762

原创《精通JavaScript》读书笔记（一）

1. 各浏览器的空白节点问题比如有以下代码： <!--window.onload = function() { var childNodes = document.body.childNodes, str = ''; alert(childNodes.length);//在IE下输出2，在Chrome下输出5，在FF下输出6 //遍历子节点数组，按顺序输出对

2011-06-25 00:36:00 1120

原创第三章基本概念

定义一个变量时，若省略操作符var，则会创建一个全局变量，如： function test(){ message = "hi"; //全局变量 } test(); akert(message); //"hi"对一个值使用typeof操作符可能返回下列某个字符串： “undefined”—如果这个值未

2010-10-28 19:09:00 161

原创在HTML中使用JavaScript

<br />在使用<script>嵌入JavaScript代码时，记住不要再代码中的任何地方出现"</script>"字符串。例如，浏览器在加载下面所示的代码时就会产生一个错误：<br /> <script type="text/javascript"><br /> function sayScript(){<br /> alert("</script>");<br />

2010-10-27 10:07:00 131

JavaScript是一种专为网页交互而设计的脚本语言，由下列三个不同的部分组成： 1. ECMAScript，由ECMA-262定义，提供核心语言功能； 2. 文档对象模型（DOM），提供访问和操作网页内容的方法和接口； 3. 浏览器对象模型（BOM），提供与浏览器交互的方法和接口。JavaScript的这三个组成部分，在当前的五个主要浏览器（IE、Firefox、Chrome、Safari和Opera）中都得到了不同程度的支持。其中，所有浏览器对ECMAScript第3版的支持大体

2010-10-26 23:35:00 110

转载【转载】javascript 垃圾回收

嵌套函数如果不掉用内存回收函数就不会释放内存，其实我可以肯定地告诉正常情况下，javascript不会回收任何正在运行脚本申请的内存，释放只是在推出或者重新初始化的时候，还有就是调用垃圾回收函数（千万别用）。jscript有另外的策略，但是你必须要知道jscript不遵循任何javascript的标准，它是独立的一种标准。其实从javascript角度说，如果你真的联系了jscript开发组，那么他们的回答同我的回答都一样，就是递归调用不会释放任何空间。Javascript是不会主动在程序没有结

2010-10-25 20:00:00 945 2

自己写的JS组件

百度有啊，淘宝UED，人人网前端OFFER求比较