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

时间： 2024-11-08 18:51:49

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

JS模块化开发----require.js

前言 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得前端开发得到重视,也使得前端项目越来越复杂,然而,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,所以,进行模块化开发的重要性就不言而喻了.那么什么是模块呢? 一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功

模块化开发--sea.js

当你的网站开发越来越复杂的时候,会经常遇到一下问题吗?1.冲突2.性能3.依赖如果在多人开发或者是复杂的开发过程中会经常遇到这些问 题,就可以用模块化开发来解决.以上问题是如何产生的?1.冲突:如果你写了一个commen.js,这个JS文件主要是写一些 公用的方法,比如选项卡tab,拖拽等等...当你写好这些JS之后 可能交给同事用.同事首先引入这个JS文件,有可能这个页面又 交给新同事开发,这个同事写了一个function,名为tab,这时这 个tab就和你写的公用JS文件里的tab方法起了冲

javascript模块化开发----sea.js

废话不多,直接正题 定义一个模块 test.js 下面的三个三叔require exports module 不能随意修改,只能用这三个 define(function( require , exports , module ){ function test (){ } //exports 对外提供接口的对象 exports.test = test(); }) 使用方法: seajs.use('./test.js',function(ex){ ex.test(); }) 第一个参数是路径,此时路

js模块化开发——require.js学习总结

1.为什么使用require.js 作为命名空间: 作为命名空间使用: 异步加载js,避免阻塞,提高性能: js通过require加载,不必写很多script 2.require.js的加载 require.js下载 下载后,放在指定目录就可以加载了 ? 1 <script src="js/require.js"></script> 有人可能会想到,加载这个文件,也可能造成网页失去响应.解决办法有两个,一个是把它放在网页底部加载,另一个是写成下面这样: ? 1

JS模块化开发：使用SeaJs高效构建页面

一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就更别说会知道js还有面向对象,设计模式,MVC,MVVM,模块化,构建工具等等这些高大上的概念了.现在想想还真是Too young too naive.前两天某大神在群里分享他招聘前端的心得的时候就说,就是那些以为能写两个页面就可以自称前端的人拉低了行业水平.这样看来前两年我还真的扯了不少后腿呢……

前端模块化开发的价值

本文发表在<程序员>杂志 2013 年 3 月刊,推荐购买. 前端模块化开发的价值 随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做项目时,常常会将一些通用的.底层的功能抽象出来,独立成一个个函数,比如 function each(arr) { // 实现代码 } function log(str) { // 实现代码 } 并像模像样地把这些函

前端模块化开发学习之gulp&amp;browserify篇

 随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发的时候,你会觉得十分费劲,因为你不知道文件之间复杂的关系,所以我们需要利用一些插件来配合进行模块化的开发. 所谓模块化的开发,写过nodejs的人都知道,文件之间的依赖可以用require()实现,但是浏览器端是不支持这样的依赖形式的,而browserify却可以解决这个问题,再加上gulp这个强大

前端模块化开发篇之grunt&amp;webpack篇

几个月前写了一篇有关gulp和browserify来做前端构建的博客,因为browserify用来做js的打包时可能有些麻烦(特别是在写React的时候),所以这里再强烈推荐一款js打包工具-webpack.webpack很强大,不光可以模块化加载js,甚至还有jsx,css,图片等等.可以看看webpack托管到github的官网,相信你看一眼就能懂webpack的强大之处了.进入webpack官网>> = =说到此处,不免有些尴尬,由于博主的英文so 一般,对webpack的认识还不够深,

js模块化开发——前端模块化

在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可:如今CPU.浏览器性能得到了极大的提升,很多页面逻辑迁移到了客 户端(表单验证等),随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀 这时候JavaScript作为嵌入式的脚本语言的定位动摇了,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码 模