码迷,mamicode.com
首页 > 其他好文 > 详细

前端项目代码结构的管理

时间:2019-01-07 00:07:08      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:自己的   页面   nbsp   处理   方便   拷贝   不同   自己   现在   

  总结一下,自己对前段项目结构的构建。

  匆忙写下,后续修改。

  对于前端的各种风格,我倒是没有什么所谓,每个人有每个人的风格。我比较在意代码的结构,代码的结构清晰,更容易帮助人理解业务逻辑,而不至于陷入各种api的调用使用中无法自拔,api使用不合理,倒无所谓,每个人都有自己的欠缺,有些知识不够深入,就容易api使用不合理,但是,客户端的性能很强大,这些东西在前期都可以暂时性忽略。

  1、唯一入口。

  每一个页面都有一个唯一的入口,即,从文件夹,css,js,html都是从一个入口进入,往深入扩展,让整个结构看起来像一棵树,一层套一层。这样,在无形之中,自己就会将代码写在合适的地方。下一个接手的同事,在梳理代码的时候,更容易熟悉业务逻辑,在不是很熟悉的时候,也会将代码写在合适的地方。

  2、静态文字,资源的管理。

  从国际化角度来说,所有显示在页面上的文字都应该抽离出来;所有接口的调用地址,也应该独立存放,根据上面的唯一入口原则,当项目非常大的时候,可以折叠,查找维护起来会更加方便。

  3、动态数据的管理。

  在前端构建项目的时候,大多时候都是先写好静态页面,写好交互,再接入接口;后台版本迭代过多的时候,也可能会重构项目,将很多冗余数据,字段去除,整个项目重构,后台重构,往往前端也要跟着重构,这个时候就可以将动态数据静态化,意思是,前期构建好的项目,需要的数据,封装成一个JSON,通过一个格式化数据的js文件,转化过来,之后所有通过接口返回的数据,都通过这个js文件,转化成前端说需要的JSON结构。即,ajax ---> js文件 --->  JSON  --->  页面数据。往后,后端重构,前端样子不变,或者结构不变,我们只要在js文件中将后端返回的新的数据结构,转化成为之前的结构即可,将整个项目的交互和动态数据解耦。

  4、不同页面交接,入口分发式。

  现在很多项目都是spa,spa很大一个问题是首屏加载,而更多时候用户是过路式使用,即,只用之中一个功能,用完就走,例如打卡,打完卡就直接关闭页面(没有想解决这个问题)。比较常见的处理方式是:按模块加载,即,打包的时候将每个模块打包成一个js文件,就减少了首屏加载的一部分问题。在不断的迭代中,需求发展着很可能会让多个模块耦合在一起,随着版本的迭代,在项目的某个部分公用多个地方,又不能抽离成组件的时候,整个项目版本迭代过多之后,大多会变得不可维护,难于维护,特别是赶时间,写了代码没有时间去重新整理,就需要一个公用耦合页面入口进行分发,以后维护,还是交接时,都知道应该在哪里写代码。

  5、第三方组件,二次封装。

  现在提倡的模式是敏捷开发,各种npm,各种UI库。刚构建项目的时候,用得很爽,抬手间就将项目写完了。但是,现在定制化程度很高,产品经理需求也更多,更加想象不到,用着用着第三方的UI库,特别是多个地方用上的时候,并且UI妹子没有组件化思想,一点点改动的时候,UI库的组件就会变成非组件,最后统一组件的时候,就会发现一个残酷的现实,某些组件写着写着变成了另一个组件,某些本来不是组件的,写着写着变成了组件(写代码没有组件化,别人骂你,你还不能反驳),当某些某些组件变成了新的组件的时候,处理不恰当,新组件跟业务会耦合在一起,如果没有足够的时间梳理,那么,最简单的方法就是拷贝。。。从此,再无组件。

  6、本来不是组件的,写着写着变成组件了。无解,求搭救。 

 

 

 

 

  本文原创,不允许转载,如有问题,欢迎探讨。

 

前端项目代码结构的管理

标签:自己的   页面   nbsp   处理   方便   拷贝   不同   自己   现在   

原文地址:https://www.cnblogs.com/baimulan/p/10230868.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!