摘要：最近听到有同学在讨论关于数据上传遇到离线的问题，因此在这里介绍一下PouchDB。 PouchDB 是一个开源的javascript数据库，他的设计借鉴于Apache CouchDB，我们可以使用他来打造浏览器的离线应用。 如果你要使用PouchDB，那么建议你的远程数据库使用CouchDB，那样的 阅读全文

摘要：最近在做一些关于JSON Schema的基建，JSON Schema可以描述一个JSON结构，那么反过来他也可以来验证一个JSON是否符合期望的格式。 如果之前看我写的 "《使用joi来验证数据模型》" 可能会问，为什么不使用JOI，反而使用JSON Schema？因为JOI这个nodejs库，除了 阅读全文

摘要：最近使用了extjs 自定义事件模型，代码如下： 以上代码在 extjs4.0 版本是完全没有问题的，但是我使用了extjs4.2版本。 运行后得到报错信息： 然后我换到extjs6.0，据说6.0已经把 addEvents 废弃了，那么我把 this.addEvents('walk'); 这句代码 阅读全文

摘要：在JavaScript中，数组可以使用Array构造函数来创建，或使用[]快速创建，这也是首选的方法。数组是继承自Object的原型，并且他对typeof没有特殊的返回值，他只返回'object'。运行[] instanceof Array他会返回ture。虽然结果是这样，但也有复杂的类数组对象，如字符串或arguments对象，但arguments对象并非是Array的实例，但他却拥有length属性，而且他的值是可以被索引的，因此他可以像一个数组那样被遍历。这本文中，我将介绍数组原型的一些方法，并探讨每一种方法的用途：使用.forEach 来做遍历 使用.some and 阅读全文

摘要：引：AOP为Aspect Oriented Programming的缩写，意为：面向切面编程，通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术。这里我们可以理解为在执行某函数时，要先执行什么，或最后执行什么。比如：function a() { alert(1)}function b() { alert(2)}//如果要先打印1再打印2a();b();//又或者把a()改为function a(){ alert(1); b();}第一种方法显得累赘，而且在改造升级的情况下，可能会使function b()没了，然后会报错，第二种方法代码入侵性太大。我们可以使... 阅读全文

摘要：在众多的方法里面，event.stopImmediatePropagation 算是比较少用的一个方法，拼写上感觉一半像 event.stopPropagation。对于stopPropagation 的用法大家是众所周知的，他是W3C标准事件方法，用于阻止事件冒泡（非标准情况下，用window.event.stopBubble来阻止冒泡）而stopImmediatePropagation 的功能比stopPropagation 多一些，除了可以阻止事件冒泡之外，还可以把这个元素绑定的同类型事件也阻止了。先把下面的代码片断（摘自MDN） ... 阅读全文

摘要：在前些时间开发中遇到一个问题当flash值为空时，IE版本>=9不会触发domready事件。代码如下：以上代码的name="movie"的value值为空，那么在IE9+，他的domready事件和onload事件永远不会被触发。或者整句不写，也会出现该问题。解决方法，要补上缺省值，只要不为空，则可解决问题。如: 阅读全文

摘要：前几天在群里看到小杜分享一篇文章，《html写法对gzip压缩率的影响》，为此我也对这点分析了一下。不知道大家有没有看过这文章，作者是来自微博懒懒交流会，其内容我这里先简述一下。Gzip算法主要由哈费曼和LZ77算法组成。如果文件中有两块内容相同的话，那么只要知道前一块内容的位置和大小，通过特定的压缩标识符，我们就可以确定后一块的内容。所以我们可以用位置长度这样一对信息，来替换后一块内容。举例 通过gzip压缩后，在chrome的开发者工具看到的size是563B。下面把input标签的属性顺序打乱后... 阅读全文

摘要：以下列出一些看起来浅易却在实际开发中容易犯到的错误。错误1、重复地查询元素这点大家都知道，但会不经意地犯错。通常对一个元素进行两处操作，特别是这两处代码都分开来写时，很容易造成两次查询该元素。//错误的做法，两次查询，会降低了效率//第一次操作$('.dom').show();//第二次操作$('.dom').hide();//建议的做法//用变量引用该查询$dom = $('.dom');//第一次操作$dom.show();//第二次操作$dom.hide();错误2、重复的条件判断每次执行函数都会进行了一次if...else...判断，效率 阅读全文

摘要：今天从jquery1.7.1 升级至jquery 1.9.1，踩到两个坑，在此记录一下，方便其他朋友解决类似问题。1、data() 在不存在节点时的差异：取一个不存在节点的data值时，在1.7版本会返回undefined，而在1.9.1会返回unll。假设页面上不存在id为none的节点，但有以下JS代码：$('#none').data('anyKey'); 在1.9.1会返回null。所以不要只用typeof $('none').data('anyKey') == 'undefined' 来判断该值。2、$.p 阅读全文

