2009-10-24 107 views
3

从mootools和JAVA开始,mootools类的实现是构建我的代码的一个非常好的方式,另外我还可以拥有一些很好的功能,如扩展,实现等。从jquery开始,我发现自己编写的$ .fn插件无法使用其他插件的代码。另外,对于与DOM元素无关的复杂内容使用插件结构似乎并不是一个好主意。有没有更好的方法,然后$ .fn?你推荐使用jQuery来构建我的代码。你如何构建你的jQuery代码?

回答

6

这是一个难以回答的问题。

JavaScript令人难以置信的灵活性的缺点是每个程序员和他的姐夫都有不同的做事方式。

为了在JavaScript中使用基于类的OOP(原型库,Moo,Joose,JS.Class,Base2等)来拉取库,缺点是您立即减少了一些JavaScript程序员谁可以阅读你的代码。

很明显,jQuery鼓励你用“集合”来思考。集合是您从$()或jQuery()调用中获得的内容。 John Resig曾经考虑给jQuery添加一个类系统,但最终决定不采用这种方法。我认为他说他从未需要JavaScript编程中真正的“类”系统。

对于除了最大的JS项目之外的所有项目,我会说忘记一个Class系统。利用JS令人难以置信的对象和数组系统(包括文字)。命名空间很大(变量和方法)。

对于大多数情况下我通常使用Classes for的情况,我使用了很多运气。

jQuery集合概念的一个有趣扩展是在Ariel Flesler的jQuery.Collection插件here中。它可以让你像处理jQuery中的DOM数据那样对待“正常”数据。

我最近开始使用Underscore.js,它为您提供了很多功能工具来将您的数据视为集合。

2

jQuery并不真正用于构造代码。它意味着你从其他代码中使用的工具,而不是一种生活方式。

其余的代码应该以任何你喜欢的方式编写。当您想要执行DOM操作,Ajax调用,跨浏览器事件等时,只需使用jQuery。

+0

是的,这是我学到的教训,但是最好的方法是什么。 – 2009-10-24 19:25:59

1

您可能想要了解如何使用.prototype属性将一些代码放入“类”中,以便你可以在不同的地方重复使用相同的代码,只需创建一个新的实例即可。

您也可以将代码放入对象中,以便您拥有唯一的名称空间,因此在不同项目之间共享相关对象变得更加容易。

基本上,你会像构建直接JavaScript一样构造代码,但jQuery会抽象出一些常用的功能,所以你不必担心浏览器问题,但它只是一个帮手,不仅仅是提供一个框架,而只是简化一些概念。例如,我倾向于使用.bind('click',...),而不是使用onclick,但如果我想让元素具有多个事件处理器的潜力。

3

你一般需要的是代码扩展的机制包装

对于前者,我使用基于类的伪默认OO机制,有时用一个辅助功能,使继承更容易:

Function.prototype.derive = (function() { 
    function Dummy() {} 
    return function() { 
     Dummy.prototype = this.prototype; 
     return new Dummy; 
    }; 
})(); 

function Base() {} 
function Sub() {} 
Sub.prototype = Base.derive(); 

后者可以通过通过自动执行功能的命名空间来实现。甚至有可能伪造进口报表:

// create package: 
var foo = new (function() { 
    // define package variables: 
    this.bar = 'baz'; 
    this.spam = 'eggs'; 

    // export package variables: 
    this.exports = (function(name, obj) { 
     var acc = []; 
     for(var prop in obj) { 
      if(obj.hasOwnProperty(prop)) 
       acc.push(prop + '=' + name + '.' + prop); 
     } 
     return 'var ' + acc.join(',') + ';'; 
    })('foo', this); 
}); 

// use package: 
(function() { 
    // import package variables: 
    eval(foo.exports); 
    alert(spam); 
})();