最新公告
  • 欢迎您光临起源地模板网，本站秉承服务宗旨 履行“站长”责任，销售只是起点 服务永无止境！立即加入钻石VIP
    • 10年
    专注帝国cms二次开发
    升级SVIP
    站长资源平台
    当前位置：站长学院 > 综合教程 > 使用 babel 插件来打造真正的“私有”属性

    使用 babel 插件来打造真正的“私有”属性

    正文概述 掘金(十年踪迹)   2021-01-19   355

    大家都知道 JavaScript 的对象属性默认是可以被从外部访问和修改的，也就是说，JavaScript 本身不存在完全“私有”的对象属性。例如：

    class Point{
    constructor(x, y){
        this._x = x;
        this._y = y;
    }
    get length(){
        const {_x, _y} = this;
        return Math.sqrt(_x * _x + _y * _y);
    }
}

let p = new Point(3, 4);
console.log(p._x, p._y, p.length); //3, 4, 5

    在上面的代码里，我们约定俗成地用下划线开头来表示私有变量。我们希望 _x、_y 不被外部访问，然而，这只是我们一厢情愿，使用者还是可以访问到这两个变量。

    在这里，我们不讨论 ES 的 private 标准提案，而是讨论如何使用工具来将约定变成真正的私有。

    使用 Symbol 来构造私有数据

    ES6 提供了一个新的数据类型叫做 Symbol，Symbol 有许多用途，其中一个用途是可以用来生成唯一 key，用作属性标识，我们利用它可以实现真正的私有属性：

    const [_x, _y] = [Symbol('_x'), Symbol('_y')];
class Point{
    constructor(x, y){
        this[_x] = x;
        this[_y] = y;
    }
    get length(){
        const x = this[_x], 
              y = this[_y];

        return Math.sqrt(x * x + y * y);
    }
}

let p = new Point(3, 4);
console.log(p._x, p._y, p.length); //undefined, undefined, 5

    我们改写上一版的代码，用 Symbol 的 _x、_y 代替字符串来作为 key，这样，外部 p 访问 _x、_y 属性就访问不到了，这样我们就真正实现了对象数据的私有。

    上面这种用法并不复杂，但是，如果我们每次定义对象都这么去写还是显得麻烦。因此，我们可以考虑让编译器去做这件事情，自动将下划线开头的属性编译成私有属性。

    使用 Babel 插件来实现属性的默认私有

    在这里，我们可以开发 Babel 的插件来实现。Babel 的原理在博客之前的文章中有介绍。还有使用 Babel 插件来进行测试覆盖度检查的例子。如果对于 Babel 不熟悉的同学，可以回顾一下之前的文章。

    首先，我们分析一下要处理的 AST 部分。ES6 的 class 有两种 node 类型，一种是 ClassDeclaration，另一种是 ClassExpression。它们比较类似，但是在一些细节上又有区别。比如 ReturnStatement 之后可以跟 ClassExpression 但是不能跟 ClassDeclaration。

    ClassDeclaration 与 ClassExpression

    //ClassDeclaration
class Foo{
 //...
}

//classExpression
const Bar = class MyClass{
  //...
}

    对这两种 node，如果其中有下划线开头的属性，可以分别编译成如下形式：

    const Foo = function(){
  [...fields] = [...Symbol(...)]
  class Foo {
    //...
  }
  return Foo;
}();

