如何在模块模式中使用JQuery对象

How to use JQuery-Object in Module Pattern

本文关键字：JQuery 对象 模式 模块      更新时间：2023-09-26

我在模块模式中使用JQuery。我有一个关于使用JQuery对象的问题。

参见以下示例：

var myFeature = {
   'config' : {
        'container' : $('#myFeature'),
    'init' : function(config) {
        myFeature.config.container.css('display', 'none');
    }
}`

为什么上面的例子不起作用？在模块模式中使用Jquery对象时，最佳实践是什么？

假设我在正确的位置添加了缺失的}（我还在末尾添加了分号，我不建议依赖自动分号插入）:

var myFeature = {
    'config' : {
        'container' : $('#myFeature'),
    }
    'init' : function(config) {
        myFeature.config.container.css('display', 'none');
    }
};

那么我能理解为什么它不起作用的唯一原因是，如果这个代码在元素存在之前执行。因此，container属性最终引用了一个jQuery集，其中没有任何内容，因为在初始化该属性时，没有id "myFeature"元素。

解决方案是在您知道元素存在时初始化container属性，或者根本不使用container属性，因为通过id查找元素非常快。

如果元素在页面的主标记中，请确保包含上述代码的script标记在该标记之后。通常的建议是将script标记放在页面的最后，刚好在关闭的</body>标记之前，这样在脚本代码运行时，页面标记中的所有元素都存在。

请参阅以下更改：

var myFeature = {
    'config' : {
        'container' : $('#myFeature')  // 1: removed comma
    },                                 // 2: added comma and right curly brace
    'init' : function(config) {
        myFeature.config.container.css('display', 'none');
    }
};                                     // 3: added semi-colon
  1. 在旧版本的IE中，额外的逗号有时会导致错误
  2. 键/值对在散列中用逗号分隔
  3. 语句末尾需要分号。"need"使用松散，但安全总比抱歉好
相关文章：