前端架构设计需要注意的方面

2022-11-09 10:50 行业动态
前端架构存在的目的,

[div]

1.提高代码的可读性。


有了好的架构,代码的可读性一定很强。


简单来说,如果一个新人加入团队,他接手这个项目一定很容易,也很容易了解整个前端部分的关系,从而找到自己需要重点做什么。而不是花很多时间去熟悉这个项目的很多细节,然后才能开始做东西。


就文件而言,我们可以从文件名来区分哪些是页面,哪些是逻辑,哪些是样式,哪些是可重用组件,哪些是图标组,哪些是手机或PC专属的样式/逻辑。


就代码而言,包括统一的命名风格,封装在同一个文件中的代码足够强的相关性等。

[div][div]

2.提高代码的可维护性。


一个好的架构必须易于维护。比如增加需求,改变需求,修复bug,都不会引起意想不到的变化。比如修改一个页面组件的内容会导致另一个页面组件改变(太坑)。


因此,低耦合、高内聚、输入输出是可以预期的。

[div][div]

3.提高代码的可扩展性。


好的架构一定是可扩展的,不能写死。


改变需求太正常了,增加新的需求太正常了。因此,一个好的架构必须考虑到这些情况,因为它们必然会发生。所以,一定要避免把代码写死。


比如页面组件A中需要有一个日历组件,而这个日历组件引用了别人的(比如来自github),那么尽量不要在页面组件A中直接引用这个日历组件北京网站关键词优化系统,而是写一个日历组件B,把你引用的日历组件C封装在这个日历组件B中,然后通过这个日历组件B进行操作。


原因很简单。如果有一天产品经理说这个日历组件太丑了,那就换一个吧。如果将这个引用的日历组件C直接嵌入到页面组件A中,很可能要修改很多代码(因为不同日历组件的使用方法和暴露的接口可能不一样)。如果你在其他很多地方引用过这个日历,那你就要改了。


如果将引用的日历组件C封装到自己的日历组件B中,只需要在日历组件B中修改相应的代码,而且由于日历组件B的暴露接口不变,自然不需要修改页面中的代码。

[div][div]

4.便于协作。


包括前端和后端协同,前端和前端协同。


具体来说,前端协作通常以ajax为交互,所以应该至少有一个文件专门用来封装所有的ajax请求,所有的ajax请求都封装在这里。开发时,这里封装的方法应该可以模拟发送和接收约定的交互内容,方便开发联调。


前端和前端的协作主要体现在,在同时更改代码时,不会影响对方代码的正常运行。所以必须要求封装,去耦,低干扰。

[div][div]

5.自动化


自动打包、压缩、混淆,以及必要时的自动单元测试。

[div]


前端架构师认为,在项目开始时需要做出许多关键决策。如果等到开发阶段的后期再去考虑它们,并不是不再使用它们,而是当初的错误决策造成了无法挽回的损失。一旦做出这些决定,我们的任务就是协助视觉设计、平台开发和基础设施,让它们最大程度地满足需求。我们应该做到以下几点:

[div][div]

模块化标记

[div][div]

我们都在追求的理想状态是,网站中的每一行HTML都是程序自动生成的。作为前端开发人员,我们只需要管理这个用来生成标记的模板和流程。不幸的是,现实中通常不是这样。即使在最好的情况下,也有用户生成的内容,几乎没有一个可以自动标注CSS类名。不考虑CMS系统(可以理解为后台)自动生成HTML的能力,有时让CMS决定像表单和导航栏这样的标签更简单。


微信与项目经理沟通

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

阅读
上一篇:移动网站的特点是持续下拉。如何诱导用户阅读?
下一篇:网站开发时应该给网站建设公司哪些资料?