详解Js模块化的作用原理和方案

一、模块化概念

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起；块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。

二、模块化作用

为什么要用模块化的JavaScript？

因为在实际的开发过程中，经常会遇到变量、函数、对象等名字的冲突，这样就容易造成冲突，还会造成全局变量被污染；
同时，程序复杂时需要写很多代码，而且还要引入很多类库，这样稍微不注意就容易造成文件依赖混乱；
为了解决上面的的问题，我们才开始使用模块化的js，所以说模块化的作用就是：

  • 避免全局变量被污染
  • 便于代码编写和维护

三、模块化历程

1、普通写法（全局函数及变量）

其实只要是不同的函数或变量放一起就是简单的模块，这样弊端很明显，就是变量容易被污染；

var name = '卡卡';
function cat1(){
    name = '年年';
}
function cat2(){
    name = '有鱼';
}

2、对象封装

将整个模块放在一个对象里面，外部访问时直接调用对象的属性或者方法就行

var cat = {
    name:'卡卡',
    cat1:function(){
        var name = '年年';
        console.log(name);
    },
    cat2:function(){
        var name = '有鱼';
        console.log(name);
    }
}
cat.name;// 卡卡
cat.cat1();// 年年
cat.cat2();// 有鱼

这种方法虽然解决了变量冲突问题，但是容易被外部随意修改：

cat.name = '楼楼';

3、匿名函数方式

var cat = (function () {
    // 匿名函数的局部变量name
    var name = '卡卡';
    // 匿名函数的局部函数cat1
    var cat1 = function () {
        var name = '年年';
        console.log(name);
    };
    // 匿名函数的局部函数cat2
    var cat2 = function () {
        var name = '有鱼';
        console.log(name);
    };
    //通过window暴露一个对外的口，想要被外界访问，可以放到这里
    window.myModule = {
        cat1:cat1,
        cat2:cat2,
        name:name,
    };
})();
console.log(myModule.name);// name变量放入暴露口内，可以输出，结果为：卡卡
myModule.cat1();// cat1函数放入暴露口内，可以输出，结果为：年年
myModule.cat2();// cat2函数放入暴露口内，可以输出，结果为：有鱼

如果把变量name移除，此时再访问就访问不了，结果为undefined，这样就实现了变量不被随意修改的问题，即：

window.myModule = {
    cat1:cat1,
    cat2:cat2,
};
console.log(myModule.name);// undefined

匿名函数方式基本上解决了函数污染及变量随意被修改问题，这个也是模块化规范的基石！

四、模块化方案

根据匿名函数自调用的方式，同时为了增强代码依赖性，现在大部分JavaScript运行环境都有自己的模块化规范；

可以分为：Commonjs、AMD、CMD、ES6 module四大类

1、CommonJS

①在node环境下使用，不支持浏览器环境
②NodeJS遵循的规范
③使用require()进行引入依赖
④使用exports进行暴露模块

2、AMD

①浏览器环境下的异步加载模块
②RequireJS遵循的规范
③依赖于require.js模块管理工具库
④AMD 推崇依赖前置

3、CMD

①浏览器环境下，同时支持异步和同步加载
②SeaJS遵循的规范
③CMD 推崇依赖就近

4、ES6 module

ES6模块化语法在编译时就能确定模块的依赖关系，还能确定好输入输出的变量声明，已经不仅仅是模块规范，现在已经作为JS语言的标准语法使用，有以下特性：

①浏览器环境、服务器环境都支持
②编译时就能确定模块的依赖关系及变量，其他模块规范都是在运行时确定的
③export命令用于规定模块的对外接口
④import命令用于输入其他模块提供的功能

这里补充一点：ES5版本的模块化方案，仅在语言的层面上实现了模块化，缺点在于无法直接运行在大部分 JavaScript 运行环境下，必须通过构建工具转换成标准的 ES5 后才能正常运行，这里就需要使用自动化构建工具webpack。

