Javascript 我应该如何在交互式web应用程序中实现OOP模式（在jQuery的帮助下）？

有时，使用jQuery会导致您滥用它的功能（至少对我来说是因为它的选择器匹配功能）。这里和那里的事件处理程序。这里和任何地方的效用函数。代码一致性几乎不存在。我想通过实现OOP模式来缓解这个问题，但是因为我有C++和Python背景，所以用JavaScript实现它有点让我感到奇怪。 下面的代码使用OOP模式，但我不能完全确定我的实现是否是好的实践。我怀疑我的实现的原因是因为中的第三条评论。我知道这只是我的代码中的一个特定细节，但这也让我想知道我在代码中实现的其他模式

如果您能指出我的模式中的缺陷和陷阱，或者您有任何建议，我将不胜感激。非常感谢

（这段代码是我正在开发的东西的简化，但其思想是相似的）

$（函数（）{
var stream=新流（）；
});
/*流类
------------------------------------------*/
函数流（）{
//禁用多个流对象
如果（本单例）
返回
其他的
这是。_uuproto_uuu.singleton=true；
this.elements=jQueryMapping（this.selectors）//将选择器映射转换为jQuery对象映射
this.initEvents（）；
}
Stream.prototype.singleton=false；
Stream.prototype.selectors={
流：“#流”，
发布内容：“#发布内容”，
添加帖子：“#添加帖子”，
//…更多动作选择器
}
Stream.prototype.initEvents=函数（）{
this.elements.add_post.单击（this，this.addPost）；
//…更多操作事件侦听器
}
Stream.prototype.addPost=函数（e）{
var-self=e.data；
var post_content=self.elements.post_content.val（）；
如果（发布内容）
self.elements.stream.append（新帖子（Post_内容））；
}
/*课后
------------------------------------------*/
功能帖子（帖子内容）{
此.$element=$（“
”）
.文本（发布内容）
.append（'Delete'）；
this.elements=jQueryMapping（this.selectors，this.$element）；
this.initEvents（）；
返回此.$元素；
}
Post.prototype.selectors={
删除帖子：“按钮。删除帖子”，
//…更多动作选择器
}
Post.prototype.initEvents=函数（）{
this.elements.delete_post.单击（this.deletePost）；
//…更多操作事件侦听器
}
Post.prototype.deletePost=函数（）{
$（this.parent（）.slideUp（）；
}
/*乌提尔斯
------------------------------------------*/
函数jQueryMapping（映射、上下文）{
//将选择器映射转换为jQuery对象映射
var$map={}；
$.each（映射、函数（键、值）{
$map[key]=（上下文）？$（值，上下文）：$（值）；
});
返回$map；
}

这篇文章的标题是“面向初学者”，但我发现关于设计模式和使用jQuery的设计模式都很有用。

我认为您的代码设计过度了。我重新考虑了因素，并将其简化。如果你真的想要一个繁重的OOP设置，我建议你使用客户端MVC（主干、淘汰等）结构来正确地完成它，或者让它保持轻量级

我将继续对您的代码进行一般性反馈

/*          Stream Class
------------------------------------------*/
function Stream(){

    // Disables multiple Stream objects
    if (this.singleton)
        return
    else
        this.__proto__.singleton = true;


    this.elements = jQueryMapping(this.selectors) // Converts a map of selectors to a map of jQuery objects
    this.initEvents();
}

没有理由使用这样的单例。使用

\uuuu proto\uuuu

我会推荐这样的模式

var Stream = (function() {
    var Stream = function() { ... };

    // prototype stuff

    var stream = new Stream();

    return function() {
         return stream;
    };
})());

在原型上存储这样的散列数据是不必要的

Stream.prototype.selectors = {
    stream : '#stream',
    post_content : '#post-content',
    add_post: '#add-post',
    // ... more action selectors
}

您可以将其作为默认哈希包含

(function() {
    var defaults = {
        stream : '#stream',
        post_content : '#post-content',
        add_post: '#add-post',
        // ... more action selectors
    }

    function Stream() {
         ...

         this.elements = jQueryMapping(defaults);
    }

}());

您的实用功能可以稍微优化

$map[key] = (context) ? $(value, context) : $(value);

这可以改写为

$map[key] = $(value, context)

---

因为如果

上下文

是未定义的，您只需传入一个未定义的参数，这与不传入任何参数相同。

脱离主题，但当您没有编译时执行时，您失去了oop的大部分优点…不要使用

\uuu proto\uu

，它是非标准的，某些浏览器不支持它。@ByronWhitlock对严格类型和松散类型的偏好与OOP完全相切。这种问题更适合于这种情况。@jani，谢谢。我会记住的。好书。感谢您提供的资源。我不确定您链接的第二部分是否与OP相关。更多的是在jQuery中应用的设计模式，而不是如何将设计模式应用到您自己的代码中。啊，我没有意识到javascript MVC框架的存在。我一定会调查的。谢谢另一方面，感谢您提供的优秀代码提示。我建议使用主干/脊椎或击倒，因为jsmvc为一些轻量级的东西带来了很多膨胀。虽然这是伟大的，如果你做整个网站与它铭记在心

$map[key] = $(value, context)