解析JS模块化

xbynet 发布于2019-08-21 15:49 / 1472人阅读

一开始自己一个人写代码，实现一个点击隐藏和显示事件

function a(){
    document.getElementById("xxx").click = function(){
    }
}
a();

忽然某天一位项目加多了开发，他忽然写了一个函数:

function a(){
    alert("error");
}

问题发生了:
1.悲剧就发生了你写的函数就say Goodbye了，你老板就找到你了,因为你的函数被覆盖了，无模块化时候全局内容很容易被污染
2.同样，你同事也找到了你，因为他发现依赖于你事件失效了，同样，无模块化时候，代码执行顺序混乱会导致代码失效

这时候要改进整体代码了，于是你的函数代码就写成:

(function(window,undefined){
    document.getElementById("xxx").click = function(){}
})(window,undefined);

这时候你又多了一位同事，你发现：
大家都写了同一句代码:

    document.getElementById("xxx").click = function(){}

这样匿名函数自执行，可以避免全局污染，但是带来一个问题，代码复用和代码冗余

于是你又改进了代码:

(function(window,undefined){
   var $ = function(){
   }
   $.prototype={
       a:function(){
           document.getElementById("xxx").click = function(){}
       }
   }
   window.$ = new $();

})(window,undefined);

$.a();

这样解决了复用的问题，但是全局污染的问题依旧存在。只能通过人为来避免了。

GPU云服务器云服务器解析模块 js模块化 js模块化视频教程 js解析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88267.html

精读《V8 引擎 Lazy Parsing》

摘要：在执行函数时，通过保存堆栈状态，再保存堆栈跳出后返回位置的指针，最后对变量赋值。这看上去没有问题，只要将值存在堆栈就搞定了。 1. 引言本周精读的文章是 V8 引擎 Lazy Parsing，看看 V8 引擎为了优化性能，做了怎样的尝试吧！这篇文章介绍的优化技术叫 preparser，是通过跳过不必要函数编译的方式优化性能。 2. 概述 & 精读解析 Js 发生在网页运行的关键路...

罗志环 2019-08-23 17:04 评论0 收藏0
最全的前端模块化方案

摘要：模块化主要是用来抽离公共代码，隔离作用域，避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。顺手写一个省略省略实现此时的对应的形式解析省略执行兼容，模块化语法。模块化主要是用来抽离公共代码，隔离作用域，避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。会讲述以下内容 CommonJS AMD 及核心原理实现 CMD 及核心原理实现 UMD 及源码解析 ES6...

antz 2019-08-23 17:07 评论0 收藏0
为何 ES Module 如此姗姗来迟

摘要：最大的好处是对用户而言透明，可惜原因如前所述，此方案已否定。鉴于已经在正式提案中，倘若讨论持续僵持不下，不出意外将会随着时间推移而正式成为规范。月碰头会的与会者纷纷表示这次会议进展令人愉快，会议内容汇总在此，以及一些补充。说明：本文发布之后，此问题的推进峰回路转，不停有新内容。文末新增一节 Updates，跟进本文发布之后的 ES Module 标准化进展情况。浏览器大战多年了热度...

xuexiangjys 2019-08-19 18:06 评论0 收藏0
开始在web中使用JS Modules

摘要：在中，你可以使用关键字输出任何东西等。新的和语法仅限于在模块脚本中使用，不能用在常规脚本中。开发者工具的代码覆盖率检查能帮助你检测源码中是否存在无用代码。以达到无需加载其他无用函数的目的。本文由云+社区发表作者：原文：《Using JavaScript modules on the web》 https://developers.google.com... 译者序 JS modu...

sf190404 2019-08-23 16:03 评论0 收藏0
minipack源码解析以及扩展

摘要：的变化利用进行前后端通知。例如的副作用，资源只有资源等等，仔细剖析还有很多有趣的点扩展阅读创建热更新流程本文示例代码联系我前置知识首先可能你需要知道打包工具是什么存在基本的模块化演变进程对模块化bundle有一定了解了解babel的一些常识对node有一定常识常见的一些打包工具如今最常见的模块化构建工具应该是webpack,rollup,fis,parcel等等各...

tangr206 2019-08-23 17:04 评论0 收藏0
webpack源码分析之四：plugin

摘要：流程划分纵观整个打包过程，可以流程划分为四块。核心类关系图功能实现模块通过将源码解析为树并拆分，以及直至基础模块。通过的依赖和切割文件构建出含有和包含关系的对象。通过模版完成主入口文件的写入，模版完成切割文件的写入。前言插件plugin,webpack重要的组成部分。它以事件流的方式让用户可以直接接触到webpack的整个编译过程。plugin在编译的关键地方触发对应的事件，极大的...

yhaolpz 2019-08-23 10:34 评论0 收藏0