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

发布时间:2019-06-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Backbone React Requirejs 应用实战(一)——RequireJS管理React依赖脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

脚本宝典总结

以上是脚本宝典为你收集整理的Backbone React Requirejs 应用实战(一)——RequireJS管理React依赖全部内容,希望文章能够帮你解决Backbone React Requirejs 应用实战(一)——RequireJS管理React依赖所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。