前端进阶之——模块化

这篇具有很好参考价值的文章主要介绍了前端进阶之——模块化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        在做项目的时候越来越发现模块化的重要性,做好模块化开发不仅给后期的维护带来不少好处而且大大提升项目开发效率,接下来整理一下模块化相关知识吧。

模块化开发的优点

  1. 封装方法、提高代码的复用性、可维护性和可读性
  2. 隔离作用域,避免污染全局作用域
  3. 避免变量冲突

模块化开发的各种方法

立即执行函数(IIFE)

  • 立即执行函数来创建模块,将私有成员放在函数作用域以内,不暴露在外部。将公共的方法返回。
var module = (function() {
  var privateVar = 'Private Variable';

  function privateMethod() {
    console.log('This is a private method');
  }

  function publicMethod() {
    console.log('This is a public method');
  }

  return {
    publicMethod: publicMethod
  };
})();

module.publicMethod(); // Output: This is a public method

CommonJS:

  • node中自带的,同步使用require导入模块,module.exports或exports导出模块,适用于服务器端
// math.js
function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

module.exports = {
  add,
  subtract
};

// app.js
const math = require('./math');
console.log(math.add(2, 3)); // Output: 5
console.log(math.subtract(5, 2)); // Output: 3

AMD(Asynchronous Module Definition)

  • 使用define定义模块,异步加载模块,适用于浏览器、按需加载模块
// math.js
define([], function() {
  function add(a, b) {
    return a + b;
  }

  function subtract(a, b) {
    return a - b;
  }

  return {
    add,
    subtract
  };
});

// app.js
require(['math'], function(math) {
  console.log(math.add(2, 3)); // Output: 5
  console.log(math.subtract(5, 2)); // Output: 3
});

CMD

  • 使用define定义模块,异步加载模块,适用于浏览器、就近依赖
define(function(require, exports) {
    // 对外提供name属性
    exports.name = 'myModule';
    // 对外提供hello方法
    exports.hello = function() {
      console.log('Hello myModule');
    };
});
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="sea.js"></script>
        <script type="text/javascript">
          //加载一个模块,在加载完成时,执行回调
          seajs.use('myModule', function(a) {
          	console.log(a.name);
            a.hello();
          });
        </script>
    </head>
    <body>
    </body>
</html>

ES6模块

  • 使用 import 导入模块,使用 export 导出模块,浏览器与服务器通用
// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// app.js
import { add, subtract } from './math';

console.log(add(2, 3)); // Output: 5
console.log(subtract(5, 2)); // Output: 3

前端进阶之——模块化,==========前端=========,JS,面试,前端,javascript

异步加载JS有哪些方法

 1 设置<script>属性async = 'async'

  • 脚本将异步加载并立即执行,不会阻塞页面的解析和渲染、加载完成后,将在页面任何位置执行
<script src='script.js' async="async"><script>

2 动态创建script DOM:

  • 使用JS动态创建<script>元素,通过设置src属性指定脚本的URL,

var script = document.creatElement('script');
script.src = 'script.js';
document.head.appendChild(script)

3 defer属性

<script src="script.js" defer></script>

4 XmlHttpRequest脚本注入

  • 利用对象加载脚本内容,将其注入到页面当中,使用eval()函数执行脚本。

var xhr = new XMLHttpRequest();
xhr.open('GET','script.js',true);
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        eval(xhr.responseText);
    }
};
xhr.send();

5 异步加载库LABjs

  • LABjs是一个异步加载JS的库,可以控制JS的加载顺序,可用它来的API定义和加载依赖关系
 
$LAB
    .script('A.js')
    .wait()
    .script('B.js')

 

6 模块加载器 Sea.js

  • 用于web端模块化开发的加载器,可以异步加载和管理模块,加载完成后执行回调函数。
seajs.use(['module1','module2'],function(module1,module2){
    console.log('Hello')
});

7 Dederred Scripts(延迟脚本):

  • defer属性可以将脚本延迟到文档解析之后再执行,并且会按照他们在文档中出现的顺序执行,但在DOMContentLoaded事件触发之前执行。
<script src="script.js" defer></script>

8 Dynamic Import(动态导入):

  • import()可以异步加载JS模块,并返回一个Promise对象,链式调用
import('module.js')
 .then(module => {
   // 执行模块加载完成后的逻辑
 })
 .catch(error => {
   // 处理加载失败的情况
 });

9 Web Workers(Web工作者)

  • Web Workers运行在后台的JS脚本,可以耗时操作而不会阻塞主线程。
  • 可以异步加载和执行JS脚本,提高页面的响应性
var worker = new Worker('worker.js');
worker.onmessage = function(event) {
 // 处理从 Worker 返回的消息
};
worker.postMessage('start');

参考文章

