xgqfrms / FEIQA

FEIQA: Front End Interviews Question & Answers
https://feiqa.xgqfrms.xyz
MIT License
6 stars 0 forks source link

shit layui & pagination #62

Open xgqfrms opened 5 years ago

xgqfrms commented 5 years ago

shit layui & pagination

layui 如何监听每页条数的分页事件

https://www.layui.com/doc/modules/table.html https://www.layui.com/doc/modules/laypage.html#options

layui.use(['laypage', 'layer'], function(){
    let laypage = layui.laypage,
        layer = layui.layer;
    laypage.render({
        elem: 'demo7',
        count: 100,
        layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
        jump: function(obj){
            alert(obj.limit);//获取到每页显示的条数
            $.ajax({//异步请求返回给后台
                url:'',
                type:'POST',
                data:{'limit':obj.limit},
                dataType:'json',
                success:function(data){
                    //这里获取到数据执行显示
                },
            });
        },
    });
});

https://fly.layui.com/jie/15167/

xgqfrms commented 5 years ago

https://blog.csdn.net/wyp_comeon/article/details/81538592

image

https://github.com/sentsin/layui/pull/78/files https://fly.layui.com/jie/21416/

xgqfrms commented 5 years ago

html select events javascript

https://developer.mozilla.org/en-US/docs/Web/Events/select https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#Advanced_select_with_multiple_features

https://mdn.github.io/learning-area/html/forms/select-example/select-multiple.html

https://www.w3schools.com/tags/tag_select.asp

https://www.w3schools.com/jsref/dom_obj_event.asp https://www.w3schools.com/jsref/dom_obj_select.asp https://www.w3schools.com/jsref/coll_select_options.asp

https://www.w3schools.com/jsref/event_onchange.asp https://www.w3schools.com/jsref/event_onselect.asp


// local global variable
let tableSize = 10;

const newSelectBug = () => {
    let select = document.querySelector(`select[lay-ignore=""]`);
    // <select lay-ignore>​…​</select>​
    select.addEventListener(`change`, (e) => {
        console.log(`e.target.value =`, e.target.value);
        tableSize = e.target.value;
    });
    // select.addEventListener(`select`, (e) => {
    //     console.log(`e.target.value =`, e.target.value);
    //     tableSize = e.target.value;
    // });
};

    if (datas.length > 10) {
        // options.page = true;
        console.log(`分页 = true`, tableSize);
        options.page = {
            // elem: "#test",
            curr: 1,
            limit: tableSize,
            jump: function(obj, first){
                console.log(`分页的所有参数 page object =\n`, obj);
                console.log(`获取当前页 =`, obj.curr);
                console.log(`获取每页显示的条数 =`, obj.limit);
                // 首次不执行
                if(!first){
                    //do something
                    tableSize = obj.limit;
                }
            },
        };
        // options.page = {
        //     // elem: '#test',
        //     limit: 30,
        // };
    }
xgqfrms commented 5 years ago

bug & solution


// local global variable
let tableSize = 10;

const newSelectBug = () => {
    let select = document.querySelector(`select[lay-ignore=""]`);
    // <select lay-ignore>​…​</select>​
    if (select) {
        let flag = select.dataset.flag;
        if(!flag) {
            select.dataset.flag = "true";
            select.addEventListener(`change`, (e) => {
                // console.log(`e.target.value =`, e.target.value);
                tableSize = e.target.value;
            });
        }
    } else {
        setTimeout(() => {
            newSelectBug();
        }, 1000);
    }
    // select.addEventListener(`select`, (e) => {
    //     console.log(`e.target.value =`, e.target.value);
    //     tableSize = e.target.value;
    // });
};
    if (datas.length > 10) {
        // options.page = true;
        // console.log(`分页 = true`, tableSize);
        options.page = {
            // elem: "#test",
            curr: 1,
            limit: tableSize,
            jump: function(obj, first){
                console.log(`分页的所有参数 page object =\n`, obj);
                console.log(`获取当前页 =`, obj.curr);
                console.log(`获取每页显示的条数 =`, obj.limit);
                // 首次不执行
                if(!first){
                    //do something
                    tableSize = obj.limit;
                }
            },
        };
        clearInterval(intervalFlag);
        intervalFlag = setInterval(() => {
            newSelectBug();
        }, 1000);
        // options.page = {
        //     // elem: '#test',
        //     limit: 30,
        // };
    }
