自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

前端 TypeError 錯誤永久消失術(shù)

作者：Sun Maobin
開發(fā) 前端
通過開發(fā) Babel 插件，打包時自動為代碼添加可選鏈運(yùn)算符(?.)，從而有效避免 TypeError 的發(fā)生。

一、背景介紹

在 JS 中當(dāng)獲取引用對象為空值的屬性時，程序會立即終止運(yùn)行并報錯：TypeError: Cannot read properties of ...

在 ECMAScript 2020 新增的 可選鏈運(yùn)算符(?.)，當(dāng)屬性值不存在時返回 undefined，從而可有效避免該錯誤的發(fā)生。

let a
a.b.c.d // Uncaught TypeError: Cannot read properties of undefined (reading 'b')
a?.b?.c?.d // undefined

本文將分享如何借助這一特性開發(fā) Babel 插件，自動為代碼添加 ?.，從而根治系統(tǒng)中的 TypeError 錯誤。

二、項目痛點

  1. 維護(hù)中的代碼可能存在 TypeError 隱患，數(shù)量大維護(hù)成本高，比如：存在大量直接取值操作：a.b.c.d。
  2. 在新代碼中使用 ?. 書寫起來太繁瑣，同時也導(dǎo)致源碼不易閱讀，比如：a?.b?.c?.d。

因此，如果我們只要在打包環(huán)節(jié)自動為代碼添加 ?.，就可以很好解決這些問題。

三、解決思路

開發(fā) Babel 插件 在打包時進(jìn)行代碼轉(zhuǎn)換：

  • 將存在隱患的操作符 . 或 [] 轉(zhuǎn)換為 ?.
  • 將臃腫的短路表達(dá)式 && 轉(zhuǎn)換為 ?.
// in
a.b.c.d
a['b']['c']['d']
a && a.b && a.b.c && a.b.c.d


// out
a?.b?.c?.d

四、目標(biāo)價值

通用于任何基于 Babel 的 JS 項目，在源碼 0 改動的情況下，徹底消滅 TypeError 錯誤。

五、功能實現(xiàn)

5.1 Babel 插件核心

  • 識別代碼中可能存在 TypeError 的風(fēng)險操作：屬性獲取 和 方法調(diào)用
  • 支持自定義 Babel 參數(shù)配置，includes 或 excludes 代碼轉(zhuǎn)換規(guī)則
  • 短路表達(dá)式 && 自動優(yōu)化
import { declare } from '@babel/helper-plugin-utils';
import * as t from '@babel/types';


export default declare((api, options) => {
  // 僅支持 Babel7 
  api.assertVersion(7);


  return {
    // Babel 插件名稱
    name: 'babel-plugin-auto-optional-chaining',
    visitor: {
      /**
       * 通過 Babel AST 解析語法后，僅針對以下數(shù)據(jù)類型做處理
       * - MemberExpression：a.b 或 a['b']
       * - CallExpression：a.b() 或 a['b']()
       * - OptionalMemberExpression：a?.b 或 a?.['b']
       * - OptionalCallExpression：a.b?.() 或 a.['b']?.()
       */
      'MemberExpression|CallExpression|OptionalMemberExpression|OptionalCallExpression'(path) {
        // 避免重復(fù)處理
        if (path.node.extra.hasAoc) return;


        // isValidPath：通過 Babel 配置參數(shù)決定是否處理該節(jié)點
        const isMeCe = path.isMemberExpression() || path.isCallExpression();
        if (isMeCe && !isValidPath(path, options)) return;
        
        
        // 屬性獲取
        // shortCircuitOptimized：&& 短路表達(dá)式優(yōu)化后再做替換處理
        if (path.isMemberExpression() || path.isOptionalMemberExpression()) {
          const ome = t.OptionalMemberExpression(path.node.object, path.node.property, path.node.computed, true);
          if (!shortCircuitOptimized(path, ome)) {
            path.replaceWith(ome);
          };
        };


        // 方法掉用
        // shortCircuitOptimized：&& 短路表達(dá)式優(yōu)化后再做替換處理
        if (path.isCallExpression() || path.isOptionalCallExpression()) {
          const oce = t.OptionalCallExpression(path.node.callee, path.node.arguments, false);
          if (!shortCircuitOptimized(path, oce)) {
            path.replaceWith(oce);
          };
        };
        
        // 添加已處理標(biāo)記
        path.node.extra.hasAoc = true;
      }
    }
  };
});

