Clever Geek Handbook

我15岁时如何编写第一个jQuery插件以及如何创建它们

你好！我住在乌兹别克斯坦，已经第三年独立学习网络开发。在这段时间里，我学会了自己重新发明轮子，以解决自己面临的问题。这里将描述这些问题之一及其解决方案。希望您对此感兴趣。





为什么我必须编写一个插件？



由于多种原因，我开始创建一个不使用引导程序的静态页面，其中需要插入一个滑块。可以只写一个滑块，但是我想找到一种可以在新项目中重用的解决方案。



因此，我一直在寻找用于插入滑块的插件，但仍然没有找到符合所有条件的适合我的插件：移动友好，带有遥控器，因此所有代码都适合一个文件，压缩代码和默认情况下所有选项均为默认用于滑块。



然后，我决定编写自己的插件来创建滑块，该插件可在其他项目中使用，并在社区的帮助下进行改进。该插件称为Slibox。



编写插件的第二个原因是自学和开发。通过创建插件，我将获得创建插件和模块的经验。这些知识将来会对我有帮助。



为什么我使用jQuery？



尽管我可以使用原始JavaScript编写代码，但有时使用jQuery更为方便）



您如何创建jQuery插件？



首先，您需要了解创建此插件的原因，以解决哪个问题。毕竟，您可以使用现成的。



一旦决定了问题的选择，就可以开始发展。



模板



首先，将jQuery连接到您的页面：



<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>


然后，创建一个新文件，并添加以下代码：



(function($) {
    $.fn.plugtest = function(options) {

    }
})(jQuery)


这是用于插件测试全球化的自调用功能。是的，我们将其称为插件plugtest。$ .fn是必需的，以便我们可以在任何元素上调用此函数：



<div></div>


及以下脚本元素：



$('div').plugtest({})


, options .



this



console.log(this) , :



(function($) {
    $.fn.plugtest = function(options) {
        console.log(this)
    }
})(jQuery)


这是输出





, :



(function($) {
        $.fn.plugtest = function(options) {
            let o = $.extend({
                greeting: '!'
            }, options)
            console.log(this[0].tagName + '  ' + o.greeting)
        }
    })(jQuery)


extend «» . greeting :



$('div').plugtest({
        greeting: "!"
})


:



DIV问好！



, :



let test = $('div').plugtest({
        greeting: "!"
})


(function($) {
    $.fn.plugtest = function(options) {
        let o = $.extend({
            greeting: '!'
        }, options)
        return this.each(function() {
            console.log(this[0].tagName + '  ' + o.greeting)
        })
    }
})(jQuery)


, , - . . , !



Slibox github-e:



Slibox





我有在PHP，Laravel和Vue框架中创建API和应用程序的经验，我对node.js，express.js有经验。我还对构建跨平台的桌面应用程序感兴趣，并且喜欢编写香草JavaScript以获得更好的应用程序控制。我同样对前端和后端的任务感兴趣。



我想在一名导师的指导下远程训练一支紧密联系的团队，在那里我的技能（拥有光剑）会很有用。感谢您的建议和意见。



More articles:


All Articles