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
相关文章
|
24天前
|
Rust JavaScript 前端开发
ES6 awaitRust UI 框架
ES6 awaitRust UI 框架
|
24天前
|
前端开发 JavaScript
electron ui框架
Electron是一个使用JavaScript, HTML和CSS等前端技术构建跨平台桌面应用程序的框架。
64 0
|
21天前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
64 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
2月前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
54 2
|
24天前
|
Rust 自然语言处理 API
|
4月前
|
SQL 网络协议 数据库连接
【Azure 应用服务】遇见“无法创建hybrid connection for App Service”的解决办法
【Azure 应用服务】遇见“无法创建hybrid connection for App Service”的解决办法
|
编解码 移动开发 JavaScript
开发Hybrid App的技术选型
开发Hybrid App的技术选型
197 0
|
移动开发 前端开发 Java
移动端开发必备知识-Hybrid App
开发必备知识-Hybrid App
655 0