-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlocal-search.xml
More file actions
65 lines (31 loc) · 16.8 KB
/
local-search.xml
File metadata and controls
65 lines (31 loc) · 16.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>杂</title>
<link href="/2020/06/23/%E6%9D%82/"/>
<url>/2020/06/23/%E6%9D%82/</url>
<content type="html"><![CDATA[<p>学习到的一些小知识。</p><a id="more"></a><h3 id="GitHub显示不了图片"><a href="#GitHub显示不了图片" class="headerlink" title="GitHub显示不了图片"></a>GitHub显示不了图片</h3><p>打开浏览器开发者工具，发现各种连接错误被拒绝，八九不离十就是<strong>网址解析错误</strong>，那就需要人为给它重定向转换到对应的IP地址。打开该网址<a href="https://links.jianshu.com/go?to=https%3A%2F%2Fwww.ipaddress.com%2F" target="_blank" rel="noopener">ipaddress.com/</a>把每个错误的url放入里面获取对应IP，并把它收集起来。</p><p>参考：<a href="https://www.jianshu.com/p/c42a28d97d50" target="_blank" rel="noopener">Github显示不了图片的解决方法</a></p><h3 id="git全局-gitignore文件"><a href="#git全局-gitignore文件" class="headerlink" title="git全局.gitignore文件"></a>git全局.gitignore文件</h3><p>.DS_Store(英文全称 Desktop Services Store)是一种由苹果公司的Mac OS X操作系统所创造的隐藏文件，目的在于存贮目录的自定义属性，例如文件的图标位置或者是背景色的选择。相当于 Windows 下的 desktop.ini。需要添加<code>.gitignore</code>文件，不然<code>git</code>会把<code>.DS_Store</code>当成需要管理版本的文件，在<code>git add</code>时添加到仓库中。</p><p>参考：<a href="https://www.jianshu.com/p/2b247923cb4b" target="_blank" rel="noopener">Git全局.gitignore文件</a></p><h3 id="jsDelivr加速GitHub-Pages图片的加载"><a href="#jsDelivr加速GitHub-Pages图片的加载" class="headerlink" title="jsDelivr加速GitHub Pages图片的加载"></a>jsDelivr加速GitHub Pages图片的加载</h3><p>插入来自 Github 仓库的图片，由于网络情况可能会出现加载慢和无法加载的情况，我们可以使用 jsDelivr来加速图片文件等媒体文件的加载。</p><p>发布仓库后，通过jsDelivr引用文件。</p><blockquote><p>使用方法：<br><a href="https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径" target="_blank" rel="noopener">https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径</a></p></blockquote><p>参考：<a href="https://www.cnblogs.com/zhsh666/p/11432956.html" target="_blank" rel="noopener">jsDeliver+github使用教程，免费的cdn</a></p>]]></content>
<categories>
<category>杂</category>
</categories>
<tags>
<tag>git</tag>
<tag>GitHub</tag>
<tag>jsDelivr</tag>
</tags>
</entry>
<entry>
<title>前端模块化</title>
<link href="/2020/06/22/%E5%89%8D%E7%AB%AF%E6%A8%A1%E5%9D%97%E5%8C%96/"/>
<url>/2020/06/22/%E5%89%8D%E7%AB%AF%E6%A8%A1%E5%9D%97%E5%8C%96/</url>
<content type="html"><![CDATA[<p>模块化已经是现代前端开发中不可或缺的一部分了。</p><a id="more"></a><h3 id="什么是模块化"><a href="#什么是模块化" class="headerlink" title="什么是模块化"></a>什么是模块化</h3><ul><li>将一个复杂的程序依据一定的规范封装成几个文件，并进行组合在一起</li><li>模块的内部数据与实现是私有的，只是向外暴露了一些借口与外部其他模块通信</li></ul><h3 id="为什么要模块化"><a href="#为什么要模块化" class="headerlink" title="为什么要模块化"></a>为什么要模块化</h3><p>把复杂的问题分解成相对独立的模块，这样的设计可以降低程序的复杂性，提高代码的重用，也有利于团队协作与后期的维护和扩展。</p><h4 id="好处"><a href="#好处" class="headerlink" title="好处"></a>好处</h4><ul><li>减少命名空间污染</li><li>更好的分离，按需加载</li><li>更高的复用性</li><li>更高的可维护性</li></ul><h3 id="如何实现模块化"><a href="#如何实现模块化" class="headerlink" title="如何实现模块化"></a>如何实现模块化</h3><h4 id="CommonJS"><a href="#CommonJS" class="headerlink" title="CommonJS"></a>CommonJS</h4><p>在早期前端对于模块化并没有什么规范，反而是偏向服务端的应用有更强烈的需求，CommonJS规范就是一套偏向于服务端的模块化规范。NodeJS就采用了这个规范。</p><h5 id="导出"><a href="#导出" class="headerlink" title="导出"></a>导出</h5><p>通过module.exports或exports对象导出模块内部数据</p><pre><code class="hljs javascript"><span class="hljs-comment">// a.js</span><span class="hljs-keyword">let</span> a = <span class="hljs-number">1</span>;<span class="hljs-keyword">let</span> b = <span class="hljs-number">2</span>;<span class="hljs-built_in">module</span>.exports = { x: a, y: b}<span class="hljs-comment">// or</span>exports.x = a;exports.y = b;</code></pre><h5 id="导入"><a href="#导入" class="headerlink" title="导入"></a>导入</h5><p>通过require函数导入外部模块数据</p><pre><code class="hljs javascript"><span class="hljs-comment">// b.js</span><span class="hljs-keyword">let</span> a = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./a'</span>);a.x;a.y;</code></pre><h4 id="AMD"><a href="#AMD" class="headerlink" title="AMD"></a>AMD</h4><p>因为CommonJS规范的一些特性（基于文件系统、同步加载），它并不适用与浏览器端，所以另外定义了适用于浏览器端的规范<code>AMD(Asynchronous Module Definition)</code>——异步模块定义。它只有定义没有具体的实现，需要引入第三方库来解决。</p><h5 id="requireJS"><a href="#requireJS" class="headerlink" title="requireJS"></a>requireJS</h5><pre><code class="hljs javascript"><script src=<span class="hljs-string">"https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"</span>><<span class="hljs-regexp">/script></span></code></pre><h5 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h5><p>通过define方法定义一个模块，并通过第二个回调函数参数来产生独立作用域</p><pre><code class="hljs javascript">define([Module,]<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">// 模块内部代码</span>})</code></pre><h6 id="导出-1"><a href="#导出-1" class="headerlink" title="导出"></a>导出</h6><p>通过return导出模块内部数据</p><pre><code class="hljs javascript"><span class="hljs-comment">// Example.js</span>define(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Example</span> </span>{ add(person) { <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`添加：<span class="hljs-subst">${person}</span>`</span>) } }})</code></pre><h6 id="导入-1"><a href="#导入-1" class="headerlink" title="导入"></a>导入</h6><p>通过前置依赖列表导入外部模块数据</p><pre><code class="hljs javascript"><span class="hljs-comment">// main.js</span><span class="hljs-comment">// 定义一个模块，并导入 ./Example 模块</span>define([<span class="hljs-string">'./Example'</span>], <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">Example</span>) </span>{ <span class="hljs-keyword">let</span> example = <span class="hljs-keyword">new</span> Example() example.add({<span class="hljs-attr">name</span>: <span class="hljs-string">'zhangsan'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">30</span>})})</code></pre><h4 id="UMD"><a href="#UMD" class="headerlink" title="UMD"></a>UMD</h4><p>严格来说，<code>UMD(Universal Module Definition)</code> 并不属于一套模块规范，它主要用来处理 <code>CommonJS</code>、<code>AMD</code>、<code>CMD</code> 的差异兼容，是模块代码能在前面不同的模块环境下都能正常运行。</p><pre><code class="hljs javascript">(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">root, factory</span>) </span>{ <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> <span class="hljs-built_in">module</span> === <span class="hljs-string">"object"</span> && <span class="hljs-keyword">typeof</span> <span class="hljs-built_in">module</span>.exports === <span class="hljs-string">"object"</span>) { <span class="hljs-comment">// Node, CommonJS-like</span> <span class="hljs-built_in">module</span>.exports = factory(<span class="hljs-built_in">require</span>(<span class="hljs-string">'jquery'</span>)); } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> define === <span class="hljs-string">"function"</span> && define.amd) { <span class="hljs-comment">// AMD 模块环境下</span> define([<span class="hljs-string">'jquery'</span>], factory); }}(<span class="hljs-keyword">this</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">$</span>) </span>{ <span class="hljs-comment">// $ 要导入的外部依赖模块</span> $(<span class="hljs-string">'div'</span>) <span class="hljs-comment">// ...</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">b</span>(<span class="hljs-params"></span>)</span>{} <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">c</span>(<span class="hljs-params"></span>)</span>{} <span class="hljs-comment">// 模块导出数据</span> <span class="hljs-keyword">return</span> { b: b, c: c }}));<span class="hljs-comment">// 在jQuery源码开头就能看到以上代码</span></code></pre><h4 id="ESM"><a href="#ESM" class="headerlink" title="ESM"></a>ESM</h4><p>从ECMAScript6 开始，JavaScript 原生引入了模块概念，而且现在主流浏览器也都有了很好的支持。ESM，即<code>ECMAScript Module</code>。</p><h5 id="导出-2"><a href="#导出-2" class="headerlink" title="导出"></a>导出</h5><p>使用export导出模块内部数据</p><pre><code class="hljs javascript"><span class="hljs-comment">// 导出单个特性</span><span class="hljs-keyword">export</span> <span class="hljs-keyword">let</span> name1, name2, …, nameN;<span class="hljs-keyword">export</span> <span class="hljs-keyword">let</span> name1 = …, name2 = …, …, nameN;<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FunctionName</span>(<span class="hljs-params"></span>)</span>{...}<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ClassName</span> </span>{...}<span class="hljs-comment">// 导出列表</span><span class="hljs-keyword">export</span> { name1, name2, …, nameN };<span class="hljs-comment">// 重命名导出</span><span class="hljs-keyword">export</span> { variable1 <span class="hljs-keyword">as</span> name1, variable2 <span class="hljs-keyword">as</span> name2, …, nameN };<span class="hljs-comment">// 默认导出</span><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> expression;<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">…</span>) </span>{ … }<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">name1</span>(<span class="hljs-params">…</span>) </span>{ … }<span class="hljs-keyword">export</span> { name1 <span class="hljs-keyword">as</span> <span class="hljs-keyword">default</span>, … };<span class="hljs-comment">// 模块重定向导出</span><span class="hljs-keyword">export</span> * <span class="hljs-keyword">from</span> …;<span class="hljs-keyword">export</span> { name1, name2, …, nameN } <span class="hljs-keyword">from</span> …;<span class="hljs-keyword">export</span> { import1 <span class="hljs-keyword">as</span> name1, import2 <span class="hljs-keyword">as</span> name2, …, nameN } <span class="hljs-keyword">from</span> …;<span class="hljs-keyword">export</span> { <span class="hljs-keyword">default</span> } <span class="hljs-keyword">from</span> …;</code></pre><h5 id="导入-2"><a href="#导入-2" class="headerlink" title="导入"></a>导入</h5><h6 id="静态导入"><a href="#静态导入" class="headerlink" title="静态导入"></a>静态导入</h6><p>在浏览器中，import语句只能在声明了<code>type='module'</code>的script标签中使用</p><pre><code class="hljs javascript"><span class="hljs-keyword">import</span> defaultExport <span class="hljs-keyword">from</span> <span class="hljs-string">"module-name"</span>;<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> name <span class="hljs-keyword">from</span> <span class="hljs-string">"module-name"</span>;<span class="hljs-keyword">import</span> { <span class="hljs-keyword">export</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"module-name"</span>;<span class="hljs-keyword">import</span> { <span class="hljs-keyword">export</span> <span class="hljs-keyword">as</span> alias } <span class="hljs-keyword">from</span> <span class="hljs-string">"module-name"</span>;<span class="hljs-keyword">import</span> { export1 , export2 } <span class="hljs-keyword">from</span> <span class="hljs-string">"module-name"</span>;<span class="hljs-keyword">import</span> { foo , bar } <span class="hljs-keyword">from</span> <span class="hljs-string">"module-name/path/to/specific/un-exported/file"</span>;<span class="hljs-keyword">import</span> { export1 , export2 <span class="hljs-keyword">as</span> alias2 , [...] } <span class="hljs-keyword">from</span> <span class="hljs-string">"module-name"</span>;<span class="hljs-keyword">import</span> defaultExport, { <span class="hljs-keyword">export</span> [ , [...] ] } <span class="hljs-keyword">from</span> <span class="hljs-string">"module-name"</span>;<span class="hljs-keyword">import</span> defaultExport, * <span class="hljs-keyword">as</span> name <span class="hljs-keyword">from</span> <span class="hljs-string">"module-name"</span>;<span class="hljs-keyword">import</span> <span class="hljs-string">"module-name"</span>;</code></pre><p><strong>静态导入的方式不支持延迟加载，import必须在模块的最开始</strong></p><pre><code class="hljs javascript"><span class="hljs-built_in">document</span>.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">// import 必须放置在当前模块最开始加载</span> <span class="hljs-comment">// import m1 from './m1.js'</span> <span class="hljs-comment">// console.log(m1);</span>}</code></pre><h5 id="动态导入"><a href="#动态导入" class="headerlink" title="动态导入"></a>动态导入</h5><p>此外，还有一个类似函数的动态 <code>import()</code>，它不需要依赖 <code>type="module"</code> 的 script 标签。</p><p>关键字 <code>import</code> 可以像调用函数一样来动态的导入模块。以这种方式调用，将返回一个 <code>promise</code>。</p><pre><code class="hljs javascript"><span class="hljs-keyword">import</span>(<span class="hljs-string">'./m.js'</span>) .then(<span class="hljs-function"><span class="hljs-params">m</span> =></span> { <span class="hljs-comment">//...</span>});<span class="hljs-comment">// 也支持 await</span><span class="hljs-keyword">let</span> m = <span class="hljs-keyword">await</span> <span class="hljs-keyword">import</span>(<span class="hljs-string">'./m.js'</span>);</code></pre><p><strong>通过 <code>import()</code> 方法导入返回的数据会被包装在一个对象中，即使是 <code>default</code> 也是如此</strong></p>]]></content>
<categories>
<category>前端</category>
</categories>
<tags>
<tag>webpack</tag>
<tag>模块化</tag>
<tag>ES6</tag>
</tags>
</entry>
</search>