Question

我试图了解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/

Answer 1

我认为你需要做这样的事情并且注意到你的文章变量没有设置为'createarticles'你需要让'articles'成为公共变量或者在'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;
   }
};
})();

Answer 2

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

您删除的$（）是指JQuery
div.setAttribute（＆＃34; class＆＃34;，this.settings.articleClass）;在将类设置为查询选择器.article而不是类article
文章是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的问题

2 个答案: