你如何构建你的jQuery代码?

时间:2009-10-24 19:17:46

标签: javascript jquery

来自mootools和JAVA,mootools类实现是构建我的代码的一种非常好的方式,而且我可以有一些很好的功能,如扩展,实现等。从jquery开始,我发现自己编写的$ .fn插件无法使用其他插件的代码。此外,将插件结构用于与DOM Elements无关的复杂内容似乎并不是一个好主意。是否有更好的方式,然后$ .fn?您建议使用jquery构建我的代码。

4 个答案:

答案 0 :(得分:6)

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

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

在JavaScript(Prototype库,Moo,Joose,JS.Class,Base2等)中进行基于“类”的OOP的库的缺点是你立即减少了JavaScript程序员的数量可以读你的代码。

显然,jQuery鼓励你用“集合”来思考。一个集合是你从$()或jQuery()调用中获得的。 John Resig曾经考虑过为jQuery添加一个类系统,但最终决定反对它。我认为他说他在JavaScript编程中从不需要真正的“类”系统。

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

在我通常使用Classes的大多数情况下,我使用对象数组有很多运气。

jQuery集合概念的一个有趣的扩展是在Ariel Flesler的jQuery.Collection插件here中。它可以像处理jQuery中的DOM数据一样处理“普通”数据。

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

答案 1 :(得分: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();

后者可以通过自动执行功能的命名空间来实现。甚至可以伪造import语句:

// 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);
})();

答案 2 :(得分:2)

jQuery实际上并不意味着用于构造代码。它意味着你可以从其他代码中使用它,而不是一种生活方式。

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

答案 3 :(得分:1)

您可能想学习如何使用.prototype属性将一些代码放入“类”中,这样​​您就可以在不同的地方重用相同的代码,只需创建一个新的实例化,基本上。

您还可以将代码放入对象中,以便拥有唯一的命名空间,这样就可以更轻松地在不同的项目中共享相关对象。

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