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

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

内核启动时减少log的方式

内核引导选项 内核引导选项大体上可以分为两类:一类与设备无关、另一类与设备有关。与设备有关的引导选项多如牛毛,需要你自己阅读内核中的相应驱动程序源码以获取其能够接受的引导选项。比如,如果你想知道可以向 AHA1542 SCSI 驱动程序传递哪些引导选项,那么就查看 drivers/scsi/aha1542.c 文件,一般在前面 100 行注释里就可以找到所接受的引导选项说明。大多数选项是通过"_

用命令行的方式启动.netcore webapi

用命令行的方式启动.netcore web项目 进入指定的项目文件夹,比如我发布后的代码放在下面文件夹中 在此地址栏中输入“cmd”,打开命令提示符,进入到发布代码目录 命令行启动.netcore项目的命令为:  dotnet 项目启动文件.dll --urls="http://*:对外端口" --ip="本机ip" --port=项目内部端口 例: dotnet Imagine.M

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

深入理解RxJava:响应式编程的现代方式

在当今的软件开发世界中,异步编程和事件驱动的架构变得越来越重要。RxJava,作为响应式编程(Reactive Programming)的一个流行库,为Java和Android开发者提供了一种强大的方式来处理异步任务和事件流。本文将深入探讨RxJava的核心概念、优势以及如何在实际项目中应用它。 文章目录 💯 什么是RxJava?💯 响应式编程的优势💯 RxJava的核心概念

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

【即时通讯】轮询方式实现

技术栈 LayUI、jQuery实现前端效果。django4.2、django-ninja实现后端接口。 代码仓 - 后端 代码仓 - 前端 实现功能 首次访问页面并发送消息时需要设置昵称发送内容为空时要提示用户不能发送空消息前端定时获取消息,然后展示在页面上。 效果展示 首次发送需要设置昵称 发送消息与消息展示 提示用户不能发送空消息 后端接口 发送消息 DB = []@ro

脏页的标记方式详解

脏页的标记方式 一、引言 在数据库系统中,脏页是指那些被修改过但还未写入磁盘的数据页。为了有效地管理这些脏页并确保数据的一致性,数据库需要对脏页进行标记。了解脏页的标记方式对于理解数据库的内部工作机制和优化性能至关重要。 二、脏页产生的过程 当数据库中的数据被修改时,这些修改首先会在内存中的缓冲池(Buffer Pool)中进行。例如,执行一条 UPDATE 语句修改了某一行数据,对应的缓

JavaSE——封装、继承和多态

1. 封装 1.1 概念      面向对象程序三大特性:封装、继承、多态 。而类和对象阶段,主要研究的就是封装特性。何为封装呢?简单来说就是套壳屏蔽细节 。     比如:对于电脑这样一个复杂的设备,提供给用户的就只是:开关机、通过键盘输入,显示器, USB 插孔等,让用户来和计算机进行交互,完成日常事务。但实际上:电脑真正工作的却是CPU 、显卡、内存等一些硬件元件。