总体架构
前端主架构reactjs+jquery+bootstrap
使用jquery.i18n.properties进行多国语言开发
使用bootstrap进行页面布局
reactjs组件开发
分页组件 Pagination
用法:\
一般外面包裹一个div用来固定该分页控件的位置
滚动图片组件 CarouselPicture
用法:\
其中data为json字符串:
var data=JSON.stringify({id:1,desc:’desc’,gourl:’abc’,items:[{id:100,desc:’100’,imgurl:’/res/0.jpg’,gourl:’/0’},{id:101,desc:’101’,imgurl:’/res/1.jpg’,gourl:’/1’}]});
消息组件InstantBookPanel
用法:\
react组件开发中遇到的问题
如何类似airbnb使用Handlebars, hbsfy/runtime进行html模板的动态加载
http://wix.github.io/react-templates/
http://handlebarsjs.com/
https://www.npmjs.com/package/hbsfy#2-3-0
http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html
如何使用flight.js进行事件模块化加载
https://github.com/flightjs/flight/tree/v1.x
http://flightjs.github.io/
关于多国语言国际化i18n问题
airbnb使用的方案(个人感觉jquery.i18n.properties简单些):
https://github.com/airbnb/polyglot.js
如何进行js文件的动态加载,而不是全部打包到bundle.js中,分部分打包
https://github.com/wix/react-templates/tree/gh-pages/sample 里面的例子里有使用require.js进行动态加载的例子,可以参考
出了一个极其郁闷的错误,link中的属性rel记错了,记成了ref!!! rel是relationship的意思!
<link href=”css/bootstrap.min.css” rel=”stylesheet” >
<link href=”css/bootstrap.min.css” ref=”stylesheet” >
开发中的经验积累
html中的margin, padding-(top,left,right,bottom)如果设置为百分比,则是相对父节点的宽度。注意:不论是哪个方位!
require()中函数不能是变量,跟requireJS的加载机制有关系,不支持动态加载。
https://github.com/seajs/seajs/issues/1135