脚本宝典收集整理的这篇文章主要介绍了

webpack学习笔记(1)-模块化

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">模块化</h1> <p>模块化是指把一个复杂的系统分解到多个模块以方便编码。</p> <p>很久以前,开发网页要通过命名空间的方式来组织代码,例如 <a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a> 库把它的<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>都放在了 w<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a><a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>w.$ 下,在加载完 <a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a> 后其他模块再通过 <a href="http://www.js-code.com/tag/window" title="window" target="_blank">window</a>.$ 去使用 <a href="http://www.js-code.com/tag/jquery" title="浏览关于“jQuery”的文章" target="_blank" class="tag_link">jQuery</a>。 这样做有很多问题,其中包括:</p> <p>命名空间冲突,两个库可能会使用同一个名称,例如 Zepto 也被放在 w<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a><a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>w.$ 下;<br />无法合理地管理项目的依赖和版本;<br />无法方便地控制依赖的加载顺序。<br />当项目变大时这种方式将变得难以维护,需要用模块化的思想来组织代码。</p> <h2 id="articleHeader1">script 标签</h2> <p>最原始的模块实现方式是通过在页面中插入多个 script 标签。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<script src=&quot;//mycdn.com/moduleA.js&quot;></script><br /> <script src=&quot;//mycdn.com/moduleB.js&quot;></script><br /> <script src=&quot;//mycdn.com/main.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//mycdn.com/moduleA.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//mycdn.com/moduleB.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//mycdn.com/ma<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>全局的作用域</p> <h2 id="articleHeader2">立即执行函数表达式</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="(function() { // foobar 并不会暴露在全局作用域 var foobar = 'Hello IIFE!'; console.log(foobar); })()" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lisp"><code>(<span class="hljs-name"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span>() { // foobar 并不会暴露在全局作用域 <a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a> foobar = 'Hello IIFE!'<span class="hljs-comment">;</span> console.log(<span class="hljs-name">foobar</span>)<span class="hljs-comment">;</span> })()</code></pre> <h2 id="articleHeader3">命名空间</h2> <p>库名.类别名.方法名</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var NameSpace = {} NameSpace.type = NameSpace.type || {} NameSpace.type.method = function(){}" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs haskell"><code><span class="hljs-title">var</span> <span class="hljs-type">NameSpace</span> = {} <span class="hljs-type">NameSpace</span>.<span class="hljs-class"><span class="hljs-keyword">type</span> = <span class="hljs-type">NameSpace</span>.<span class="hljs-keyword">type</span> || {}</span> <span class="hljs-type">NameSpace</span>.<span class="hljs-class"><span class="hljs-keyword">type</span>.method = function(){}</span></code></pre> <h1 id="articleHeader4">CommonJS 与 Node.js 模块系统</h1> <ul> <li>一个文件为一个模块</li> <li>通过 module.<a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a>s 暴露模块接口</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="exports.getSum = function(a, b) { return a + b; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s.getSum = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(a, b)</span> </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> a + b; }</code></pre> <ul> <li>通过 require 引入模块</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const math = require('./math'); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> math = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./math'</span>); </code></pre> <ul> <li>CommonJS 规范的流行得益于 Node.js 采用了这种方式</li> <li>同步执行</li> <li>无法直接运行在浏览器环境下,必须通过工具转换成标准的 ES5。</li> </ul> <h1 id="articleHeader5">AMD</h1> <ul> <li>Async Module Definition</li> <li>使用 define 定义模块</li> <li>使用 require 加载模块</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="/ 定义一个求和的模块 define('getSum', ['math'], function(math) { return function(a, b) { console.log('sum: ' + math.sum(a, b)); } });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code>/ 定义一个求和的模块 define(<span class="hljs-string">'getSum'</span>, [<span class="hljs-string">'math'</span>], <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(math)</span></span> { <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(a, b)</span></span> { console.<span class="hljs-built_in">log</span>(<span class="hljs-string">'sum: '</span> + <span class="hljs-built_in">math</span>.sum(a, b)); } });</code></pre> <ul> <li>应用RequireJS</li> <li>依赖前置,提前执行</li> <li>异步加载依赖</li> <li>JavaScript 运行环境没有原生支持 AMD,需要先导入实现了 AMD 的库后才能正常使用</li> </ul> <p><span class="img-wrap"><img data-src="/img/bVbfcw3?w=477&amp;h=401" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <h1 id="articleHeader6">CMD</h1> <ul> <li>Common Module Definition</li> <li>一个文件为一个模块</li> <li>使用define 来定义一个模块</li> <li>使用require 来加载一个模块</li> <li>应用(SeaJS)</li> <li>尽可能懒执行</li> </ul> <p><span class="img-wrap"><img data-src="/img/bVbfcxy?w=571&amp;h=384" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <h1 id="articleHeader7">ES6 Module</h1> <ul> <li>一个文件一个模块</li> <li><a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> / <a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a></li> <li><a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a>()</li> <li>目前无法直接运行在大部分 JavaScript 运行环境下,必须通过工具转换成标准的 ES5 后才能正常运行。</li> </ul> <p><span class="img-wrap"><img data-src="/img/bVbfcx3?w=589&amp;h=378" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/bVbfcx7?w=472&amp;h=259" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/bVbfcx9?w=381&amp;h=324" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/bVbfcyh?w=699&amp;h=359" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <h1 id="articleHeader8">Webpack 支持</h1> <ul> <li>AMD (RequireJS)</li> <li>ES Modules (推荐的主流)</li> <li>CommonJS(主流)</li> </ul> <p></code></p>

总结

以上是脚本宝典为你收集整理的

webpack学习笔记(1)-模块化

全部内容,希望文章能够帮你解决

webpack学习笔记(1)-模块化

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过