javascript - 编写复杂 jQuery 插件时表示 HTML 部分的最佳方式

Question

我有一个复杂的 jQuery 插件要编写，它确实有很多 html 要在屏幕上显示，我应该创建它们。那么，完成这项工作的最佳方法是什么？我肯定已经可以对它们进行硬编码，但是还有其他优雅的方法吗？有没有办法使用某种模板？当然我也不想有更多的依赖。

Answer 1

您可以将它们放入外部文件中并在需要时加载它们，但这意味着插件用户将必须下载您的所有文件，而不是单个 js 文件。我之前使用的另一个选项(虽然不是针对插件)是在插件内有一个对象，其中包含您想要的所有 html。这使得编写插件变得更容易，因为 html 不会使插件代码变得困惑。此外，当您需要编辑 html 时，它位于一个位置。您还可以将模板代码放入该对象中。

var pi = function() {
    var self = this;

    self.getNewDiv = function(){
        return repo.getDiv();
    }

    //..... all your plug in code goes here and at the bottom

    var htmlRepository = function() {
        var divCode = "<div></div>";

        this.getDiv = function(){
           return divCode;
        };

        this.getSpan = function(){
            return "Span Content";
        }

        this.getDivWithSpan = function(){
            return getSpan().wrap(divCode); //etc
        }
    };

    var repo = new htmlRepository();
}