当前位置：首页 > JavaScript

js实现dsl

2026-04-05 16:45:07JavaScript

JavaScript 实现 DSL（领域特定语言）

JavaScript 非常适合实现 DSL，因其灵活性和动态特性。以下是一些关键方法和示例：

使用对象字面量和链式调用

通过返回 this 实现链式调用，创建流畅的 API：

js实现dsl

const calculator = {
  value: 0,
  add(x) {
    this.value += x;
    return this;
  },
  subtract(x) {
    this.value -= x;
    return this;
  },
  result() {
    return this.value;
  }
};

calculator.add(5).subtract(2).result(); // 3

利用函数构建 DSL

函数可以包装特定领域操作：

function createQuery() {
  let table;
  let conditions = [];

  return {
    from(t) {
      table = t;
      return this;
    },
    where(cond) {
      conditions.push(cond);
      return this;
    },
    toString() {
      return `SELECT * FROM ${table} WHERE ${conditions.join(' AND ')}`;
    }
  };
}

const query = createQuery()
  .from('users')
  .where('age > 18')
  .where('status = "active"')
  .toString();

使用 Proxy 实现动态 DSL

Proxy 可以拦截属性访问，创建更灵活的语法：

js实现dsl

const domDSL = new Proxy({}, {
  get(target, tagName) {
    return (attributes = {}) => {
      const element = document.createElement(tagName);
      Object.entries(attributes).forEach(([key, value]) => {
        element.setAttribute(key, value);
      });
      return element;
    };
  }
});

const div = domDSL.div({ class: 'container' });
const button = domDSL.button({ onClick: 'submit()' });

模板字符串标签函数

利用模板字符串创建嵌入式 DSL：

function sql(strings, ...values) {
  let query = strings[0];
  for (let i = 0; i < values.length; i++) {
    query += `$${i + 1}` + strings[i + 1];
  }
  return { query, params: values };
}

const userQuery = sql`SELECT * FROM users WHERE id = ${123} AND status = ${'active'}`;

解析器组合子

对于复杂 DSL，可以实现解析器组合子：

class Parser {
  constructor(parseFn) {
    this.parse = parseFn;
  }

  static string(str) {
    return new Parser(input => {
      if (input.startsWith(str)) {
        return [str, input.slice(str.length)];
      }
      throw new Error(`Expected ${str}`);
    });
  }

  static regex(regex) {
    return new Parser(input => {
      const match = input.match(regex);
      if (match) {
        return [match[0], input.slice(match[0].length)];
      }
      throw new Error(`No match for ${regex}`);
    });
  }

  map(fn) {
    return new Parser(input => {
      const [result, remaining] = this.parse(input);
      return [fn(result), remaining];
    });
  }
}

const numberParser = Parser.regex(/^\d+/).map(Number);
const [result] = numberParser.parse('123abc');

这些方法展示了 JavaScript 实现 DSL 的多种可能性，从简单流畅接口到复杂解析器。选择哪种方法取决于 DSL 的复杂度和使用场景。