easy-dom

npm i easy-dom-util

import $ from 'easy-dom-util';

let el = $.create('div'); // 返回一个 Ele 类型的元素，封装了dom操作的方法
...

<script src="https://cdn.jsdelivr.net/npm/easy-dom-util/easydom.min.js"></script>
<!-- or -->
<!-- <script src="https://cdn.jsdelivr.net/npm/easy-dom-util@x.x.x/easydom.min.js"></script> -->
<script>
    var el = EasyDom.create('div');
</script>

let el = $.create('div')
    .cls('easy-dom')
    .text('easy-dom')
    .click(()=>{
        alert('click')
    })

let el = $.create('div#app.cls1.cls2[attr1=1][attr2]')

el.render({
    method:{
        alert(text){
            // this : {el,bindEl,self,method}
            console.log(this);
            window.alert(text);
        }
    },
    result(el){
        console.log(el.div1,el.div2);
    },
    // 使用 vscode 中的 es6-string-html 插件会使 下面的html带有语法高亮
    html:/*html*/` 
        <div @el='div1' @event=alert('test')></div>
        <div @el='div2'></div>
    `
})

el.data(); // 获取 data 对象
el.data(null); // 清空 data 对象
el.data('name', 'test'); // 设置一个数据 
el.data('name');  // 获取一个数据
el.data('name', null);  // 移除一个数据 
el.data({ // 批量操作
    name: null, // 移除一个数据 
    age: 12 // 设置一个数据 
});

$.classPrefix('el-test-');
$.create('div').cls('1') // class = el-test-1
$.clearClassPrefix();
// 或者
$.classPrefix('el-test-',()=>{
    $.create('div').cls('1') // class = el-test-1
});

$.addCommonStyle({
    fontSize: '12px',
    textCenter: 'text-align:center;'
})

$.reportStyle({
    func:initStyle,
    id: 'MyStyle' // style 标签的id 
}); // 不使用样式池，样式会被马上加入到head中

// 或者

$.reportStyle({
    func:initStyle,
    id: 'MyStyle', // style 标签的id 
    usePool: true
}); // 使用样式池，样式会再调用 initStylePool 之后加入head中，当有很多分散的样式时，建议使用样式池
$.initStylePool();

function initStyle(common){ // common 为公用样式
    // 使用 vscode 中的 es6-string-css 插件会使 下面的css带有语法高亮
    return /*css*/`
        .el-test-1{
            color:#f44;
            font-size:${common.fontSize};
        }
        .el-test-text{
            ${common.textCenter}
            color:#222;
        }
    `
}

$.registTouchEvent({
    el: 'dom/Ele/selector',
    touchStart(touchList){
    },
    touchMove(touchList){
    },
    touchEnd(touchList){
    },
});