随笔分类 - javascript
javascript基础
摘要：平时服务器端开发人员写好后台之后一般写一份简单的接口说明页面，类似：<form action="test.php" accept-charset="utf-8"> <div><label for="">param_1</label><input type="text" name="param_1" value="value_1"/></div> <div><label for="
阅读全文
摘要：问题由来，某群的一个讨论：parseInt(1/0, 19) = 18;parseInt的用法：parseInt(string [, radix])注意，第一个参数是String类型，当radix未指定的时候，那么默认基地是10。转换规则：1、首先查看位置 0 处的字符，判断它是否是个有效数字；如果不是，该方法将返回 NaN，不再继续执行其他操作。2、位置 0 处的字符有效，该方法将查看位置 1 处的字符，依次向后进行同样的测试，直到发现非有效数字的字符或者到达字符串末尾为止，3、返回转换成功的数字因此有比较熟悉的例子：parseInt('F') => 'NaN&
阅读全文
摘要：Fixie.js说明Fixie.js是一个自动填充HTML文档内容的开源工具官方网址地址：http://fixiejs.com/为什么使用Fixie？当我们设计网站的时候，由于无法确定最终填充的内容，经常需要添加一些lorem ipsum（关于Lorem ipsum）到文档以便预览一下文档的展现效果。问题来了，添加过多无聊的内容，使得我们的HTML文档变得臃肿，并且陷入复制-粘贴，手工编辑的毅种循环中。Fixie.js就是为解决这个问题而诞生的——通过解析语义化的HTML5标签，Fixie可以自动填充匹配标签元素类型的内容，使得我们的HTML文档简洁，测试高效。使用说明：第一步：添加fixie
阅读全文
摘要：完善版本参见Github[https://github.com/xesam/TouchSlide] 浏览器的动画效果一般都是用js来控制元素的top,left,right,bottom等属性来实现，不过在移动浏览器上，鉴于对css3的支持，完全可以抢先使用css3 translate。不过需要注意...
阅读全文
摘要：主要内容：addEventListener绑定方式的问题：document.body.addEventListener( 'click', function() { alert('body clicked'); },false);以及第二个参数为object的优势：document.body.addEventListener('click', { handleEvent: function() { alert('body clicked'); } }, false);原文废话太多，我只翻译了主要部分。...
阅读全文
摘要：Lawnchair是一个轻量级的移动应用程序数据持久化存储方案，同时也是客户端JSON文档存储方法，优点是短小，语法简洁，扩展性比较好。现在做HTML5移动应用除了LocalStorage的兼容性比较好之外，SQL web database以及IndexedDB都处在僵局中，虽然有人叫嚣着“我们应该干掉 LocalStorage API”，但那是后话，现在也没得选择。Lawnchair有个曾经的官网：http://westcoastlogic.com/lawnchair/，不过这个站点提供的源码版本过时了，而且还有错误。需要下载的话，最新版本在https://github.com/brianl
阅读全文
摘要：个人觉得这个例子虽然可能不具有实际意义，但是可以很好的理解Sizzle选择的过程实例说明先看一个例子：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset
阅读全文
摘要：元素过滤是Sizzle中最复杂的一部分基本形式Sizzle.filter = function( expr, set, inplace, not ) {}expr 过滤表达式set 候选集合inplace 是否原地修改not 是否取补集说明：set传递的是一个集合(数组)，如果inplace为true，set会被修改；not的作用是用来取补集。还是用个例子来说明下：<li id="a1" class="test"></li><li id="a2" class="test"><
阅读全文
摘要：查找的入口对应的是Sizzle.find方法，Sizzle.find = function( expr, context) {}expr ：查找的表达式context ：查找的范围find的步骤第一步：判断主要集合，方法说过了，依次匹配，顺序就是ID --> NAME --> TAG第二步：（1）当有类型被匹配时，调用相应的方法，获取集合set。（2）当ID,NAME,TAG全部不匹配时，获取context范围内的全部元素集合set第三步：去除expr中已经匹配的部分，返回结果{expr : expr,set : set}因此，Sizzle.find的大致代码流程是Sizzle.f
阅读全文
摘要：主要流程与正则表达式分块var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g;这个正则比较长，主要是用来分块和一步预处理。1、2、3、4、'div#test + p > a.tab' --> ['div#test','+
阅读全文
摘要：大家都知道，Sizzle是jQuery的御用选择器引擎，是jQuery作者John Resig写的DOM选择器引擎，速度号称业界第一。另外，Sizzle是独立的一部分，不依赖任何库，如果你不想用jQuery,可 以只用Sizzle。所以单独拿出来特别对待。在Prototype1.7中，选择器也采用了Sizzle，不过版本有点老，所以我去Sizzle网站搞了一份新的 下来，于是下面分析的时候使用的是最新版的Sizzle.js预先说明在分析初期为了保证各个浏览器的结果一致，不考虑原生getElementsByClass以及querySelectorAll的影响，同时忽略XML类型，因此作一下处..
阅读全文
摘要：简述 $方法是 Prototype 的基础，和jquery中的$作用差不多，不过功能却弱了很多。因为Prototype中还有一个$$方法，看名字就知道，和$相比，$$加了一倍的钱，功能肯定就丰富撒。本文主要是剖析$方法，1.7版本的$$方法使用的是Sizzle引擎，比较复杂，是后面的事情。基本原理 $方法其实比较简单，平时在个人的代码中见得也比较多。基本原理就是如果传入的是一个字符串，就执行document.getElementById方法，如果是一个DOM元素，就直接返回传入的元素，代码实现：function _$(element){ if(typeof element == ...
阅读全文
摘要：Date比较好理解，理解清楚了Number对象的toPaddedString方法就可以了。只有两个方法（toJSON和toISOString），而且这两个方法还一样，就是将日期转换为 JSON 字符串（遵循 ISO 格式）。代码很短，我直接贴上来： (function(proto) { function toISOString() { return this.getUTCFullYear() + '-' + (this.getUTCMonth() + 1).toPaddedString(2) + '-' + this.getUT...
阅读全文
摘要：今天看Sizzle代码的时候，里面有这么一段：// Here we check if the JavaScript engine is using some sort of// optimization where it does not always call our comparision// function. If that is the case, discard the hasDuplicate value.// Thus far that includes Google Chrome.[0, 0].sort(function() { baseHasDuplicate =...
阅读全文
摘要：Hash是Prototype作者扩展出来的一个数据类型。本质上他就是一个普通的javascript对象（注：不要纠结什么javascript变量都是对象，这里说new Object()那种），然后在这个对象上面扩展出来一些其他的方法。基本原理基本的原理的代码说明就是： function Hash(object){ this._object = object; } Hash.prototype = { constructor : Hash, method_1 : function(){//this._object}, me...
阅读全文
摘要：现在来看Enumerable剩下的方法toArray | size | inspectinject | invoke | sortBy | eachSlice | inGroupsOf | plunk | zip前面说过map的原理，不管原来的集合是什么，调用map之后返回的结果就是一个数组，其中数组的每一项都是经过interator处理了的，如果不提供interator那么默认使用Prototype.K，此时的作用很明显，返回的结果就是原来集合的数组形式。原来的集合中length属性为多少，返回结果数组的length就是多少。这个特殊情况被作为一个方法独立出来，叫做toArray: fun.
阅读全文
摘要：剩下的方法太多，于是分作两部分。亮点就是$break和$continue，以及grep方法的思想。 前面each方法中掉了一个方面没有说，就是源码中的$break和$continue。这两个变量是预定义的，其作用相当于普通循环里面的break和continue语句的作用。出于效率的考虑，在某些操作中并不需要完全遍历一个集合（不局限于一个数组），所以break和continue还是很必要的。对于一个循环来说，对比下面几种退出循环的方式： var array_1 = [1,2,3]; var array_2 = ['a','b','c']; (fun
阅读全文
摘要：在javascript中，根本找不到Enumerable的影子，因为这一块是Prototype作者从Ruby中借鉴过来的。并且Enumerable在实际中根本没有直接应用的机会，都是混入到其他的对象中，可以说是其他对象的一个“父类”（不过只是调用了Object的extend方法，进行了方法的直接拷贝而已）。 我并不熟悉Ruby，不过看Enumerable中的一些方法，倒是跟Python中的有几分相似。 Enumerable其中一个最重要的方法是each，each这个方法应该都比较熟悉，其作用便是遍历一个序列的所有元素，并进行相应的处理。不过多数是应用在数组上，比如原生数组的forEac...
阅读全文
摘要：Prototype在原生对象的基础上扩展，分别是Object，Function，String，Number，Array，Date，前面分析了Object，Function，String，还剩下Number，Array，Date。Number部分方法比较少，一共有8个： toColorPart: 将 Number 对象转换为具有两位数字的十六进制形式 succ: 返回当前 Number 对象的下一个值，即当前值加一 times: 采用 Ruby 的风格来封装一个标准的 [0...n] 循环 toPaddedString:将当前 Number 对象转换为...
阅读全文
摘要：今天在群里讨论alert的问题，说到了alert的改造，虽然说改造原生方法不是好做法，但是既然提到了就可以讨论下，所以我按照他们的讨论给出了下面的一段代码： var _alert = window.alert; window.alert = function(param,isDebug){ if(isDebug){ console.log(param); }else{ _alert(param); } } alert('x'); alert('x',true); alert...
阅读全文
浙公网安备 33010602011771号