前端进阶之旅

第25题 谈谈模块化的发展历程以及各自的特_请定义一个文件模块mymodule.js,定义一个name变量及一个sayhello的方法,暴露_crazy的蓝色梦想的博客-CSDN博客文章来源地址https://www.toymoban.com/news/detail-688869.html

到了这里,关于前端进阶之——模块化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端面试的话术集锦第 5 篇:高频考点( 类型转换 & 深浅拷贝 & 模块化机制等)

    这是记录 前端面试的话术集锦第五篇博文——高频考点(类型转换 深浅拷贝 模块化机制等) ,我会不断更新该博文。❗❗❗ typeof 对于原始类型来说,除了 null 都可以显示正确的类型:

    2024年02月09日
    浏览(66)
  • 前端框架前置课Node.js学习(1) fs,path,模块化,CommonJS标准,ECMAScript标准,包

    目录 什么是Node.js 定义 作用: 什么是前端工程化 Node.js为何能执行Js fs模块-读写文件 模块 语法: 1.加载fs模块对象 2.写入文件内容 3.读取文件内容 Path模块-路径处理 为什么要使用path模块 语法 URL中的端口号 http模块-创建Web服务 需求 步骤: 案例:浏览时钟 步骤: 什么是模块化 定

    2024年01月16日
    浏览(110)
  • 前端10年进化 Node.js、模块化、CommonJS、AMD、CMD、Webpack、Vue-cli、Electron-vue

    模块化的概念在软件开发领域已经存在很长时间,但在 JavaScript 中的模块化发展相对较晚。以下是对您提出的问题的回答: 提出时间:JavaScript 中的模块化概念相对较早地提出于 CommonJS 规范。CommonJS 是一种 JavaScript 模块化规范,最早在 2009 年由 Ryan Dahl 和其他社区成

    2024年02月11日
    浏览(79)
  • JavaScript模块化

    JavaScript模块化,让我们通过一个实际的例子来更好地理解。 假设我们正在开发一个简单的购物车应用,需要实现计算商品总价和展示购物车列表的功能。我们可以将这个应用划分为两个模块:`cart.js`和`main.js`。 1. cart.js模块: ```javascript // cart.js // 定义一个私有变量,用于存

    2024年02月14日
    浏览(57)
  • JavaScript中的模块化编程

    JavaScript是一种强大的编程语言,它可以在浏览器中进行客户端脚本编写,并且在服务器端也有广泛的应用。随着JavaScript应用的增多,JavaScript代码的复杂度也不断增加。为了提高代码的可维护性和重用性,模块化编程变得越来越重要。本文将讨论JavaScript中的模块化编程,包括

    2024年02月02日
    浏览(65)
  • 深入理解JavaScript模块化开发

    前言: 随着JavaScript应用程序的复杂性不断增加,模块化开发成为了一种必备的技术。通过将代码划分为模块,我们可以提高代码的可维护性、可重用性和可扩展性。在本文中,我们将深入探讨JavaScript模块化开发的概念、优势和不同的模块化方案。 模块化开发是将一个大型应

    2024年02月08日
    浏览(92)
  • JavaScript:模块化【CommonJS与ES6】

    在 JavaScript 编程中,随着项目的复杂性增加,代码的组织和管理变得至关重要。模块化是一种强大的编程概念,它允许我们将代码划分为独立的模块,提高了可维护性和可扩展性。本文将详细介绍 CommonJS 和 ES6 模块,帮助你理解它们的特点和用法。 1. CommonJS 模块化 CommonJS 是

    2024年02月13日
    浏览(54)
  • js模块化开发

    ◼ 到底什么是模块化、模块化开发呢?  事实上模块化开发最终的目的是将程序划分成一个个小的结构;  这个结构中编写属于自己的逻辑代码,有自己的作用域,定义变量名词时不会影响到其他的结构;  这个结构可以将自己希望暴露的变量、函数、对象等导出给其结

    2024年02月13日
    浏览(61)
  • JS模块化系统

    随着 JavaScript 开发变得越来越广泛,命名空间和依赖关系变得越来越难以处理。人们已经开发出不同的解决方案以模块系统的形式来解决这个问题。 CommonJS 是一种同步加载模块的规范,主要用于服务器端的 Node.js 环境。 top:CommonJS 加载的是一个对象(即 module.exports 属性),

    2024年02月19日
    浏览(61)
  • js 模块化

    模块化主要是用来抽离公共代码,隔离作用域,避免变量冲突等。 模块化的整个发展历史如下: IIFE :使用自执行函数来编写模块化,特点:在一个单独的函数作用域中执行代码,避免代码冲突。 AMD :使用 require 来编写模块化,特点:依赖必须提前声明好。 CMD :使用 seaJS

    2024年02月14日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包