用jquery写一个立即执行类

原创

mob64ca12ef217e 2024-08-27 08:57:15 ©著作权

文章标签 jQuery 初始化 javascript 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12ef217e的原创作品，请联系作者获取转载授权，否则将追究法律责任

用 jQuery 写一个立即执行类的指南

在 web 开发中，使用 jQuery 插件和类是一个非常常见的需求。今天，我们将学习如何用 jQuery 创建一个立即执行类（IIFE，Immediately Invoked Function Expression）。让我们一步一步来吧！

流程概述

在开始之前，我们先来看看我们要完成这项任务的步骤。

步骤	描述
1	创建一个新的 jQuery 插件
2	使用立即执行函数表达式 (IIFE)
3	定义并初始化类属性
4	提供类的方法
5	进行测试

接下来，我们将逐步执行以上步骤。

第一步：创建一个新的 jQuery 插件

首先，我们要创建一个 jQuery 插件。使用 $.fn 来扩展 jQuery 的原型。

(function($) {
    // 插件代码将在这里
})(jQuery);

在这个代码中，(function($) {...})(jQuery); 是我们创建的 IIFE。
通过传入 jQuery，我们可以在 IIFE 内部使用 $ 来代表 jQuery。

第二步：使用立即执行函数表达式 (IIFE)

我们已经在第一步中创建了一个 IIFE。接下来，我们需要在此框架内定义我们的类。

(function($) {
    var MyClass = function() {
        this.init();
    };
    
    MyClass.prototype.init = function() {
        console.log("MyClass 初始化");
    };
    
    // 将 MyClass 赋值给 jQuery.fn
    $.fn.myClass = function() {
        return new MyClass();
    };

})(jQuery);

MyClass 是我们自定义的类，并且我们在构造函数中调用 this.init() 方法。
在 $.fn.myClass 方法中，我们返回了一个新的 MyClass 实例，可以通过 jQuery 对象来方便的调用。

第三步：定义并初始化类属性

现在我们来为 MyClass 添加一个属性。例如，我们可以添加一个 name 属性，并在初始化时设置它。

(function($) {
    var MyClass = function(name) {
        this.name = name || "默认名称"; // 设置默认名称
        this.init();
    };
    
    MyClass.prototype.init = function() {
        console.log("MyClass 初始化, 名称: " + this.name);
    };
    
    $.fn.myClass = function(name) {
        return new MyClass(name);
    };

})(jQuery);

在构造函数中，我们添加了一个 name 参数，并且为它赋予了一个默认值。

第四步：提供类的方法

接下来，我们将为 MyClass 添加一个公共方法。例如，我们可以添加一个输出名称的方法。

(function($) {
    var MyClass = function(name) {
        this.name = name || "默认名称"; // 设置默认名称
        this.init();
    };
    
    MyClass.prototype.init = function() {
        console.log("MyClass 初始化, 名称: " + this.name);
    };
    
    MyClass.prototype.sayHello = function() {
        console.log("你好, " + this.name + "!");
    };
    
    $.fn.myClass = function(name) {
        return new MyClass(name);
    };

})(jQuery);

在这里，我们添加了 sayHello 方法，当调用时，它会输出一个问候信息。

第五步：进行测试

最后，我们需要测试这个插件是否能够正常工作。我们可以在 HTML 文件中引入 jQuery 和我们的脚本文件，并用以下代码进行测试。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的 jQuery 类</title>
    <script src="
    <script src="your_plugin_file.js"></script>
</head>
<body>
    <script>
        $(document).ready(function() {
            var myInstance = $("body").myClass("小白"); // 创建一个实例
            myInstance.sayHello(); // 调用 sayHello 方法
        });
    </script>
</body>
</html>