如何减少前端代码的改动

本文转载自微信公众号「前端GoGoGo」，作者Joel  。转载本文请联系前端GoGoGo公众号。

成都创新互联是一家集网站建设,合浦企业网站建设,合浦品牌网站建设,网站定制,合浦网站建设报价,网络营销,网络优化,合浦网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

工作中，大家可能会碰到这样的情况：

  • 接口的返回值变了，要改一堆代码。
  • 升级了一个第三方库，要改一堆代码。
  • 某个组件的内部实现变了，要改一堆代码。

如何在遇到这种情况的时候，减少前端代码的改动呢?我分享给大家 2 个技巧：

  • 降低代码间的耦合。
  • 业务代码和依赖代码之间加适配层。
  • 下面我们具体来看~

降低代码间的耦合

耦合指模块间关联的程度。模块之间的关联越多，其耦合性越强，那么独立性也就越差了。

高耦合的代码，会出现一处改，处处改的情况。高耦合的代码，模块之间的联系，就像一团乱码。

解藕，就是避免对模块内部具体实现的依赖。

下面我们来看一些具体的耦合场景，以及对应的解藕方案。

耦合 DOM

直接操作 DOM，是耦合的 DOM 的。当 DOM 结构发生变化时，操作代码也要跟着变。下面是显示用户名的代码：

HTML:

用户名：

 
 
 
 
    
  
  
  
  
  1. 用户名：

JavaScript:

 
 
 
 
    
  
  
  
  
  1. const userName = ...
    2. 
  
  
  
  
  2. document.querySelector('#user-name').textContent = userName
    3.

当显示用户名的 id 变成其他时， JavaScript 也要变化。

解藕方法

Vue, React 之列的框架，声明了 数据 和 视图 的关系，不会耦合 DOM。

用 Vue：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
    3.

