Dom 相关

获取滚动位置

在不同浏览器会有兼容问题,故需要进行一下兼容

//获取页面scrollTop
function getPageScrollTop() {
    var scrollTop =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop;
    return scrollTop;
}

// 获取元素的scrollTop
function getScrollTop(element) {
    if (element === window) {
        return Math.max(
            window.pageYOffset || 0,
            document.documentElement.scrollTop
        );
    }
    return element.scrollTop;
}

//设置scrollTop
function setScrollTop(scroll_top) {
    document.documentElement.scrollTop = scroll_top;
    window.pageYOffset = scroll_top;
    document.body.scrollTop = scroll_top;
}

根据 html 代码生成节点

/**
 * 根据html代码生成节点
 * @param {string} html
 */
function stringToNode(html) {
    let wrapper = document.createElement('div');
    wrapper.innerHTML = html.trim();
    return wrapper.children.length > 1 ? wrapper.children : wrapper.firstChild;
}

创建元素

function createElement(tagName) {
    return document.createElement(tagName);
}

是否是元素类型

function isElement(node) {
    return node.nodeType === 1;
}

是否是文本类型

function isText(node) {
    return node.nodeType === 3;
}

是否是注释内容

function isComment(node) {
    return node.nodeType === 8;
}

一个很简单的模板引擎

/**
 * render
 * 取值:<%= variable %>
 * 表达式:<% if {} %>
 * 例子:
 *  <div>
 *    <div class="weui-mask"></div>
 *    <div class="weui-dialog">
 *    <% if(typeof title === 'string'){ %>
 *           <div class="weui-dialog__hd"><strong class="weui-dialog__title"><%=title%></strong></div>
 *    <% } %>
 *    <div class="weui-dialog__bd"><%=content%></div>
 *    <div class="weui-dialog__ft">
 *    <% for(var i = 0; i < buttons.length; i++){ %>
 *        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_<%=buttons[i]['type']%>"><%=buttons[i]['label']%></a>
 *    <% } %>
 *    </div>
 *    </div>
 *  </div>
 * A very simple template engine
 * @param {String} tpl
 * @param {Object=} data
 * @returns {String}
 */
function render(tpl, data) {
    const code =
        "var p=[];with(this){p.push('" +
        tpl
            .replace(/[\r\t\n]/g, ' ')
            .split('<%')
            .join('\t')
            .replace(/((^|%>)[^\t]*)'/g, '$1\r')
            .replace(/\t=(.*?)%>/g, "',$1,'")
            .split('\t')
            .join("');")
            .split('%>')
            .join("p.push('")
            .split('\r')
            .join("\\'") +
        "');}return p.join('');";
    return new Function(code).apply(data);
}
上次更新: 5/23/2019, 5:25:04 PM