5.2 Babel 參數(shù)配置

支持 includes 和 excludes 兩個參數(shù)，決定自動處理的代碼 ?. 的策略。

  • includes - 僅處理指定代碼片段
  • excludes - 排除指定代碼片段不做處理
// includes 列表，支持正則
const isIncludePath = (path, includes: []) => {
  return includes.some(item => {
    let op = path.hub.file.code.substring(path.node.start, path.node.end);
    return new RegExp(`^${item}$`).test(op);
  })
};


// excludes 列表，支持正則
const isExcludePath = (path, excludes: []) => {
  // 忽略：excludes 列表，支持正則
  return excludes.some(item => {
    let op = path.hub.file.code.substring(path.node.start, path.node.end);
    return new RegExp(`^${item}$`).test(op);
  })
};


// 校驗配置參數(shù)
const isValidPath = (path, {includes, excludes}) => {
  // 如果配置了 includes，僅處理 includes 匹配的節(jié)點
  if (includes?.length) {
    return isIncludePath(path, includes);
  }


  // 如果配置了 excludes，則不處理 excludes 匹配的節(jié)點
  if (includes?.length) {
    return !isExcludePath(path, includes);
  }


  // 默認(rèn)全部處理
  return true;
}

5.3 短路表達(dá)式優(yōu)化

支持添加參數(shù) optimizer=false 關(guān)閉優(yōu)化。

const shortCircuitOptimized = (path, replaceNode) => {
  // 支持添加參數(shù) optimizer=false 關(guān)閉優(yōu)化
  if (options.optimizer === false) return false;


  const pc = path.container;


  // 判斷是否邏輯操作 && 
  if (pc.type !== 'LogicalExpression') return false;


  // 只處理 a && a.b 中的 a.b
  if (pc.type === 'LogicalExpression' && path.key === 'left') return false;


  // 遞歸尋找上一級是否邏輯表達(dá)式，即：a && a.b && a.b.c
  const pp = path.parentPath;
  if (pp.isLogicalExpression() && path.parent.operator === '&&'){
    let ln = pp.node.left;
    let rn = pp.node.right?.object ?? pp.node.right?.callee ?? {};


    const isTypeId = type => 'Identifier' === type;
    const isValidType = type => [
      'MemberExpression',
      'OptionalMemberExpression',
      'CallExpression',
      'OptionalCallExpression'
    ].includes(type);
    const isEqName = (a, b) => {
      if ((a?.name ?? b?.name) === undefined) return false;
      return a?.name === b?.name;
    };


    // 遞歸處理并替換
    // 如：a && a.b && a.b.c ==> a?.b && a.b.c ==> a?.b?.c
    const getObj = (n, r = '') => {
      const reObj = obj => {
          r = r ? `${obj.name}.${r}` : obj.name;
      };
      isTypeId(n.property?.type) && reObj(n.property);
      isTypeId(n.object?.type) && reObj(n.object);
      isTypeId(n.callee?.type) && reObj(n.callee);


      if (isValidType(n.object?.type)) {
        return getObj(n.object, r);
      };
      if (isValidType(n.callee?.type)) {
        return getObj(n.callee, r);
      };
      return r;
    };


    // eg：a && a.b
    if (isTypeId(ln.type) && isTypeId(rn.type)) {
      if (isEqName(ln, rn)) {
        return pp.replaceWith(replaceNode);
      }
    };


    // eg：a && a.b | a && a.b.c...
    if (isTypeId(ln.type) && isValidType(rn.type)) {
      const rnObj = getObj(rn);
      if (rnObj.startsWith(ln.name)) {
        return pp.replaceWith(replaceNode);
      }
    };


    // eg：a.b && a.b.c | a.b && a.b.c...
    // 注意：a.b.c && a.b.d 不會被轉(zhuǎn)換
    if (isValidType(ln.type) && isValidType(rn.type)) {
      const lnObj = getObj(ln);
      const rnObj = getObj(rn);
      if (rnObj.startsWith(lnObj)) {
        return pp.replaceWith(replaceNode);
      }
    };
  };
  return false;
};

