Question

我正在构建一个vanilla Javascript网站（没有jQuery），而且我做了很多这样的事情：

var e = document.getElementById(...);
e.addEventListener(...);
e.innerHTML = ...;

它工作正常，但输入的字符很多。

如果Javascript中有一种简单的方法可以重命名它们以缩短它们？所以我可以使用这样的东西：

var e = getId(...);
e.on(...);
e.html = ...;

Answer 1

最简单的方法可能是定义自己的辅助函数：

function getId(...args) {
  return document.getElementById(...args);
}

function on(e, ...args) {
  e.addEventListener(...args);
}

function html(e, value) {
  return e.innerHTML = value;
}

Answer 2

舒尔，但你需要关注背景：

var getId=document.getElementById.bind(document);

Element.prototype.on=function(evt,handler){
 this.addEventListener(evt,handler);
 return this;
};

Element.prototype.html=function(set){
  if(set) return this.innerHTML=set;
  return this.innerHTML;
}

getId("el").on("click",function(){ alert(this.html());}).html("Hi!")

请注意， el.html = 需要大量工作，这就是为什么我将其更改为 el.html（） ...或者不是（感谢felix kling））。也可以为原型分配一个getter / setter：

Object.defineProperty(Element.prototype, 'html', {
  get: function() { return this.innerHTML;},
  set: function(value) { this.innerHTML = value; }
 }
);

在Javascript中创建函数名称和属性的快捷方式？

2 个答案: