外部加载 js写法问题

Question

这样写可以

const element = document.createElement('script');
element.setAttribute('type', 'text/javascript');
element.setAttribute('src', '/js.js');
document.body.appendChild(element);

为什么下面这两种写法都报错，不可以

const element = document.createElement('script').setAttribute('type', 'text/javascript').setAttribute('src', '/js.js');
document.body.appendChild(element);

document.body.appendChild(document.createElement('script').setAttribute('type', 'text/javascript').setAttribute('src', '/js.js'));

Answer 1

https://developer.mozilla.org...

setAttribute的返回值是undefined，不要随便猜测能链式调用

Answer 2

setAttribute 没返回 element

Answer 3

试下这样行不行

const element = document.createElement('script').setAttribute('type', 'text/javascript');
element.setAttribute('src', '/js.js');
document.body.appendChild(element);

猜测是

document.createElement('script').setAttribute('type', 'text/javascript') 这里

返回的不是一个 element ，所以你在后面再调用setAttribute('src', '/js.js') 是没用的，

const element = document.createElement('script');
element.setAttribute('type', 'text/javascript'); element有setAttribute
element.setAttribute('src', '/js.js');   element有setAttribute

所以就可以。

Answer 4

设计就是这样，如果一开始设计成链式的我现在还能再提个问题为什么不设计成非链式的。
非要链起来的话，在js范畴内最好的方案应该是pipe operator(但提案只在stage2，并不推荐使用)

document.createElement('script')
  |> (%.setAttribute('type', 'text/javascript'), %)
  |> (%.setAttribute('src', '/js.js'), %)
  |> document.body.appendChild(%);