jq 风格 - 动态 dom 小框架

什么？有 jq 为啥还要自己写框架？因为它很多不需要的功能，白白浪费加载时间，不想再等啦！

史山代码养成记之——链式 dom 一行生命周期就结束。

示例

$.c("div").t("你是一个一个一个啊").a(document.body).o("click", (e)=> {
  $.c("span").t("啊啊").a(e.target);
});

效果：屏幕动态渲染一句话，每次点击会在后面追加 啊啊 两个字。

源码

// 基于可链式调用的类进行动态dom操作
(()=> {

  function S(e) {

    if(!(e instanceof HTMLElement)) throw new TypeError("Element only");
    if(!(this instanceof S)) return new S(e);

    this.e = e;

  }

  S.prototype = {
    html(t) {this.e.innerHTML = t;return this;},
    text(t) {this.e.textContent = t;return this;},
    src(t) {this.e.src = t;return this;},
    at(e) {e.append(this.e);return this;},
    on(s,f) {this.e.addEventListener(s,f);return this;},
    class(s) {this.e.className = s; return this;},
    id(s) {this.e.id = s;return this;}
  };
  for(const n of Object.keys(S.prototype))
   Object.defineProperty(S.prototype, n[0], {value:S.prototype[n]});


  S.c = S.create = (t)=> new S(document.createElement(t));
  S.i = S.getId = (t)=> new S(document.getElementById(t));
  S.q = S.getQuery = (t)=> new S(document.querySelector(t));

  window.$ = S;

})();

Feat.

• 可缩写可全称
• 功能随便添加，链式调用首字母缩写屡试不爽
• 缩短手写代码量

结语

以前不太喜欢面向对象，直接用 $.c("div", "233", document.body); 这样的用参数位置判断功能的写法，但扩展性和可读性都差些。链式调用还是很强的 👍