六、插件應(yīng)用

配置 babel.config.js 文件。

支持3個配置項：

  • includes - 僅處理指定代碼片段（優(yōu)先級高于 excludes）
  • excludes - 排除指定代碼片段不做處理
  • optimizer - 如果設(shè)置為 false 則關(guān)閉優(yōu)化短路表達(dá)式 &&
module.exports = {
  plugins: [
    ['babel-plugin-auto-optional-chaining', {
      excludes: [
        'new .*',       // eg：new a.b() 不能轉(zhuǎn)為 new a.b?.()
        'process.env.*' // 固定短語通過.鏈接，不做處理
      ],
      // includes: [],
      // optimizer: false
    }]
  ]
}

七、不足之處

自動為代碼添加 ?. 可能會導(dǎo)致打包后文件體積略微增加，從而影響頁面訪問速度。

八、相關(guān)插件

對于不支持 可選鏈運(yùn)算符 (?.) 的瀏覽器或者版本（如：Chrome<80），可以再使用插件 @babel/plugin-transform-optional-chaining 做反向降級。

使用后效果如下：

// 第1步：考慮健壯性，使用本文插件將代碼自動轉(zhuǎn)為可選鏈
a.b ===> a?.b


// 第2步：考慮兼容性，使用 @babel/plugin-transform-optional-chaining 再做反向降級
a?.b ==> a === null || a === void 0 ? void 0 : a.b;

九、插件測試

以下是一些測試用例僅供參考，使用 babel-plugin-tester 進(jìn)行測試。

Input 輸入用例：

// 常規(guī)操作
const x = a.b.c.d
const y = a['b']['c'].d
const z = a.b[c.d].e
if(a.b.c.d){}
switch (a.b.c.d){}
// 特殊操作
(a).b // 括號運(yùn)算
const w = +a.b.c // 一元運(yùn)算
// 方法調(diào)用
a.b.c.d()
a().b
a.b().c
a.b(c.d).e
fn(a.b.c.d)
fn(a.b, 1)
fn(...a)
fn.a(...b).c(...d)
// 短路表達(dá)式優(yōu)化
// optional member
a && a.b
a && a.b && a.b.c
a.b && a.b.c && a.b.c.d
this.a && this.a.b
this.a.b && this.a.b.c && this.a.b.c.d
this['a'] && this['a'].b
this['a'] && this['a']['b'] && this['a']['b']['c']
this['a'] && this['a'].b && this['a'].b['c']
// optional method
a && a.b()
a && a.b().c
a.b && a.b.c()
a && a.b && a.b.c()
// assign expression
let a = a && a.b
let b = a && a.b && a.b.c && a.b.c.d
let c = a && a.b && a.b.c()
// self is optional chaining
a && a?.b
a && a.b && a?.b?.c
a && a?.b && a?.b?.c
a && a?.b() && a?.b()?.c
// function args
fn(a && a.b)
fn(a && a.b && a.b.c)
// only did option chaining
a.b && b.c
a.b && a.c.d
a.b && a.b.c && a.c.d
a.b.c && a.b.d
a.b.c && a.b
a.b.c.d && a.b.c.e
// not handle
a && b
a && b && c
a || b
a || b || true
// 忽略賦值操作
x.a = 1
x.a.c = 2
// 忽略算術(shù)運(yùn)算
a.b++
++a.b
a.b--
--a.b
// 忽略指派賦值運(yùn)算
a.b += 1
a.b -= 1
// 忽略 in/of
for (a in b.c.d);
for (bar of b.c.d);
// 忽略 new 操作符
new a.b()
new a.b.c()
new a.b.c.d()
new a().b
new a.b().c.d
// 配置忽略項
process.env.a
process.env.a.b.c
// 忽略 ?. 本身
a?.b
a?.b?.c?.d

