JS 封装方式

kuro-shiro

于 2024-09-06 17:19:50 发布

阅读量1.4k

点赞数 21

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/laiyucannian/article/details/141958327

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

引言：本人是后台服务端开发的，前端的 js 都是在 html 中的 script 标签中写的，处理下数据啥，如果要有需要公共使用的方法啥的都是把方法直接丢在一个 js 文件里，然后 html 引入使用，没有关注过 js 的封装。这天突然对 js 的封装有了兴趣所以有了本文，一下是本人的一些见解。不深见谅。

素材使用的是若依框架中的 ry-ui.js 以及 vue.js ，这里只说封装，不说功能。

一、源码解析

我们只看红框中的，这是最重要的。
ry-ui.js：
在这里插入图片描述

vue.js：

在这里插入图片描述
以上两张图片的 vue.js 中开始的结束的，下面的是 vue 构造函数，中间的就没必要了。

从以上两个文件可以看出一个共同点：

(function(){
   
})()

都是一种函数表达式，它是一个立即执行函数表达式（IIFE，Immediately Invoked Function Expression），是一种定义函数并立即执行它的方法。这种方法通常用于创建一个独立的作用域，从而避免变量污染全局作用域。

(function(){
   //这里面是需要执行的内容
})()//这个小括号里的是执行上面的内容需要传递进去的参数，这里的这个是无参的

我们看 ry-ui.js 中的：

(function($){
   
})(jQuery)

它接受一个参数 $，并在调用时传入 jQuery。这种写法在 JavaScript 中非常常见，特别是在使用 jQuery 库时。它的主要目的是创建一个封闭的作用域，以避免全局命名空间的污染，同时确保 $ 符号在这个作用域内安全地指向 jQuery 对象。

我们再看 vue.js 中的：

(function(global, factory){
   
})(this,function(){
	 function Vue (options) {
	    if (!(this instanceof Vue)) {
	      warn('Vue is a constructor and should be called with the `new` keyword');
	    }
	    this._init(options);
	 }
	return Vue;
})

它接收两个参数：global 和 factory。并在调用时传入 this 和一个函数作为参数。这里，this 在非严格模式下通常指向全局对象（在浏览器中是 window），而在严格模式下，它的值会依赖于函数是如何被调用的。但是，在这个特定的例子中，由于它是在全局作用域中被调用的（即没有明确的调用者），在非严格模式下，this 确实会指向全局对象（在浏览器中是 window，在 Node.js 中是 global，在 Web Workers 中是 self）。第二个参数是一个匿名函数，这个匿名函数返回了 Vue 构造函数。

我们再看立即执行函数表达式的执行代码块
ry-ui.js 中的：
在这里插入图片描述
在函数体内，使用了 $.extend() 方法来扩展 jQuery 对象本身。$.extend() 是 jQuery 的一个静态方法，用于将一个或多个对象的内容合并到目标对象。当只传递一个对象作为参数时，它会将该对象的属性直接添加到 jQuery 对象上，从而扩展 jQuery 的功能。

html 中引入文件后，就可以在 jQuery 对象上调用扩展的属性方法，(如：$.table 的形式)，而不是通过某个 jQuery 实例（如： $(selector).table 形式）。

这种方式非常适合添加全局的 jQuery 插件或工具函数，这些函数不需要依赖于特定的 DOM 元素或 jQuery 对象实例。然而，如果你的函数需要操作 DOM 元素或依赖于 jQuery 对象实例，那么你可能应该考虑将函数添加到 jQuery 的原型（$.fn）上，而不是直接添加到 $（jQuery）对象上。
例如：

(function($) {  
    // 定义一个新方法并添加到 jQuery 的原型上  
    $.fn.myMethod = function(options) {  
        // 'this' 关键字在这里引用了 jQuery 对象（即元素集合）  
        // 你可以在这里编写代码来遍历元素、修改它们的属性、添加事件处理程序等  
  
        // 示例：遍历所有元素，并将它们的文本设置为 'Hello World!'  
        this.each(function() {  
            $(this).text('Hello World!');  
        });  
  
        // 如果需要，你可以根据 options 参数来调整方法的行为  
        // ...  
  
        // 通常，我们不返回原始元素集合（尽管可以这样做），  
        // 但可以返回 jQuery 对象以便链式调用  
        // 这里返回 this（即当前 jQuery 对象）以支持链式调用  
        return this;  
    };  
})(jQuery);

// 使用新添加的 myMethod 方法  
$('div').myMethod(); // 这会将页面上所有 div 元素的文本设置为 'Hello World!'

vue.js 中的：
在这里插入图片描述
在函数体内是一个三目运算，作用是在不同的 JavaScript 环境中（如 CommonJS、AMD 或全局环境）灵活地定义和导出 Vue 构造函数。这种做法确保了 Vue 库可以在多种模块系统中正常工作，同时也支持在不使用模块系统的环境中直接作为全局变量使用。