以上就是详解Js模块化的作用原理和方案的详细内容，更多关于Js模块化的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Javascript模块化机制实现原理详解

    1. 概述 js发展初期暴露了其缺陷:缺乏模块,后来提出了commonJS规范来规范其模块的规范.作为JavaScript新手,发现对于其JavaScript的模块机制,不是很理解.我查阅了一些资料整理了JavaScript CommonJS的原理和机制. 2. JavaScript 2.1 无后端的项目 这类项目不能使用CommonJS的模块规范,这是我起初所犯的错误.在没有es6被大多数浏览器支持的时候,js文件充斥着var和function,由此引来了命名冲突和污染,使得JavaScrip

  • JS前端模块化原理与实现方法详解

    本文实例讲述了JS前端模块化原理与实现方法.分享给大家供大家参考,具体如下: 1.什么是前端模块化 模块化开发,一个模块就是一个实现特定功能的文件,有了模块我们就可以更方便地使用别人的代码,要用什么功能就加载什么模块. 2.模块化开发的好处 1)避免变量污染,命名冲突 2)提高代码利用率 3)提高维护性 4)依赖关系的管理 3.前端模块化的进程 前端模块化规范从原始野蛮阶段现在慢慢进入"文艺复兴"时代,实现的过程如下: 3.1 函数封装 我们在讲到函数逻辑的时候提到过,函数一个功能是实

  • JavaScript 几种循环方式以及模块化的总结

    小小最近学习到了js的几种循环方式,对这几种循环方式进行总结.以及对模块化的相关知识点进行总结, 循环方式 循环方式分为好几种循环方式,分别是for循环,forEach循环,map循环,for..in循环,for-of循环,jquery的循环. 小小将会依次对这几种循环方式进行介绍. 一般数组遍历循环 这里使用常用的数组遍历方式. 一般来说,常用的数组遍历如下 for (var index = 0; index < myArray.length; index++) { console.log(m

  • javascript中导出与导入实现模块化管理教程

    在理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块.但是,在ES6以前,JavaScript一直没有自己模块体系(module),无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.如果要想在前端做模块化开发,必须依赖第三方框架来实现,如:requireJS与seaJS. javascript中的导出和导入实现模块化管理 requireJS是AMD规范的起源,seaJS是CMD规范的起源,由于两者功能高度重合,后来seaJS不再维护,从此淡出人们的视野,于

  • JavaScript 模块化开发实例详解【seajs、requirejs库使用】

    本文实例讲述了JavaScript 模块化开发.分享给大家供大家参考,具体如下: JS开发的问题 冲突 依赖 JS引入的文件,产生依赖. 使用命名空间解决: 命名空间的弊端 调用的时候 名字比较长. 只能减低冲突,不能完全避免 SeaJs使用 引入sea.js的库 如何变成模块? define 如何调用模块? exports 和 seajs.use 如何依赖模块? require //html: <script src="js/sea.js" type="text/ja

  • 详解Js中的模块化是如何实现的

    详解Js中的模块化是如何实现的

    由于 Js 起初定位的原因(刚开始没想到会应用在过于复杂的场景),所以它本身并没有提供模块系统,随着应用的复杂化,模块化成为了一个必须解决的问题.本着菲麦深入原理的原则,很有必要来揭开模块化的面纱 一.模块化需要解决的问题 要对一个东西进行深入的剖析,有必要带着目的去看.模块化所要解决的问题可以用一句话概括 在没有全局污染的情况下,更好的组织项目代码 举一个简单的栗子,我们现在有如下的代码: function doSomething () { const a = 10; const b = 11

  • javascript 构建模块化开发过程解析

    在使用 sea.js .require.js . angular 的时候. 我们使用到 define . module(require) 的方式,定义模块,和依赖模块 下面给出 define 和 module 的简单实现. 其本质,就是往一个对象上面添加方法 var F = {}; F.define = function(str,fn){ var parts = str.split("."); var parent = this; // parent 当前模块的父模块 var i =

  • 关于JS模块化的知识点分享

    模块化是一个语言膨胀的必经之路,它能够帮助开发者拆分和组织代码. Module模式 在模块化规范形成之前,JS开发者使用Module设计模式来解决JS全局作用域的污染问题.Module模式最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法.在JavaScript中,Module模式使用匿名函数自调用 (闭包)来封装,通过自定义暴露行为来区分私有成员和公有成员. let myModule = (function (window) { let moduleName = 'module' /

  • javascript高级模块化require.js的具体使用方法

    javascript高级模块化require.js的具体使用方法

    本文介绍了require.js的具体使用方法,分享给大家,也给自己留个笔记. Require.js: RequireJS是一个非常小巧的javascript模块载入框架,是AMD(Asynchronous Module Definition,异步模块加载机制)规范最好的实现之一.最新版的requireJS压缩后只有14k,堪称非常轻量.它还同时可以和其他的框架协调工作,使用requireJS必将使我们的前端代码质量得以提升. 首先我们先来看一下一个普通的页面js加载 <!DOCTYPE html

  • 详解Js模块化的作用原理和方案

    详解Js模块化的作用原理和方案

    一.模块化概念 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起:块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信. 二.模块化作用 为什么要用模块化的JavaScript? 因为在实际的开发过程中,经常会遇到变量.函数.对象等名字的冲突,这样就容易造成冲突,还会造成全局变量被污染: 同时,程序复杂时需要写很多代码,而且还要引入很多类库,这样稍微不注意就容易造成文件依赖混乱: 为了解决上面的的问题,我们才开始使用模块化的js,所以说模块

  • 详解webpack模块化管理和打包工具

    本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具. 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际 需要的时候再异步加载.通过 loader  的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.

  • 详解Webpack4多页应用打包方案

    前言 学习了 webpack 之后,将自己的博客的前端进行重构,由于自己的博客是多页应用,所以研究了下多页应用的打包方案.在这里把最后配置的成果分享下,不足之处,请指正.(文字不多,全是代码,不是配置教程,所以没有特别详细的写,只是一个参考) 项目地址: https://github.com/Ray-daydayup/MPA-webpack 文件目录结构 项目目录结构 首先先看下我的项目的目录结构 myblog-webpack ├── dist // 打包输出文件夹 ├── src // 源代码

  • 详解JS浏览器储存

    详解JS浏览器储存

    引言 随着对前端的了解越来越深入,了解到了很多种浏览器的存储方案,如 Cookie.LocalStorage等,哪这些存储方案有何异同,分别的适用场景又是什么呢. Cookie Cookie的来源 Cookie 被创造出来的本意并不是本地储存,而是为了辨别用户身份.众所周知,Http 协议是无状态的,也就是说你每一次发送给服务器的请求对于服务器来说都是孤立的,服务器不知道这这些请求来自于谁.比如你向购物车里面添加了一些商品,但是当发送结账请求的时候服务器懵了,我怎么知道你是谁,你买了什么呢.而使

  • 详解JS同源策略和CSRF

    概述 本文主要涉及三个关键词: 同源策略(Same-origin policy,简称 SOP) 跨站请求伪造(Cross-site request forgery,简称 CSRF) 跨域资源共享(Cross-Origin Resource Sharing,简称 CORS) 同源策略 SOP 同源 先解释何为同源:协议.域名.端口都一样,就是同源. url 同源 https://niconico.com 基准 https://niconico.com/spirit o https://sub.ni

  • 详解NodeJS模块化

    详解NodeJS模块化

    目录 一.前言 二.正文 2.1.什么是模块 2.2.Resolving 2.3.require.resolve 2.4.模块间的父子依赖关系 2.5.exports, module.exports 2.6.模块循环依赖 2.7..json和.node 2.8.Wrapping 2.9.Cache 三.总结 一.前言 我们知道,Node.js是基于CommonJS规范进行模块化管理的,模块化是面对复杂的业务场景不可或缺的工具,或许你经常使用它,但却从没有系统的了解过,所以今天我们来聊一聊Node

  • 详解JS中异常与错误处理的正确方法

    目录 简介 1 面向错误编程 1.1 墨菲定律 1.2 先判否 2. js 内置的错误处理 2.1 Error 类 2.2 throw 2.3 try catch 2.4 Promise.catch 3. 错误处理只有一次 总结 简介 首先,这篇文章一定会引起争议,因为对于错误处理从来就没有真正的标准答案,每个人都会有自己的主观意见. 我的理解毕竟也是片面,提出的想法主要是基于个人的经验总结,如果有异议,欢迎交流讨论. 为了能够尽量保持客观,我会将处理思想尽量前置,再围绕处理思想展开. 这样大家

  • 详解js几个绕不开的事件兼容写法

    本文介绍了详解js几个绕不开的事件兼容写法,分享给大家,具体如下: 1.键盘事件 keyCode 兼容性写法 var inp = document.getElementById('inp') var result = document.getElementById('result') function getKeyCode(e) { e = e ? e : (window.event ? window.event : "") return e.keyCode ? e.keyCode :

  • 详解JS数组Reduce()方法详解及高级技巧

    基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组. 语法: arr.reduce(callback,[initialValue]) callback (执行数组中每个值的函数,包含四个参数) previousValue (上

  • 详解js中构造流程图的核心技术JsPlumb（2）

    详解js中构造流程图的核心技术JsPlumb（2）

    前言:上篇详解js中构造流程图的核心技术JsPlumb介绍了下JsPlumb在浏览器里面画流程图的效果展示,以及简单的JsPlumb代码示例.这篇还是接着来看看各个效果的代码说明. 一.设置连线的样式和颜色效果代码示例 大概的效果如图: 这些效果看着很简单,那么,我们如何用代码去实现它呢.上章我们说过,JsPlumb的连线样式是由点的某些属性决定的,既然如此,我们就通过设置点的样式来动态改变连线的样式即可.来看代码: 首先来看看连线类型的那个select <div id="btn_line

随机推荐