JavaScript - 模块模式 - 添加div的问题

我想了解JavaScript中的模块模式。我已经从教程中学习了一些基本的框架，并试图使其适应我的需求。有一个按钮应该添加一些文本的div。JavaScript - 模块模式 - 添加div的问题

这里的JavaScript部分：

// The module 
var s, 
    myArticles = { 

    settings: { 
     articleList: "#article-list", 
     articleClass: ".article", 
     articleIndex: 0 
    }, 

    init: function() { 
     // kick things off 
     s = this.settings; 
     var articles = document.getElementById(this.settings.articleList); 
     this.createArticle(); 
    }, 

    createArticle: function() { 
     var div = document.createElement("div"); 
     div.setAttribute("class", this.settings.articleClass); 
     div.innerHTML = "Article" + this.settings.articleIndex; 
     articles.appendChild(div); 
     this.settings.articleIndex +=1; 
    } 
};

HTML部分：

<body> 
    <h1>My articles</h1> 
    <div id="article-list"></div> 
    <button onclick="myArticles.init()">Add Article</button> 

    <script src="script.js"></script> 
    </body>

CSS部分：

.article { 
    weight: 500px; 
    height: 300px; 
    background-color: red; 
    display: block; 
    margin: 10px 0 0 10px; 
}

你能帮我得到它的工作？另外，在设置部分中，最初的值被$（）包围。它为我抛出了错误，所以我删除了它们。

谢谢。

编辑：这是教程，我指的是： https://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/

来源

2016-01-18 Wasteland

链接到原始教程将有所帮助，因为有几个模块模式 – ShaneQful

上面添加它。 – Wasteland

您在'createArticle'方法中引用了'articles'，但在'init'中声明它为局部变量。 'articles'将在'init'的上下文中未定义。 –

有几个不同的问题与上面的代码：

您删除的$（）指的是JQuery
div.setAttribute（“class”，this.settings.articleClass）;不会因为你的类型设置为查询选择.article而不是类article
篇正常工作是本地的初始化，但是您要访问它在createArticle

你需要的东西像下面的变化：

JS：

var myArticles = (function() { 
    var s, articles; 
    return { 

     settings: { 
      articleList: "article-list", 
      articleClass: "article", 
      articleIndex: 0 
     }, 

     init: function() { 
      // kick things off 
      s = this.settings; 
      articles = document.getElementById(this.settings.articleList); 
      this.createArticle(); 
     }, 

     createArticle: function() { 
      var div = document.createElement("div"); 
      div.setAttribute("class", this.settings.articleClass); 
      div.innerHTML = "Article" + this.settings.articleIndex; 
      articles.appendChild(div); 
      this.settings.articleIndex +=1; 
     } 
    }; 
}());

HTML：

<body> 
    <h1>My articles</h1> 
    <div id="article-list"></div> 
    <button onclick="myArticles.init()">Add Article</button> 
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
    <script src="script.js"></script> 
    </body>

来源

2016-01-18 23:25:59 ShaneQful

这也是在JS中定义模块的更好例子。你可以在匿名函数中拥有'private'方法和变量，并且可以通过从包含这些成员的函数中返回一个对象来暴露'public'成员;如此处所示。 –

谢谢。我有一个错误：Uncaught TypeError：无法读取null的属性'appendChild' – Wasteland

对不起，JQuery/Vanilla JS混合起来应该是现在的工作。注意：如果您在JS小提琴中尝试它，您需要将'var myArticles ='更改为'window.myArticles ='以使模块成为全局模式，以便JS可以在点击事件中看到 – ShaneQful

我认为你需要做这样的事情，只是注意到你的文章变量没有设置你需要做“文章“createarticles” “公共变量或再次得到它里面‘createarticles’功能

var myArticles = (function(){ 
var s; 
var articles; 
//any methods here are private 
return{ //anything in return method is a public function 
    settings: { 
     articleList: "article-list", 
     articleClass: ".article", 
     articleIndex: 0 
    }, 

    init: function() { 
     // kick things off 
     s = this.settings; 
     articles = document.getElementById(this.settings.articleList); 
     this.createArticle(); 
    }, 

    createArticle: function() { 
     var div = document.createElement("div"); 
     div.setAttribute("class", this.settings.articleClass); 
     div.innerHTML = "Article" + this.settings.articleIndex; 
     articles.appendChild(div); 
     this.settings.articleIndex +=1; 
    } 
}; 
})();

来源

2016-01-18 23:17:39 Rosenumber14

不得不编辑它，因为我也注意到'articles'变量的问题，它的设置是init函数的本地，所以creatarticle（）函数不会看到它，这可能是你的问题。 – Rosenumber14

大括号关闭设置应以a结束，而不是;。否则你的解决方案与另一个完全相同。我得到了在其他答案的评论中提到的错误：Uncaught TypeError：无法读取null的属性'appendChild' – Wasteland

明白了。我应该从文章列表中删除＃ – Wasteland

JavaScript - 模块模式 - 添加div的问题

回答

相关问题