zoukankan      html  css  js  c++  java
  • 模块引用方式利弊辨析: 全局绝对引用(alias) && 长相对引用

    前言

    这个问题首先要从我们项目的require语句开始说起。
    当打开我们项目的时候,我们可能会看到一大堆长相对引用,如下所示:
    import component from '../../../../component/aaa.js'
    你一定知道,webpack中有个叫做alias的配置属性,可以帮助我们搞全局引用配置。比如说,在webpack.config.js中配置相应的键值对,我们就可以通过require(‘util’) 这种方式,而非require(‘../../../util’)这种方式,去做引用。
    项目中虽然没有用webpack,但是用到了babel,而babel有个叫做babel-plugin-module-resolver可以做类似的事情
    介绍:    https://www.jianshu.com/p/beafc1470fca 
    npm地址: https://www.npmjs.com/package/babel-plugin-module-resolver
    好,最关键的问题来了,到底是选用全局绝对引用(alias)   还是  长相对引用??? 其利弊几何??

    两种方式

    • 使用全局路径,依靠babel插件实现全局引用(alias)
    • 使用相对路径,并依靠VScode自带功能提升效率

    使用全局路径,依靠babel插件实现全局引用(alias)

    • 代码简洁,短小精悍

    • 无法利用VScode默认自带功能实现点击跳转,比如我们看代码时候经常需要点击一个require的链接,然后实现跳转,但是使用这种alias的时候不能实现自动跳转
    • 无法利用VScode默认自带的路径导入功能,写成alias虽然简单了,但是形式上简单,实际工程中却未必简单,这是因为,如果是采用相对路径的话,根据系统的默认自带功能,可以自动引入相对路径的,根本无需编写。如果你采用绝对路径的方式书写方法时,VScode的这一功能就爱莫能助了
    • 完全不需要考虑代码重构问题
    • RN-web和RN的代码打包方式不一致,可能产生冲突,因为RN用的是babel结合bundleJS打包的,而web是根据webpack打包的,两者在设置全局alias的时候方式可能不一样,需要测试预估风险

    使用相对路径,并依靠VScode自带功能提升效率

    实际上,今天的VScode已经非常强大了,上面的对比其实就讲了VScode自带功能,给相对路径的效率带来的巨大提升:
    • VScode默认自带相对路径跳转功能,实现相对路径点击跳转。这是个非常有用的功能,当你在A文件中,看到它引用了一个B文件下的类,你可以直接跳转到B文件,让代码阅读变得非常方便
    • VScode默认自带相对路径导入功能,如果是采用相对路径的话,根据系统的默认自带功能,你敲出方法名的时候,会逐个字母筛选并显示提示,同时选择对应方法的时候,文件上方会自动引入那个模块的相对路径。
    • 文件路径修改时候,VScode自带一键更新路径功能,所以重构什么的so easy!
    • 思路保守,不会发生不可预测的问题

    额。。。。。。 好像除了写起来不太好看之外,没有什么明显的缺点,哈哈哈哈

    折中方案, 以及进一步的利弊分析

    OK,那我们能不能既让代码好看,同时还使用方便简单呢??

    其实我想过这么一种方案:

    1.通过加入alias的功能,让代码简洁漂亮,不像长相对路径那样那么冗长
    2.通过IDE插件,如VScode插件,让代码编写的流畅性和相对路径一样
     
    但是这种方式的缺点显而易见:
    • 插件生态问题:我们团队不可能大家都用VScode, 而且本来VScode就不一定有这种插件,而其他IDE的社区就更差了,我认为能通过插件达到效果的希望不大
    • 就算真的有这些插件,使用起来似乎也不太方便,VScode的扩展插件的代码是不能上传到github的,要自己下载,而同步的话又需要额外的插件,这样,新人加进来就不能做到开箱即用了。我们之间团队的协调还不能做到完全一致,可能新人进来没人引导他下载这些VScode插件
    • 好吧,就算前2种都没问题,但其实还是有问题,因为我们没办法完全禁掉相对路径引用,所以结果就是相对引用和绝对引用并存的状态,这时候风格就很乱,不统一

    结论

    就用相对路径吧!! 难看就难看呗,咱们追求的是实用主义

  • 相关阅读:
    加速 MySQL 导入导出的方法
    Unix中shell脚本 中如何把变量截取
    HTTP POST GET 本质区别详解
    mysql replication 互为主从的安装及配置,以及数据同步
    linux bash shell之变量替换::=句法、=句法、:句法、句法、=?句法、?句法、:+句法、+句法
    bash下: () {} [] [[]] (())的解释
    linux shell 数组有关的一些知识
    Windows下XDebug 手工配置与使用说明
    上传图片并实现缩略图
    使用XmlWriter写XML文件
  • 原文地址:https://www.cnblogs.com/penghuwan/p/11752575.html
Copyright © 2011-2022 走看看