前端代码重构和解耦

比眉伴天荒 2022-06-04 06:13 246阅读 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 条评论，246人围观）

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

相关阅读

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

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

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

相关代码重构：Java重构代码提高软件质量的实践

代码重构是软件开发过程中的一个重要环节，它旨在改进现有代码的设计、结构和可维护性，而不会改变程序的行为。以下是在Java中进行代码重构的一些实践： 1. **提取方法**：当

向右看齐/ 2024年09月20日 06:21/ 0 赞/ 86 阅读

相关代码重构

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

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

相关重构代码常见流程

1 重构的步骤 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG

淩亂°似流年/ 2022年12月10日 10:29/ 0 赞/ 259 阅读

相关代码重构点

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

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

相关代码重构技巧

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

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

相关前端代码重构和解耦

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

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

相关关于代码解耦

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

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

相关解耦重构 Internet BGP SDN

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

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

相关重构Javascript代码示例(重构前后对比)

今天有做了几个`asp.net`结合`Javascript`的教程文章。现回顾头来看看那些`Javascript`脚本，有写得不太理想，过于复杂。现抽取出来，重构它们。之

青旅半醒/ 2021年07月04日 14:24/ 0 赞/ 491 阅读