前端采用 RequireJS+Bootstrap+SASS 的简单架构，同时使用了Python的模板语言 jinja2 （因为后台是Python写的），现在想要模块化前端组件，我是这样做的：

组件HTML：

 <!-- 组件模板通过jinja2的宏来定义 -->

{% macro user_infobox(user) %}


<div class="user-infobox">
    <div class="user-infobox-header">
        <div class="user-infobox-avatar">
            <img src="{{ user.avatar }}">
        </div>
        <div class="user-infobox-name">
            <span>{{ user.name }}"</span>
        </div>
    </div>
    <div class="user-infobox-body">
        ...
    </div>
    <div class="user-infobox-footer">
        <button class="btn btn-default user-infobox-add-friend" type="button" data-add-friend-url="{{ user.add_friend_url }}">加为好友</button>
    </div>
</div>


{% endmacro %}

组件所需CSS写在SASS模块里：

 // file : _user-infobox.scss

.user-infobox {
    background: #fff;
    // ...
}

// 最后会把所有模块的CSS编译到一个文件中

组件所需JavaScript写在requirejs模块里：

 define(['bootstrap'], function() {
    $('.user-infobox-add-friend').on('click', function() {
        $.post($(this).data('addFriendUrl'))
        .done(function(data) {
            // ...
        });
    });
    // ...
});

这个模块的数据都是通过模板渲染的，还有的模块的数据是通过ajax加载的，所以也会涉及到部分HTML标签也由JavaScript加载，感觉两种方式混用有点乱。还有就是jQuery操作DOM的方式怎么统一一下。

大家还有什么好的方法吗？