我正在尝试理解 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/
最佳答案
上面的代码有几个不同的问题:
- 您删除的 $() 指的是 JQuery
- div.setAttribute("class", this.settings.articleClass);将无法正常工作，因为您将类设置为查询选择器
.article而不是类article - articles 对于 init 是本地的，但您正试图在 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>
关于JavaScript - 模块模式 - 添加 div 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34865785/