2016的最后一天,多多少少都应该总结一下这一年的得失,哪里做的好,哪里需要改进,记一笔,或许将来会用到呢。

  毕业差不多半年了,一直是一个人在负责公司项目的前端开发与维护,当时公司希望前后端分离,提高前端的开发效率和后期维护的便捷,所以自己在经过一番调查后,决定采用SPA的模式,其主要原因还是阿里中途岛的那样的东西,我们没办法搞出来。

  项目不需要兼容IE8及以下的浏览器,所以在选型的时候果断选了Vue.js那一套的东西,因为react之前也有了解过,上手的确没Vue来的快。

  除去旧项目的维护时间,使用vue也有三个多月了,写一写这段时间来的使用心得吧

 1. 如何划分组件和模块

  组件化开发已经是谈了很久的东西了,在没有实战经验之前,看看民工大哥还有一些其他前辈写的博客,感觉这东西真的好牛叉,太好用了,但真当动手开始做的时候才会发现,其实并没有想象的那么简单和美好。具体的问题可以参考这篇文章Vue.js实践

  在组件的划分上,我把比较笼统的组件(components)分成了部件(widgets)和模块(modules)两个部分,部件主要是一些功能型的东西,而模块则是通过UI样式去定义。

  我们从源头分析一下,一个网站是通过很多页面组成的,而每个页面有包含了不同的块,每个块则是通过不同的元素构成,这些元素我们可以把它想象成部件,也就是页面的最小构成单位。

  但是在实际的开发当中,我并没有把所有元素都写成部件,而是一些功能型并且会重复使用的元素,才会写成部件,比如下拉框、切换开关等

而对于模块,则是包含了多个元素,里面也可能会存在部件,比如:

  不管是部件还是模块,其目的都是为了复用,都可以统称为组件,之所以要这样划分成两个类别,是为了层次更加清晰,职责单一明确,更容易管理与维护。

  当然,并不是所有UI样子差不多或者一样的地方都会把它写成组件,比如:

  这两个导航,样式都一样的,但是用一个通用的样式或许会比写一个组件更加方便,这样就能减少一个组件的数据处理了。

 2.组件样式

  以前最头疼的就是class命名了,不过很庆幸的是Vue以自己的方式实现了shadow DOM。利用shadow DOM,使用BEM的命名方式,再配合单一职责的样式划分,再也不用担心class如何命名了。

  使用BEM规范的命名方式的好处我这里不多说,大家可以自己百度,但是缺点就是class名往往可能会出现好长一串,这时利用shadow DOM可以很好的解决这个问题。

  所有的模块里面所包含的元素无非也就那些:header、navicat、title、list、item、text......在开发的时候我写了一个规范,BEM三个部分分别都由哪些来构成,基本能满足所有的模块,几遍模块里有乱七八糟的一堆元素。后面会贴上命名规范。

  使用单一职责的样式主要是为了解决组件组合拼凑的问题,在实际开发中,几遍看上去功能一样,UI也基本相同的地方,但是UI设计人员也可能会做出一些让人很郁闷的图,使得组件的呈现和布局样式不同,更别说是用在功能内容都不一样的地方了。

  这个时候为了更好、更简单清晰的实现布局,变会使用一些单一职责的样式,比如:

  

              

  就像这三张图,明明就同一个东西,非要搞差异化,如果这些都写在一个组件里,并不是不行,但是却很麻烦,但是如果我们组件写好一个基础的样式,另外的直接通过添加单一职责样式的class名,这样就方便多了。当然最好还是和UI同学商量,保持UI的一致性原则,不要为了自以为的好看,闭着眼睛乱画图。

  当然,在同一个组件里的样式肯定还是需要通过prop之类的操作,但是在外部的布局和展现方面,我们可以在引用组件的时候,直接添上需要的class名就行了,这里不展示具体代码了。

 3.工程结构

  直接上图吧,实在不想写了,着急回家啊。

  

  assets文件夹里的less文件夹放的就是一些单一功能的样式,比如layout.less文件里:

  

/* 上外边距 */
.mt30 { margin-top: 30px; }
.mt60 { margin-top: 60px; } /* 右外边距 */
.mr30 { margin-right: 30px; }
.mr70 { margin-right: 70px; }
.mr90 { margin-right: 90px; } /* 底外边距 */
.mb20 { margin-bottom: 20px; } /* 左外边距 */
.ml30 { margin-left: 30px; }
.ml40 { margin-left: 40px; }
.ml70 { margin-left: 70px; }

  components文件夹里的就更清楚了,widgets放一些公用的小部件,modules里放公共模块,而pages里就是各个页面了。

  规范明后天再来贴。。。先回家了,实在坐不住了

  

  

  

最新文章

  1. semantic modal 首次弹出位置不正确()
  2. hdu4970 Killing Monsters (差分数列)
  3. 基于JQuery.timer插件实现一个计时器
  4. Siverlight去掉ToolTip的白色边框
  5. log4j 使用笔记整理中
  6. Using an Interface as a Type
  7. windows下 定时删除tomcat日志和缓存。可以保留天数
  8. OpenSSL加解密
  9. Flex前台和后台WCF服务之间数据的接收与传输
  10. 源代码管理工具TFS2013安装与使用【转载】
  11. 读书笔记-你不知道的JS上-词法作用域
  12. PHP(一)OOP基础
  13. acrobat pdf 按页拆分
  14. 深入理解Redis系列之SpringBoot集成Redis
  15. 3.GUI Skin和自定义风格的组件 --《UNITY 3D 游戏开发》笔记
  16. 【sping揭秘】22、事务管理
  17. 微信小程序细节
  18. C++解析五-this 指针,指向类的指针
  19. CentOS 7 Apache服务的安装与配置
  20. Python编程-基础知识-List

热门文章

  1. thinkphp pathinfo nginx 无法加载模块:Index
  2. Exhange上添加IMAP4
  3. zepto源码--核心方法7(管理包装集)--学习笔记
  4. mysql下面的INSTALL-BINARY的内容,所有的mysql的配置内容都在这
  5. Ext TreeGrid提交修改过的数据
  6. JavaWeb学习总结
  7. java - import *
  8. iOS: 在代码中使用Autolayout (2) – intrinsicContentSize和Content Hugging Priority【转】
  9. 深入探索C++对象模型-1
  10. React 在服务端渲染的实现
  11. soj4538: ShouHuXueJie Problem DFS
  12. 51 nod 1406 与查询
  13. 一篇详细的linux中shell语言的字符串处理
  14. 深入理解Mybatis插件开发
  15. Kafka技术内幕 读书笔记之(四) 新消费者——消费者提交偏移量
  16. Vue系列之 => 路由匹配
  17. 安卓开发_浅谈Notification(通知栏)
  18. Xamarin开发的一个简单画图程序分享
  19. Luogu 4234 最小差值生成树 - LCT 维护链信息
  20. Azure DevOps Server 2019 (TFS)安装教程