xgqfrms commented 5 years ago

java enum naming rules

Constant & all Capital Case

https://stackoverflow.com/questions/3069743/coding-conventions-naming-enums

https://docs.oracle.com/javase/tutorial/java/javaOO/enum.html

https://docs.microsoft.com/en-us/previous-versions/dotnet/netframework-1.1/4x252001(v=vs.71)

https://docs.microsoft.com/en-us/previous-versions/dotnet/netframework-1.1/x2dbyw72%28v%3dvs.71%29

image

Enum & demos

image

xgqfrms commented 5 years ago

shit default size

image

https://element.eleme.io/#/zh-CN/component/select#select-attributes

xgqfrms commented 5 years ago

shit RegExp bug

https://element.eleme.io/#/zh-CN/component/form

image

xgqfrms commented 5 years ago

shit api docs

https://element.eleme.io/#/zh-CN/component/message-box

image

image


showDeleteSureModal(options, user_id) {
        this.$confirm(
            "此操作将永久删除该账号, 是否继续?",
            "提示",
            {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                distinguishCancelAndClose: true,
                beforeClose: (action, instance, done) => {
                    console.log(`action type =`, action);
                    done();
                },
            },
        )
        .then((e) => {
            // action type
            // confirm === e
            // console.log(`e =`, e);
            // this.$message({
            //     type: "success",
            //     message: "删除账号成功!"
            // });
            this.deleteUserById(options, user_id);
        })
        .catch((action) => {
            this.$message({
                type: "info",
                message: (action === "cancel" || action === "close") ? `已取消删除账号!` : `账号删除失败!`,
            });
        });
    },
xgqfrms commented 5 years ago

shit password validation

shit docs

https://github.com/yiminghe/async-validator#validate

https://element.eleme.io/#/zh-CN/component/form#biao-dan-yan-zheng


    passWord: [
        {
            required: true,
            message: "请输入密码",
            trigger: "blur",
        },
        {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
        }
    ],
    passWordSure: [
        {
            required: true,
            message: "请输入确认密码",
            trigger: "blur",
        },
        {
            min: 3,
            max: 20,
            // pattern: `^${this.$data.form.passWord}$`,
            // pattern: `${this.$data.form.passWordSure}`,
            message: "两次输入的密码不一致",
            // message: " ",
            trigger: "blur",
            validator: (rule, value, callback) => {
                console.log(`value =`, value);
                // console.log(`rule =`, rule);
                // console.log(`callback =`, callback);
                let pwd = this.$data.form.passWord;
                console.log(`passWord =`, pwd);
                if(pwd === value) {
                    // green border
                    callback();
                } else {
                    // red border
                    callback(new Error("两次输入的密码不一致"));
                    // this.$refs.formRef.validateField("passWordSure");
                }
            },
        },
    ],
xgqfrms commented 5 years ago

Console & table

console.table(Array);

https://developer.mozilla.org/en-US/docs/Web/API/Console/table

xgqfrms commented 5 years ago

https://www.styled-components.com/#your-first-styled-component

xgqfrms commented 5 years ago

image

http://www.ruanyifeng.com/blog/checker.js


function checker() {
  var img = document.querySelector('img[src^="http://www.ruanyifeng.com/blog/images"]');
  if (img && window.getComputedStyle(img).display === 'none'){
    var sponsor = document.querySelector('.entry-sponsor');
    var prompt = document.createElement('div');
    prompt.style = 'border: 1px solid #c6c6c6;border-radius: 4px;background-color: #f5f2f0;padding: 15px; font-size: 16px;';
    prompt.innerHTML = '<p>您使用了广告拦截器,导致本站内容无法显示。</p><p>请将 www.ruanyifeng.com 加入白名单,解除广告屏蔽后,刷新页面,谢谢。</p>';
    sponsor.parentNode.replaceChild(prompt, sponsor);
    document.querySelector('#main-content').innerHTML = '';
  }
}