用 React:

 
 
 
 
    
  
  
  
  
  1. function App () {
    2. 
  
  
  
  
  2.   const [userName, setUserName] = useState(...)
    3. 
  
  
  
  
  3. 
  
  
  
  
  4.   return (
    5. 
  
  
  
  
  5.     
    6. 
  
  
  
  
  6.       用户名：
    {userName}
    7. 
  
  
  
  
  7.     
  •   )
  • }

    • 耦合其他模块的方法或属性

    以组件为例，当父组件主动调用子组件方法，会造成耦合。例如，父组件要让子组件获得焦点。用 React 实现的代码如下:

     
 
 
 
      
  
  
  
  
    1.  inputRef.focus()}>点我获得焦点
      2. 
  
  
  
  
    2. // 子组件
      3. 
  
  
  
  
      4.

    如果子组件获得焦点的方法签名发生了变化，上面的代码就失效了。同样的，父组件获取子组件的内部属性，也会造成耦合的问题。

    解藕方法

    耦合方法的解决方案1

    子组件监听属性的变化，来响应父组件的主动调用。改写代码如下：

     
 
 
 
      
  
  
  
  
    1. const [controlFocus, setControlFocus] = useState(0);
      2. 
  
  
  
  
    2. return (
      3. 
  
  
  
  
    3.   <>
      4. 
  
  
  
  
    4.      setControlFocus(Date.now())}>点我获得焦点
      5. 
  
  
  
  
    5.     
      6. 
  
  
  
  
    6.   
      7. 
  
  
  
  
    7. )
      8.

    耦合方法的解决方案2

    用发布订阅模式。父组件需要主动调用子组件方法时，触发个自定义事件，子组建监听该自定义事件。

    耦合属性的解决方案1

    将耦合的属性放到父组件来维护，子组件改属性时，通知父组件。如：

     
 
 
 
      
  
  
  
  
    1. const [value, setValue] = useState(0);
      2. 
  
  
  
  
    2. return (
      3. 
  
  
  
  
    3.   
      4. 
  
  
  
  
    4. )
      5.

    耦合属性的解决方案2

    父组件要获得子组件的内部属性时，改变某个属性。子组件监听到该属性的变化后，执行父组件获取值的回调函数。

     
 
 
 
      
  
  
  
  
    1. const [value, setValue] = useState(0);
      2. 
  
  
  
  
    2. const [controlGetValue, setControlGetValue] = useState(0);
      3. 
  
  
  
  
    3. 
  
  
  
  
    4. return (
      5. 
  
  
  
  
    5.   
      6. 
  
  
  
  
    6. )
      7.

    上面代码中，父组件要获取子组件内部的 value 值，只需改 controlGetValue 的值即可。

    业务代码和依赖代码之间加适配层

    如果业务代码中有多处代码直接调用了外部依赖，如果依赖项发生了变化，调用的地方也要改。比如：接口的请求和响应改了;升级的第三方库的 API 发生了变化。

    解决这个问题，可以在业务代码和依赖代码之间加适配层。当依赖项改后，只需要改适配层代码，不需要改业务代码。

    注意：增加适配层本身会增加代码的复杂度。因此，不要过度的加。一般在满足以下 2 个条件的情况下加：

    1. 代码中有多处代码直接调用了外部依赖。
    2. 外部依赖变动的可能性比较大。

    常见的外部依赖有：配置项，接口，第三方库，全局 API。我们一个个来看。

    分类配置项

    将配置从逻辑中分离出来，写成配置文件。如

     
 
 
 
      
  
  
  
  
    1. export const API_HOST = '/api' // 接口前缀
      2. 
  
  
  
  
    2. export const PAGE_LIMIT = 10 // 分页时，一页的条数
      3.

    适配接口的请求参数和响应结果

    一般会加个适配层来统一对接口的请求参数和响应。适配层在请求里加 token 之类的，在响应里处理通用报错。如：

     
 
 
 
      
  
  
  
  
    1. const request = (options) => {
      2. 
  
  
  
  
    2.   // 添加请求拦截器
      3. 
  
  
  
  
    3.   axios.interceptors.request.use(...)
      4. 
  
  
  
  
    4.   // 添加响应拦截器
      5. 
  
  
  
  
    5.   axios.interceptors.response.use(...)
      6. 
  
  
  
  
    6.   return axios
      7. 
  
  
  
  
    7. }
      8.

    对具体接口做格式化请求参数和接口的返回。

     
 
 
 
      
  
  
  
  
    1. export const formatFromServer = res => ...
      2. 
  
  
  
  
    2. export const formatToServer = data => ...
      3.

    适配第三方库

    如果是第三方组件，可以用个组件代理第三库的组件。如：

     
 
 
 
      
  
  
  
  
    1. import { Sortable } from "react-sortablejs"
      2. 
  
  
  
  
    2. function Sort(props) {
      3. 
  
  
  
  
    3.   return (
      4. 
  
  
  
  
    4.     
  
  
  
  
    5.       {...props}
      6. 
  
  
  
  
    6.       ...
      7. 
  
  
  
  
    7.     >
      8. 
  
  
  
  
    8.       ...
      9. 
  
  
  
  
    9.     
      10. 
  
  
  
  
    10.   )
      11. 
  
  
  
  
    11. }
      12.

    如果是一个函数，可以用一个函数来代理。如：

     
 
 
 
      
  
  
  
  
    1. import xxx from 'xxx'
      2. 
  
  
  
  
    2. function myXxx(...args) {
      3. 
  
  
  
  
    3.   return xxx(...args)
      4. 
  
  
  
  
    4. }
      5.

    适配全局 API

    如果我们大量代码用了浏览器的可能会被废弃的实验性的 API。可以做这样的配置:

     
 
 
 
      
  
  
  
  
    1. const someAPI = () => {
      2. 
  
  
  
  
    2.   if(window.someAPI) {
      3. 
  
  
  
  
    3.     return someAPI
      4. 
  
  
  
  
    4.   }
      5. 
  
  
  
  
    5.   // 不支持的情况。
      6. 
  
  
  
  
    6.   return () => ...
      7. 
  
  
  
  
    7. } 
      8.

    总结

    外部变化后，要减少前端代码的改动，主要靠 降低代码的耦合 和 增加适配代码。但也不要过度使用哦~

    当前文章：如何减少前端代码的改动
    本文URL：http://www.shufengxianlan.com/qtweb/news16/38566.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    网站改版知识

    同城分类信息

    成都木托盘　　 　品牌官网设计　　 　温江网站建设　　 　成都画册设计公司　　 　雪茄烟　　 　南充电信机房托管　　 　主机托管　　 　成都网站制作　　 　香港空间腾讯云　　 　成都seo优化　　 　成都网创优客　　 　成都企业网站建设　　 　不锈钢防护栏　　 　托管服务器　　 　成都微信开发　　 　明安消防器材　　 　成都二枢机房　　 　成都广告制作　　 　雅安服务器托管　　 　无边发光字厂家