const Bar = function(){
  [...fields] = [...Symbol(...)]
  return class MyClass{
    //...
  }
}();

    此外，还需要考虑 ES Modules 的情况：

    export class Foo{
  //...
}

    对应为：

    export const Foo = function(){
  //...
}();

    上面的形式没有问题。但是如果：

    export default class Foo{
  //...
}

    对应为：

    export default const Foo = function(){
  //...
}();

    编译会报错。因此要进行修改，对应成：

    const Foo = function(){
  //...
}();
export default Foo;

    由于 Class 允许存在嵌套，因此，我们需要使用堆栈结构，在 AST 的 enter 的时候创建存放当前 Class 的 scope 下的私有属性列表。堆栈还有一个作用，就是如果堆栈为空，那么当前作用域不在 Class 内部，不用进行编译转换。

        ClassDeclaration: {
      exit(path){
        let expr = transformWrapClass(path.node);
        if(!expr) return;

        if(path.parentPath.node.type === 'ExportDefaultDeclaration'){
          //处理 export default 的特殊情况
          path.parentPath.insertAfter(t.exportDefaultDeclaration(
            t.identifier(path.node.id.name)
          ));
          path.parentPath.replaceWith(expr);
        }else{
          //替换掉当前 path
          path.replaceWith(expr);
        }

        path.skip();
      },
      enter(path, state){
           //创建存放私有变量标识符的堆栈
        stack.push({
          variables: new Set()
        });
      }
    },
    ClassExpression: {
      exit(path){
        let expr = transformWrapClass(path.node);
        if(!expr) return;

        //ClassExpression 可以直接 export default
        path.replaceWith(expr);

        path.skip();
      },      
      enter(path, state){
        stack.push({
          variables: new Set()
        });
      }    
    }

    接下来，我们处理具体的 Identifier：

        Identifier(path, state) {
      if(stack.length <= 0) return; //不在 class 作用域内，直接返回 
      if(/^__.*__$/.test(path.node.name)) return; //系统保留属性，比如 __proto__

      let node = path.node,
          parentNode = path.parentPath.node,
          meta = stack[stack.length - 1];

      let regExp = new RegExp(state.opts.pattern || '^_');

      //给属性名增加前缀后缀，避免内部使用时出现重名
      //比如应当允许 let _x = this._x;
      let symbolName = '$' + node.name + '$'; 

      if(parentNode 
         && parentNode.type === 'MemberExpression' 
         && parentNode.object.type === 'ThisExpression'
         && !parentNode.computed
         && regExp.test(node.name)){ //private

        //对于私有属性的读写 this._x，直接替换成 this[_x]
        //并且记录下当前变量标识符，添加到栈顶的 Set 中去
        node.name = symbolName;
        meta.variables.add(node.name);
        parentNode.computed = true;
      }else if(parentNode 
         && parentNode.type === 'MemberExpression' 
         && parentNode.object.type === 'Super'
         && !parentNode.computed
         && regExp.test(node.name)){

        //使用 super._x 访问父元素的属性，进行一个变换
        node.name = symbolName;
        parentNode.computed = true;
        let expr = transformPropertyToSymbol(node.name);
        path.replaceWith(expr);
        path.skip();
      }else if(parentNode 
         && parentNode.type === 'ClassMethod' 
         && regExp.test(node.name)){

        //处理 class 的方法和 getter、setter 名带下划线的情况。
        node.name = symbolName;
        meta.variables.add(node.name);
        parentNode.computed = true;
      }
    },

    Protected 的属性和 super._x 操作

    对于对象方法带下划线的情况，和 this 带下划线不同，我们是可以使用 super.属性名 来访问的。比如：

    class Foo{
    constructor(x) {
        this._x = x;
    }
    //这是一个 protected 的属性，在派生类中可以通过 super._X 访问
    get _X(){
        return this._x;
    }
}

class Bar extends Foo{
  constructor(x, y){
      super(x);
      this._y = y;
  }
  get XY(){
      return [super._X, this._y];
  }
}

let bar = new Bar(3, 4);
console.log(bar.XY); //[3, 4]

    在这里，我们需要对 super._X 进行处理，如果直接编译：

    const Foo = function(){
    const [$_x$, $_X$] = [Symbol('$_x$'), Symbol('$_X$')];

    class Foo{
        constructor(x) {
            this[$_x$] = x;
        }
        //这是一个 protected 的属性，在派生类中可以通过 super._X 访问
        get [$_X$](){
            return this[$_x$];
        }
    }
    return Foo;
}();

const Bar = function(){
    const [$_y$, $_X$] = [Symbol('$_y$'), Symbol('$_X$')];
    class Bar extends Foo{
      constructor(x, y){
          super(x);
          this[$_y$] = y;
      }
      get XY(){
          return [super[$_X$], this[$_y$]];
      }
    }
    return Bar;
}();

let bar = new Bar(3, 4);
console.log(bar.XY); //[undefined, 4]

    由于每个 Symbol 都是唯一的，所以 Bar 的 Symbol('X_XX​') 和 Foo 的并不相同，这样也就获取不到 super[X_XX​] 实际的值了。

    因此，在这里，我们编译的时候不能直接这样转成 Symbol，而是要通过反射机制去处理：

    const Foo = function(){
    const [$_x$, $_X$] = [Symbol('$_x$'), Symbol('$_X$')];

    class Foo{
        constructor(x) {
            this[$_x$] = x;
        }
        //这是一个 protected 的属性，在派生类中可以通过 super._X 访问
        get [$_X$](){
            return this[$_x$];
        }
    }
    return Foo;
}();