setTimeout(checker, 1000);

image

xgqfrms commented 5 years ago

js & disabled mouse right button menus

网页可以屏蔽 F12

https://www.cnblogs.com/Marydon20170307/p/9122379.html


"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2018.11.30
 * @modified 2018.11.30
 *
 * @description jquery & forbidden right `Ctrl` button
 * @augments
 * @example
 *
 */

const Generator = (datas = [], debug = false) => {
    let result = ``;
    // do something...
    return result;
};

export default ;

export {
    ,
};

var $get = function (id) {
    return document.getElementById(id);
};
var payToMe_5yuan = "https://files.cnblogs.com/files/Marydon20170307/payToMe_5yuan.bmp";
var payToMe_8yuan = "https://files.cnblogs.com/files/Marydon20170307/payToMe_8yuan.bmp";
var payToMe_18yuan = "https://files.cnblogs.com/files/Marydon20170307/payToMe_18yuan.bmp";
var payToMe_28yuan = "https://files.cnblogs.com/files/Marydon20170307/payToMe_28yuan.bmp";

function CreatePageElement() {
    var object = this;
    this.createForbiddenCopyTipElement = function () {
        var forbiddenCopyTipContainer = `
            <div id="dotCopyTip" style="position: fixed;">
                <div id="dct_children1">
                    <div id="dct_children1_textTip">
                        <span style="color:#FFF;">sorry,本博客所有代码禁止复制,原创代码需扫码支付方可获取!<span>
                    </div>
                    <a id="dct_children1_closeBtn" onclick="javascript:$(\'#dotCopyTip\').hide(); $(\'#maskCtrl\').hide();" href="javascript:;" title="关闭">关闭</a>
                </div>
                <div id="dct_children2">
                    <p>
                        1、先加好友再付费,
                        <a href="#article_head" id="dct_children2_click1" onclick="javascript:$(\'#dotCopyTip\').hide();$(\'#maskCtrl\').hide();">点我</a>
                        加好友
                    </p>
                    <p>
                        2、代码不能满足你的需求?加好友付费定制你的专属代码!
                    </p>
                    <p>
                        3、付费标准及方式,
                        <a href="javascript:;" id="dct_children2_click2" onclick="javascript:cpe.payButtonClick(\'pay\');">点我</a>
                        查看详情
                    </p>
                </div>
            </div>
        `;
        return forbiddenCopyTipContainer;
    };
    this.createPayElement = function () {
        var payContainer = `
            <div id="knowledgePay" style="position: fixed; left: 32%; bottom: 27%; width: 533px; height: 337px; text-align: center; background: #FAFAFF; z-index: 99999; border: solid 1px #a9a9a9; display: none;">
                <div class="title">
                    <div>请扫描以下二维码支付打赏</div>
                    <a onclick="$(\'#knowledgePay\').hide();$(\'#maskCtrl\').hide();"onmouseover="this.style.backgroundColor=\'#DF0029\';"onmouseout="this.style.backgroundColor=\'\'" href="javascript:;"title="关闭"></a>
                </div>
                <div>
                    <div>
                        <select id="payType" style="display:none;pointer:cursor;" onchange="cpe.switchPayImg(this.value);">
                            <option value="0">请选择支付类型</option>
                            <option value="1">片断源码+技术支持</option>
                            <option value="2">项目源码+技术支持</option>
                            <option value="3">私人定制代码服务</option>
                        </select>
                    </div>
                    <img id="payImg" src="" alt="支持原创" />
                </div>
            </div>
        `
        return payContainer;
    };
    this.createDonateElement = function () {
        var aTag = `
            |<a href="javascript:;" onclick="cpe.payButtonClick(\'bottom\');" style="color:#7fff00;">捐赠</a>
        `;
        return aTag;
    };
    this.payButtonClick = function (param) {
        if ('pay' == param) {
            $('#dotCopyTip').hide();
            $('#knowledgePay').show();
            $('#payType').show();
            $('#maskCtrl').show();
            var payType = $get('payType').value;
            if (0 == payType) {
                $get('payImg').src = '';
            }
        } else if ('bottom' == param) {
            $('#dotCopyTip').hide();
            $('#maskCtrl').show();
            $('#knowledgePay').css('display', 'block');
            $('#payType').hide();
            $get('payImg').src = payToMe_5yuan;
        }
    };
    this.switchPayImg = function (num) {
        if (1 == num) {
            $get('payImg').src = payToMe_8yuan;
        } else if (2 == num) {
            $get('payImg').src = payToMe_18yuan;
        } else if (3 == num) {
            $get('payImg').src = payToMe_28yuan;
        }
    };
    this.createPayButtonElement = function () {
        var aTag = document.createElement('a');
        var cssText = "color:#FFF;padding:4px 10px 4px 8px;border-color:#f57e42;text-decoration:none;background-color:#f57e42;border-radius:9px;display:inline-block;text-align:center;vertical-align:middle;font-size:12px;line-height:1.5;"; aTag.style.cssText = cssText;
        aTag.onmouseover = "this.style.textDecoration='none';this.style.color='#666';";
        aTag.onmouseout = "this.style.color='#FFF';";
        aTag.href = "javascript:cpe.payButtonClick('bottom');";
        aTag.innerHTML = " ¥ 我要打赏 ";
        return aTag;
    };
    this.createHelpLikeTextElement = function () {
        var spanTag = document.createElement('span');
        spanTag.innerHTML = "对你有帮助?请帮忙点赞!";
        return spanTag;
    };
    this.createSubscribeCommentElement = function () {
        var subscribeComment = `
            <a id="commentbox_opt_sub" href="javascript:void(0);" title="订阅后有新评论时会邮件通知您" onclick="commentManager.Subscribe();">订阅评论</a>
        `;
        return subscribeComment;
    };
    this.createMaskElement = function () {
        var payTipMaskContainer = `
            <div id="maskCtrl" style="position:fixed;z-index:99997;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:none;"></div>
        `;
        return payTipMaskContainer;
    };
    this.createStatisticsElement = function () {
        var aTag = `
            |<a href="https://www.51.la/?19366069" target="_blank" style="color:#7fff00;">站长统计</a>
        `;
        return aTag;
    };
    this.createViewsElement = function () {
        var divTag = `
            <div id="ajiang_51la"><script type="text/javascript" src="//quote.users.51.la/?id=19366069&mb=3"></script></div>
        `;
        return divTag;
    }
}

function PageOperationCtrl() {
    var object = this;
    this.clearSelect = ("getSelection" in window)
    ? function () {
        window.getSelection().removeAllRanges();
    }
    : function () {
        document.selection.empty();
    };
    this.accessLimit = function () {
        document.oncontextmenu = function () {
            window.event.returnValue = false;
            return false;
        };
        document.ondragstart = document.onselectstart = function () {
            try {
                $('.cnblogs_code').on({
                    selectstart: function () {
                        $('#dotCopyTip').show();
                        $('#maskCtrl').show();
                        return false;
                    },
                    dragstart: function () {
                        $('#dotCopyTip').show();
                        $('#maskCtrl').show();
                        return false;
                    },
                })
                .css('cursor', 'pointer');
                $('.container').on({
                    selectstart: function () {
                        $('#dotCopyTip').show();
                        $('#maskCtrl').show();
                        window.event.returnValue = false;
                        return false;
                    },
                    dragstart: function () {
                        $('#dotCopyTip').show(); $('#maskCtrl').show();
                        window.event.returnValue = false;
                        return false;
                    },
                });
            } catch (e) {
                //
            };
            window.event.returnValue = false;
            return false;
        };
        document.documentElement.onkeydown = function (e) {
            let currKey = 0;
            let evt = e || window.event;
            currKey = evt.keyCode || evt.which || evt.charCode;
            if (currKey == 123) {
                $('#dotCopyTip').show();
                $('#maskCtrl').show();
            }
            window.event.cancelBubble = true;
            window.event.returnValue = false;
            return false;
        };
        document.oncopy = document.oncut = document.onpaste = function (e) {
            window.event.returnValue = false;
            return false;
        }
    }
}

