模块化开发
将模块所需的js\css\img\tmpl维护在一起,一个模块一个目录
- js渲染模板
- css只关心模块内样式
开发团队心声;“我们希望每次研发新产品不是从零开始,不同团队不同项目之间能有可复用的模块沉淀下来。”
模块生态
每个工程有_工程模块_和_生态模块_。
生态模块:基于_component规范_开发,部署到Github上,可以通过命令行工具将Github上的模块安装到工程中使用。比如:jQuery, iscroll, zepto.js, vue.js
安装命令:
scrat install yyx990803/vue
scrat intall FontAwesome/Font-Awesome
- 项目开始->声明生态模块依赖
- 安装生态模块-> 命令行安装
使用vue+scrat实现组件
- scrat提供模块依赖、引用、加载、内嵌等
Vue.component
定义组件- 模板中声明式的数据和事件绑定
- 数据驱动的组件化设计
在模板里直接使用自定义标签如<c-menu>
、绑定事件等
使用scrat自动构建项目
scrat可以安装在持续集成系统中对项目进行自动构建,还具有按版本构建的能力。
个人看法
该框架提出的以搭积木的方式来开发模块,最后搭建系统的这种方式还是挺好的,之前我开发的项目都是使用requirejs+sass对js和css管理,文件夹管理是通过以文件类型来区分,css/js/img这样,而搭积木方式是以header/banner/footer这种方式来建立文件夹,然后每模块的js/css/img/tmpl/json文件都放在该模块文件夹下,这的确有利于模块的解耦和独立。
不过暂时这框架学习资料和教程不是灰常完备,需要再研究。
框架局限和缺点:
- 如果要做到纯独立,除了一个重置样式是全局通用的,所有图片、css这些都要每个模块都保存一份咯,那如果header和footer存在着相同的几个部件,岂不是都要各自保存图片和样式,造成了冗余,而且维护也不好维护。
参考资料
PDF介绍: http://url.cn/Oth8xS Scrat官网: http://scrat-team.github.io/ Github项目地址:https://github.com/scrat-team/scrat
来源:oschina
链接:https://my.oschina.net/u/1414034/blog/304111