Blog

Blog

PHODAL

Backbone React Requirejs 应用实战(一)——RequireJS管理React依赖

试着用React替换Mustache打造了一个简单的页面,http://backbone-react.phodal.com/,当然Router用的还是Backbone的Router(react-router似乎还没有做准备好做client-side的Router)。

Backbone RequireJS React 组合

组合的情况以及开发环境如下

  • IDE: Webstorm(开源license,支持JSX)
  • Backbone: Router + Model
  • React: react-with-addons
  • JSXTransformer
  • react.backbone

其他

  • loadsh替换underscore
  • zepto替换jquery
  • RequireJS jsx插件

RequireJS管理React依赖

JSX Requirejs

github上有一个插件是: jsx-requirejs-plugin

A RequireJS plugin for JavaScript files containing JSX. It's r.js friendly (i.e. all files containing JSX will be pre-compiled during the r.js build).

于是,安装jsx-requirejs-plugin

bower install jsx-requirejs-plugin --save-dev

Requirejs JSX使用

1.添加paths

    react: 'vendor/react-with-addons.min',
    "JSXTransformer": 'vendor/JSXTransformer',
    jsx: 'vendor/jsx',
    'react.backbone': 'vendor/react.backbone',

2.使用jsx!

require(['jsx!app.react'], function (App) {

});

最后我的main.js如下所示:

'use strict';

require.config({
    paths: {
        jquery: 'vendor/jquery.min',

        react: 'vendor/react-with-addons.min',
        "JSXTransformer": 'vendor/JSXTransformer',
        jsx: 'vendor/jsx',
        'react.backbone': 'vendor/react.backbone',

        backbone: 'vendor/backbone',
        underscore: "vendor/lodash.min",

        text: 'vendor/text'
    },
    shim: {
        underscore: {
            exports: '_'
        }
    }
});

require([
    'backbone', 'jsx!app.react'
], function (Backbone, App) {
    App.initialize();
});

换句话说,我们将app.react.js视作app.react.jsx(这里的.react是为了区分js和jsx)。

下面是我的router.react.js

define([
    'jsx!router.react'
], function (Router) {

    var initialize = function () {
        new Router();
    };

    return {
        initialize: initialize
    };
});

在我们的router里导入了不同的component,下面是一个精简的router

'use strict';

define([
    'underscore',
    'backbone',
    'react',
    'jsx!component/IndexComponent.react',
],function(_, Backbone, React, IndexComponent){
    var AppRouter = Backbone.Router.extend({
        index: function(){
            React.render( <IndexComponent />, document.getElementById('main_content'));
        }
        initialize: function() {
            var self = this,
                routes = [
                    [ /^.*$/, 'index' ]
                ];

            _.each(routes, function(route) {
                self.route.apply(self, route);
            });
            Backbone.history.start();
        }
    });

    return AppRouter;
});

到此,我们可以愉快地用Requirejs管理我们的component。

其他

完整的Router

我的router如下所示:

define([
    'underscore',
    'backbone',
    'react',
    'jsx!component/IndexComponent.react',
    'jsx!component/AboutComponent.react',
    'jsx!component/ProductComponent.react',
    'jsx!component/ProjectComponent.react',
    'jsx!component/LibraryComponent.react',
    'model/UserModel',
    'data/libraries'
],function(_, Backbone, React, IndexComponent, AboutComponent, ProductComponent, ProjectComponent, LibraryComponent, UserModel, libraries){
    var AppRouter = Backbone.Router.extend({
        index: function(){
            React.render( <IndexComponent />, document.getElementById('main_content'));
        },
        about: function(){
            React.render( <AboutComponent />, document.getElementById('main_content'));
        },
        product: function(){
            React.render( <ProductComponent />, document.getElementById('main_content'));
        },
        library: function(){
            React.render( <LibraryComponent items={libraries} />, document.getElementById('main_content'));
        },
        project: function(){
            var user = new UserModel({name: 'phodal'});
            var UserView = React.createFactory(ProjectComponent);
            var userView = new UserView({model: user});
            React.render(userView, document.getElementById('main_content'));
        },
        initialize: function() {
            var self = this,
                routes = [
                    [ /^.*$/, 'index' ],
                    [ 'about', 'about' ],
                    [ 'product', 'product' ],
                    [ 'project', 'project' ],
                    [ 'library', 'library' ]
                ];

            _.each(routes, function(route) {
                self.route.apply(self, route);
            });
            Backbone.history.start();
        }
    });

    return AppRouter;
});

问题

  1. JSXTransformer压缩后的大小>100kb

下一篇: 《Backbone React Requirejs 应用实战(二)——使用Backbone Model》

Github: https://github.com/phodal/backbone-react

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Engineer, Consultant, Writer, Designer

ThoughtWorks 技术专家

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 最新技术分享

标签