UC前端‘搭积木’的模块化开发——scrat.js

模块化开发

将模块所需的js\css\img\tmpl维护在一起，一个模块一个目录

• js渲染模板
• css只关心模块内样式

开发团队心声；“我们希望每次研发新产品不是从零开始，不同团队不同项目之间能有可复用的模块沉淀下来。”

模块生态

每个工程有_工程模块_和_生态模块_。

生态模块：基于_component规范_开发，部署到Github上，可以通过命令行工具将Github上的模块安装到工程中使用。比如：jQuery, iscroll, zepto.js, vue.js

安装命令：

scrat install yyx990803/vue
scrat intall FontAwesome/Font-Awesome

1. 项目开始->声明生态模块依赖
2. 安装生态模块-> 命令行安装

使用vue+scrat实现组件

• scrat提供模块依赖、引用、加载、内嵌等
• Vue.component定义组件
• 模板中声明式的数据和事件绑定
• 数据驱动的组件化设计

在模板里直接使用自定义标签如<c-menu>、绑定事件等

使用scrat自动构建项目

scrat可以安装在持续集成系统中对项目进行自动构建，还具有按版本构建的能力。

个人看法

该框架提出的以搭积木的方式来开发模块，最后搭建系统的这种方式还是挺好的，之前我开发的项目都是使用requirejs+sass对js和css管理，文件夹管理是通过以文件类型来区分，css/js/img这样，而搭积木方式是以header/banner/footer这种方式来建立文件夹，然后每模块的js/css/img/tmpl/json文件都放在该模块文件夹下，这的确有利于模块的解耦和独立。

不过暂时这框架学习资料和教程不是灰常完备，需要再研究。

参考资料

PDF介绍： http://url.cn/Oth8xS
Scrat官网： http://scrat-team.github.io/
Github项目地址：https://github.com/scrat-team/scrat

UC前端‘搭积木’的模块化开发——scrat.js,布布扣,bubuko.com

UC前端‘搭积木’的模块化开发——scrat.js

原文：http://my.oschina.net/luozt/blog/304111