JS 封装方式

2024-09-07 12:12
文章标签 封装 js 方式

本文主要是介绍JS 封装方式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

引言:本人是后台服务端开发的,前端的 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 形式:

  1. 匿名函数形式
    这是最常见的 IIFE 形式,使用匿名函数并立即调用它。
(function() {  // 代码块  console.log("这是一个匿名IIFE");  
})();
  1. 命名函数形式
    虽然函数是立即执行的,但你也可以给它一个名字(虽然这在外部作用域中是不可访问的)。这有助于调试,因为函数在调用栈中会有一个更有意义的名字。
(function myFunction() {  // 代码块  console.log("这是一个有名字的IIFE,但名字在外部不可访问");  
})();
  1. 使用 !、+ 或 ~ 操作符
    虽然不常见,但你也可以通过在函数表达式前添加逻辑非 !、一元加 + 或按位非 ~ 操作符来触发表达式的执行,这些操作符会将函数表达式的结果转换为布尔值(!)、数字(+)或位反转(~),但实际上是立即执行了函数。
!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 可能更合适。在实际开发中,这两种方法经常结合使用,以充分利用它们各自的优点。

这篇关于JS 封装方式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1145027

相关文章

Jenkins分布式集群配置方式

《Jenkins分布式集群配置方式》:本文主要介绍Jenkins分布式集群配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装jenkins2.配置集群总结Jenkins是一个开源项目,它提供了一个容易使用的持续集成系统,并且提供了大量的plugin满

Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

《Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式》本文详细介绍如何使用Java通过JDBC连接MySQL数据库,包括下载驱动、配置Eclipse环境、检测数据库连接等关键步骤,... 目录一、下载驱动包二、放jar包三、检测数据库连接JavaJava 如何使用 JDBC 连接 mys

C#读写文本文件的多种方式详解

《C#读写文本文件的多种方式详解》这篇文章主要为大家详细介绍了C#中各种常用的文件读写方式,包括文本文件,二进制文件、CSV文件、JSON文件等,有需要的小伙伴可以参考一下... 目录一、文本文件读写1. 使用 File 类的静态方法2. 使用 StreamReader 和 StreamWriter二、二进

java实现docker镜像上传到harbor仓库的方式

《java实现docker镜像上传到harbor仓库的方式》:本文主要介绍java实现docker镜像上传到harbor仓库的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 前 言2. 编写工具类2.1 引入依赖包2.2 使用当前服务器的docker环境推送镜像2.2

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》:本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》:本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文

Python中对FFmpeg封装开发库FFmpy详解

《Python中对FFmpeg封装开发库FFmpy详解》:本文主要介绍Python中对FFmpeg封装开发库FFmpy,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、FFmpy简介与安装1.1 FFmpy概述1.2 安装方法二、FFmpy核心类与方法2.1 FF

gitlab安装及邮箱配置和常用使用方式

《gitlab安装及邮箱配置和常用使用方式》:本文主要介绍gitlab安装及邮箱配置和常用使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装GitLab2.配置GitLab邮件服务3.GitLab的账号注册邮箱验证及其分组4.gitlab分支和标签的

C++中零拷贝的多种实现方式

《C++中零拷贝的多种实现方式》本文主要介绍了C++中零拷贝的实现示例,旨在在减少数据在内存中的不必要复制,从而提高程序性能、降低内存使用并减少CPU消耗,零拷贝技术通过多种方式实现,下面就来了解一下... 目录一、C++中零拷贝技术的核心概念二、std::string_view 简介三、std::stri

Linux脚本(shell)的使用方式

《Linux脚本(shell)的使用方式》:本文主要介绍Linux脚本(shell)的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录概述语法详解数学运算表达式Shell变量变量分类环境变量Shell内部变量自定义变量:定义、赋值自定义变量:引用、修改、删