JavaScriptに於ける闇の魔術と闇の魔術に対する防衛術 #JavaScript

prototypeはね...死人がでるよね。

闇の魔術

自分のPCに閉じ込めておく分には、まぁ楽で良いんだけれども。

俗に言う黒魔術

const __BASE_PROTO = {
    $: {
        value (...child) {
            // 略
            return this;
        } 
    }
}
{
    Object.defineProperties(Node.prototype, __BASE_PROTO);
    Object.defineProperties(Element.prototype, __BASE_PROTO);

}
function GOD(v) {
    this.v = v;
    // 略
};
Object.assign(GOD.prototype, Object.prototype, Array.prototype, Number.prototype, String.prototype);

ただ、後で面倒になる。

闇の魔術に対する防衛術

参考にしたライブラリはある $(dsand).$()
で、自分はこの防衛術をつかって SVGをグリグリ書いて、うりうり動かすライブラリを書いている svg.js

俗に言う白魔術

const __BASE_PROTO__ = {
    // '@': elem,
    '@parse' : {
        value (arr) {return arr.filter(v => null != v).map(v => '@' in v ? v['@'] : v)}
    },
    _ : {
        value () {return this['@'];},
    },
    has: {
        value (prop) {return prop in this["@"];}
    },
    $: {
        value(...child) {
            // 略
            return this;
        },
    },
    // 略
}
const _ = function(el, custom = '') {
    return Object.create(
        { '@': el },
        custom instanceof Object
            ? Object.assign({}, __BASE_PROTO__, custom)
            : __BASE_PROTO__);
};
const _tag = tag => document.createElement(tag);
const div = () => _(_tag('div'));
const p = () => _(_tag('p'));

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>foo</title>
    <script src="_.js"></script>
    <script>
    const load = () => {
        _(document.body).$(
            div().$(
                p().$('hello')
            ),
            div().$(
                p().$('world')
            )
        );
    };
    document.addEventListener("DOMContentLoaded", load);
    </script>
</head>
<body>
</body>
</html>

bodyに追加される

<div><p>hello</p></div>
<div><p>world</p></div>