随笔分类 - JS
摘要：在官方网站中，是这样介绍的，这是一个用来处理异步js的工具包。它提供了一些直观的，功能强大的函数。尽管它最初是为node.js来设计的，它也可以直接用在browser中。先来看一段代码（需要在nodejs中运行）：View Code var fs = require('fs');var async = require('async');process.chdir('testAsync');var concatenation = '';var dirContents = fs.readdirSync('.');asy
阅读全文
摘要：jQuery从1.5开始引入了一个新的对象，Deferred(), 在官方的说明文档中是这样介绍它的，它是一个可链式操作的工具对象，我们可以用它来注册多个回调函数到一个回调函数队列中，我们可以同步也可以异步的依据它的success或者failure状态来调用这个队列。jQuery Deferred对象有很多方法，我们一般常用的仅仅是then(), done(), fail(),那让我们来看一下如何用:1.一个非常简单的同步执行的例子View Code 1 (function($){ 2 var defer = jQuery.Deferred();//Declaire one deferr...
阅读全文
摘要：jQuery Data,我们可以给一个html element, 或者是一个js object,来增加一个data 属性，我们可以像其他属性那样来读取，修改.而隐藏在其后面的是jQuery._data() 在起作用。实现步骤：首先确定那些html object不能实现data,如果我们来给它们添加属性会引起错误，noData: { "embed": true, // Ban all objects except for Flash (which handle expandos) "object": "clsid:D27CDB6E-AE6D-11
阅读全文
摘要：Backbone.js是一个用JS写的MVC库,它非常小(压缩过的源码只有5KB),它可以用来构建单页的web application.不像其他的相类似的库，它的使用是非常灵活的，除了一些基本的内容，其他的设计完全依赖于你自己的设计。下面将会用Backboe Boilerplate来构建一个简单的图书馆应用程序，它非常简单，不过，你可以用它来扩充成更健壮的其他应用程序。Backbone是什么？Backbone.js是一个js为，用它可以轻松的来构建page web application.它非常的灵活，并且非常的轻量级，当然它的文档，社区也是比较成熟的，这就是为什么它这么火的原因。Requir
阅读全文
摘要：Strategy模式允许你在运行的时候可以选择不同的算法。你的代码可以提供一个统一的接口，但是指定的任务可以根据不同的上下文来选择不同的算不了法。来看一个用strategy模式来解决问题的例子：表单检查。你可以创建一个validate()方法。我们用这个方法来检验表单，而不管这个表单是什么类型的表单，我们所要得到的是一个正确的数据。而真正我们需要实现的是，根据具体的form类型，可以选择不同的类型检查器来检查。你的validator将会选取最好的策略来处理这个task,然后用最合适的算法来检查。Data Validation Example下面的数据，来自一个页面，我们来检查一下它们的有效性：
阅读全文
摘要：Decorator模式是指可以在运行的时候让一些功能附加到对象上，当在静态类语言中实现的时候，也许不那么容易，但是在JS中，我们借助于它自己的语言特性，可以很容易的让其实现这种模式应用场景让我们来看一个这个模式应用的例子，假若你现在正在做一个卖东西的web应用。假设每一件新的商品，我们都抽像为一sale object,我们可以通过sale.getPrice()来得到商品的价格。假定这样一个场景，一个顾客在加拿大的Qubec省买了这样一件产品，那么他需要交纳联邦政府的税，还需要交纳Qubec省的税。我们可以这样来应用decorate模式，用联邦政府税decorator和Qubec省税deocra
阅读全文
摘要：当我们试图绑定一些事件到DOM元素上的时候，我相信上面这4个方法是最常用的。而它们之间到底有什么不同呢？在什么场合下用什么方法是最有效的呢?准备知识：当我们在开始的时候，有些知识是必须具备的：DOM树下图仅仅是一个示例，这是一个在browser环境下的一棵模拟DOM树，在下面的代码中仅起到演示的作用：Event bubbling (aka event propagation)冒泡我们的页面可以理解为一棵DOM树，当我们在叶子结点上做什么事情的时候（如click一个a元素），如果我们不人为的设置stopPropagation(Moder Browser), cancelBubble(IE)，那么
阅读全文
摘要：如果你有一个对象，它包含一组有序的聚簇数据(其实就是一个或者一组利用某种结构聚集起来的数据)，你如果想要一种统一的并且是简单的访问接口来访问这一组数据，那么iterator就可以发挥它的用武之地了。调用这个对象的code不需要了解你对象的数据结构，它们唯一需要知道的是如何来得到其中的每一个元素。在Iterator模式中，你的object需要提供一个next()方法，当调用next()的时候，它必须返回你这个对象中的下一个element， 当然这取决于你的数据结构，来确定下一个element到底是哪一个元素，有可能是物理不挨着，或者是出于某种目的，你给他们人为的排序。当然我们还得需要提供另一个函
阅读全文
摘要：factory模式的目的是用来创建objects.它经常以类或者是一个类的静态方法的形式出现，但是不论以何种形式的出现， 最终都得实现下面的目标：当我们在设置一组对象的时候，它们需要执行一组相同的代码的时候。在编译的时候，在不需要知道确切的类型(class)的时候，可以创建相应的对象在传统面向对象语言中，第2点尤为重要，当我们需要创建类的实例时，我们往往不能提前知道确切的实例类型，而在JS中我们可以很轻松的来实现。以factory method或者是facotry class来创建对象的时候，都是通过继承相同的parent object, 然后利用不同的subclasses来创建不同的对象。来
阅读全文
摘要：singleton是指对于一个特定的类，只会产生一个实例。这就是说，当你第二次用这个class去创建一个新对象时，你会得到第一次创建的那个对象。在JS中，要如何实现呢？在JS中没有类，当我们创建一个新的对象时，这个对象实际上就是singleton.当我们用直接量来创建一个对象时，这实际上就是一个新的singleton实例：var obj= { myprop: 'my value'}Using newJS中没有类，所以照字面意思来套用singleto是没有什么意义的。但是在JS中可以用new通过constructor来创建对象，而当你用new来创建一系列对象的时候，如果想得到返回
阅读全文
摘要：提到代码重用，我们往往会想到inherits,当然还有其它的方式 ，我们还可以通过compoite来达到代码重用的目的。不过，当我们在试图实现代码重用的时候，请记住“Prefer object composition to class inheritance"Classical Versus Modern Inheritance Patterns在JS中什么是Classical继承呢，这个命名方式不是通用的。所表达的意思其实就是别的语言中的类继承。因为在JS中不存在类这个概念，我们可以随时改变它的属性和方法，而不必像其他语言那样麻烦。在JS中，有constructor，还有可以用ne
阅读全文
摘要：在JS中创建一个对象是非常简单的，可以利用直接量 var object={}，也可以用constructor var object = new Object().而且它本身没有特殊的语法，像什么命名空间，modules, packages, private properties和static members.在下面的内容中将会集中展示,命名空间模式，依赖声明，module模式和sandbox模式，它们可以帮助你更好的组织你的代码。Namespace Patternnamespace可以帮助我们的程序尽力减少对全局变量的污染，这样我们就可以把命名冲突减小到最低。当然javascript并没有提供
阅读全文
摘要：Functions是JavaScript中一非常重要的一部分，主要体现在两方面：一是first-class objects,二是它会提供运行的scope.named function expression:var add = function add(a,b){ return a+b;}anonymous function:var add = function (a,b) { return a + b;};这两者完成的功能是一样的，但有什么区别呢：区别就在于，当我们试图去取function.name的时候，named function expression将会得到add,而anonymou..
阅读全文
摘要：literal其实类似于我们可以对array, function, object...这些由基本类型(string, number,boolean,null, undefined)所组成的复合类型，像简单类型那样来赋值，而不需要动用new来操作。Object Literal:实际上javascript中的object类似于hash table中的键值对，它的值可以是基本类型，当然也可以是别的object,我们称之为属性。如果值是function,我们就称他们为method.来看下面的定义object的方法：View Code 利用Constructor创建Objectjs中虽然没有类，但是依然
阅读全文
摘要：去掉数组中的重复元素，在JS中即可以利用常规方法来一一比较，然后把其中的不重复元素加入到结果数组中，也可以利用JS中的对象特性来完成特定数组类型的去重。因为在JS中它是非强类型的语言，所以在我们的数组中会出现object, function, number, string, null, undefined, bool.如果是这种情况，下列列出的代码有可能不能完成。常规方法：遍历最初的数组，拿出一个元素，和结果数组中的每一个进行比较，如果没有重复，即将新元素插入结果数组。View Code var originalArray=["test","0", 1,
阅读全文
摘要：在Backbone中，views并不含有markup，它们通常会用JS templating(例如：Mustache, jQuery-tmpl).一个view的render()方法可以绑定到model's change事件上，这样就可以达到不用刷新整个page,只用刷新部分就可以了。创新一个新的ViewView Code var PhotoSearch=Backbone.View.extend({ el:$('#results'), render:function(event){ var compiled_template=_.template($('#resu
阅读全文
摘要：Writing Maintainable code有人愿意修bug吗？这不是废话吗?（反正我不愿意修），bug总是不可避免的，我们会花大量的时间来修bug，下面的时间总是我们不可避免的：搞清楚是什么问题理解code,然后再去尝试解决问题如果在一个大的公司或者是一个大的项目中，我们花在第一项的时间会很多。所以我们在写code的时候需要遵守一些规则：可读性好保持一致性可预见性好有良好的文档Minimizing GlobalsJS是用functions来管理scope的。如果一个变量声明在一个function内，那么它就是一个本地变量，在外部是不可用的。那么global的变量是在任何function
阅读全文
摘要：JavaScript基础知识1.面向对象，Javascript是天生的面向对象的语言，它和我们传统意义上的理解的面向对象语言不一样，其实，我们所接触到传统面向对象语言(C#, Java)更应该称之为面向类的语言。2.五种原生的数据类型： number, string, boolean, null, undefined.而前三种都有相应的对象来表示。所以number, string, boolean可以很方便的转化成相应的对象。3. 在JS中最重要的Function也是对象。4.有两种类型的objects，我们必须谨记。Native:ECMAScript标准所定义的。 Host: host en
阅读全文
摘要：Backbone中的model实际上包含了程序所要用到的一些交互数据，即给表现层提供数据，也为了从后台得到数据。例如我们可以用一个model来表示photo object,它需要包含一些属性，像tags, titles和location，看代码：var Photo=Backbone.Model.extend({ defaults:{ src:'placeholder.jpg', title:'an image placeholder', coordinates:[0,0] }, initialize:function(){ ...
阅读全文
摘要：问题描述:我们发现在IE6下当鼠标mouseover一个元素时，会发现抖一下，即突然消失又突然出现，而在别的browser下是好的。那我们首先应该想当的是检查当前元素是不是应用了背景图片，如果用到了，那么就应该考虑如下：很有可能是因为IE6不缓存背景图片所导致的bug.例如: button{background:url(buy.jpg);}解决方案：我们可以在页面中加入如下script来解决这个问题:document.execCommand("BackgroundImageCache",false,true);如上代码告诉浏览器，如果本地存在背景图片的时候，就不要麻烦服务器
阅读全文
浙公网安备 33010602011771号