Hybrid框架UI重构之路:四、分而治之-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

Hybrid框架UI重构之路:四、分而治之

简介:

上文回顾:Hybird框架UI重构之路:三、工欲善其事,必先利其器

上一篇文章有说到less、grunt这两个工具,是为了css、js分模块使用的。UI框架提供给使用者的时候,是一个大的xxx.js、xxx.css,但在开发时候,必须划分模块。

CSS模块划分

1.variables.less

这里面是一些样式的变量、函数

例:

字体:

@baseFontSize:          20px;

圆角:

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  //-moz-border-radius: @radius;
}

用法:

复制代码
body{
  font-size: @baseFontSize;
}
input {
  .rounded-corners (6px);
}
复制代码

PS:less中单行注释不会显示在编译后的css中。

2.reset.less

重置样式

3.base.less

全局基础样式

4.layout.less

布局样式

UI框架收集两种布局。一种是弹性布局,弹性布局最大的优点就是能充分利用屏幕空间。无论客户端分辩率多大,都能自动适应宽度的变化; 一种是bootstrap 12栏布局,12栏布局特点是栏目跟栏目之间有固定的间隙。

4-1.layout-page.less

页面结构的样式,header、content、footer、aside(侧边栏)等样式。

4-2.layout-scene.less

这里写一些场景式结构的样式,登陆页、搜索栏、九宫格等样式。

5.components.less

各个控件、组件的样式。

6.external.less

其他样式。

 
JS模块划分

属于UI框架的是module、plugin,模块划分在这两个文件夹里,其他是依赖库。

module和plugin的区别是什么?

我认为是他们两个都是可重用模块,区别就在于module是UI框架必不可少或经常使用的,而plugin是根据不同场景才使用的。

module里面东西,划分参照了Jingle,做了相应的调整。

plugin是插件

这里面是一系列的原生功能接口(二维码、通知等)、一些前端控件。可以看到我里面使用gmu的两个控件(不是最新版本)。

 

总结
我之所以将模块划分作为单独的一章,是在于强调模块化的重要性。
1.代码更加清晰、易开发、易维护
2.用户项目可以选择适合的模块生成css、js框架依赖库,减少文件体积,提高加载速度
 
本文转自 海角在眼前 博客园博客,原文链接:http://www.cnblogs.com/lovesong/p/4297067.html   ,如需转载请自行联系原作者
http://www.cnblogs.com/lovesong/p/4297067.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: