前端那些事之jquery插件原理封装holleword-优快云博客

本文通过一个具体的案例，即helloworld插件的实现过程，详细介绍了如何使用jQuery封装插件的方法。包括插件的接口规范、调用方式及内部实现细节。

2019独角兽企业重金招聘Python工程师标准>>>

jquery插件封装原理：helloword插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jqery插件的实现原理</title>
</head>
<body>
<!--<div id="plugDemo"></div>-->
<div class="plugDemo"></div>
<div class="plugDemo"></div>
<script src="jquery/jquery-2.2.4.js"></script>
<script>
    //插件的接口规范
    //$.fn["plugName"]=function(){}
    //插件的调用
    //$("#plugDemo").plugName();
    $(function () {
//        var $plug=$("#plugDemo");
        //如果改成类名可以不用each
        var $plug = $(".plugDemo");
        $plug.hellowordPlug({
            action: "locashost:8000",
            name: "username",
            text: "上官清偌",
            click: function () {
                //获取input值
                var $val = $(this).prev("input").val();
                console.log($val);
            }
        });
    });
    $.fn.hellowordPlug = function (options) {
//        插件要实现的内容
        //console.log(this);//<div id="plugDemo"></div>原生DOM
        //转换成jquery对象
        //设置默认值，非常判断
        options = options || {};
        $(this).html(
            "<form action='" + (options.action || "#") + "'>" +
            "<input type='text' name='" + options.name + "'>" +
            "<button>" + options.text + "</button></form>");
//       如果要绑定button按钮
        $(this).find("button").on("click", options.click);
    }
</script>
</body>
</html>

转载于:https://my.oschina.net/yongxinke/blog/837877