前端代码重构和解耦

比眉伴天荒 2022-06-04 06:13 278阅读 0赞

## 前端代码重构主要有下面几点 ##

一、删除无用代码，精简代码

1、删除无用的css和javascript,删除javascript中已经无用的方法

二、前端代码规范

1、把页面中内联样式及头部样式提取到单独的css文件中  
2、调整代码的缩进  
3、更改标注已经不支持的标签如:  
4、在javascript中减少全局变量的使用，缩小变量的作用域  
5、整理基础类库,减少因为版本的问题造成多个文件

三、前端代码模块化

1、按模块归类css代码与js代码，放到模块对应的文件夹中  
2、按模块分离js代码，定义不同的命名空间

四、提高页面加载性能

1、将不影响首页展现的javascript文件延迟到页面加载后加载  
2、删除页面中初始隐藏的区域  
3、javascript改为按需加载  
4、图片的懒加载  
5、调整css和js的引用顺序  
6、给静态文件设置缓存  
7、加载CDN上的文件  
8、图片合并

## *前端代码解耦需要考虑的方面* ##

> 前端代码如何解耦？  
> 高内聚，低耦合是我们在软件开发中所追求的。编写前端代码(HTML、CSS和JavaScript)也跟后端Java开发一样，需要注重代码的解耦，保持更好的可维护性，可扩展性，以及可读性。

![这里写图片描述][SouthEast]

一、JavaScript代码解耦 可以从以下3个方面着手：

1、划分清晰的JS模块层次

2、组织高内聚的JS模块

3、设计透明的JS模块依赖和通信

二、关于前端与后端的解耦

> 这块谈到解耦的场景是前端调用后端进行前台渲染。  
> 前端和后端的关联的地方主要在数据这一块，主要把这块理清楚了，那么后续就好办了。在开发前期需要做如下类型：

1）接口的类型：AJAX还是JSONP  
2）入参要求  
3）返回的数据编码以及格式（如果有多种状态，需要提前约定好）以上这些都需文档化。 那么在接下去的开发，前端自己模拟数据进行开发，后端同学只要能够提供正确的数据即可

三、JavaScript与HTML解耦

1.HTML和Javascript的分离 结构、表现和行为分离一直是我们提倡的。不需要把JS代码写入到HTML标签上。

2.Javascript尽量依赖DOM元素的class，而不要依赖tag 在改变HTML结构的情况下，如果保持class不变，还是可以保持JavaScript不变。

3.为重复使用的dom创建变量 在你的代码里面，尽量在模块顶部声明依赖的DOM元素，后期改动方便，而且也提升代码执行效率。

4.划分模块按功能划分 为每个模块定义不一样的class以及ID，后续所有操作都维围绕着这个模块展开。

[SouthEast]: /images/20220604/041de7d2473e4a61a2a136dd8a302fc2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，278人围观）

还没有评论，来说两句吧...

相关阅读

相关项目重构过程中，Java代码如何实现模块化和解耦？

在项目重构中，将Java代码实现模块化和解耦可以通过以下几种方式： 1. **面向对象编程**：利用类（Class）的概念，将相关功能封装在不同的类中。这样，同一个类不会影响

叁歲伎倆/ 2024年12月09日 12:09/ 0 赞/ 55 阅读

相关《重构代码设计》

1、什么是重构？ 1、经常性的重构有助于代码维护自己该有的形态 2、消除重复代码，可以确定所有事务和行为在代码中只表述一次，这正是优秀设计的根本 3、重构可以帮我

古城微笑少年丶/ 2023年09月28日 19:08/ 0 赞/ 19 阅读

相关代码重构

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

悠悠/ 2023年06月17日 03:55/ 0 赞/ 80 阅读

相关 java 里面耦合和解耦

百度解释：耦合是指两个或两个以上的体系或两种运动形式间通过相互作用而彼此影响以至联合起来的现象。解耦就是用数学方法将两种运动分离开来处理问题。这是形象搞

绝地灬酷狼/ 2023年05月30日 13:58/ 0 赞/ 13 阅读

相关代码重构感想

本文是一篇流水账，将会浪费你几分钟的时间，刷到的铁子不太闲就没必要看了絮絮叨叨月初，我来到了实习的公司入职，认识了一下各种以前没有接触过的平台，业务，有些词汇也没接

╰+攻爆jí腚メ/ 2023年02月19日 08:24/ 0 赞/ 55 阅读

相关代码重构点

文章出处： http://blog.csdn.net/lovelion/article/details/9301691 Martin Fowler在Refactor

一时失言乱红尘/ 2022年06月09日 05:53/ 0 赞/ 332 阅读

相关代码重构技巧

代码重构 1. 提炼函数规则 a. 避免出现超大函数 b. 独立出来的函数有助于复用 c. 独立出来的函数更容易被覆写

- 日理万妓/ 2022年06月07日 09:20/ 0 赞/ 391 阅读

相关前端代码重构和解耦

前端代码重构主要有下面几点一、删除无用代码，精简代码 1、删除无用的css和javascript,删除javascript中已经无用的方法二、前端代码规范 1、

比眉伴天荒/ 2022年06月04日 06:13/ 0 赞/ 279 阅读

相关关于代码解耦

烂的代码，都有各自烂的地方，不过基本都有一个共同的特点：耦合重，各个模块各个类各个功能点之间关系牵扯不清，经常你调用我调用你，或者全局变量漫天飞；对于怎么理清这些模块或

素颜马尾好姑娘i/ 2022年05月24日 13:50/ 0 赞/ 315 阅读

相关解耦重构 Internet BGP SDN

1 介绍/Why 高清视频直播和云计算的蓬勃发展，带来互联网流量持续高速增长，主流云公司的Internet出口带宽都已经达到Tbps级别。鉴于网络的拥堵大部分发生在出口互联

红太狼/ 2022年05月10日 12:44/ 0 赞/ 163 阅读