function bbbbb() {
    this.scrollLoad = function (imgId, imgSrc, distance, title) {
        var img_source = $('#' + imgId).attr('src');
        if ("" == img_source) {
            var documentClientHeight = document.documentElement.clientHeight || window.innerHeight;
            var imgOffsetTop = $('#' + imgId)[0].offsetTop;
            if (imgOffsetTop < documentClientHeight) {
                $('#' + imgId)[0].src = imgSrc;
                $('#' + imgId)[0].title = title;
                $('#' + imgId)[0].alt = title;
                return;
            }
            var max_imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top;
            max_imgClientTop = parseInt(max_imgClientTop);
            var max_imgClientDistance = max_imgClientTop - documentClientHeight;
            distance = ((distance || 0) > max_imgClientDistance) ? max_imgClientDistance : distance;
            if (distance == max_imgClientDistance) {
                $('#' + imgId)[0].src = imgSrc;
                $('#' + imgId)[0].title = title;
                $('#' + imgId)[0].alt = title;
                return ;
            }
            $(document).scroll(function () {
                var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                var imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top;
                var clientHeight = documentClientHeight - imgClientTop;
                if (-clientHeight <= distance || documentClientHeight >= imgClientTop) {
                    $('#' + imgId)[0].src = imgSrc;
                    $('#' + imgId)[0].title = title;
                    $('#' + imgId)[0].alt = title;
                }
            })
        }
    };
    this.clickLoad = function (clickId, imgId, imgSrc) {
        var img_source = $('#' + imgId).attr('src');
        if ("" == img_source) {
            $('#' + clickId).click(function () {
                $('#' + imgId)[0].src = imgSrc;
            });
        }
    };
}

function PageScrollCtrl() {
    var heighss = 1300;
    var firstStep = true;
    var secStep = true;
    var isIE = !!window.ActiveXObject;
    var isIE8 = isIE && !!document.documentMode;
    $(window).load(function () {
        $.scrollUp(); $("#scrollUp").text("");
        $("#scrollUp").attr("title", "回到顶部")
    });
    $(window).scroll(function () {
        var $sbm = $("#sideBarMain");
        var $sbar = $("#sideBar");
        var $navc = $("#navigator");
        var navH = $navc.offset().top;
        var scroH = $(this).scrollTop();
        if (scroH >= navH) {
            if (firstStep) {
                firstStep = false;
                $navc.css({ "top": 0, "left": 0, "z-index": "1000" });
                $navc.addClass("boxshadow");
            }
            if (!isIE8 && scroH > heighss && secStep && $sbm.width() > 2) {
                secStep = false;
            }
            if (isIE8 && scroH > heighss && secStep && $sbm.width() > 2) {
                secStep = false;
            }
        } else if (scroH < navH) {
            if (!firstStep) {
                firstStep = true;
                $navc.css({ "margin": "0 auto" });
                $navc.removeClass("boxshadow");
            }
            if (!isIE8 && scroH < heighss && (!secStep) && $sbm.width() < 3) {
                secStep = true;
                $sbar.show();
            }
            if (isIE8 && scroH < heighss && (!secStep) && $sbm.width() < 3) {
                secStep = true;
            }
        }
    });
}

// test

function ForbiddenDebug() {
    var object = this;
    this.isDebug = function () {
        var timeLimit = 50;
        var startTime = new Date();
        debugger;
        var endTime = new Date();
        if (endTime - startTime > timeLimit) {
            $('#topics').remove();
            alert('\u68c0\u6d4b\u5230\u975e\u6cd5\u8c03\u8bd5\uff0c\u5373\u5c06\u5237\u65b0\u754c\u9762\uff01');
            // 检测到非法调试,即将刷新界面!
            window.location.reload();
        }
    };
    this.consoleListener = function () {
        setInterval(object.isDebug, 500);
    }
}

var cpe=new CreatePageElement();
var poc = new PageOperationCtrl();
var ill = new bbbbb();