摘要：出于安全的原因，浏览器对跨域通信上做了一些限制，这是理所当然的，否则就可以就会出现各种获取用户私密数据的问题。但在实际开发中，我也会有跨域通信的需求，跨域要求不同域名之间做配合，单方面可是做不了的。1,通过间隔时间来不断获取hash值。//占位编辑2,JSONP//占位编辑3,借助于FLASH//占位编辑4,用HTML5的APIHTML5提供了一个可以让我们跨域通信的API：postMessage，我们先看一下浏览器对这个API的支持情况。Internet Explorer 8.0+, Chrome 2.0+、Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+基本用 阅读全文

摘要：在写门面模式之前，我总结了一下，觉得门面模式的写法和单体模式有些相似。但查阅过一些资料和朋友讨论之后，发现门面模式主要偏向于解决一些差异化的问题。我们先看一个简单的例子。//这是一个简单的门面模式例子，一个需求在不同的浏览器里有差异化。var Facade = {};Facade.isIE = function(){ if(document.all){ alert("这是IE"); //do something... }else{ alert("这不是IE"); //do something... }}假设现在要设计一个... 阅读全文

摘要：适配器模式目的在于使原本由于接口不兼容而不能一起工作的那些类可以一起工作。假如有一个项目原本是用prototype开发，现在需要用YUI。我们知道，YUI选择器的使用方法应该这样写的：//YUI选择器YAHOO.util.Dom.get();而prototype的选择器使用方法//使用prototype的选择器写法$.apply(window,el);好了，知道两种Javascript库的选择器使用方法后，我们再看回原来的问题。我们可以设想一下，项目原本用的是prototype开发的，如果要获取某ID元素，那么代码中必然有//假设在原本项目中使用了prototype，代码会有以下的写法。$(& 阅读全文

摘要：桥接模式可以把抽象类和实现类进行各自封装和扩展，目的在于解耦。由于桥接模式可以增强了组合性，我们可以很灵活地修改类，并且很好地重用。我们可以先看一下简单的片断：//这是一个演示简单的桥接模式片断(本例子只假设在标准浏览器情况下)//先获取DOMvar DomA = document.getElementById('divA');//给DomA绑定事件DomA.addEventListener('click',funcA,false);//定义funcAfunction funcA(){ var id = this.id; alert("I'm 阅读全文

摘要：装饰者模式有点像单体模式，无非就是动态给一个对象添加一些属性或方法，扩展比较方便。我不明白为什么会取这个名字，难道给对象添加功能也被看作是装饰吗？呵呵。我们先来看一个单体例子//这是一个简单的单体例子var testObj = { a:function(){}, b:function(){}, c:{ d:function(){alert("hello")}, e:function(){} }}非常简单明了的单体，如果要往这个对象里面的子对象c添加方法，则这样写：testObj.c.f = function(){this.d()}怎样？是不是... 阅读全文

摘要：工厂模式也是Javascript比较常用的模式。他主要是提供一个创建一系列相关或相互依赖对象的接口，而不一定要指定它们具体的类。工厂模式的精髓在于可以选择类或函数等，通常是用来动态创建对象。是不是看起来有点难懂？还是看代码吧。//这是一个工厂模式例子(隐式选择)function createXML(){ if(typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); }else if(typeof window.ActiveXObject != "undefined"){ re 阅读全文

摘要：Javascript中的单体模式是常用的模式，也是最基本的一种模式。先说说有哪些优点，当然不止有两个优点，呵呵。通常我们定义的函数或变量都会是在全局里，当然，把变量写在函数里并用var去定义的话，固然这个变量的作用域是在这个函数里面。单体模式的优点是：1、可以减少变量冲突，当然闭包也可以实现这点。2、把功能代码都组织在一起，方便阅读和维护。3、可以有更好的分支处理。下面先来一段单体模式代码//这是一个单体模式示例,就拿近期的项目来说明//呵呵，看下面的变量名，认识我的人，都知道是哪个项目啦。那项目就是用了单体模式。var XZB = { namespace:function(){ ... 阅读全文

摘要：我们常常会做到这样的一种效果，例如A被点击之后，要求B和C会执行特定的行为。画图什么的很烦，下面举个简单的例子：var DomA = document.getElementById("divA");var DomB = document.getElementById("divB");var DomC = document.getElementById("divC");DomB.action = function(){ alert("I'm DomB, I know DomA be clicked");}Do 阅读全文

摘要：最近一个叫Gary Bernhardt的程序员在CodeMash大会上的演讲的视频被人们炒的火热。在演讲中，他以Ruby和Javascript语言中一些很明显的很荒唐的语言特征为乐子，逗的大家满堂欢笑。下面就是这个只有几分钟的视频，我把它加上了简单的字幕，奉献给大家。传送门：http://v.ku6.com/show/nhlYYNrbd5d62ASt-aaDrA...html 阅读全文

摘要：在IE和FF下，对于文本域或文本框有效。在IE下，对容器和文本域或文本框均有效。 1 var obj = document.getElementById('content'); 2 (function Insert(obj,str) 3 { 4 //IE下支持document.selection 5 if (document.selection) 6 { 7 obj.focus(); 8 sel = document.selection.createRange(); 9 sel.text = str;10 ... 阅读全文