逻辑分支：

CommonJS 环境（如 Node.js）：如果 exports 是一个对象且 module 已定义，则将 factory() 的结果（即 Vue 构造函数）赋值给 module.exports，使得在其他 CommonJS 模块中可以通过 require 来引入 Vue。
AMD 环境（如 RequireJS）：如果 define 是一个函数且支持 AMD 规范（define.amd 为真），则调用 define 函数并将 factory 作为参数传入，这样 AMD 加载器就可以处理 Vue 的加载和依赖管理。
全局环境：如果上述两种情况都不满足，则将 factory() 的结果（Vue 构造函数）赋值给全局对象的 Vue 属性。这确保了在不使用模块系统的环境中，Vue 可以直接作为全局变量 Vue 使用。

至此 ry-ui.js 和 vue.js 的封装就完成了，ry-ui.js 是扩展了 jQuery 以便使用，而 vue.js 是封装为全局变量使用。

二、封装 js

我们使用 vue.js 方式来封装一个简单的 js

(function(root, factory) {  
    if (typeof exports === 'object' && typeof module !== 'undefined') {  
        // CommonJS环境  
        module.exports = factory();  
    } else if (typeof define === 'function' && define.amd) {  
        // AMD环境  
        define(factory);  
    } else {  
        // 全局环境  
        (root = root || self).MyTest = factory();  
    }  
})(this, function() {  
    // 构造函数  
    function MyTest(msg) {  
        console.log('构造函数');  
        this.msg = msg; // 初始化实例属性  
        init(msg); // 调用辅助函数  
    }  
  
    // 静态方法  
    MyTest.print1 = function(msg) {  
        console.log('静态方法');  
        console.log(msg);  
    };  
  
    // 实例方法  
    MyTest.prototype.print2 = function() {  
        console.log('实例方法');  
        console.log(this.msg); // 访问实例的msg属性  
    };  
  
    // 辅助函数（非静态也非实例方法）  
    function init(msg) {  
        console.log('辅助函数');  
        console.log(msg);  
    }  
  
    // 返回构造函数  
    return MyTest;  
});

// 使用示例  
// 正确引入js后  
var myInstance = new MyTest('Hello, World!');  
myInstance.print2();  
MyTest.print1('Static Message');

在这里插入图片描述

三、扩展

立即执行函数表达式（IIFE，Immediately Invoked Function Expression）

一种定义函数并立即执行它的方法。这种方法通常用于创建一个独立的作用域，从而避免变量污染全局作用域。IIFE 有几种常见的形式，但核心思想相同：定义一个函数，并立即使用圆括号将其包围并调用。
以下是几种常见的 IIFE 形式：

匿名函数形式
这是最常见的 IIFE 形式，使用匿名函数并立即调用它。

(function() {  
    // 代码块  
    console.log("这是一个匿名IIFE");  
})();

命名函数形式
虽然函数是立即执行的，但你也可以给它一个名字（虽然这在外部作用域中是不可访问的）。这有助于调试，因为函数在调用栈中会有一个更有意义的名字。

(function myFunction() {  
    // 代码块  
    console.log("这是一个有名字的IIFE，但名字在外部不可访问");  
})();

使用 !、+ 或 ~ 操作符
虽然不常见，但你也可以通过在函数表达式前添加逻辑非 !、一元加 + 或按位非 ~ 操作符来触发表达式的执行，这些操作符会将函数表达式的结果转换为布尔值（!）、数字（+）或位反转（~），但实际上是立即执行了函数。

!function() {  
    // 代码块  
    console.log("使用逻辑非操作符的IIFE");  
}();  
  
+function() {  
    // 代码块  
    console.log("使用一元加操作符的IIFE");  
}();  
  
~function() {  
    // 代码块  
    console.log("使用按位非操作符的IIFE");  
}();

使用对象封装 JavaScript 代码

使用对象封装 js 代码也是一种常见的做法，它有助于组织代码、减少全局命名空间的污染，并提供了一种模块化的方式来组织功能。
例如：

// myTools.js  
var MyTools = MyTools || {}; // 防止MyTools已定义时的冲突  
  
MyTools.utils = {  
    // 定义一个工具函数  
    add: function(a, b) {  
        return a + b;  
    },  
    // 另一个工具函数  
    multiply: function(a, b) {  
        return a * b;  
    }  
};

四、总结

选择使用对象封装还是 IIFE 封装 JavaScript 代码，取决于你的具体需求。如果你需要创建可重用的模块，并且希望遵循面向对象的编程范式，那么使用对象封装可能更合适。如果你只是需要创建一个独立的、自包含的模块，并且希望立即执行它，那么使用 IIFE 可能更合适。在实际开发中，这两种方法经常结合使用，以充分利用它们各自的优点。