javascript中的前端html组件

我正试图组织一个新项目的代码结构。我正在为每个javascript文件创建模块模式，如下所示：

var components = (function(){
    return {
        section: function(){
            return '<div class="section">\
                        <div class="section-header">\
                            <div class="section-title">\
                                {{title}}\
                            </div>\
                            <div class="section-link">\
                                <a href="{{link}}">{{linkName}}</a>\
                            </div>\
                        </div>\
                        <div class="section-body">\
                            \
                        </div>\
                    </div>';
        }
    }
})();

core.js

代码结构

架构决定将HTML组件保留在客户端。因此，我将客户端的HTML组件保存在一个js文件

components.js

中，如下所示：

var components = (function(){
    return {
        section: function(){
            return '<div class="section">\
                        <div class="section-header">\
                            <div class="section-title">\
                                {{title}}\
                            </div>\
                            <div class="section-link">\
                                <a href="{{link}}">{{linkName}}</a>\
                            </div>\
                        </div>\
                        <div class="section-body">\
                            \
                        </div>\
                    </div>';
        }
    }
})();

var组件=（函数（）{
返回{
第节：功能（）{
返回'\
\
\
{{title}}\
\
\
\
\
\
\
\
\
';
}
}
})();

我只是不知道这是不是更好的办法

另外，请帮助我决定插件使用的代码结构

---

作为参考，我使用node.js作为服务器语言。

看起来您可能正在尝试构建自己的

angularJS

：）@BenWilde-ohh是这样吗？我不知道angularjs。。

var components = (function(){
    return {
        section: function(){
            return '<div class="section">\
                        <div class="section-header">\
                            <div class="section-title">\
                                {{title}}\
                            </div>\
                            <div class="section-link">\
                                <a href="{{link}}">{{linkName}}</a>\
                            </div>\
                        </div>\
                        <div class="section-body">\
                            \
                        </div>\
                    </div>';
        }
    }
})();