Out 結(jié)果輸出：

// 常規(guī)操作
const x = a?.b?.c?.d;
const y = a?.["b"]?.["c"]?.d;
const z = a?.b?.[c?.d]?.e;
if (a?.b?.c?.d) {
}
switch (a?.b?.c?.d) {
}
// 特殊操作
a?.b; // 括號運(yùn)算
const w = +a?.b?.c; // 一元運(yùn)算
// 方法調(diào)用
a?.b?.c?.d();
a()?.b;
a?.b()?.c;
a?.b(c?.d)?.e;
fn(a?.b?.c?.d);
fn(a?.b, 1);
fn(...a);
fn?.a(...b)?.c(...d);
// 短路表達(dá)式優(yōu)化
// optional member
a?.b;
a?.b?.c;
a?.b?.c?.d;
this.a?.b;
this.a?.b?.c?.d;
this["a"]?.b;
this["a"]?.["b"]?.["c"];
this["a"]?.b?.["c"];
// optional method
a?.b();
a?.b()?.c;
a?.b?.c();
a?.b?.c();
// assign expression
let a = a?.b;
let b = a?.b?.c?.d;
let c = a?.b?.c();
// self is optional chaining
a?.b;
a?.b?.c;
a?.b?.c;
a?.b()?.c;
// function args
fn(a?.b);
fn(a?.b?.c);
// only did option chaining
a?.b && b?.c;
a?.b && a?.c?.d;
a?.b?.c && a?.c?.d;
a?.b?.c && a?.b?.d;
a?.b?.c && a?.b;
a?.b?.c?.d && a?.b?.c?.e;
// not handle
a && b;
a && b && c;
a || b;
a || b || true;
// 忽略賦值操作
x.a = 1;
x.a.c = 2;
// 忽略算術(shù)運(yùn)算
a.b++;
++a.b;
a.b--;
--a.b;
// 忽略指派賦值運(yùn)算
a.b += 1;
a.b -= 1;
// 忽略 in/of
for (a in b.c.d);
for (bar of b.c.d);
// 忽略 new 操作符
new a.b();
new a.b.c();
new a.b.c.d();
new a().b;
new a.b().c.d;
// 配置忽略項
process.env.a;
process.env.a.b.c;
// 忽略 ?. 本身
a?.b;
a?.b?.c?.d;

十、寫在最后

本文通過介紹如何開發(fā)一個 Babel 插件，在打包時自動為代碼添加 可選鏈運(yùn)算符(?.)，從而有效避免 JS 項目 TypeError 的發(fā)生。
希望這個思路能夠有效的提升大家項目的健壯性和穩(wěn)定性。

十一、參考資料

責(zé)任編輯：龐桂玉 來源： vivo互聯(lián)網(wǎng)技術(shù)
前端TypeError
相關(guān)推薦

2022-08-02 06:39:06

多行文本CSS

2022-10-27 09:13:58

CSSGradient

2019-05-20 09:30:20

MySQL常見錯誤數(shù)據(jù)庫

2022-11-28 07:35:52

前端錯誤

2011-07-28 10:32:06

廣聯(lián)達(dá)

2024-11-06 11:15:59

2022-05-30 16:31:08

CSS

2009-11-25 10:47:45

2009-12-16 14:34:32

Visual Stud

2015-09-02 14:27:30

戴爾大數(shù)據(jù)

2016-11-25 00:38:45

隔離負(fù)載均衡系統(tǒng)

2019-07-15 07:58:10

前端開發(fā)技術(shù)

2023-02-17 08:03:11

2016-11-25 00:45:37

隊列數(shù)據(jù)

2021-02-22 07:48:35

Excel數(shù)據(jù)分析快捷方式

2013-11-28 13:35:47

icon程序員

2017-04-03 21:52:30

隔離線程池分布式

2024-03-05 18:15:28

AsyncAwait前端

2017-10-20 12:18:02

HTML5代碼header

2013-08-20 09:48:59

點贊
收藏

51CTO技術(shù)棧公眾號