前端组件模块化？

Question

前端采用 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的方式怎么统一一下。

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

Answer 1

可以尝试一下reflux+react

Answer 2

可以尝试一下vue.js，应该比较符合你的需要。

Vue的模块化组件特性非常好用，单个组件的模板、脚本、样式可以写在一个.vue文件中，看起来像这样：

<template>
    <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" @click="addFriend">加为好友</button>
        </div>
    </div>
</template>

<script>
    // .vue文件支持ES6语法，使用babel编译
    export default {
        data() {
            return {
                user: user
            }
        },
        methods: {
            addFriend() {
                var self = this;
                $.post(this.user.add_friend_url)
                .done(function(data) {
                    // vue是响应式MVVM框架
                    // 在此处更新user，页面上对应的数据也会相应变化
                    self.user = data.user;
                });
            }
        }
    }
</script>

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

并且.vue也支持一些预编译语言，比如jade和你用的SASS，书写起来会更加方便。