const Bar = function(){
    const [$_y$] = [Symbol('$_y$')];
    class Bar extends Foo{
      constructor(x, y){
          super(x);
          this[$_y$] = y;
      }
      get XY(){
          return [super[Object.getOwnPropertySymbols(this.__proto__.__proto__).filter(s => String(s) === "Symbol($_X$)")[0]], this[$_y$]];
      }
    }
    return Bar;
}();

let bar = new Bar(3, 4);
console.log(bar.XY); //[3, 4]

    上面的 super 里的 key 有一大串，是：

    Object.getOwnPropertySymbols(this.__proto__.__proto__)
    .filter(s => String(s) === "Symbol($_X$)")[0]

    这里通过 Object.getOwnPropertySymbols(this.__proto__.__proto__) 反射出父类的 Symbol，然后通过字符串匹配到对应的 key。

    于是，我们确定了转换方法，那么接下来就只是实现具体的转换细节了：

      function transformCreateSymbols(){
    let meta = stack.pop(),
        variableNames = Array.from(meta.variables);

    //no private variables
    if(variableNames.length <= 0) return;

    let identifiers = variableNames.map(id => t.identifier(id));

    let pattern = t.arrayPattern(identifiers);

    let symbols = variableNames.map(id =>  
      t.callExpression(t.identifier('Symbol'), [t.stringLiteral(id)]));

    symbols = t.arrayExpression(symbols);

    return t.variableDeclaration(
      'const',
      [t.variableDeclarator(pattern, symbols)]
    );  
  }

  function transformWrapClass(cls){
    let symbols = transformCreateSymbols();
    if(!symbols) return;

    if(cls.type === 'ClassDeclaration'){
      let expr = t.callExpression(
        t.functionExpression(null, [], 
          t.blockStatement(
            [symbols,
             cls,
             t.returnStatement(
               t.identifier(cls.id.name)
             )]
          )
        ), []
      );

      return t.variableDeclaration(
        'const',
        [t.variableDeclarator(
          t.identifier(cls.id.name),
          expr
        )]
      );
    }else if(cls.type === 'ClassExpression'){
      return t.callExpression(
        t.functionExpression(null, [], 
          t.blockStatement(
            [symbols,
             t.returnStatement(
               cls
             )]
          )
        ), []
      );
    }
  }

    上面的方法将 ClassDeclaration 和 ClassExpression 处理完成。接下来是处理 super 属性的部分：

      function transformPropertyToSymbol(name){
    let expr = t.callExpression(
      t.memberExpression(
        t.identifier('Object'),
        t.identifier('getOwnPropertySymbols')
      ), [
        t.memberExpression(
          t.memberExpression(
            t.thisExpression(),
            t.identifier('__proto__')
          ),
          t.identifier('__proto__')
        )
      ]
    );

    expr = t.callExpression(
      t.memberExpression(
        expr,
        t.identifier('filter')
      ),
      [
        t.arrowFunctionExpression(
          [t.identifier('s')],
          t.binaryExpression(
            '===',
            t.callExpression(
              t.identifier('String'),
              [t.identifier('s')]
            ),
            t.stringLiteral(`Symbol(${name})`)
          )
        )
      ]
    );

    expr = t.memberExpression(
      expr,
      t.numericLiteral(0),
      true
    );

    return expr;
  }

    上面代码虽然繁琐，但都并不复杂，只是 AST 树的构建而已。最终，我们形成完整的插件代码。有兴趣的同学可以关注这个 GitHub repo。

    要使用的话，直接安装：

    npm i babel-plugin-transform-private --save-dev

    然后配置一下：

    {
  "plugins": [
    ["transform-private", {
      "pattern": "^_"
    }],
  ]
}

    其中配置的 pattern 参数可以修改私有变量的匹配正则表达式，默认是 `"^_" 也就是以下划线开头，可以改成别的模式。

    以上就是今天的全部内容，代码比较多，但是关键点就这些，其他就是构建 AST 树的过程。如有任何问题，欢迎讨论。


    起源地下载网 » 使用 babel 插件来打造真正的“私有”属性

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用？
    本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了？
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或 联络我们.。
    找不到素材资源介绍文章里的示例图片？
    对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发？
    请QQ联系我们
    掘金(十年踪迹)

    掘金(十年踪迹) SVIP

    分享到：

    相关推荐

    发表评论

    还没有评论，快来抢沙发吧！

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元