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-requirejsplugin --savedev
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'],0)"> function (App){});最后我的main.js如下所示:
'use strict';.config({ paths jquery'vendor/jquery.min' backbone'vendor/backbone' underscore"vendor/lodash.min" text'vendor/text'},0)"> shim exports'_'}});(['backbone''jsx!app.react'Backbone initialize(); 换句话说，我们将app.react.js视作app.react.jsx(这里的.react是为了区分js和jsx)。下面是我的
router.react.jsdefine'jsx!router.react'Routervar initialize =()new};return initialize 在我们的router里导入了不同的component，下面是一个精简的routerdefine'underscore''react''jsx!component/IndexComponent.react'function(_ReactIndexComponent){AppRouter.extend index(){render<IndexComponent/>,0)"> documentgetElementById('main_content'));selfthis routes [/^.*$/'index']]; _eachroutesrouteselfapply( route);historystartAppRouter 到此，我们可以愉快地用Requirejs管理我们的component。其他
完整的Router
我的router如下所示:
'jsx!component/AboutComponent.react''jsx!component/ProductComponent.react''jsx!component/ProjectComponent.react''jsx!component/LibraryComponent.react''model/UserModel''data/libraries'AboutComponentProductComponentProjectComponentLibraryComponentUserModel libraries aboutAboutComponent productProductComponent libraryLibraryComponent items={libraries project user name'phodal'UserViewcreateFactory userView UserViewmodel useruserView'about''about''product''product''project''project''library''library'});版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。