diff --git a/160.bundle.js b/160.bundle.js new file mode 100644 index 0000000..21505f4 --- /dev/null +++ b/160.bundle.js @@ -0,0 +1,2 @@ +"use strict";(self.webpackChunkcboy_blog=self.webpackChunkcboy_blog||[]).push([[160],{160:function(s,t,e){e.r(t),e.d(t,{default:function(){return u}});var h=e(358);const c={class:"component-postcss-plugin"},o={};var u=(0,e(389).A)(o,[["render",function(s,t){return(0,h.uX)(),(0,h.CE)("div",c,t[0]||(t[0]=[(0,h.Fv)('

写 css 遇到了问题怎么办？

如何让 css 写的更轻松？

postcss-ui-theme，让你实现类 sass 语法，一个插件就能做到！

如何改变 css 主题 ？

postcss-ui-theme ， 可打包 css4 变量被保留，不仅可在引用时直接使用新的变量文件覆盖改变主题，还可以通过 js 进行更改！！！

css 在别的项目被编译，文件路径找不到？

postcss-ui-theme， 集成 postcss-assets 插件，通过配置 文件查找路径，解决引用文件找不到问题！！

postcss-ui-theme 插件，就是你的 css 管理方案的最佳选择! 点 star 收藏！！！ 茫茫前端路，你真的会用到它的！

',8)]))}]])}}]); +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMTYwLmJ1bmRsZS5qcyIsIm1hcHBpbmdzIjoiNktBQWVBLE1BQU0sNEJDQ2ZDLEVBQVMsQ0FBQyxFQUtoQixPQUZpQyxFLE9BQUEsR0FBZ0JBLEVBQVEsQ0FBQyxDQUFDLFMsZ0NESmpEQyxFQUFBQSxFQUFBQSxJQVFKLE1BUklDLEVBUUpDLEVBQUEsS0FBQUEsRUFBQSxLQVJOQyxFQUFBQSxFQUFBQSxJQUFBLDZuQiIsInNvdXJjZXMiOlsid2VicGFjazovL2Nib3ktYmxvZy8uLi8uLi9ibG9ncy9tYXJrZG93bi9wb3N0Y3NzLXBsdWdpbi5tZCIsIndlYnBhY2s6Ly9jYm95LWJsb2cvLi4vLi4vYmxvZ3MvbWFya2Rvd24vcG9zdGNzcy1wbHVnaW4ubWQ/ZDZjZCJdLCJzb3VyY2VzQ29udGVudCI6WyI8dGVtcGxhdGU+PGRpdiBjbGFzcz1cImNvbXBvbmVudC1wb3N0Y3NzLXBsdWdpblwiPjxoMj7lhpkgY3NzIOmBh+WIsOS6humXrumimOaAjuS5iOWKnu+8nzwvaDI+XG48aDM+5aaC5L2V6K6pIGNzcyDlhpnnmoTmm7Tovbvmnb7vvJ88L2gzPlxuPGg0PjxhIGhyZWY9XCJodHRwczovL2dpdGh1Yi5jb20vY2xldmVyYm95MzIvcG9zdGNzcy11aS10aGVtZVwiPnBvc3Rjc3MtdWktdGhlbWU8L2E+77yM6K6p5L2g5a6e546w57G7IHNhc3Mg6K+t5rOV77yM5LiA5Liq5o+S5Lu25bCx6IO95YGa5Yiw77yBPC9oND5cbjxoMz7lpoLkvZXmlLnlj5ggY3NzIOS4u+mimCDvvJ88L2gzPlxuPGg0PjxhIGhyZWY9XCJodHRwczovL2dpdGh1Yi5jb20vY2xldmVyYm95MzIvcG9zdGNzcy11aS10aGVtZVwiPnBvc3Rjc3MtdWktdGhlbWUgPC9hPu+8jCDlj6/miZPljIUgY3NzNCDlj5jph4/ooqvkv53nlZnvvIzkuI3ku4Xlj6/lnKjlvJXnlKjml7bnm7TmjqXkvb/nlKjmlrDnmoTlj5jph4/mlofku7bopobnm5bmlLnlj5jkuLvpopjvvIzov5jlj6/ku6XpgJrov4cganMg6L+b6KGM5pu05pS577yB77yB77yBPC9oND5cbjxoMz5jc3Mg5Zyo5Yir55qE6aG555uu6KKr57yW6K+R77yM5paH5Lu26Lev5b6E5om+5LiN5Yiw77yfPC9oMz5cbjxoND48YSBocmVmPVwiaHR0cHM6Ly9naXRodWIuY29tL2NsZXZlcmJveTMyL3Bvc3Rjc3MtdWktdGhlbWVcIj5wb3N0Y3NzLXVpLXRoZW1lPC9hPu+8jCDpm4bmiJAgcG9zdGNzcy1hc3NldHMg5o+S5Lu277yM6YCa6L+H6YWN572uIOaWh+S7tuafpeaJvui3r+W+hO+8jOino+WGs+W8leeUqOaWh+S7tuaJvuS4jeWIsOmXrumimO+8ge+8gTwvaDQ+XG48aDM+PGEgaHJlZj1cImh0dHBzOi8vZ2l0aHViLmNvbS9jbGV2ZXJib3kzMi9wb3N0Y3NzLXVpLXRoZW1lXCI+cG9zdGNzcy11aS10aGVtZTwvYT4g5o+S5Lu277yM5bCx5piv5L2g55qEIGNzcyDnrqHnkIbmlrnmoYjnmoTmnIDkvbPpgInmi6khIOeCuSBzdGFyIOaUtuiXj++8ge+8ge+8gSDojKvojKvliY3nq6/ot6/vvIzkvaDnnJ/nmoTkvJrnlKjliLDlroPnmoTvvIE8L2gzPlxuPC9kaXY+PC90ZW1wbGF0ZT4iLCJpbXBvcnQgeyByZW5kZXIgfSBmcm9tIFwiLi9wb3N0Y3NzLXBsdWdpbi5tZD92dWUmdHlwZT10ZW1wbGF0ZSZpZD0xNTcwNmIzNVwiXG5jb25zdCBzY3JpcHQgPSB7fVxuXG5pbXBvcnQgZXhwb3J0Q29tcG9uZW50IGZyb20gXCIuLi8uLi9ub2RlX21vZHVsZXMvLnBucG0vdnVlLWxvYWRlckAxNy40LjJfQHZ1ZStjb21waWxlci1zZmNAMy41LjNfdnVlQDMuNS4zX3R5cGVzY3JpcHRANS41LjRfX3dlYnBhY2tANS45NC4wX3dlYnBhY2stX2Z1cWt3Z2dwbGhleTNvaXZ0d2Uyc3RkbzZlL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2Rpc3QvZXhwb3J0SGVscGVyLmpzXCJcbmNvbnN0IF9fZXhwb3J0c19fID0gLyojX19QVVJFX18qL2V4cG9ydENvbXBvbmVudChzY3JpcHQsIFtbJ3JlbmRlcicscmVuZGVyXV0pXG5cbmV4cG9ydCBkZWZhdWx0IF9fZXhwb3J0c19fIl0sIm5hbWVzIjpbImNsYXNzIiwic2NyaXB0IiwiX2NyZWF0ZUVsZW1lbnRCbG9jayIsIl9ob2lzdGVkXzEiLCJfY2FjaGUiLCJfY3JlYXRlU3RhdGljVk5vZGUiXSwic291cmNlUm9vdCI6IiJ9 \ No newline at end of file diff --git a/165.bundle.js b/165.bundle.js new file mode 100644 index 0000000..996e522 --- /dev/null +++ b/165.bundle.js @@ -0,0 +1,2 @@ +"use strict";(self.webpackChunkreact_wyz=self.webpackChunkreact_wyz||[]).push([[165],{165:(n,s,e)=>{e.r(s),e.d(s,{default:()=>c});const c="### 什么是 SSL 证书\n\nSSL 证书是数字证书，是由证书认证机构（CA）对证书申请者真实身份验证之后，用CA的根证书对申请人的一些基本信息以及申请人的公钥进行签名（相当于加盖发证书机构的公章）后形成的一个数字文件。\n通俗一点， 就是包含了所使用的服务器的信息和公钥，这些信息是公开的。 而私钥是由证书申请者自己保存的，是保密的。\n\n\n### 怎么配置呢\n\n要在服务器要发送SSL证书，那么在服务器上配置。首先你得有一个`证书`！\n证书如何获取，我也是百度了很多，也有很多免费的网站，ssl for free, freessl.org, 但是发现证书没有.crt 文件，或者验证域名不方便。\n\n######这里先讲一下 SSL 证书包含的几个文件：\n`.key` => 私钥\n`.csr` => 公钥，让你的证书去认证的时，可以把它发送给权威机构认证。\n`.crt ` => 证书了\n\n这里可以自己去体验一下用 OpenSSL 给自己生成一个证书。需自行安装 openssl 软件\n[openssl 给自己颁发证书的步骤](https://www.cnblogs.com/yjmyzz/p/openssl-tutorial.html)\n\nopenssl 的证书既然是自己给自己颁发的，那么就不具有权威性，在连接时会向客户端提示不是安全的链接。也没有小绿锁。\n\n最后我发现腾讯云有免费的证书可以用。\n![这里写图片描述](https://i-blog.csdnimg.cn/blog_migrate/6c5cab65c69586f9228ecf2896a12ad0.jpeg) \n\n申请好证书之后， 如图\n![这里写图片描述](https://i-blog.csdnimg.cn/blog_migrate/6aa539ccc93a564348a6b975a998cf80.jpeg)\n点击详情可以看到 [指引文档](https://cloud.tencent.com/document/product/400/4143), 里面的服务器配置方法就很全面了, 不管你是不是用它的证书，都可以按照这样去配。\n\n### 了解一下 SSL 工作\n\n我们知道，在客户端和服务器之间的请求，就是来回发送数据，普通的 HTTP 协议是没有对数据进行加密的，那么可能被第三方截取到你的请求，改变你们的通信数据或者冒充身份发送信息给你。 哇，突然感觉这些很常见 = = \n\nHTTPS 就是一种安全的通信了，它会加密你的数据， 使第三方无法获取，并在建立通信的握手阶段，互相确认身份， 使别人无法冒充身份。 SSL 证书就是使用在 握手阶段，通过证书的信息，确认服务器身份。\n具体如下：\n\n![这里写图片描述](https://i-blog.csdnimg.cn/blog_migrate/29104c17fe7cebb091ec79ad1714bc32.png)\n\n详细讲解每一步就是：\n第一步：客户端 say hello, 向服务端发送自己生成的 random 数，和自己支持的加密方法。\n\n第二步：服务端接收消息后，又向客户端发送自己生成的 random 数、SSL 证书，确定使用的加密方法。\n\n第三步：客户端读取证书信息，确认证书有效，然后自己再生成一个 random 数，并使用证书的公钥进行加密，发送给服务端。\n\n第四步：服务端使用自己本地的私钥，解密获取客户端的随机数。\n\n第五步：客户端和服务端使用这三个随机数生成 `对话密钥`, 用来加密接下来的对话过程。\n\n可以看到下面英文有提到 session。 因为如果每次建立连接都去进行这五步，那么会很浪费时间。 所以这里有 sessionID 和 session ticket 两种。\n\nsession ID，记录有本次的握手存在，再次发送信息时，客户端发送该ID，服务器确认该编号存在，双方就不再进行握手阶段剩余的步骤，而直接用已有的对话密钥进行加密通信。\n\nsession ID是目前所有浏览器都支持的方法，但是它的缺点在于session ID往往只保留在一台服务器上。所以，如果客户端的请求发到另一台服务器，就无法恢复对话。session ticket就是为了解决这个问题而诞生的，目前只有Firefox和Chrome浏览器支持。session ticket是加密的，只有服务器才能解密，其中包括本次对话的主要信息，比如对话密钥和加密方法。当服务器收到session ticket以后，解密后就不必重新生成对话密钥了。\n"}}]); +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMTY1LmJ1bmRsZS5qcyIsIm1hcHBpbmdzIjoia0lBQUEsZzdEIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vcmVhY3Rfd3l6Ly4uLy4uL2Jsb2dzL21hcmtkb3duL3NzbC5tZCJdLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZGVmYXVsdCBcIiMjIyDku4DkuYjmmK8gU1NMIOivgeS5plxcblxcblNTTCDor4HkuabmmK/mlbDlrZfor4HkuabvvIzmmK/nlLHor4HkuaborqTor4HmnLrmnoTvvIhDQe+8ieWvueivgeS5pueUs+ivt+iAheecn+Wunui6q+S7vemqjOivgeS5i+WQju+8jOeUqENB55qE5qC56K+B5Lmm5a+555Sz6K+35Lq655qE5LiA5Lqb5Z+65pys5L+h5oGv5Lul5Y+K55Sz6K+35Lq655qE5YWs6ZKl6L+b6KGM562+5ZCN77yI55u45b2T5LqO5Yqg55uW5Y+R6K+B5Lmm5py65p6E55qE5YWs56ug77yJ5ZCO5b2i5oiQ55qE5LiA5Liq5pWw5a2X5paH5Lu244CCXFxu6YCa5L+X5LiA54K577yMIOWwseaYr+WMheWQq+S6huaJgOS9v+eUqOeahOacjeWKoeWZqOeahOS/oeaBr+WSjOWFrOmSpe+8jOi/meS6m+S/oeaBr+aYr+WFrOW8gOeahOOAgiDogIznp4HpkqXmmK/nlLHor4HkuabnlLPor7fogIXoh6rlt7Hkv53lrZjnmoTvvIzmmK/kv53lr4bnmoTjgIJcXG5cXG5cXG4jIyMg5oCO5LmI6YWN572u5ZGiXFxuXFxu6KaB5Zyo5pyN5Yqh5Zmo6KaB5Y+R6YCBU1NM6K+B5Lmm77yM6YKj5LmI5Zyo5pyN5Yqh5Zmo5LiK6YWN572u44CC6aaW5YWI5L2g5b6X5pyJ5LiA5LiqYOivgeS5pmDvvIFcXG7or4HkuablpoLkvZXojrflj5bvvIzmiJHkuZ/mmK/nmb7luqbkuoblvojlpJrvvIzkuZ/mnInlvojlpJrlhY3otLnnmoTnvZHnq5nvvIxzc2wgZm9yIGZyZWUsIGZyZWVzc2wub3JnLCDkvYbmmK/lj5HnjrDor4HkuabmsqHmnIkuY3J0IOaWh+S7tu+8jOaIluiAhemqjOivgeWfn+WQjeS4jeaWueS+v+OAglxcblxcbiMjIyMjI+i/memHjOWFiOiusuS4gOS4iyBTU0wg6K+B5Lmm5YyF5ZCr55qE5Yeg5Liq5paH5Lu277yaXFxuYC5rZXlgICA9PiAgICAg56eB6ZKlXFxuYC5jc3JgICAgPT4gICAg5YWs6ZKl77yM6K6p5L2g55qE6K+B5Lmm5Y676K6k6K+B55qE5pe277yM5Y+v5Lul5oqK5a6D5Y+R6YCB57uZ5p2D5aiB5py65p6E6K6k6K+B44CCXFxuYC5jcnQgYCAgPT4gICAg6K+B5Lmm5LqGXFxuXFxu6L+Z6YeM5Y+v5Lul6Ieq5bex5Y675L2T6aqM5LiA5LiL55SoIE9wZW5TU0wg57uZ6Ieq5bex55Sf5oiQ5LiA5Liq6K+B5Lmm44CC6ZyA6Ieq6KGM5a6J6KOFIG9wZW5zc2wg6L2v5Lu2XFxuW29wZW5zc2wg57uZ6Ieq5bex6aKB5Y+R6K+B5Lmm55qE5q2l6aqkXShodHRwczovL3d3dy5jbmJsb2dzLmNvbS95am15enovcC9vcGVuc3NsLXR1dG9yaWFsLmh0bWwpXFxuXFxub3BlbnNzbCDnmoTor4Hkuabml6LnhLbmmK/oh6rlt7Hnu5noh6rlt7HpooHlj5HnmoTvvIzpgqPkuYjlsLHkuI3lhbfmnInmnYPlqIHmgKfvvIzlnKjov57mjqXml7bkvJrlkJHlrqLmiLfnq6/mj5DnpLrkuI3mmK/lronlhajnmoTpk77mjqXjgILkuZ/msqHmnInlsI/nu7/plIHjgIJcXG5cXG7mnIDlkI7miJHlj5HnjrDohb7orq/kupHmnInlhY3otLnnmoTor4Hkuablj6/ku6XnlKjjgIJcXG4hW+i/memHjOWGmeWbvueJh+aPj+i/sF0oaHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9ibG9nX21pZ3JhdGUvNmM1Y2FiNjVjNjk1ODZmOTIyOGVjZjI4OTZhMTJhZDAuanBlZykgXFxuXFxu55Sz6K+35aW96K+B5Lmm5LmL5ZCO77yMIOWmguWbvlxcbiFb6L+Z6YeM5YaZ5Zu+54mH5o+P6L+wXShodHRwczovL2ktYmxvZy5jc2RuaW1nLmNuL2Jsb2dfbWlncmF0ZS82YWE1MzljY2M5M2E1NjQzNDhhNmI5NzVhOTk4Y2Y4MC5qcGVnKVxcbueCueWHu+ivpuaDheWPr+S7peeci+WIsCBb5oyH5byV5paH5qGjXShodHRwczovL2Nsb3VkLnRlbmNlbnQuY29tL2RvY3VtZW50L3Byb2R1Y3QvNDAwLzQxNDMpLCDph4zpnaLnmoTmnI3liqHlmajphY3nva7mlrnms5XlsLHlvojlhajpnaLkuoYsIOS4jeeuoeS9oOaYr+S4jeaYr+eUqOWug+eahOivgeS5pu+8jOmDveWPr+S7peaMieeFp+i/meagt+WOu+mFjeOAglxcblxcbiMjIyDkuobop6PkuIDkuIsgU1NMIOW3peS9nFxcblxcbuaIkeS7rOefpemBk++8jOWcqOWuouaIt+err+WSjOacjeWKoeWZqOS5i+mXtOeahOivt+axgu+8jOWwseaYr+adpeWbnuWPkemAgeaVsOaNru+8jOaZrumAmueahCBIVFRQIOWNj+iuruaYr+ayoeacieWvueaVsOaNrui/m+ihjOWKoOWvhueahO+8jOmCo+S5iOWPr+iDveiiq+esrOS4ieaWueaIquWPluWIsOS9oOeahOivt+axgu+8jOaUueWPmOS9oOS7rOeahOmAmuS/oeaVsOaNruaIluiAheWGkuWFhei6q+S7veWPkemAgeS/oeaBr+e7meS9oOOAgiDlk4fvvIznqoHnhLbmhJ/op4nov5nkupvlvojluLjop4EgPSA9IFxcblxcbkhUVFBTICDlsLHmmK/kuIDnp43lronlhajnmoTpgJrkv6HkuobvvIzlroPkvJrliqDlr4bkvaDnmoTmlbDmja7vvIwg5L2/56ys5LiJ5pa55peg5rOV6I635Y+W77yM5bm25Zyo5bu656uL6YCa5L+h55qE5o+h5omL6Zi25q6177yM5LqS55u456Gu6K6k6Lqr5Lu977yMIOS9v+WIq+S6uuaXoOazleWGkuWFhei6q+S7veOAgiBTU0wg6K+B5Lmm5bCx5piv5L2/55So5ZyoIOaPoeaJi+mYtuaute+8jOmAmui/h+ivgeS5pueahOS/oeaBr++8jOehruiupOacjeWKoeWZqOi6q+S7veOAglxcbuWFt+S9k+WmguS4i++8mlxcblxcbiFb6L+Z6YeM5YaZ5Zu+54mH5o+P6L+wXShodHRwczovL2ktYmxvZy5jc2RuaW1nLmNuL2Jsb2dfbWlncmF0ZS8yOTEwNGMxN2ZlN2NlYmIwOTFlYzc5YWQxNzE0YmMzMi5wbmcpXFxuXFxu6K+m57uG6K6y6Kej5q+P5LiA5q2l5bCx5piv77yaXFxu56ys5LiA5q2l77ya5a6i5oi356uvIHNheSBoZWxsbywg5ZCR5pyN5Yqh56uv5Y+R6YCB6Ieq5bex55Sf5oiQ55qEIHJhbmRvbSDmlbDvvIzlkozoh6rlt7HmlK/mjIHnmoTliqDlr4bmlrnms5XjgIJcXG5cXG7nrKzkuozmraXvvJrmnI3liqHnq6/mjqXmlLbmtojmga/lkI7vvIzlj4jlkJHlrqLmiLfnq6/lj5HpgIHoh6rlt7HnlJ/miJDnmoQgcmFuZG9tIOaVsOOAgVNTTCDor4HkuabvvIznoa7lrprkvb/nlKjnmoTliqDlr4bmlrnms5XjgIJcXG5cXG7nrKzkuInmraXvvJrlrqLmiLfnq6/or7vlj5bor4Hkuabkv6Hmga/vvIznoa7orqTor4HkuabmnInmlYjvvIznhLblkI7oh6rlt7Hlho3nlJ/miJDkuIDkuKogcmFuZG9tIOaVsO+8jOW5tuS9v+eUqOivgeS5pueahOWFrOmSpei/m+ihjOWKoOWvhu+8jOWPkemAgee7meacjeWKoeerr+OAglxcblxcbuesrOWbm+atpe+8muacjeWKoeerr+S9v+eUqOiHquW3seacrOWcsOeahOengemSpe+8jOino+WvhuiOt+WPluWuouaIt+err+eahOmaj+acuuaVsOOAglxcblxcbuesrOS6lOatpe+8muWuouaIt+err+WSjOacjeWKoeerr+S9v+eUqOi/meS4ieS4qumaj+acuuaVsOeUn+aIkCBg5a+56K+d5a+G6ZKlYCwg55So5p2l5Yqg5a+G5o6l5LiL5p2l55qE5a+56K+d6L+H56iL44CCXFxuXFxu5Y+v5Lul55yL5Yiw5LiL6Z2i6Iux5paH5pyJ5o+Q5YiwIHNlc3Npb27jgIIg5Zug5Li65aaC5p6c5q+P5qyh5bu656uL6L+e5o6l6YO95Y676L+b6KGM6L+Z5LqU5q2l77yM6YKj5LmI5Lya5b6I5rWq6LS55pe26Ze044CCICDmiYDku6Xov5nph4zmnIkgc2Vzc2lvbklEIOWSjCBzZXNzaW9uIHRpY2tldCDkuKTnp43jgIJcXG5cXG5zZXNzaW9uIElE77yM6K6w5b2V5pyJ5pys5qyh55qE5o+h5omL5a2Y5Zyo77yM5YaN5qyh5Y+R6YCB5L+h5oGv5pe277yM5a6i5oi356uv5Y+R6YCB6K+lSUTvvIzmnI3liqHlmajnoa7orqTor6XnvJblj7flrZjlnKjvvIzlj4zmlrnlsLHkuI3lho3ov5vooYzmj6HmiYvpmLbmrrXliankvZnnmoTmraXpqqTvvIzogIznm7TmjqXnlKjlt7LmnInnmoTlr7nor53lr4bpkqXov5vooYzliqDlr4bpgJrkv6HjgIJcXG5cXG5zZXNzaW9uIElE5piv55uu5YmN5omA5pyJ5rWP6KeI5Zmo6YO95pSv5oyB55qE5pa55rOV77yM5L2G5piv5a6D55qE57y654K55Zyo5LqOc2Vzc2lvbiBJROW+gOW+gOWPquS/neeVmeWcqOS4gOWPsOacjeWKoeWZqOS4iuOAguaJgOS7pe+8jOWmguaenOWuouaIt+err+eahOivt+axguWPkeWIsOWPpuS4gOWPsOacjeWKoeWZqO+8jOWwseaXoOazleaBouWkjeWvueivneOAgnNlc3Npb24gdGlja2V05bCx5piv5Li65LqG6Kej5Yaz6L+Z5Liq6Zeu6aKY6ICM6K+e55Sf55qE77yM55uu5YmN5Y+q5pyJRmlyZWZveOWSjENocm9tZea1j+iniOWZqOaUr+aMgeOAgnNlc3Npb24gdGlja2V05piv5Yqg5a+G55qE77yM5Y+q5pyJ5pyN5Yqh5Zmo5omN6IO96Kej5a+G77yM5YW25Lit5YyF5ous5pys5qyh5a+56K+d55qE5Li76KaB5L+h5oGv77yM5q+U5aaC5a+56K+d5a+G6ZKl5ZKM5Yqg5a+G5pa55rOV44CC5b2T5pyN5Yqh5Zmo5pS25Yiwc2Vzc2lvbiB0aWNrZXTku6XlkI7vvIzop6Plr4blkI7lsLHkuI3lv4Xph43mlrDnlJ/miJDlr7nor53lr4bpkqXkuobjgIJcXG5cIjsiXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0= \ No newline at end of file diff --git a/167.bundle.js b/167.bundle.js new file mode 100644 index 0000000..4a559b0 --- /dev/null +++ b/167.bundle.js @@ -0,0 +1,2 @@ +"use strict";(self.webpackChunkreact_wyz=self.webpackChunkreact_wyz||[]).push([[167],{167:(n,e,t)=>{t.r(e),t.d(e,{default:()=>o});const o="vue 是一个 js 框架，它实现了自己的模板，通过 .vue 文件可以经过编译成一个数据改变驱动视图改变的 js代码。\n那么这其中又是经历了什么样的步骤呢？\n\n----- \n一个 vue 对象是通过 new Vue({options}) 来得到的，也就是构造函数了。我们来看这个函数\n```\nfunction Vue (options) {\n if (process.env.NODE_ENV !== 'production' &&\n !(this instanceof Vue)\n ) {\n warn('Vue is a constructor and should be called with the `new` keyword')\n }\n this._init(options)\n}\n\n// 这里是一系列对这个函数进行的继承\ninitMixin(Vue)\nstateMixin(Vue)\neventsMixin(Vue)\nlifecycleMixin(Vue)\nrenderMixin(Vue)\n\nexport default Vue\n```\n可以看到这个 Vue 构造函数，它经历了 5 个系列的mixin，并在新创建时会运行 _init(options) 方法。\n那么我们来看看, 这五个 mixin 分别做了啥。\n\n ##### 第一个 initMixin\n 它只做了一件事， 定义了 _init 方法，那么你就知道创造一个Vue 实例，它执行的 _init 方法就是上面这个方法了。\n```\nVue.prototype._init = function (options?: Object) {\n....\n}\n```\n\n\n\n##### 第二个 stateMixin \n```\n Object.defineProperty(Vue.prototype, '$data', dataDef) // 能够返回 data\n Object.defineProperty(Vue.prototype, '$props', propsDef) // 能够返回 props\n Vue.prototype.$set = set // 就是我们用的 this.$set(this.people, 'name', ‘clever')方法, 下同。\n Vue.prototype.$delete = del\n Vue.prototype.$watch = function (\n ....\n }\n ```\n\n##### 第三个 eventsMixin\n```\nVue.prototype.$on = function (eventname, fn) {\n....\n}\nVue.prototype._$once = function (eventname, fn) {\n // 监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。\n}\nVue.prototype._off = function (event, fn) {\n// 移除自定义事件监听器。\n}\nVue.prototype.$emit = function (event) {\n// 触发一个事件\n}\n```\n##### 第四个 lifecycleMixin![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0227c8c15285fbd179573e7cd8cb4718.png)\n##### 第五个 renderMixin![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/715399a9ac35cef7c3aca2d3242ca5a3.png)\n---\n\n好， 这个 Vue 继承了这些方法，它已经是一个完整的 Vue 了，而新创建的时候要执行 _init 方法了, 现在我们来看看这个方法里面做了写啥\n- vm._uid = uid++ 创建 uid\n- 合并 options\n- initLifecycle\n initEvents(vm)\n initRender(vm)\n callHook(vm, 'beforeCreate')\n initInjections(vm) // resolve injections before data/props\n initState(vm)\n initProvide(vm) // resolve provide after data/props\n callHook(vm, 'created')\n```\n关于 initLifecycle\n vm.$parent = parent\n vm.$root = parent ? parent.$root : vm\n vm.$children = []\n vm.$refs = {}\n vm._watcher = null\n vm._inactive = null\n vm._directInactive = false\n vm._isMounted = false\n vm._isDestroyed = false\n vm._isBeingDestroyed = false\n ```\n\n- initEvents\n```\n vm._events = Object.create(null)\n vm._hasHookEvent = false\n // init parent attached events\n const listeners = vm.$options._parentListeners\n if (listeners) {\n updateComponentListeners(vm, listeners)\n }\n 就是判断父级是否有事件监听，然后给父级进行监听事件\n ```\n- initRender\n```\n vm._vnode = null // the root of the child tree\n vm._staticTrees = null // v-once cached trees\n const options = vm.$options\n const parentVnode = vm.$vnode = options._parentVnode // the placeholder node in parent tree\n const renderContext = parentVnode && parentVnode.context\n vm.$slots = resolveSlots(options._renderChildren, renderContext)\n vm.$scopedSlots = emptyObject\n // 实例绑定 createElement 方法，以便可以正常在内部渲染\n // 参数顺序 tag, data, children, normalizationType, alwaysNormalize\n // 内部使用从模板编译而来的渲染函数\n \n vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)\n // 公共版本必须是 normalization 的渲染函数\n vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)\n\n // $attrs & $listeners 应该被监听热更新\n const parentData = parentVnode && parentVnode.data\n\n if (process.env.NODE_ENV !== 'production') {\n defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => {\n !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)\n }, true)\n defineReactive(vm, '$listeners', options._parentListeners || emptyObject, () => {\n !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm)\n }, true)\n } else {\n defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true)\n defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true)\n }\n ```\n- callHook(vm, 'beforeCreate') 执行 beforeCreate 函数\n\n- initInjections(vm) 收集注入的依赖\n```\n const result = resolveInject(vm.$options.inject, vm)\n if (result) {\n toggleObserving(false)\n Object.keys(result).forEach(key => {\n if (process.env.NODE_ENV !== 'production') {\n defineReactive(vm, key, result[key], () => {\n warn(\n \t`避免直接改变注入的值，因为将会重新渲染所提供这个值的组件, \n \t改变的值是: \"${key}\",\n vm\n )\n })\n } else {\n defineReactive(vm, key, result[key])\n }\n })\n toggleObserving(true)\n```\n- initState 监听值收集依赖\n```\n vm._watchers = []\n const opts = vm.$options\n if (opts.props) initProps(vm, opts.props) // 赋值 props 数据并收集依赖\n if (opts.methods) initMethods(vm, opts.methods) // 赋值 vue 的各个 method\n if (opts.data) {\n initData(vm) // 收集依赖\n } else {\n observe(vm._data = {}, true /* asRootData */)\n }\n if (opts.computed) initComputed(vm, opts.computed) // 收集依赖\n if (opts.watch && opts.watch !== nativeWatch) {\n initWatch(vm, opts.watch) // 初始化你写的监听对象\n }\n \n```\n- initProvide\n```\n const provide = vm.$options.provide\n if (provide) {\n vm._provided = typeof provide === 'function'\n ? provide.call(vm)\n : provide\n }\n```\n- callHook(vm, 'created') 执行 created 函数\n\n>这就是 _init 中各个函数所做的了。 我们可以看到总结过来就是\n1.初始化了生命状态\n2.进行事件上的监听\n3.渲染视图的初始化；收集所用到的父组件的数据或事件\n4.调用你写的 beforeCreate 方法\n5.initState, 处理了 vue 中的各种数据(props/data/methods.....), 也在这一步针对这些数据进行了依赖收集，数据更新绑定\n6.初始化了 provide 的值， 也可以看出它没有被收集依赖， 是不会影响视图改变的\n7.调用了你写的 created 方法了。\n\n以上，就是你 let app = new Vue() 这一步所发生的所有事情了。\n\n\n那通过平时的使用我们知道，我们是通过调用 $mounted 能把它挂载上页面。所以接下来我们就可以来看看 vue 自己的 $mount 都做了些什么?\n\n答: 就是把 template 或直接写的 render 函数，进行指令、事件等vue 中的语法解析编译成一个 AST 树。通过这个树，通过之前 initRender 中的 $createElement 方法可以生成虚拟DOM, 然后添加到页面中出，不就渲染出来了么。 如果大家使用过 Vue 的 $createElement 方法，相信就知道这个 ast 是怎么一个结构了，拿示例的来说\n```\ncreateElement(\n 'div',\n [\n '先写一些文字',\n createElement('h1', '一则头条'),\n createElement(MyComponent, {\n props: {\n someProp: 'foobar'\n }\n })\n ]\n)\n```\n\n---\n说完了整个过程，现在还比较疑惑的就是它的收集依赖，然后数据改变引起的视图改变到底怎么做呢？\n\n也就是说我们要实现一个模式，vm 可能 data 对象中的一个值，比如 name 改变了，然后就调用重新渲染的函数，这里为了性能，是生成了一个虚拟 Dom, 然后比较哪里改变了进行相应的替换。 \n把这个模式抽象出来，就是我们需要一个 \n\n先说具体实现： 我们视图更新依赖到的值收集起来，这里把每一个依赖到的值称作 dep。每个依赖订阅与它有关的 vue 的 watcher 中心， 这里把 dep 所订阅的 watcher 叫做 sub。 那么 dep 被改变的时候，获取它订阅了那些 watcher， 通知他们进行 update 视图啦。\n\n可以看我画的简图\n![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/417c23088cb0224c6a4464651452c604.png)\n![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/59c0e76f684052df524761ee8f4f6942.png)\n\n这就是依赖对象 和 一个 watcher 对象所涉及到的处理了。\nVue 中又是怎么把一个个的属性，进行操作变成依赖的呢？\n对应它的源码就是 defineReactive 方法。源码如图：\n```\nexport function defineReactive (obj, key, val, customSetter, shallow) {\n const dep = new Dep()\n \n // 迎合预定义的getter / setter\n const getter = property && property.get\n const setter = property && property.set\n if ((!getter || setter) && arguments.length === 2) {\n val = obj[key]\n }\n \n let childOb = !shallow && observe(val)\n Object.defineProperty(obj, key, {\n enumerable: true,\n configurable: true,\n get: function reactiveGetter () {\n const value = getter ? getter.call(obj) : val\n if (Dep.target) {\n dep.depend()\n if (childOb) {\n childOb.dep.depend()\n if (Array.isArray(value)) {\n dependArray(value)\n }\n }\n }\n return value\n },\n set: function reactiveSetter (newVal) {\n const value = getter ? getter.call(obj) : val\n if (newVal === value || (newVal !== newVal && value !== value)) {\n return\n }\n if (setter) {\n setter.call(obj, newVal)\n } else {\n val = newVal\n }\n childOb = !shallow && observe(newVal)\n dep.notify()\n }\n })\n}\n```\n这里就是用的 Object.defineProperty 方法，它可以重写对象的属性的 get 和 set 方法。 当这个属性在 Vue 中被获取的时候，就开始收集依赖，把它收集在这个 vm 的 watcher 中心，并且让它订阅这个 watcher 。当这个属性被重新设置时， 就通知它所订阅的对象去更新。\n\n大致要知道的就是这些了。关于具体是怎么实现把 template 编译成 ast 树， 具体是怎么把事件绑定上去的，你可以尽情的去猜想和推测，或者去看看具体的实现方式。但是 VUE 框架总体来说所做的就是这些事情了, 如果有觉得本文写的不清楚的地方可以提哈 = =\n"}}]); +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMTY3LmJ1bmRsZS5qcyIsIm1hcHBpbmdzIjoia0lBQUEsdStQIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vcmVhY3Rfd3l6Ly4uLy4uL2Jsb2dzL21hcmtkb3duL3Z1ZS5tZCJdLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZGVmYXVsdCBcInZ1ZSDmmK/kuIDkuKoganMg5qGG5p6277yM5a6D5a6e546w5LqG6Ieq5bex55qE5qih5p2/77yM6YCa6L+HIC52dWUg5paH5Lu25Y+v5Lul57uP6L+H57yW6K+R5oiQ5LiA5Liq5pWw5o2u5pS55Y+Y6amx5Yqo6KeG5Zu+5pS55Y+Y55qEIGpz5Luj56CB44CCXFxu6YKj5LmI6L+Z5YW25Lit5Y+I5piv57uP5Y6G5LqG5LuA5LmI5qC355qE5q2l6aqk5ZGi77yfXFxuXFxuLS0tLS0gXFxu5LiA5LiqIHZ1ZSDlr7nosaHmmK/pgJrov4cgbmV3IFZ1ZSh7b3B0aW9uc30pIOadpeW+l+WIsOeahO+8jOS5n+WwseaYr+aehOmAoOWHveaVsOS6huOAguaIkeS7rOadpeeci+i/meS4quWHveaVsFxcbmBgYFxcbmZ1bmN0aW9uIFZ1ZSAob3B0aW9ucykge1xcbiAgaWYgKHByb2Nlc3MuZW52Lk5PREVfRU5WICE9PSAncHJvZHVjdGlvbicgJiZcXG4gICAgISh0aGlzIGluc3RhbmNlb2YgVnVlKVxcbiAgKSB7XFxuICAgIHdhcm4oJ1Z1ZSBpcyBhIGNvbnN0cnVjdG9yIGFuZCBzaG91bGQgYmUgY2FsbGVkIHdpdGggdGhlIGBuZXdgIGtleXdvcmQnKVxcbiAgfVxcbiAgdGhpcy5faW5pdChvcHRpb25zKVxcbn1cXG5cXG4vLyDov5nph4zmmK/kuIDns7vliJflr7nov5nkuKrlh73mlbDov5vooYznmoTnu6fmib9cXG5pbml0TWl4aW4oVnVlKVxcbnN0YXRlTWl4aW4oVnVlKVxcbmV2ZW50c01peGluKFZ1ZSlcXG5saWZlY3ljbGVNaXhpbihWdWUpXFxucmVuZGVyTWl4aW4oVnVlKVxcblxcbmV4cG9ydCBkZWZhdWx0IFZ1ZVxcbmBgYFxcbuWPr+S7peeci+WIsOi/meS4qiBWdWUg5p6E6YCg5Ye95pWw77yM5a6D57uP5Y6G5LqGIDUg5Liq57O75YiX55qEbWl4aW7vvIzlubblnKjmlrDliJvlu7rml7bkvJrov5DooYwgX2luaXQob3B0aW9ucykg5pa55rOV44CCXFxu6YKj5LmI5oiR5Lus5p2l55yL55yLLCDov5nkupTkuKogbWl4aW4g5YiG5Yir5YGa5LqG5ZWl44CCXFxuXFxuICMjIyMjIOesrOS4gOS4qiAgaW5pdE1peGluXFxuIOWug+WPquWBmuS6huS4gOS7tuS6i++8jCDlrprkuYnkuoYgX2luaXQg5pa55rOV77yM6YKj5LmI5L2g5bCx55+l6YGT5Yib6YCg5LiA5LiqVnVlIOWunuS+i++8jOWug+aJp+ihjOeahCBfaW5pdCDmlrnms5XlsLHmmK/kuIrpnaLov5nkuKrmlrnms5XkuobjgIJcXG5gYGBcXG5WdWUucHJvdG90eXBlLl9pbml0ID0gZnVuY3Rpb24gKG9wdGlvbnM/OiBPYmplY3QpIHtcXG4uLi4uXFxufVxcbmBgYFxcblxcblxcblxcbiMjIyMjIOesrOS6jOS4qiBzdGF0ZU1peGluIFxcbmBgYFxcbiAgT2JqZWN0LmRlZmluZVByb3BlcnR5KFZ1ZS5wcm90b3R5cGUsICckZGF0YScsIGRhdGFEZWYpICAvLyDog73lpJ/ov5Tlm54gZGF0YVxcbiAgT2JqZWN0LmRlZmluZVByb3BlcnR5KFZ1ZS5wcm90b3R5cGUsICckcHJvcHMnLCBwcm9wc0RlZikgLy8g6IO95aSf6L+U5ZueIHByb3BzXFxuICBWdWUucHJvdG90eXBlLiRzZXQgPSBzZXQgLy8g5bCx5piv5oiR5Lus55So55qEIHRoaXMuJHNldCh0aGlzLnBlb3BsZSwgJ25hbWUnLCDigJhjbGV2ZXInKeaWueazlSwg5LiL5ZCM44CCXFxuICBWdWUucHJvdG90eXBlLiRkZWxldGUgPSBkZWxcXG4gIFZ1ZS5wcm90b3R5cGUuJHdhdGNoID0gZnVuY3Rpb24gKFxcbiAgIC4uLi5cXG4gIH1cXG4gIGBgYFxcblxcbiMjIyMjIOesrOS4ieS4qiBldmVudHNNaXhpblxcbmBgYFxcblZ1ZS5wcm90b3R5cGUuJG9uID0gZnVuY3Rpb24gKGV2ZW50bmFtZSwgZm4pIHtcXG4uLi4uXFxufVxcblZ1ZS5wcm90b3R5cGUuXyRvbmNlID0gZnVuY3Rpb24gKGV2ZW50bmFtZSwgZm4pIHtcXG4gLy8g55uR5ZCs5LiA5Liq6Ieq5a6a5LmJ5LqL5Lu277yM5L2G5piv5Y+q6Kem5Y+R5LiA5qyh77yM5Zyo56ys5LiA5qyh6Kem5Y+R5LmL5ZCO56e76Zmk55uR5ZCs5Zmo44CCXFxufVxcblZ1ZS5wcm90b3R5cGUuX29mZiA9IGZ1bmN0aW9uIChldmVudCwgZm4pIHtcXG4vLyDnp7vpmaToh6rlrprkuYnkuovku7bnm5HlkKzlmajjgIJcXG59XFxuVnVlLnByb3RvdHlwZS4kZW1pdCA9IGZ1bmN0aW9uIChldmVudCkge1xcbi8vIOinpuWPkeS4gOS4quS6i+S7tlxcbn1cXG5gYGBcXG4jIyMjIyDnrKzlm5vkuKogbGlmZWN5Y2xlTWl4aW4hW+WcqOi/memHjOaPkuWFpeWbvueJh+aPj+i/sF0oaHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9ibG9nX21pZ3JhdGUvMDIyN2M4YzE1Mjg1ZmJkMTc5NTczZTdjZDhjYjQ3MTgucG5nKVxcbiMjIyMjIOesrOS6lOS4qiByZW5kZXJNaXhpbiFb5Zyo6L+Z6YeM5o+S5YWl5Zu+54mH5o+P6L+wXShodHRwczovL2ktYmxvZy5jc2RuaW1nLmNuL2Jsb2dfbWlncmF0ZS83MTUzOTlhOWFjMzVjZWY3YzNhY2EyZDMyNDJjYTVhMy5wbmcpXFxuLS0tXFxuXFxu5aW977yMIOi/meS4qiBWdWUg57un5om/5LqG6L+Z5Lqb5pa55rOV77yM5a6D5bey57uP5piv5LiA5Liq5a6M5pW055qEIFZ1ZSDkuobvvIzogIzmlrDliJvlu7rnmoTml7blgJnopoHmiafooYwgX2luaXQg5pa55rOV5LqGLCDnjrDlnKjmiJHku6zmnaXnnIvnnIvov5nkuKrmlrnms5Xph4zpnaLlgZrkuoblhpnllaVcXG4tICB2bS5fdWlkID0gdWlkKysg5Yib5bu6IHVpZFxcbi0gIOWQiOW5tiBvcHRpb25zXFxuLSAgIGluaXRMaWZlY3ljbGVcXG4gICAgaW5pdEV2ZW50cyh2bSlcXG4gICAgaW5pdFJlbmRlcih2bSlcXG4gICAgY2FsbEhvb2sodm0sICdiZWZvcmVDcmVhdGUnKVxcbiAgICBpbml0SW5qZWN0aW9ucyh2bSkgLy8gcmVzb2x2ZSBpbmplY3Rpb25zIGJlZm9yZSBkYXRhL3Byb3BzXFxuICAgIGluaXRTdGF0ZSh2bSlcXG4gICAgaW5pdFByb3ZpZGUodm0pIC8vIHJlc29sdmUgcHJvdmlkZSBhZnRlciBkYXRhL3Byb3BzXFxuICAgIGNhbGxIb29rKHZtLCAnY3JlYXRlZCcpXFxuYGBgXFxu5YWz5LqOIGluaXRMaWZlY3ljbGVcXG4gIHZtLiRwYXJlbnQgPSBwYXJlbnRcXG4gIHZtLiRyb290ID0gcGFyZW50ID8gcGFyZW50LiRyb290IDogdm1cXG4gIHZtLiRjaGlsZHJlbiA9IFtdXFxuICB2bS4kcmVmcyA9IHt9XFxuICB2bS5fd2F0Y2hlciA9IG51bGxcXG4gIHZtLl9pbmFjdGl2ZSA9IG51bGxcXG4gIHZtLl9kaXJlY3RJbmFjdGl2ZSA9IGZhbHNlXFxuICB2bS5faXNNb3VudGVkID0gZmFsc2VcXG4gIHZtLl9pc0Rlc3Ryb3llZCA9IGZhbHNlXFxuICB2bS5faXNCZWluZ0Rlc3Ryb3llZCA9IGZhbHNlXFxuICBgYGBcXG5cXG4tICBpbml0RXZlbnRzXFxuYGBgXFxuICB2bS5fZXZlbnRzID0gT2JqZWN0LmNyZWF0ZShudWxsKVxcbiAgdm0uX2hhc0hvb2tFdmVudCA9IGZhbHNlXFxuICAvLyBpbml0IHBhcmVudCBhdHRhY2hlZCBldmVudHNcXG4gIGNvbnN0IGxpc3RlbmVycyA9IHZtLiRvcHRpb25zLl9wYXJlbnRMaXN0ZW5lcnNcXG4gIGlmIChsaXN0ZW5lcnMpIHtcXG4gICAgdXBkYXRlQ29tcG9uZW50TGlzdGVuZXJzKHZtLCBsaXN0ZW5lcnMpXFxuICB9XFxuICDlsLHmmK/liKTmlq3niLbnuqfmmK/lkKbmnInkuovku7bnm5HlkKzvvIznhLblkI7nu5nniLbnuqfov5vooYznm5HlkKzkuovku7ZcXG4gIGBgYFxcbi0gaW5pdFJlbmRlclxcbmBgYFxcbiAgIHZtLl92bm9kZSA9IG51bGwgIC8vIHRoZSByb290IG9mIHRoZSBjaGlsZCB0cmVlXFxuICB2bS5fc3RhdGljVHJlZXMgPSBudWxsICAvLyB2LW9uY2UgY2FjaGVkIHRyZWVzXFxuICBjb25zdCBvcHRpb25zID0gdm0uJG9wdGlvbnNcXG4gIGNvbnN0IHBhcmVudFZub2RlID0gdm0uJHZub2RlID0gb3B0aW9ucy5fcGFyZW50Vm5vZGUgLy8gdGhlIHBsYWNlaG9sZGVyIG5vZGUgaW4gcGFyZW50IHRyZWVcXG4gIGNvbnN0IHJlbmRlckNvbnRleHQgPSBwYXJlbnRWbm9kZSAmJiBwYXJlbnRWbm9kZS5jb250ZXh0XFxuICB2bS4kc2xvdHMgPSByZXNvbHZlU2xvdHMob3B0aW9ucy5fcmVuZGVyQ2hpbGRyZW4sIHJlbmRlckNvbnRleHQpXFxuICB2bS4kc2NvcGVkU2xvdHMgPSBlbXB0eU9iamVjdFxcbiAgLy8g5a6e5L6L57uR5a6aIGNyZWF0ZUVsZW1lbnQg5pa55rOV77yM5Lul5L6/5Y+v5Lul5q2j5bi45Zyo5YaF6YOo5riy5p+TXFxuIC8vIOWPguaVsOmhuuW6jyAgIHRhZywgZGF0YSwgY2hpbGRyZW4sIG5vcm1hbGl6YXRpb25UeXBlLCBhbHdheXNOb3JtYWxpemVcXG4gIC8vIOWGhemDqOS9v+eUqOS7juaooeadv+e8luivkeiAjOadpeeahOa4suafk+WHveaVsFxcbiAgXFxuICB2bS5fYyA9IChhLCBiLCBjLCBkKSA9PiBjcmVhdGVFbGVtZW50KHZtLCBhLCBiLCBjLCBkLCBmYWxzZSlcXG4gIC8vIOWFrOWFseeJiOacrOW/hemhu+aYryBub3JtYWxpemF0aW9uIOeahOa4suafk+WHveaVsFxcbiAgdm0uJGNyZWF0ZUVsZW1lbnQgPSAoYSwgYiwgYywgZCkgPT4gY3JlYXRlRWxlbWVudCh2bSwgYSwgYiwgYywgZCwgdHJ1ZSlcXG5cXG4gIC8vICRhdHRycyAmICRsaXN0ZW5lcnMg5bqU6K+l6KKr55uR5ZCs54Ot5pu05pawXFxuICBjb25zdCBwYXJlbnREYXRhID0gcGFyZW50Vm5vZGUgJiYgcGFyZW50Vm5vZGUuZGF0YVxcblxcbiAgaWYgKHByb2Nlc3MuZW52Lk5PREVfRU5WICE9PSAncHJvZHVjdGlvbicpIHtcXG4gICAgZGVmaW5lUmVhY3RpdmUodm0sICckYXR0cnMnLCBwYXJlbnREYXRhICYmIHBhcmVudERhdGEuYXR0cnMgfHwgZW1wdHlPYmplY3QsICgpID0+IHtcXG4gICAgICAhaXNVcGRhdGluZ0NoaWxkQ29tcG9uZW50ICYmIHdhcm4oYCRhdHRycyBpcyByZWFkb25seS5gLCB2bSlcXG4gICAgfSwgdHJ1ZSlcXG4gICAgZGVmaW5lUmVhY3RpdmUodm0sICckbGlzdGVuZXJzJywgb3B0aW9ucy5fcGFyZW50TGlzdGVuZXJzIHx8IGVtcHR5T2JqZWN0LCAoKSA9PiB7XFxuICAgICAgIWlzVXBkYXRpbmdDaGlsZENvbXBvbmVudCAmJiB3YXJuKGAkbGlzdGVuZXJzIGlzIHJlYWRvbmx5LmAsIHZtKVxcbiAgICB9LCB0cnVlKVxcbiAgfSBlbHNlIHtcXG4gICAgZGVmaW5lUmVhY3RpdmUodm0sICckYXR0cnMnLCBwYXJlbnREYXRhICYmIHBhcmVudERhdGEuYXR0cnMgfHwgZW1wdHlPYmplY3QsIG51bGwsIHRydWUpXFxuICAgIGRlZmluZVJlYWN0aXZlKHZtLCAnJGxpc3RlbmVycycsIG9wdGlvbnMuX3BhcmVudExpc3RlbmVycyB8fCBlbXB0eU9iamVjdCwgbnVsbCwgdHJ1ZSlcXG4gIH1cXG4gIGBgYFxcbi0gIGNhbGxIb29rKHZtLCAnYmVmb3JlQ3JlYXRlJykg5omn6KGMIGJlZm9yZUNyZWF0ZSDlh73mlbBcXG5cXG4tICBpbml0SW5qZWN0aW9ucyh2bSkg5pS26ZuG5rOo5YWl55qE5L6d6LWWXFxuYGBgXFxuICBjb25zdCByZXN1bHQgPSByZXNvbHZlSW5qZWN0KHZtLiRvcHRpb25zLmluamVjdCwgdm0pXFxuICBpZiAocmVzdWx0KSB7XFxuICAgIHRvZ2dsZU9ic2VydmluZyhmYWxzZSlcXG4gICAgT2JqZWN0LmtleXMocmVzdWx0KS5mb3JFYWNoKGtleSA9PiB7XFxuICAgICAgaWYgKHByb2Nlc3MuZW52Lk5PREVfRU5WICE9PSAncHJvZHVjdGlvbicpIHtcXG4gICAgICAgIGRlZmluZVJlYWN0aXZlKHZtLCBrZXksIHJlc3VsdFtrZXldLCAoKSA9PiB7XFxuICAgICAgICAgIHdhcm4oXFxuICAgICAgICAgIFxcdGDpgb/lhY3nm7TmjqXmlLnlj5jms6jlhaXnmoTlgLzvvIzlm6DkuLrlsIbkvJrph43mlrDmuLLmn5PmiYDmj5Dkvpvov5nkuKrlgLznmoTnu4Tku7YsIFxcbiAgICAgICAgICBcXHTmlLnlj5jnmoTlgLzmmK86IFxcXCIke2tleX1cXFwiLFxcbiAgICAgICAgICAgIHZtXFxuICAgICAgICAgIClcXG4gICAgICAgIH0pXFxuICAgICAgfSBlbHNlIHtcXG4gICAgICAgIGRlZmluZVJlYWN0aXZlKHZtLCBrZXksIHJlc3VsdFtrZXldKVxcbiAgICAgIH1cXG4gICAgfSlcXG4gICAgdG9nZ2xlT2JzZXJ2aW5nKHRydWUpXFxuYGBgXFxuLSBpbml0U3RhdGUg55uR5ZCs5YC85pS26ZuG5L6d6LWWXFxuYGBgXFxuICB2bS5fd2F0Y2hlcnMgPSBbXVxcbiAgY29uc3Qgb3B0cyA9IHZtLiRvcHRpb25zXFxuICBpZiAob3B0cy5wcm9wcykgaW5pdFByb3BzKHZtLCBvcHRzLnByb3BzKSAvLyDotYvlgLwgcHJvcHMg5pWw5o2u5bm25pS26ZuG5L6d6LWWXFxuICBpZiAob3B0cy5tZXRob2RzKSBpbml0TWV0aG9kcyh2bSwgb3B0cy5tZXRob2RzKSAvLyDotYvlgLwgdnVlIOeahOWQhOS4qiBtZXRob2RcXG4gIGlmIChvcHRzLmRhdGEpIHtcXG4gICAgaW5pdERhdGEodm0pIC8vIOaUtumbhuS+nei1llxcbiAgfSBlbHNlIHtcXG4gICAgb2JzZXJ2ZSh2bS5fZGF0YSA9IHt9LCB0cnVlIC8qIGFzUm9vdERhdGEgKi8pXFxuICB9XFxuICBpZiAob3B0cy5jb21wdXRlZCkgaW5pdENvbXB1dGVkKHZtLCBvcHRzLmNvbXB1dGVkKSAvLyDmlLbpm4bkvp3otZZcXG4gIGlmIChvcHRzLndhdGNoICYmIG9wdHMud2F0Y2ggIT09IG5hdGl2ZVdhdGNoKSB7XFxuICAgIGluaXRXYXRjaCh2bSwgb3B0cy53YXRjaCkgLy8g5Yid5aeL5YyW5L2g5YaZ55qE55uR5ZCs5a+56LGhXFxuICB9XFxuIFxcbmBgYFxcbi0gaW5pdFByb3ZpZGVcXG5gYGBcXG4gIGNvbnN0IHByb3ZpZGUgPSB2bS4kb3B0aW9ucy5wcm92aWRlXFxuICBpZiAocHJvdmlkZSkge1xcbiAgICB2bS5fcHJvdmlkZWQgPSB0eXBlb2YgcHJvdmlkZSA9PT0gJ2Z1bmN0aW9uJ1xcbiAgICAgID8gcHJvdmlkZS5jYWxsKHZtKVxcbiAgICAgIDogcHJvdmlkZVxcbiAgfVxcbmBgYFxcbi0gIGNhbGxIb29rKHZtLCAnY3JlYXRlZCcpIOaJp+ihjCBjcmVhdGVkIOWHveaVsFxcblxcbj7ov5nlsLHmmK8gX2luaXQg5Lit5ZCE5Liq5Ye95pWw5omA5YGa55qE5LqG44CCIOaIkeS7rOWPr+S7peeci+WIsOaAu+e7k+i/h+adpeWwseaYr1xcbjEu5Yid5aeL5YyW5LqG55Sf5ZG954q25oCBXFxuMi7ov5vooYzkuovku7bkuIrnmoTnm5HlkKxcXG4zLua4suafk+inhuWbvueahOWIneWni+WMlu+8m+aUtumbhuaJgOeUqOWIsOeahOeItue7hOS7tueahOaVsOaNruaIluS6i+S7tlxcbjQu6LCD55So5L2g5YaZ55qEIGJlZm9yZUNyZWF0ZSDmlrnms5VcXG41LmluaXRTdGF0ZSwg5aSE55CG5LqGIHZ1ZSDkuK3nmoTlkITnp43mlbDmja4ocHJvcHMvZGF0YS9tZXRob2RzLi4uLi4pLCDkuZ/lnKjov5nkuIDmraXpkojlr7nov5nkupvmlbDmja7ov5vooYzkuobkvp3otZbmlLbpm4bvvIzmlbDmja7mm7TmlrDnu5HlrppcXG42LuWIneWni+WMluS6hiBwcm92aWRlIOeahOWAvO+8jCDkuZ/lj6/ku6XnnIvlh7rlroPmsqHmnInooqvmlLbpm4bkvp3otZbvvIwg5piv5LiN5Lya5b2x5ZON6KeG5Zu+5pS55Y+Y55qEXFxuNy7osIPnlKjkuobkvaDlhpnnmoQgY3JlYXRlZCDmlrnms5XkuobjgIJcXG5cXG7ku6XkuIrvvIzlsLHmmK/kvaAgbGV0IGFwcCA9IG5ldyBWdWUoKSDov5nkuIDmraXmiYDlj5HnlJ/nmoTmiYDmnInkuovmg4XkuobjgIJcXG5cXG5cXG7pgqPpgJrov4flubPml7bnmoTkvb/nlKjmiJHku6znn6XpgZPvvIzmiJHku6zmmK/pgJrov4fosIPnlKggJG1vdW50ZWQg6IO95oqK5a6D5oyC6L295LiK6aG16Z2i44CC5omA5Lul5o6l5LiL5p2l5oiR5Lus5bCx5Y+v5Lul5p2l55yL55yLIHZ1ZSDoh6rlt7HnmoQgJG1vdW50IOmDveWBmuS6huS6m+S7gOS5iD9cXG5cXG7nrZQ6IOWwseaYr+aKiiB0ZW1wbGF0ZSDmiJbnm7TmjqXlhpnnmoQgcmVuZGVyIOWHveaVsO+8jOi/m+ihjOaMh+S7pOOAgeS6i+S7tuetiXZ1ZSDkuK3nmoTor63ms5Xop6PmnpDnvJbor5HmiJDkuIDkuKogQVNUIOagkeOAgumAmui/h+i/meS4quagke+8jOmAmui/h+S5i+WJjSBpbml0UmVuZGVyIOS4reeahCAkY3JlYXRlRWxlbWVudCDmlrnms5Xlj6/ku6XnlJ/miJDomZrmi59ET00sIOeEtuWQjua3u+WKoOWIsOmhtemdouS4reWHuu+8jOS4jeWwsea4suafk+WHuuadpeS6huS5iOOAgiDlpoLmnpzlpKflrrbkvb/nlKjov4cgVnVlIOeahCAkY3JlYXRlRWxlbWVudCDmlrnms5XvvIznm7jkv6HlsLHnn6XpgZPov5nkuKogYXN0IOaYr+aAjuS5iOS4gOS4que7k+aehOS6hu+8jOaLv+ekuuS+i+eahOadpeivtFxcbmBgYFxcbmNyZWF0ZUVsZW1lbnQoXFxuICAnZGl2JyxcXG4gIFtcXG4gICAgJ+WFiOWGmeS4gOS6m+aWh+WtlycsXFxuICAgIGNyZWF0ZUVsZW1lbnQoJ2gxJywgJ+S4gOWImeWktOadoScpLFxcbiAgICBjcmVhdGVFbGVtZW50KE15Q29tcG9uZW50LCB7XFxuICAgICAgcHJvcHM6IHtcXG4gICAgICAgIHNvbWVQcm9wOiAnZm9vYmFyJ1xcbiAgICAgIH1cXG4gICAgfSlcXG4gIF1cXG4pXFxuYGBgXFxuXFxuLS0tXFxu6K+05a6M5LqG5pW05Liq6L+H56iL77yM546w5Zyo6L+Y5q+U6L6D55aR5oOR55qE5bCx5piv5a6D55qE5pS26ZuG5L6d6LWW77yM54S25ZCO5pWw5o2u5pS55Y+Y5byV6LW355qE6KeG5Zu+5pS55Y+Y5Yiw5bqV5oCO5LmI5YGa5ZGi77yfXFxuXFxu5Lmf5bCx5piv6K+05oiR5Lus6KaB5a6e546w5LiA5Liq5qih5byP77yMdm0g5Y+v6IO9IGRhdGEg5a+56LGh5Lit55qE5LiA5Liq5YC877yM5q+U5aaCIG5hbWUg5pS55Y+Y5LqG77yM54S25ZCO5bCx6LCD55So6YeN5paw5riy5p+T55qE5Ye95pWw77yM6L+Z6YeM5Li65LqG5oCn6IO977yM5piv55Sf5oiQ5LqG5LiA5Liq6Jma5oufIERvbSwg54S25ZCO5q+U6L6D5ZOq6YeM5pS55Y+Y5LqG6L+b6KGM55u45bqU55qE5pu/5o2i44CCIFxcbuaKiui/meS4quaooeW8j+aKveixoeWHuuadpe+8jOWwseaYr+aIkeS7rOmcgOimgeS4gOS4qiBcXG5cXG7lhYjor7TlhbfkvZPlrp7njrDvvJog5oiR5Lus6KeG5Zu+5pu05paw5L6d6LWW5Yiw55qE5YC85pS26ZuG6LW35p2l77yM6L+Z6YeM5oqK5q+P5LiA5Liq5L6d6LWW5Yiw55qE5YC856ew5L2cIGRlcOOAguavj+S4quS+nei1luiuoumYheS4juWug+acieWFs+eahCB2dWUg55qEIHdhdGNoZXIg5Lit5b+D77yMIOi/memHjOaKiiBkZXAg5omA6K6i6ZiF55qEIHdhdGNoZXIg5Y+r5YGaIHN1YuOAgiDpgqPkuYggZGVwIOiiq+aUueWPmOeahOaXtuWAme+8jOiOt+WPluWug+iuoumYheS6humCo+S6myB3YXRjaGVy77yMIOmAmuefpeS7luS7rOi/m+ihjCB1cGRhdGUg6KeG5Zu+5ZWm44CCXFxuXFxu5Y+v5Lul55yL5oiR55S755qE566A5Zu+XFxuIVvlnKjov5nph4zmj5LlhaXlm77niYfmj4/ov7BdKGh0dHBzOi8vaS1ibG9nLmNzZG5pbWcuY24vYmxvZ19taWdyYXRlLzQxN2MyMzA4OGNiMDIyNGM2YTQ0NjQ2NTE0NTJjNjA0LnBuZylcXG4hW+WcqOi/memHjOaPkuWFpeWbvueJh+aPj+i/sF0oaHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9ibG9nX21pZ3JhdGUvNTljMGU3NmY2ODQwNTJkZjUyNDc2MWVlOGY0ZjY5NDIucG5nKVxcblxcbui/meWwseaYr+S+nei1luWvueixoSDlkowg5LiA5LiqIHdhdGNoZXIg5a+56LGh5omA5raJ5Y+K5Yiw55qE5aSE55CG5LqG44CCXFxuVnVlIOS4reWPiOaYr+aAjuS5iOaKiuS4gOS4quS4queahOWxnuaAp++8jOi/m+ihjOaTjeS9nOWPmOaIkOS+nei1lueahOWRou+8n1xcbuWvueW6lOWug+eahOa6kOeggeWwseaYryBkZWZpbmVSZWFjdGl2ZSDmlrnms5XjgILmupDnoIHlpoLlm77vvJpcXG5gYGBcXG5leHBvcnQgZnVuY3Rpb24gZGVmaW5lUmVhY3RpdmUgKG9iaiwga2V5LCB2YWwsIGN1c3RvbVNldHRlciwgc2hhbGxvdykge1xcbiAgY29uc3QgZGVwID0gbmV3IERlcCgpXFxuICBcXG4gIC8vIOi/juWQiOmihOWumuS5ieeahGdldHRlciAvIHNldHRlclxcbiAgY29uc3QgZ2V0dGVyID0gcHJvcGVydHkgJiYgcHJvcGVydHkuZ2V0XFxuICBjb25zdCBzZXR0ZXIgPSBwcm9wZXJ0eSAmJiBwcm9wZXJ0eS5zZXRcXG4gIGlmICgoIWdldHRlciB8fCBzZXR0ZXIpICYmIGFyZ3VtZW50cy5sZW5ndGggPT09IDIpIHtcXG4gICAgdmFsID0gb2JqW2tleV1cXG4gIH1cXG4gIFxcbiAgbGV0IGNoaWxkT2IgPSAhc2hhbGxvdyAmJiBvYnNlcnZlKHZhbClcXG4gIE9iamVjdC5kZWZpbmVQcm9wZXJ0eShvYmosIGtleSwge1xcbiAgICBlbnVtZXJhYmxlOiB0cnVlLFxcbiAgICBjb25maWd1cmFibGU6IHRydWUsXFxuICAgIGdldDogZnVuY3Rpb24gcmVhY3RpdmVHZXR0ZXIgKCkge1xcbiAgICAgIGNvbnN0IHZhbHVlID0gZ2V0dGVyID8gZ2V0dGVyLmNhbGwob2JqKSA6IHZhbFxcbiAgICAgIGlmIChEZXAudGFyZ2V0KSB7XFxuICAgICAgICBkZXAuZGVwZW5kKClcXG4gICAgICAgIGlmIChjaGlsZE9iKSB7XFxuICAgICAgICAgIGNoaWxkT2IuZGVwLmRlcGVuZCgpXFxuICAgICAgICAgIGlmIChBcnJheS5pc0FycmF5KHZhbHVlKSkge1xcbiAgICAgICAgICAgIGRlcGVuZEFycmF5KHZhbHVlKVxcbiAgICAgICAgICB9XFxuICAgICAgICB9XFxuICAgICAgfVxcbiAgICAgIHJldHVybiB2YWx1ZVxcbiAgICB9LFxcbiAgICBzZXQ6IGZ1bmN0aW9uIHJlYWN0aXZlU2V0dGVyIChuZXdWYWwpIHtcXG4gICAgICBjb25zdCB2YWx1ZSA9IGdldHRlciA/IGdldHRlci5jYWxsKG9iaikgOiB2YWxcXG4gICAgICBpZiAobmV3VmFsID09PSB2YWx1ZSB8fCAobmV3VmFsICE9PSBuZXdWYWwgJiYgdmFsdWUgIT09IHZhbHVlKSkge1xcbiAgICAgICAgcmV0dXJuXFxuICAgICAgfVxcbiAgICAgIGlmIChzZXR0ZXIpIHtcXG4gICAgICAgIHNldHRlci5jYWxsKG9iaiwgbmV3VmFsKVxcbiAgICAgIH0gZWxzZSB7XFxuICAgICAgICB2YWwgPSBuZXdWYWxcXG4gICAgICB9XFxuICAgICAgY2hpbGRPYiA9ICFzaGFsbG93ICYmIG9ic2VydmUobmV3VmFsKVxcbiAgICAgIGRlcC5ub3RpZnkoKVxcbiAgICB9XFxuICB9KVxcbn1cXG5gYGBcXG7ov5nph4zlsLHmmK/nlKjnmoQgT2JqZWN0LmRlZmluZVByb3BlcnR5IOaWueazle+8jOWug+WPr+S7pemHjeWGmeWvueixoeeahOWxnuaAp+eahCBnZXQg5ZKMIHNldCDmlrnms5XjgIIg5b2T6L+Z5Liq5bGe5oCn5ZyoIFZ1ZSDkuK3ooqvojrflj5bnmoTml7blgJnvvIzlsLHlvIDlp4vmlLbpm4bkvp3otZbvvIzmiorlroPmlLbpm4blnKjov5nkuKogdm0g55qEIHdhdGNoZXIg5Lit5b+D77yM5bm25LiU6K6p5a6D6K6i6ZiF6L+Z5LiqIHdhdGNoZXIg44CC5b2T6L+Z5Liq5bGe5oCn6KKr6YeN5paw6K6+572u5pe277yMIOWwsemAmuefpeWug+aJgOiuoumYheeahOWvueixoeWOu+abtOaWsOOAglxcblxcbuWkp+iHtOimgeefpemBk+eahOWwseaYr+i/meS6m+S6huOAguWFs+S6juWFt+S9k+aYr+aAjuS5iOWunueOsOaKiiB0ZW1wbGF0ZSAg57yW6K+R5oiQIGFzdCDmoJHvvIwg5YW35L2T5piv5oCO5LmI5oqK5LqL5Lu257uR5a6a5LiK5Y6755qE77yM5L2g5Y+v5Lul5bC95oOF55qE5Y6754yc5oOz5ZKM5o6o5rWL77yM5oiW6ICF5Y6755yL55yL5YW35L2T55qE5a6e546w5pa55byP44CC5L2G5pivIFZVRSDmoYbmnrbmgLvkvZPmnaXor7TmiYDlgZrnmoTlsLHmmK/ov5nkupvkuovmg4XkuoYsIOWmguaenOacieinieW+l+acrOaWh+WGmeeahOS4jea4healmueahOWcsOaWueWPr+S7peaPkOWTiCA9ID1cXG5cIjsiXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0= \ No newline at end of file diff --git a/188.bundle.js b/188.bundle.js new file mode 100644 index 0000000..2a5cf7c --- /dev/null +++ b/188.bundle.js @@ -0,0 +1,2 @@ +"use strict";(self.webpackChunkreact_wyz=self.webpackChunkreact_wyz||[]).push([[188],{188:(n,e,r)=>{r.r(e),r.d(e,{default:()=>t});const t="## learn typescript\n### 类型\n基本类型: \n```\nstring number bool \n```\n\n数组 `[]`: \n```\nstring[] number[]\n```\n\n元祖: \n```\n[string, number]. 数组中有不同的数据类型\n```\n\n对象:\n```\n{ name: string; age: number }\n```\n\n函数：\n```\n(arg1: string, arg?: bool) => void\n```\n\nSymbol: \n```\nlet symbol = Symbol(\"key\"); \n```\n\n空：\n```\nundefined null\n```\n\n任何类型： \n```\nany\n```\n\n不存在的值： \n```\nnever\n```\n\n### 如何定义类型\n`type` 定义类型变量\n```\ntype Person = { name: string; age: number}\nts 使用 const person1：Person = { name: '22', age: 1};\n```\n\n`Interfaces` 声明 `对象` 类型的一种方法\n```\nInterface Person { name: string; age: number}\n```\n\n`extends` 类型继承于声明的类型\n```\ninterface a { name: string}\ninterface b extends a {\n\tage: number\n}\nb 的类型等于 { name: string; age: number }\n```\n\nin 判断属性是哪个类型中的\n```\ntype PersonListQuery = { user_ids: string[] }\ntype DogListQuery = { dog_ids: string[] }\n\nfunction getList(query: PersonListQuery | DogListQuery ) {\n\tif ('user_ids' in PersonListQuery) {\n\t \t// 这里可以推导出 query 类型是 PersonListQuery\n\t}\n}\n\n```\n\n\n### 类型组合\n\n`Required` 将 T 中所有属性变成必选\n```\nRequired<{ a?: bool} > = { a: bool }\n```\n\n`Partial` 将 T 中所有属性变成可选\n```\nPartial<{ a: bool }> = { a?: bool }\n```\n\n`Readonly` 将 T 中所有属性变成只读，后续 ts 会检测该类型不允许修改\n```\nconst person2: Readonly<{name: string}> = {name: '22'}\nperson2.name = '33' //error\n```\n`Omit` 删除某些属性\n```\ninterface Person {\n name: string;\n age: number;\n}\n \ntype Name = Omit;\nName 的类型定义为 { name: string }\n```\n\n`Pick` 选择类型中的某些属性\n```\ninterface Person {\n name: string;\n age: number;\n}\ntype Name = Pick;\nName 的类型定义为 { name: string }\n```\n\n\n`Exclude` 删除类型 T 中 deleteT 的类型， 相当于 Omit, 第二个值可以是 keys ，也可以是一个类型变量\n```\ninterface Person {\n name: string;\n age: number;\n}\ntype Age = { age: number }\ntype Name = Exclude\nName 的类型定义为 { name: string }\n```\n\n\n`Extract` 提取 T 继承于的 U 类型\n```\ntype Person = { name: string ; age: number } \ntype PersonDetail = { pet: any; phone: number } \ntype Name = { name: string }\ntype Name = Extract\n 将提取出含有 name 的类型 Person\n```\n\n\n`Parameters` 获取函数类型的函数类型\n```\ntype getName = (perpson: Person) => string;\ntype queryType = Parameters;\nqueryType 的类型定义为 Person\n```\n\n`ReturnType` 获取函数类型的返回值类型\n```\ntype getName = (perpson: Person) => string;\ntype resType = ReturnType;\nvalueType 类型为 string\n```\n\n`Awaited` 获取异步返回的值类型\n```\ntype getPerson = (id: string) => Promise\ntype resType = ReturnType // Promise\ntype valueType = Awaited // Person\n```\n\n`Record` 定义对象的 key 键类型\n```\ntype Keys = 'name' | 'age' \ntype person = Record\n// person 的属性只能为 name 和 age\n```\n\n`NonNullable` 去除类型中定义的 null 和 undefined \n```\ntype PersonHobby = hobby: string | undefined;\ntype Hobby = NonNullable\nHobby 类型为 string\n```\n\n### 类型操作\n\n`typeof Object` 获得`对象`的类型\n```\nconst person1 = { name: '22', age: 1}\ntype Person = typeof person1\nPerson 类型为 { name: string; age: number }\n```\n\n`keyof T` 获得类型中的属性\n```\ntype Person = { name: string; age: number }\ntype Key = keyof Person \nkey 的类型为 'name' | 'age'\n```\n通常我们可以通过 keyof 约束对象的传参， 如\n```\ntype Person = { name: string; age: number }\ntype Key = keyof Person;\ntype getPersonAtrribute = (person: Person, key: Key) => Person[Key];\n```\n或者某些情况下我们想知道一个对象的属性值 \n```\nconst workPerson = { \n\t'1': { name: '1', age: 1},\n\t'2': { name: '2', age: 2},\n}\ntype WorkPerson = typeof workPerson; // { '1': {name: string; age: number }, '2': {name: string; age: number }\ntype Key = keyof WorkPerson // '1' | '2'\ntype Person = WorkPerson[Key] // {name: string; age: number }\n```\n `|` 类型兼容\n```\ntype width = 'string' | 'number';\n\n则 width 可以是 '32px' 也可以是 '32' 在 渲染时兼容两种类型\n```\n\n\n### 函数重载\n\n定义不同类型的输入，推到出不同类型的输出\n\n```\ntype PersonListQuery = { user_ids: string[] };\ntype DongListQuery = { dog_ids: string[] };\nfunction getList(request: PersonListQuery): Person[];\nfunction getList(request: DogListQuery): Dog[];\n\nfunction getList(query: PersonListQuery | DogListQuery) {\n if ('user_ids' in query) { \n return [] as Person[];\n } else {\n return [] as Dog[];\n }\n}\n\nconst a = getList({ personIds: [], region: 'us'})\n此时 a 的类型将能推到出是 Person[]\n```\n\n### 泛型\n类型的传参。 用 T 标识，在实际运用时你传入什么类型，该类型就作为后续推导。\n```\nasync function request(url: string): Promise {\n const res = await fetch(url)\n return res.json();\n}\n\nconst res = await request('getPersonInfo?id=1'); \n此时 ts 可以推导出 res 的类型是 Person\n```\n\n### Infer 类型参数使用\n通过 Infer 一个类型为变量，定义出获取类型的方法\n```\ntype addResultType = T extends { a: infer U, b: infer U } ? U : never;\ntype numberAdd = addResultType<{ a: 1, b: 2 }> // 推到出结果类型为 number\ntype textAdd = addResultType<{ a: 'hello', b: 'world' }> // 推到出结果类型为 string\n```\n\n\n### 枚举 enum\n变量的值是约定的几个取值\n\n```\nconst enum PageType {\n HOME = 'home',\n VIDEO = 'video',\n}\n\nfunction getPageUrl(page: PageType) {\n return {\n [PageType.VIDEO]: \"/video\",\n [PageType.HOME]: \"/home\",\n }[page];\n}\n```\n\n\n## tsconfig\n了解了 ts 对于类型的定义和各种规则后，我们则可以在编写 js 代码时利用并进行类型约束。于此同时，我们需要引入 typescript 库去获得这些 ts 能力。\n\n### 如何引入\n```\nnpm install typescript \n// 不必再多说\n```\n\n### 命令\ntypescript 包是有命令文件的，通常 ts 的运行则是通过 tsc 配合相关命令去执行的. 具体命令大家可以安装包之后通过 tsc -h 查看\n![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/349ffc362f0d831a780d2d7f754893a1.png)\n\n### 配置 [官网](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)\n如果你看了 tsc 命令，你会发现它是有很多命令的，并且有的命令还伴随这相关参数。在工作文件夹中，我们则通过配置文件 `tsconfig.js ` 去配置，保证在项目中的运用。 配置参数这里就不细讲了，还是看官方文档靠谱点。\n"}}]); +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMTg4LmJ1bmRsZS5qcyIsIm1hcHBpbmdzIjoia0lBQUEsdW1MIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vcmVhY3Rfd3l6Ly4uLy4uL2Jsb2dzL21hcmtkb3duL3R5cGVzY3JpcHQubWQiXSwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGRlZmF1bHQgXCIjIyBsZWFybiB0eXBlc2NyaXB0XFxuIyMjIOexu+Wei1xcbuWfuuacrOexu+WeizogXFxuYGBgXFxuc3RyaW5nIG51bWJlciBib29sIFxcbmBgYFxcblxcbuaVsOe7hCBgW11gOiAgXFxuYGBgXFxuc3RyaW5nW10gIG51bWJlcltdXFxuYGBgXFxuXFxu5YWD56WWOiAgXFxuYGBgXFxuW3N0cmluZywgbnVtYmVyXS4g5pWw57uE5Lit5pyJ5LiN5ZCM55qE5pWw5o2u57G75Z6LXFxuYGBgXFxuXFxu5a+56LGhOlxcbmBgYFxcbnsgbmFtZTogc3RyaW5nOyBhZ2U6IG51bWJlciB9XFxuYGBgXFxuXFxu5Ye95pWw77yaXFxuYGBgXFxuKGFyZzE6IHN0cmluZywgYXJnPzogYm9vbCkgPT4gdm9pZFxcbmBgYFxcblxcblN5bWJvbDogIFxcbmBgYFxcbmxldCBzeW1ib2wgPSBTeW1ib2woXFxcImtleVxcXCIpOyBcXG5gYGBcXG5cXG7nqbrvvJpcXG5gYGBcXG51bmRlZmluZWQgICBudWxsXFxuYGBgXFxuXFxu5Lu75L2V57G75Z6L77yaIFxcbmBgYFxcbmFueVxcbmBgYFxcblxcbuS4jeWtmOWcqOeahOWAvO+8miBcXG5gYGBcXG5uZXZlclxcbmBgYFxcblxcbiMjIyDlpoLkvZXlrprkuYnnsbvlnotcXG5gdHlwZWAgIOWumuS5ieexu+Wei+WPmOmHj1xcbmBgYFxcbnR5cGUgUGVyc29uID0geyBuYW1lOiBzdHJpbmc7IGFnZTogbnVtYmVyfVxcbnRzIOS9v+eUqCBjb25zdCBwZXJzb24x77yaUGVyc29uID0geyBuYW1lOiAnMjInLCBhZ2U6IDF9O1xcbmBgYFxcblxcbmBJbnRlcmZhY2VzYCDlo7DmmI4gYOWvueixoWAg57G75Z6L55qE5LiA56eN5pa55rOVXFxuYGBgXFxuSW50ZXJmYWNlIFBlcnNvbiB7IG5hbWU6IHN0cmluZzsgYWdlOiBudW1iZXJ9XFxuYGBgXFxuXFxuYGV4dGVuZHNgIOexu+Wei+e7p+aJv+S6juWjsOaYjueahOexu+Wei1xcbmBgYFxcbmludGVyZmFjZSBhIHsgbmFtZTogc3RyaW5nfVxcbmludGVyZmFjZSBiIGV4dGVuZHMgYSB7XFxuXFx0YWdlOiBudW1iZXJcXG59XFxuYiDnmoTnsbvlnovnrYnkuo4geyBuYW1lOiBzdHJpbmc7IGFnZTogbnVtYmVyIH1cXG5gYGBcXG5cXG5pbiDliKTmlq3lsZ7mgKfmmK/lk6rkuKrnsbvlnovkuK3nmoRcXG5gYGBcXG50eXBlIFBlcnNvbkxpc3RRdWVyeSA9IHsgdXNlcl9pZHM6IHN0cmluZ1tdIH1cXG50eXBlIERvZ0xpc3RRdWVyeSA9IHsgZG9nX2lkczogc3RyaW5nW10gfVxcblxcbmZ1bmN0aW9uIGdldExpc3QocXVlcnk6IFBlcnNvbkxpc3RRdWVyeSB8IERvZ0xpc3RRdWVyeSApIHtcXG5cXHRpZiAoJ3VzZXJfaWRzJyBpbiBQZXJzb25MaXN0UXVlcnkpIHtcXG5cXHQgXFx0Ly8g6L+Z6YeM5Y+v5Lul5o6o5a+85Ye6IHF1ZXJ5IOexu+Wei+aYryBQZXJzb25MaXN0UXVlcnlcXG5cXHR9XFxufVxcblxcbmBgYFxcblxcblxcbiMjIyDnsbvlnovnu4TlkIhcXG5cXG5gUmVxdWlyZWQ8VD5gIOWwhiBUIOS4reaJgOacieWxnuaAp+WPmOaIkOW/hemAiVxcbmBgYFxcblJlcXVpcmVkPHsgYT86IGJvb2x9ID4gPSB7IGE6IGJvb2wgfVxcbmBgYFxcblxcbmBQYXJ0aWFsPFQ+YCDlsIYgVCDkuK3miYDmnInlsZ7mgKflj5jmiJDlj6/pgIlcXG5gYGBcXG5QYXJ0aWFsPHsgYTogYm9vbCB9PiA9IHsgYT86IGJvb2wgfVxcbmBgYFxcblxcbmBSZWFkb25seTxUPmAg5bCGIFQg5Lit5omA5pyJ5bGe5oCn5Y+Y5oiQ5Y+q6K+777yM5ZCO57utIHRzIOS8muajgOa1i+ivpeexu+Wei+S4jeWFgeiuuOS/ruaUuVxcbmBgYFxcbmNvbnN0IHBlcnNvbjI6IFJlYWRvbmx5PHtuYW1lOiBzdHJpbmd9PiA9IHtuYW1lOiAnMjInfVxcbnBlcnNvbjIubmFtZSA9ICczMycgLy9lcnJvclxcbmBgYFxcbmBPbWl0PFQsIGtleXM+YCDliKDpmaTmn5DkupvlsZ7mgKdcXG5gYGBcXG5pbnRlcmZhY2UgUGVyc29uIHtcXG4gIG5hbWU6IHN0cmluZztcXG4gIGFnZTogbnVtYmVyO1xcbn1cXG4gXFxudHlwZSBOYW1lID0gT21pdDxQZXJzb24sICdhZ2UnPjtcXG5OYW1lIOeahOexu+Wei+WumuS5ieS4uiB7IG5hbWU6IHN0cmluZyB9XFxuYGBgXFxuXFxuYFBpY2s8VCwga2V5cz5gIOmAieaLqeexu+Wei+S4reeahOafkOS6m+WxnuaAp1xcbmBgYFxcbmludGVyZmFjZSBQZXJzb24ge1xcbiAgbmFtZTogc3RyaW5nO1xcbiAgYWdlOiBudW1iZXI7XFxufVxcbnR5cGUgTmFtZSA9IFBpY2s8UGVyc29uLCAnbmFtZSc+O1xcbk5hbWUg55qE57G75Z6L5a6a5LmJ5Li6IHsgbmFtZTogc3RyaW5nIH1cXG5gYGBcXG5cXG5cXG5gRXhjbHVkZTxULCBkZWxldGVUPmAg5Yig6Zmk57G75Z6LIFQg5LitIGRlbGV0ZVQg55qE57G75Z6L77yMIOebuOW9k+S6jiBPbWl0LCDnrKzkuozkuKrlgLzlj6/ku6XmmK8ga2V5cyDvvIzkuZ/lj6/ku6XmmK/kuIDkuKrnsbvlnovlj5jph49cXG5gYGBcXG5pbnRlcmZhY2UgUGVyc29uIHtcXG4gIG5hbWU6IHN0cmluZztcXG4gIGFnZTogbnVtYmVyO1xcbn1cXG50eXBlIEFnZSA9IHsgYWdlOiBudW1iZXIgfVxcbnR5cGUgTmFtZSA9IEV4Y2x1ZGU8UGVyc29uLCBBZ2U+XFxuTmFtZSDnmoTnsbvlnovlrprkuYnkuLogeyBuYW1lOiBzdHJpbmcgfVxcbmBgYFxcblxcblxcbmBFeHRyYWN0PFQsIFU+YCDmj5Dlj5YgVCDnu6fmib/kuo7nmoQgVSDnsbvlnotcXG5gYGBcXG50eXBlIFBlcnNvbiA9IHsgIG5hbWU6IHN0cmluZyA7IGFnZTogbnVtYmVyIH0gXFxudHlwZSBQZXJzb25EZXRhaWwgPSB7IHBldDogYW55OyBwaG9uZTogbnVtYmVyIH0gXFxudHlwZSBOYW1lID0geyBuYW1lOiBzdHJpbmcgfVxcbnR5cGUgTmFtZSA9IEV4dHJhY3Q8UGVyc29uIHwgUGVyc29uRGV0YWlsICwgTmFtZT5cXG4g5bCG5o+Q5Y+W5Ye65ZCr5pyJIG5hbWUg55qE57G75Z6LIFBlcnNvblxcbmBgYFxcblxcblxcbmBQYXJhbWV0ZXJzPGZ1bmN0aW9uIFQ+YCDojrflj5blh73mlbDnsbvlnovnmoTlh73mlbDnsbvlnotcXG5gYGBcXG50eXBlIGdldE5hbWUgPSAocGVycHNvbjogUGVyc29uKSA9PiBzdHJpbmc7XFxudHlwZSBxdWVyeVR5cGUgPSBQYXJhbWV0ZXJzPGdldE5hbWU+O1xcbnF1ZXJ5VHlwZSAg55qE57G75Z6L5a6a5LmJ5Li6IFBlcnNvblxcbmBgYFxcblxcbmBSZXR1cm5UeXBlPGZ1bmN0aW9uIFQ+YCDojrflj5blh73mlbDnsbvlnovnmoTov5Tlm57lgLznsbvlnotcXG5gYGBcXG50eXBlIGdldE5hbWUgPSAocGVycHNvbjogUGVyc29uKSA9PiBzdHJpbmc7XFxudHlwZSByZXNUeXBlID0gUmV0dXJuVHlwZTxnZXROYW1lPjtcXG52YWx1ZVR5cGUg57G75Z6L5Li6IHN0cmluZ1xcbmBgYFxcblxcbmBBd2FpdGVkPFByb21pc2UgVHlwZT5gIOiOt+WPluW8guatpei/lOWbnueahOWAvOexu+Wei1xcbmBgYFxcbnR5cGUgZ2V0UGVyc29uID0gKGlkOiBzdHJpbmcpID0+IFByb21pc2U8UGVyc29uPlxcbnR5cGUgcmVzVHlwZSA9IFJldHVyblR5cGU8Z2V0UGVyc29uPiAvLyBQcm9taXNlPFBlcnNvbj5cXG50eXBlIHZhbHVlVHlwZSA9IEF3YWl0ZWQ8cmVzVHlwZT4gLy8gUGVyc29uXFxuYGBgXFxuXFxuYFJlY29yZDxLIGV4dGVuZHMga2V5b2YgYW55LCBUPmAgIOWumuS5ieWvueixoeeahCBrZXkg6ZSu57G75Z6LXFxuYGBgXFxudHlwZSBLZXlzID0gJ25hbWUnIHwgJ2FnZScgXFxudHlwZSBwZXJzb24gPSBSZWNvcmQ8S2V5cywgYW55Plxcbi8vIHBlcnNvbiDnmoTlsZ7mgKflj6rog73kuLogbmFtZSDlkowgYWdlXFxuYGBgXFxuXFxuYE5vbk51bGxhYmxlPFQ+YCDljrvpmaTnsbvlnovkuK3lrprkuYnnmoQgbnVsbCDlkowgdW5kZWZpbmVkIFxcbmBgYFxcbnR5cGUgUGVyc29uSG9iYnkgPSBob2JieTogc3RyaW5nIHwgdW5kZWZpbmVkO1xcbnR5cGUgSG9iYnkgPSBOb25OdWxsYWJsZTxob2JieT5cXG5Ib2JieSDnsbvlnovkuLogIHN0cmluZ1xcbmBgYFxcblxcbiMjIyDnsbvlnovmk43kvZxcXG5cXG5gdHlwZW9mIE9iamVjdGAg6I635b6XYOWvueixoWDnmoTnsbvlnotcXG5gYGBcXG5jb25zdCBwZXJzb24xID0geyBuYW1lOiAnMjInLCBhZ2U6IDF9XFxudHlwZSBQZXJzb24gPSB0eXBlb2YgcGVyc29uMVxcblBlcnNvbiDnsbvlnovkuLogeyBuYW1lOiBzdHJpbmc7IGFnZTogbnVtYmVyIH1cXG5gYGBcXG5cXG5ga2V5b2YgVGAgIOiOt+W+l+exu+Wei+S4reeahOWxnuaAp1xcbmBgYFxcbnR5cGUgUGVyc29uID0geyBuYW1lOiBzdHJpbmc7IGFnZTogbnVtYmVyIH1cXG50eXBlIEtleSA9IGtleW9mIFBlcnNvbiBcXG5rZXkg55qE57G75Z6L5Li6ICduYW1lJyB8ICdhZ2UnXFxuYGBgXFxu6YCa5bi45oiR5Lus5Y+v5Lul6YCa6L+HIGtleW9mIOe6puadn+WvueixoeeahOS8oOWPgu+8jCDlpoJcXG5gYGBcXG50eXBlIFBlcnNvbiA9IHsgbmFtZTogc3RyaW5nOyBhZ2U6IG51bWJlciB9XFxudHlwZSBLZXkgPSBrZXlvZiBQZXJzb247XFxudHlwZSBnZXRQZXJzb25BdHJyaWJ1dGUgPSAocGVyc29uOiBQZXJzb24sIGtleTogS2V5KSA9PiBQZXJzb25bS2V5XTtcXG5gYGBcXG7miJbogIXmn5Dkupvmg4XlhrXkuIvmiJHku6zmg7Pnn6XpgZPkuIDkuKrlr7nosaHnmoTlsZ7mgKflgLwgXFxuYGBgXFxuY29uc3Qgd29ya1BlcnNvbiA9IHsgXFxuXFx0JzEnOiB7IG5hbWU6ICcxJywgYWdlOiAxfSxcXG5cXHQnMic6IHsgbmFtZTogJzInLCBhZ2U6IDJ9LFxcbn1cXG50eXBlIFdvcmtQZXJzb24gID0gdHlwZW9mIHdvcmtQZXJzb247ICAvLyB7ICcxJzoge25hbWU6IHN0cmluZzsgYWdlOiBudW1iZXIgfSwgJzInOiB7bmFtZTogc3RyaW5nOyBhZ2U6IG51bWJlciB9XFxudHlwZSBLZXkgPSBrZXlvZiBXb3JrUGVyc29uICAvLyAnMScgfCAnMidcXG50eXBlIFBlcnNvbiA9IFdvcmtQZXJzb25bS2V5XSAgIC8vIHtuYW1lOiBzdHJpbmc7IGFnZTogbnVtYmVyIH1cXG5gYGBcXG4gYHxgIOexu+Wei+WFvOWuuVxcbmBgYFxcbnR5cGUgd2lkdGggPSAnc3RyaW5nJyB8ICdudW1iZXInO1xcblxcbuWImSB3aWR0aCDlj6/ku6XmmK8gJzMycHgnIOS5n+WPr+S7peaYryAnMzInIOWcqCDmuLLmn5Pml7blhbzlrrnkuKTnp43nsbvlnotcXG5gYGBcXG5cXG5cXG4jIyMg5Ye95pWw6YeN6L29XFxuXFxu5a6a5LmJ5LiN5ZCM57G75Z6L55qE6L6T5YWl77yM5o6o5Yiw5Ye65LiN5ZCM57G75Z6L55qE6L6T5Ye6XFxuXFxuYGBgXFxudHlwZSBQZXJzb25MaXN0UXVlcnkgPSB7IHVzZXJfaWRzOiBzdHJpbmdbXSB9O1xcbnR5cGUgRG9uZ0xpc3RRdWVyeSA9IHsgZG9nX2lkczogc3RyaW5nW10gfTtcXG5mdW5jdGlvbiBnZXRMaXN0KHJlcXVlc3Q6IFBlcnNvbkxpc3RRdWVyeSk6IFBlcnNvbltdO1xcbmZ1bmN0aW9uIGdldExpc3QocmVxdWVzdDogRG9nTGlzdFF1ZXJ5KTogRG9nW107XFxuXFxuZnVuY3Rpb24gZ2V0TGlzdChxdWVyeTogUGVyc29uTGlzdFF1ZXJ5IHwgRG9nTGlzdFF1ZXJ5KSB7XFxuICBpZiAoJ3VzZXJfaWRzJyBpbiBxdWVyeSkgeyAgXFxuICAgIHJldHVybiBbXSBhcyBQZXJzb25bXTtcXG4gIH0gZWxzZSB7XFxuICAgIHJldHVybiBbXSBhcyBEb2dbXTtcXG4gIH1cXG59XFxuXFxuY29uc3QgYSA9IGdldExpc3QoeyBwZXJzb25JZHM6IFtdLCByZWdpb246ICd1cyd9KVxcbuatpOaXtiBhIOeahOexu+Wei+WwhuiDveaOqOWIsOWHuuaYryBQZXJzb25bXVxcbmBgYFxcblxcbiMjIyDms5vlnotcXG7nsbvlnovnmoTkvKDlj4LjgIIg55SoIFQg5qCH6K+G77yM5Zyo5a6e6ZmF6L+Q55So5pe25L2g5Lyg5YWl5LuA5LmI57G75Z6L77yM6K+l57G75Z6L5bCx5L2c5Li65ZCO57ut5o6o5a+844CCXFxuYGBgXFxuYXN5bmMgZnVuY3Rpb24gcmVxdWVzdDxUPih1cmw6IHN0cmluZyk6IFByb21pc2U8VD4ge1xcbiAgY29uc3QgcmVzID0gYXdhaXQgZmV0Y2godXJsKVxcbiAgcmV0dXJuIHJlcy5qc29uKCk7XFxufVxcblxcbmNvbnN0IHJlcyA9IGF3YWl0IHJlcXVlc3Q8UGVyc29uPignZ2V0UGVyc29uSW5mbz9pZD0xJyk7IFxcbuatpOaXtiB0cyDlj6/ku6Xmjqjlr7zlh7ogcmVzIOeahOexu+Wei+aYryBQZXJzb25cXG5gYGBcXG5cXG4jIyMgSW5mZXIgIOexu+Wei+WPguaVsOS9v+eUqFxcbumAmui/hyBJbmZlciDkuIDkuKrnsbvlnovkuLrlj5jph4/vvIzlrprkuYnlh7rojrflj5bnsbvlnovnmoTmlrnms5VcXG5gYGBcXG50eXBlIGFkZFJlc3VsdFR5cGU8VD4gPSBUIGV4dGVuZHMgeyBhOiBpbmZlciBVLCBiOiBpbmZlciBVIH0gPyAgVSA6IG5ldmVyO1xcbnR5cGUgbnVtYmVyQWRkID0gIGFkZFJlc3VsdFR5cGU8eyBhOiAxLCBiOiAyIH0+ICAgICAvLyDmjqjliLDlh7rnu5PmnpznsbvlnovkuLogbnVtYmVyXFxudHlwZSB0ZXh0QWRkID0gYWRkUmVzdWx0VHlwZTx7IGE6ICdoZWxsbycsIGI6ICd3b3JsZCcgfT4gICAgIC8vIOaOqOWIsOWHuue7k+aenOexu+Wei+S4uiBzdHJpbmdcXG5gYGBcXG5cXG5cXG4jIyMg5p6a5Li+IGVudW1cXG7lj5jph4/nmoTlgLzmmK/nuqblrprnmoTlh6DkuKrlj5blgLxcXG5cXG5gYGBcXG5jb25zdCBlbnVtIFBhZ2VUeXBlIHtcXG4gIEhPTUUgPSAnaG9tZScsXFxuICBWSURFTyA9ICd2aWRlbycsXFxufVxcblxcbmZ1bmN0aW9uIGdldFBhZ2VVcmwocGFnZTogUGFnZVR5cGUpIHtcXG4gIHJldHVybiB7XFxuICAgIFtQYWdlVHlwZS5WSURFT106IFxcXCIvdmlkZW9cXFwiLFxcbiAgICBbUGFnZVR5cGUuSE9NRV06IFxcXCIvaG9tZVxcXCIsXFxuICB9W3BhZ2VdO1xcbn1cXG5gYGBcXG5cXG5cXG4jIyB0c2NvbmZpZ1xcbuS6huino+S6hiB0cyDlr7nkuo7nsbvlnovnmoTlrprkuYnlkozlkITnp43op4TliJnlkI7vvIzmiJHku6zliJnlj6/ku6XlnKjnvJblhpkganMg5Luj56CB5pe25Yip55So5bm26L+b6KGM57G75Z6L57qm5p2f44CC5LqO5q2k5ZCM5pe277yM5oiR5Lus6ZyA6KaB5byV5YWlIHR5cGVzY3JpcHQg5bqT5Y676I635b6X6L+Z5LqbIHRzIOiDveWKm+OAglxcblxcbiMjIyDlpoLkvZXlvJXlhaVcXG5gYGBcXG5ucG0gaW5zdGFsbCAgdHlwZXNjcmlwdCAgXFxuLy8g5LiN5b+F5YaN5aSa6K+0XFxuYGBgXFxuXFxuIyMjIOWRveS7pFxcbnR5cGVzY3JpcHQg5YyF5piv5pyJ5ZG95Luk5paH5Lu255qE77yM6YCa5bi4IHRzIOeahOi/kOihjOWImeaYr+mAmui/hyB0c2Mg6YWN5ZCI55u45YWz5ZG95Luk5Y675omn6KGM55qELiDlhbfkvZPlkb3ku6TlpKflrrblj6/ku6Xlronoo4XljIXkuYvlkI7pgJrov4cgdHNjIC1oIOafpeeci1xcbiFb5Zyo6L+Z6YeM5o+S5YWl5Zu+54mH5o+P6L+wXShodHRwczovL2ktYmxvZy5jc2RuaW1nLmNuL2Jsb2dfbWlncmF0ZS8zNDlmZmMzNjJmMGQ4MzFhNzgwZDJkN2Y3NTQ4OTNhMS5wbmcpXFxuXFxuIyMjIOmFjee9riBb5a6Y572RXShodHRwczovL3d3dy50eXBlc2NyaXB0bGFuZy5vcmcvZG9jcy9oYW5kYm9vay90c2NvbmZpZy1qc29uLmh0bWwpXFxu5aaC5p6c5L2g55yL5LqGIHRzYyDlkb3ku6TvvIzkvaDkvJrlj5HnjrDlroPmmK/mnInlvojlpJrlkb3ku6TnmoTvvIzlubbkuJTmnInnmoTlkb3ku6Tov5jkvLTpmo/ov5nnm7jlhbPlj4LmlbDjgILlnKjlt6XkvZzmlofku7blpLnkuK3vvIzmiJHku6zliJnpgJrov4fphY3nva7mlofku7YgYHRzY29uZmlnLmpzIGAg5Y676YWN572u77yM5L+d6K+B5Zyo6aG555uu5Lit55qE6L+Q55So44CCIOmFjee9ruWPguaVsOi/memHjOWwseS4jee7huiusuS6hu+8jOi/mOaYr+eci+WumOaWueaWh+aho+mdoOiwseeCueOAglxcblwiOyJdLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIifQ== \ No newline at end of file diff --git a/27.bundle.js b/27.bundle.js new file mode 100644 index 0000000..32add2f --- /dev/null +++ b/27.bundle.js @@ -0,0 +1,2 @@ +"use strict";(self.webpackChunkcboy_blog=self.webpackChunkcboy_blog||[]).push([[27],{27:function(e,o,p){p.r(o),p.d(o,{default:function(){return a}});var c=p(358);const t={class:"component-webpack"},s={};var a=(0,p(389).A)(s,[["render",function(e,o){return(0,c.uX)(),(0,c.CE)("div",t,o[0]||(o[0]=[(0,c.Fv)('

一 webpack 是什么？

它是一个打包工具。 噗，完啦？

来，我们看官方概念: webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。

内部如何构建一个依赖图，我们知道 webpack 会配置一个入口，这就是从这入口文件开始， 找到所有被依赖到的文件，比如其他 js / image / json 文件等，然后通过 loader 对这些文件进行处理、编译、打包、优化，生成一个 bundle 或者多个 bundle。

它的原理

通过以上，主要就是找依赖, 通过配置处理相应环境，根据你的需要配置插件进行优化（如 profill、babel、 miniSize etc) 打包出文件，可以放到服务器上运行。

关于找依赖，可以想到关于模块化的语法: import 、require、@import etc， 通过解析对应的语法寻找相应的依赖。然后通过读取依赖到的文件，根据对应的 loader 进行处理文件，最后根据你的插件配置，分割，压缩或注入等，根据 output config输出到对应的文件夹。

这里推荐一篇 webpack原理 文章, 下面就提一提我最近遇到的一个很神奇的问题吧

关于 tree shaking

想象抖一抖树，枯萎的叶子就会脱落。 这里指的是把没有用到的代码删除掉，从而减小文件的大小。通过这一优化，在引用多个第三方库时，能够大大的减少你的文件大小，但请确定这个包是没有副作用的。

什么是副作用? 就是在导入时会自行运行一段函数，从而改变了 window 变量啊或者其他的变量以供导入的包能正常运行， 而不是只单单 export 了变量。

它是依赖于 es2015 的 静态导入导出( import / export)。在打包时就会通过 import 确定引用包的 export 导出的某一个变量之一， 在告知没有副作用的情况下，删除掉没有用到的其他的导出代码。

静态导入是指一开始就默认加载这个文件，而不是一步一步执行代码判断逻辑，去导入对应文件

webpack 在生成环境下，默认打开树抖动配置, 如下配置。

optimization： {\n\tprovidedExports: true,\n\tusedExports: true,\n\tsideEffects: true,\n\tconcatenateModules: true,\n }\n

providedExports 开启 export 导出收集； usedExportts 告诉webpack确定每个模块的已使用导出； concatenateModules 告诉webpack查找模块图的各个部分，这些部分可以安全地连接成一个模块； sideEffects 告诉webpack识别 sideEffects 标志的 package.json 或规则以跳过模块，这些模块在未使用导出时被标记为不包含副作用， 则可以把无副作用的未使用的导出进行删除。

所以如果你的包无副作用，推荐在 package.json 设置 sideEffects: false 开启树抖动。 注意, 它会删掉样式文件，因为样式文件是没有 export 的。所以我们需要声明样式文件是有副作用的。 在 package.json 中设置：

sideEffects: [\n\t'*.css'\n]\n

总结，为了利用树木摇晃，你必须： 1 使用ES2015模块语法 (配置 babel 禁止转义 es6 模块语义） 2 将"sideEffects"属性添加到项目的 package.json文件中。 3 配合压缩工具一起使用

demo 通过配置 webpack.prod.js sideEffects 值， 你可以看到 build 时 main.js 文件的大小发生改变。

',20)]))}]])}}]); +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMjcuYnVuZGxlLmpzIiwibWFwcGluZ3MiOiIyS0FBZUEsTUFBTSxxQkNDZkMsRUFBUyxDQUFDLEVBS2hCLE9BRmlDLEUsT0FBQSxHQUFnQkEsRUFBUSxDQUFDLENBQUMsUyxnQ0RKakRDLEVBQUFBLEVBQUFBLElBNkNKLE1BN0NJQyxFQTZDSkMsRUFBQSxLQUFBQSxFQUFBLEtBN0NOQyxFQUFBQSxFQUFBQSxJQUFBLGlxRSIsInNvdXJjZXMiOlsid2VicGFjazovL2Nib3ktYmxvZy8uLi8uLi9ibG9ncy9tYXJrZG93bi93ZWJwYWNrLm1kIiwid2VicGFjazovL2Nib3ktYmxvZy8uLi8uLi9ibG9ncy9tYXJrZG93bi93ZWJwYWNrLm1kPzZiN2YiXSwic291cmNlc0NvbnRlbnQiOlsiPHRlbXBsYXRlPjxkaXYgY2xhc3M9XCJjb21wb25lbnQtd2VicGFja1wiPjxoND7kuIAgIHdlYnBhY2sg5piv5LuA5LmI77yfPC9oND5cbjxwPuWug+aYr+S4gOS4quaJk+WMheW3peWFt+OAgiDlmZfvvIzlrozllabvvJ88L3A+XG48cD7mnaXvvIzmiJHku6znnIvlrpjmlrnmpoLlv7U6ICB3ZWJwYWNrIOaYr+S4gOS4queOsOS7oyBKYXZhU2NyaXB0IOW6lOeUqOeoi+W6j+eahOmdmeaAgeaooeWdl+aJk+WMheW3peWFt+OAguW9kyB3ZWJwYWNrIOWkhOeQhuW6lOeUqOeoi+W6j+aXtu+8jOWug+S8muWcqOWGhemDqOaehOW7uuS4gOS4qiDkvp3otZblm74oZGVwZW5kZW5jeSBncmFwaCnvvIzmraTkvp3otZblm77kvJrmmKDlsITpobnnm67miYDpnIDnmoTmr4/kuKrmqKHlnZfvvIzlubbnlJ/miJDkuIDkuKrmiJblpJrkuKogYnVuZGxl44CCPC9wPlxuPHA+5YaF6YOo5aaC5L2V5p6E5bu65LiA5Liq5L6d6LWW5Zu+77yM5oiR5Lus55+l6YGTIHdlYnBhY2sg5Lya6YWN572u5LiA5Liq5YWl5Y+j77yM6L+Z5bCx5piv5LuO6L+Z5YWl5Y+j5paH5Lu25byA5aeL77yMIOaJvuWIsOaJgOacieiiq+S+nei1luWIsOeahOaWh+S7tu+8jOavlOWmguWFtuS7liBqcyAvIGltYWdlIC8ganNvbiDmlofku7bnrYnvvIznhLblkI7pgJrov4cgbG9hZGVyIOWvuei/meS6m+aWh+S7tui/m+ihjOWkhOeQhuOAgee8luivkeOAgeaJk+WMheOAgeS8mOWMlu+8jOeUn+aIkOS4gOS4qiBidW5kbGUg5oiW6ICF5aSa5LiqIGJ1bmRsZeOAgjwvcD5cbjxoND7lroPnmoTljp/nkIY8L2g0PlxuPHA+6YCa6L+H5Lul5LiK77yM5Li76KaB5bCx5piv5om+5L6d6LWWLCDpgJrov4fphY3nva7lpITnkIbnm7jlupTnjq/looPvvIzmoLnmja7kvaDnmoTpnIDopoHphY3nva7mj5Lku7bov5vooYzkvJjljJbvvIjlpoIgcHJvZmlsbOOAgWJhYmVs44CBIG1pbmlTaXplIGV0Yykg5omT5YyF5Ye65paH5Lu277yM5Y+v5Lul5pS+5Yiw5pyN5Yqh5Zmo5LiK6L+Q6KGM44CCPC9wPlxuPHA+5YWz5LqO5om+5L6d6LWW77yM5Y+v5Lul5oOz5Yiw5YWz5LqO5qih5Z2X5YyW55qE6K+t5rOVOiBpbXBvcnQg44CBcmVxdWlyZeOAgUBpbXBvcnQgZXRj77yMIOmAmui/h+ino+aekOWvueW6lOeahOivreazleWvu+aJvuebuOW6lOeahOS+nei1luOAgueEtuWQjumAmui/h+ivu+WPluS+nei1luWIsOeahOaWh+S7tu+8jOagueaNruWvueW6lOeahCBsb2FkZXIg6L+b6KGM5aSE55CG5paH5Lu277yM5pyA5ZCO5qC55o2u5L2g55qE5o+S5Lu26YWN572u77yM5YiG5Ymy77yM5Y6L57yp5oiW5rOo5YWl562J77yM5qC55o2uIG91dHB1dCBjb25maWfovpPlh7rliLDlr7nlupTnmoTmlofku7blpLnjgII8L3A+XG48cD7ov5nph4zmjqjojZDkuIDnr4cgPGEgaHJlZj1cImh0dHBzOi8vanVlamluLmltL2VudHJ5LzViMGUzZWJhNTE4ODI1MTUzNDM3OTYxNVwiPndlYnBhY2vljp/nkIY8L2E+IOaWh+eroCwg5LiL6Z2i5bCx5o+Q5LiA5o+Q5oiR5pyA6L+R6YGH5Yiw55qE5LiA5Liq5b6I56We5aWH55qE6Zeu6aKY5ZCnPC9wPlxuPGg0PuWFs+S6jiA8YSBocmVmPVwiaHR0cHM6Ly93ZWJwYWNrLmRvY3NjaGluYS5vcmcvZ3VpZGVzL3RyZWUtc2hha2luZy9cIj50cmVlIHNoYWtpbmc8L2E+PC9oND5cbjxwPuaDs+ixoeaKluS4gOaKluagke+8jOaer+iQjueahOWPtuWtkOWwseS8muiEseiQveOAgiDov5nph4zmjIfnmoTmmK/miormsqHmnInnlKjliLDnmoTku6PnoIHliKDpmaTmjonvvIzku47ogIzlh4/lsI/mlofku7bnmoTlpKflsI/jgILpgJrov4fov5nkuIDkvJjljJbvvIzlnKjlvJXnlKjlpJrkuKrnrKzkuInmlrnlupPml7bvvIzog73lpJ/lpKflpKfnmoTlh4/lsJHkvaDnmoTmlofku7blpKflsI/vvIzkvYbor7fnoa7lrprov5nkuKrljIXmmK/msqHmnInlia/kvZznlKjnmoTjgII8L3A+XG48YmxvY2txdW90ZT5cbjxwPuS7gOS5iOaYr+WJr+S9nOeUqD9cbuWwseaYr+WcqOWvvOWFpeaXtuS8muiHquihjOi/kOihjOS4gOauteWHveaVsO+8jOS7juiAjOaUueWPmOS6hiB3aW5kb3cg5Y+Y6YeP5ZWK5oiW6ICF5YW25LuW55qE5Y+Y6YeP5Lul5L6b5a+85YWl55qE5YyF6IO95q2j5bi46L+Q6KGM77yMIOiAjOS4jeaYr+WPquWNleWNlSBleHBvcnQg5LqG5Y+Y6YeP44CCPC9wPlxuPC9ibG9ja3F1b3RlPlxuPHA+5a6D5piv5L6d6LWW5LqOIGVzMjAxNSDnmoQgPGNvZGU+6Z2Z5oCB5a+85YWl5a+85Ye6KCBpbXBvcnQgLyBleHBvcnQpPC9jb2RlPuOAguWcqOaJk+WMheaXtuWwseS8mumAmui/hyBpbXBvcnQg56Gu5a6a5byV55So5YyF55qEIGV4cG9ydCDlr7zlh7rnmoTmn5DkuIDkuKrlj5jph4/kuYvkuIDvvIwg5Zyo5ZGK55+l5rKh5pyJ5Ymv5L2c55So55qE5oOF5Ya15LiL77yM5Yig6Zmk5o6J5rKh5pyJ55So5Yiw55qE5YW25LuW55qE5a+85Ye65Luj56CB44CCPC9wPlxuPGJsb2NrcXVvdGU+XG48cD7pnZnmgIHlr7zlhaXmmK/mjIfkuIDlvIDlp4vlsLHpu5jorqTliqDovb3ov5nkuKrmlofku7bvvIzogIzkuI3mmK/kuIDmraXkuIDmraXmiafooYzku6PnoIHliKTmlq3pgLvovpHvvIzljrvlr7zlhaXlr7nlupTmlofku7Y8L3A+XG48L2Jsb2NrcXVvdGU+XG48cD53ZWJwYWNrIOWcqOeUn+aIkOeOr+Wig+S4i++8jOm7mOiupOaJk+W8gOagkeaKluWKqOmFjee9riwg5aaC5LiL6YWN572u44CCPC9wPlxuPHByZSB2LXByZT1cIlwiPjxjb2RlPm9wdGltaXphdGlvbu+8miB7XG5cdHByb3ZpZGVkRXhwb3J0czogdHJ1ZSxcblx0dXNlZEV4cG9ydHM6IHRydWUsXG5cdHNpZGVFZmZlY3RzOiB0cnVlLFxuXHRjb25jYXRlbmF0ZU1vZHVsZXM6IHRydWUsXG4gfVxuPC9jb2RlPjwvcHJlPlxuPHA+PGNvZGU+cHJvdmlkZWRFeHBvcnRzPC9jb2RlPiDlvIDlkK8gZXhwb3J0IOWvvOWHuuaUtumbhu+8m1xuPGNvZGU+IHVzZWRFeHBvcnR0czwvY29kZT4g5ZGK6K+Jd2VicGFja+ehruWumuavj+S4quaooeWdl+eahOW3suS9v+eUqOWvvOWHuu+8m1xuPGNvZGU+IGNvbmNhdGVuYXRlTW9kdWxlczwvY29kZT4gIOWRiuiviXdlYnBhY2vmn6Xmib7mqKHlnZflm77nmoTlkITkuKrpg6jliIbvvIzov5nkupvpg6jliIblj6/ku6XlronlhajlnLDov57mjqXmiJDkuIDkuKrmqKHlnZfvvJtcbjxjb2RlPnNpZGVFZmZlY3RzPC9jb2RlPiDlkYror4l3ZWJwYWNr6K+G5YirIHNpZGVFZmZlY3RzIOagh+W/l+eahCBwYWNrYWdlLmpzb24g5oiW6KeE5YiZ5Lul6Lez6L+H5qih5Z2X77yM6L+Z5Lqb5qih5Z2X5Zyo5pyq5L2/55So5a+85Ye65pe26KKr5qCH6K6w5Li65LiN5YyF5ZCr5Ymv5L2c55So77yMIOWImeWPr+S7peaKiuaXoOWJr+S9nOeUqOeahOacquS9v+eUqOeahOWvvOWHuui/m+ihjOWIoOmZpOOAgjwvcD5cbjxwPuaJgOS7peWmguaenOS9oOeahOWMheaXoOWJr+S9nOeUqO+8jOaOqOiNkOWcqCBwYWNrYWdlLmpzb24g6K6+572uIDxjb2RlPnNpZGVFZmZlY3RzOiBmYWxzZTwvY29kZT4g5byA5ZCv5qCR5oqW5Yqo44CCXG7ms6jmhI8sIOWug+S8muWIoOaOieagt+W8j+aWh+S7tu+8jOWboOS4uuagt+W8j+aWh+S7tuaYr+ayoeaciSBleHBvcnQg55qE44CC5omA5Lul5oiR5Lus6ZyA6KaB5aOw5piO5qC35byP5paH5Lu25piv5pyJ5Ymv5L2c55So55qE44CCXG7lnKggcGFja2FnZS5qc29uIOS4reiuvue9ru+8mjwvcD5cbjxwcmUgdi1wcmU9XCJcIj48Y29kZT5zaWRlRWZmZWN0czogW1xuXHQnKi5jc3MnXG5dXG48L2NvZGU+PC9wcmU+XG48YmxvY2txdW90ZT5cbjxwPuaAu+e7k++8jOS4uuS6huWIqeeUqOagkeacqOaRh+aZg++8jOS9oOW/hemhu++8mlxuMSDkvb/nlKhFUzIwMTXmqKHlnZfor63ms5UgKOmFjee9riBiYWJlbCDnpoHmraLovazkuYkgZXM2IOaooeWdl+ivreS5ie+8iVxuMiDlsIZcInNpZGVFZmZlY3RzXCLlsZ7mgKfmt7vliqDliLDpobnnm67nmoQgcGFja2FnZS5qc29u5paH5Lu25Lit44CCXG4zIOmFjeWQiOWOi+e8qeW3peWFt+S4gOi1t+S9v+eUqDwvcD5cbjwvYmxvY2txdW90ZT5cbjxwPjxhIGhyZWY9XCJodHRwczovL2dpdGh1Yi5jb20vY2xldmVyYm95MzIvdHJlZS1zaGFraW5nLWNzc1wiPmRlbW88L2E+XG7pgJrov4fphY3nva4gIDxjb2RlPndlYnBhY2sucHJvZC5qczwvY29kZT4gc2lkZUVmZmVjdHMg5YC877yMIOS9oOWPr+S7peeci+WIsCBidWlsZCDml7YgbWFpbi5qcyDmlofku7bnmoTlpKflsI/lj5HnlJ/mlLnlj5jjgII8L3A+XG48L2Rpdj48L3RlbXBsYXRlPiIsImltcG9ydCB7IHJlbmRlciB9IGZyb20gXCIuL3dlYnBhY2subWQ/dnVlJnR5cGU9dGVtcGxhdGUmaWQ9NzE4NWVhYzBcIlxuY29uc3Qgc2NyaXB0ID0ge31cblxuaW1wb3J0IGV4cG9ydENvbXBvbmVudCBmcm9tIFwiLi4vLi4vbm9kZV9tb2R1bGVzLy5wbnBtL3Z1ZS1sb2FkZXJAMTcuNC4yX0B2dWUrY29tcGlsZXItc2ZjQDMuNS4zX3Z1ZUAzLjUuM190eXBlc2NyaXB0QDUuNS40X193ZWJwYWNrQDUuOTQuMF93ZWJwYWNrLV9mdXFrd2dncGxoZXkzb2l2dHdlMnN0ZG82ZS9ub2RlX21vZHVsZXMvdnVlLWxvYWRlci9kaXN0L2V4cG9ydEhlbHBlci5qc1wiXG5jb25zdCBfX2V4cG9ydHNfXyA9IC8qI19fUFVSRV9fKi9leHBvcnRDb21wb25lbnQoc2NyaXB0LCBbWydyZW5kZXInLHJlbmRlcl1dKVxuXG5leHBvcnQgZGVmYXVsdCBfX2V4cG9ydHNfXyJdLCJuYW1lcyI6WyJjbGFzcyIsInNjcmlwdCIsIl9jcmVhdGVFbGVtZW50QmxvY2siLCJfaG9pc3RlZF8xIiwiX2NhY2hlIiwiX2NyZWF0ZVN0YXRpY1ZOb2RlIl0sInNvdXJjZVJvb3QiOiIifQ== \ No newline at end of file diff --git a/272.bundle.js b/272.bundle.js new file mode 100644 index 0000000..e59406c --- /dev/null +++ b/272.bundle.js @@ -0,0 +1,2 @@ +"use strict";(self.webpackChunkreact_wyz=self.webpackChunkreact_wyz||[]).push([[272],{272:(n,e,s)=>{s.r(e),s.d(e,{default:()=>t});const t='### canvas\n\ncanvas 是 HTML 5 新出的图片元素，它是 2d 绘图 API， 使用 JavaScript 调用API 可以画 lines, shapes, images, text 甚至其他你想话的， 并且不需要什么插件。\n\n它是作为一个画布存在在网页中， 画布上有你绘制的图案，利用 js 你可以实时的改变画布上的图案，以实现动画。\n\n它的支持性也挺好，IE 9 开始支持，Chrome和Opera 9+ 也支持。\n\n### svg\n\nSVG 可缩放矢量图形， 是 XML 用来描述二维图形和绘图程序的语言。目前SVG在Firefox、Opera、Webkit浏览器、IE等浏览器中已经部分实现。\n\n> 什么是 XML \n> 它是一种类似于 HTML 的标记语言，设计宗旨在于传输数据而不是显示数据。\n> XML 数据以纯文本格式进行存储，因此提供了一种独立于软件和硬件的数据存储方法。通过读取你可以获取存储于其中的数据\n\n\nSVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以变形，可以合成，还可以通过滤镜完全改变外观。\n\nSVG提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线，以及其他形状。\n一个简单的SVG文档由 `` 根元素和基本的形状元素构成。另外还有一个g元素，它用来把若干个基本形状编成一个组。\n\neg:\n```\n\n\n \n\n \n\n SVG\n\n\n\n```\n\n可以看到 svg 是在内部组合各种元素绘制形成相应的图案。 并且矢量顾名思义是可以自由缩放的，根据屏幕像素点进行缩放，保留了图案的高清晰度。\n\n### 总结\n通过以上，我们可以知道 svg 和 canvas 的相同点，它们都是可以绘图的元素，并有自身的用法。\ncanvas 是一块画布，纯用 js 去画画的。根据你的 js 编写，动态去渲染画布上的图案，适用一些大量数据交互修改的，比较复杂的动画。由于它仅仅是根据你设定的大小，它是依赖于分辨率的。\n 而 svg 是一个个元素组成在一起的， 包含 animate 元素，可做一些小小的动画， 它的矢量优点也更适合做一些高保真的静态图片。'}}]); +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMjcyLmJ1bmRsZS5qcyIsIm1hcHBpbmdzIjoia0lBQUEscXdDIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vcmVhY3Rfd3l6Ly4uLy4uL2Jsb2dzL21hcmtkb3duL2NhbnZhcy1zdmcubWQiXSwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGRlZmF1bHQgXCIjIyMgIGNhbnZhc1xcblxcbmNhbnZhcyDmmK8gSFRNTCA1IOaWsOWHuueahOWbvueJh+WFg+e0oO+8jOWug+aYryAyZCDnu5jlm74gQVBJ77yMIOS9v+eUqCBKYXZhU2NyaXB0ICDosIPnlKhBUEkg5Y+v5Lul55S7ICBsaW5lcywgc2hhcGVzLCBpbWFnZXMsIHRleHQg55Sa6Iez5YW25LuW5L2g5oOz6K+d55qE77yMIOW5tuS4lOS4jemcgOimgeS7gOS5iOaPkuS7tuOAglxcblxcbuWug+aYr+S9nOS4uuS4gOS4queUu+W4g+WtmOWcqOWcqOe9kemhteS4re+8jCDnlLvluIPkuIrmnInkvaDnu5jliLbnmoTlm77moYjvvIzliKnnlKgganMg5L2g5Y+v5Lul5a6e5pe255qE5pS55Y+Y55S75biD5LiK55qE5Zu+5qGI77yM5Lul5a6e546w5Yqo55S744CCXFxuXFxu5a6D55qE5pSv5oyB5oCn5Lmf5oy65aW977yMSUUgOSDlvIDlp4vmlK/mjIHvvIxDaHJvbWXlkoxPcGVyYSA5KyDkuZ/mlK/mjIHjgIJcXG5cXG4jIyMgc3ZnXFxuXFxuU1ZHIOWPr+e8qeaUvuefoumHj+WbvuW9ou+8jCDmmK8gWE1MIOeUqOadpeaPj+i/sOS6jOe7tOWbvuW9ouWSjOe7mOWbvueoi+W6j+eahOivreiogOOAguebruWJjVNWR+WcqEZpcmVmb3jjgIFPcGVyYeOAgVdlYmtpdOa1j+iniOWZqOOAgUlF562J5rWP6KeI5Zmo5Lit5bey57uP6YOo5YiG5a6e546w44CCXFxuXFxuPiDku4DkuYjmmK8gWE1MIFxcbj4g5a6D5piv5LiA56eN57G75Ly85LqOIEhUTUwg55qE5qCH6K6w6K+t6KiA77yM6K6+6K6h5a6X5peo5Zyo5LqO5Lyg6L6T5pWw5o2u6ICM5LiN5piv5pi+56S65pWw5o2u44CCXFxuPiBYTUwg5pWw5o2u5Lul57qv5paH5pys5qC85byP6L+b6KGM5a2Y5YKo77yM5Zug5q2k5o+Q5L6b5LqG5LiA56eN54us56uL5LqO6L2v5Lu25ZKM56Gs5Lu255qE5pWw5o2u5a2Y5YKo5pa55rOV44CC6YCa6L+H6K+75Y+W5L2g5Y+v5Lul6I635Y+W5a2Y5YKo5LqO5YW25Lit55qE5pWw5o2uXFxuXFxuXFxuU1ZH5Y+v5Lul6YCa6L+H5a6a5LmJ5b+F6KaB55qE57q/5ZKM5b2i54q25p2l5Yib5bu65LiA5Liq5Zu+5b2i77yM5Lmf5Y+v5Lul5L+u5pS55bey5pyJ55qE5L2N5Zu+77yM5oiW6ICF5bCG6L+Z5Lik56eN5pa55byP57uT5ZCI6LW35p2l5Yib5bu65Zu+5b2i44CC5Zu+5b2i5ZKM5YW257uE5oiQ6YOo5YiG5Y+v5Lul5Y+Y5b2i77yM5Y+v5Lul5ZCI5oiQ77yM6L+Y5Y+v5Lul6YCa6L+H5ruk6ZWc5a6M5YWo5pS55Y+Y5aSW6KeC44CCXFxuXFxuU1ZH5o+Q5L6b5LqG5LiA5Lqb5YWD57Sg77yM55So5LqO5a6a5LmJ5ZyG5b2i44CB55+p5b2i44CB566A5Y2V5oiW5aSN5p2C55qE5puy57q/77yM5Lul5Y+K5YW25LuW5b2i54q244CCXFxu5LiA5Liq566A5Y2V55qEU1ZH5paH5qGj55SxIGA8c3ZnPmAg5qC55YWD57Sg5ZKM5Z+65pys55qE5b2i54q25YWD57Sg5p6E5oiQ44CC5Y+m5aSW6L+Y5pyJ5LiA5LiqZ+WFg+e0oO+8jOWug+eUqOadpeaKiuiLpeW5suS4quWfuuacrOW9oueKtue8luaIkOS4gOS4que7hOOAglxcblxcbmVnOlxcbmBgYFxcbjxzdmcgdmVyc2lvbj1cXFwiMS4xXFxcIlxcbiAgICAgYmFzZVByb2ZpbGU9XFxcImZ1bGxcXFwiXFxuICAgICB3aWR0aD1cXFwiMzAwXFxcIiBoZWlnaHQ9XFxcIjIwMFxcXCJcXG4gICAgIHhtbG5zPVxcXCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1xcXCI+XFxuXFxuICA8cmVjdCB3aWR0aD1cXFwiMTAwJVxcXCIgaGVpZ2h0PVxcXCIxMDAlXFxcIiBmaWxsPVxcXCJyZWRcXFwiIC8+XFxuXFxuICA8Y2lyY2xlIGN4PVxcXCIxNTBcXFwiIGN5PVxcXCIxMDBcXFwiIHI9XFxcIjgwXFxcIiBmaWxsPVxcXCJncmVlblxcXCIgLz5cXG5cXG4gIDx0ZXh0IHg9XFxcIjE1MFxcXCIgeT1cXFwiMTI1XFxcIiBmb250LXNpemU9XFxcIjYwXFxcIiB0ZXh0LWFuY2hvcj1cXFwibWlkZGxlXFxcIiBmaWxsPVxcXCJ3aGl0ZVxcXCI+U1ZHPC90ZXh0Plxcblxcbjwvc3ZnPlxcblxcbmBgYFxcblxcbuWPr+S7peeci+WIsCBzdmcg5piv5Zyo5YaF6YOo57uE5ZCI5ZCE56eN5YWD57Sg57uY5Yi25b2i5oiQ55u45bqU55qE5Zu+5qGI44CCIOW5tuS4lOefoumHj+mhvuWQjeaAneS5ieaYr+WPr+S7peiHqueUsee8qeaUvueahO+8jOagueaNruWxj+W5leWDj+e0oOeCuei/m+ihjOe8qeaUvu+8jOS/neeVmeS6huWbvuahiOeahOmrmOa4heaZsOW6puOAglxcblxcbiMjIyDmgLvnu5NcXG7pgJrov4fku6XkuIrvvIzmiJHku6zlj6/ku6Xnn6XpgZMgc3ZnIOWSjCBjYW52YXMg55qE55u45ZCM54K577yM5a6D5Lus6YO95piv5Y+v5Lul57uY5Zu+55qE5YWD57Sg77yM5bm25pyJ6Ieq6Lqr55qE55So5rOV44CCXFxuY2FudmFzIOaYr+S4gOWdl+eUu+W4g++8jOe6r+eUqCBqcyDljrvnlLvnlLvnmoTjgILmoLnmja7kvaDnmoQganMg57yW5YaZ77yM5Yqo5oCB5Y675riy5p+T55S75biD5LiK55qE5Zu+5qGI77yM6YCC55So5LiA5Lqb5aSn6YeP5pWw5o2u5Lqk5LqS5L+u5pS555qE77yM5q+U6L6D5aSN5p2C55qE5Yqo55S744CC55Sx5LqO5a6D5LuF5LuF5piv5qC55o2u5L2g6K6+5a6a55qE5aSn5bCP77yM5a6D5piv5L6d6LWW5LqO5YiG6L6o546H55qE44CCXFxuIOiAjCBzdmcg5piv5LiA5Liq5Liq5YWD57Sg57uE5oiQ5Zyo5LiA6LW355qE77yMIOWMheWQqyBhbmltYXRlIOWFg+e0oO+8jOWPr+WBmuS4gOS6m+Wwj+Wwj+eahOWKqOeUu++8jCDlroPnmoTnn6Lph4/kvJjngrnkuZ/mm7TpgILlkIjlgZrkuIDkupvpq5jkv53nnJ/nmoTpnZnmgIHlm77niYfjgIJcIjsiXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0= \ No newline at end of file diff --git a/280.bundle.js b/280.bundle.js new file mode 100644 index 0000000..3a0f4fc --- /dev/null +++ b/280.bundle.js @@ -0,0 +1,2 @@ +"use strict";(self.webpackChunkreact_wyz=self.webpackChunkreact_wyz||[]).push([[280],{280:(n,t,o)=>{o.r(t),o.d(t,{default:()=>i});const i="作为一个程序员，工作到现在，也将近半年了。公司对员工的代码提交也会有 review 流程。代码的 review 来讲，一般就是看格式、命名、逻辑是否有错，代码是否还有可以抽象的地方，这里总结一下自己遇到的代码规范方面的问题，大家一起写规范的代码，做一个看上去专业码农吧。\n***\n#### **js规范**\n- 代码的缩进了，一般是两格或四格，我司采用的是四格，这里可以根据自己喜好和公司要求了。\n\n- 中英文之间有空格间隔，像这样: `我专业引用 English 单词`\n\n- 命名规范，命名的驼峰式不用再说了。这里具体情况具体分析一下\n - 变量的命名：小驼峰式\n - 函数的命名：小驼峰式\n - 常量：全部大写\n - 构造函数： 大驼峰式\n - 类的成员： 公共属性和方法就是小驼峰式， 私有属性和方法加上`-`前缀,然后是小驼峰式，如 `_nameFrist\n \n ---\n \n#### **css规范**\n- css 的基本命名, 自己刚写的时候以为也是写小驼峰式，后来就呵呵了。css 当中就是用 `-` 连接了， 如 `search-button`，在定义 id 的时候是用小驼峰了。\n\n- css 名字意思定义。这里有一个 BEM 的命名法则参考，可以看看我之前写的一篇博客[了解BEM](http://blog.csdn.net/dadadeganhuo/article/details/76600264)\n- css 命名的统一前缀， 在一个项目中，约定好同一个前缀，可避免样式的覆盖。\n\n- css 样式书写顺序：\n\t- 显示属性：display/list-style/position/float/clear …\n\t- 自身属性（盒模型）：width/height/margin/padding/border\n\t- 背景：background\n\t- 行高：line-height\n\t- 文本属性：color/font/text-decoration/text-align/...\n\t- 其他：cursor/z-index/zoom/overflow\n\t- CSS3属性：transform/transition/animation/box-shadow/border-radius\n\t- 如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照 -webkit- / -moz- / -ms- / -o- /\nstd的顺序进行添加，标准属性写在最后。\n\t- 链接的样式请严格按照如下顺序添加： a:link -> a:visited -> a:hover -> a:active\n\n- 代码优化，能合并的属性就合并写，没用的属性也删掉，避免重复样式，避免使用 `!important`\n\n---\n\n#### **git commit log 规则**\n\n- 首先就是commit 内容的分类了，如图片所示：\n![这里写图片描述](https://img-blog.csdn.net/20170830144139403?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)定好分类，分类后面可以加你本次修改具体文件，然后组织本次修改的内容，就写好了 commit log啦。比如：`feat(login): 新增登录验证功能`,这表达出了你再login文件上新增了一个验证的功能。编写正确的 log 信息，能够清楚的表述你写的代码目的。\n\n- commit 次数，这里我们每完成一个小点的时候，都可以 commit 一下，因为commit 是记录你完成一个项目的具体过程。\n\n---\n= = 之前没好好总结，今天写总结的时候，也去搜了搜别的文章，发现这样的文章其实挺多，自己以前都没怎么好好看看 = = 。\n欢迎补充啊~\n\n#### 参考 \n> [前端人员必看的CSS规范](https://www.douban.com/note/499976405/?type=like)\n> [Commit message 和 Change log 编写指南](http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html)\n"}}]); +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMjgwLmJ1bmRsZS5qcyIsIm1hcHBpbmdzIjoia0lBQUEsazZEIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vcmVhY3Rfd3l6Ly4uLy4uL2Jsb2dzL21hcmtkb3duL2NvZGUtZm9ybWF0Lm1kIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBkZWZhdWx0IFwi5L2c5Li65LiA5Liq56iL5bqP5ZGY77yM5bel5L2c5Yiw546w5Zyo77yM5Lmf5bCG6L+R5Y2K5bm05LqG44CC5YWs5Y+45a+55ZGY5bel55qE5Luj56CB5o+Q5Lqk5Lmf5Lya5pyJIHJldmlldyDmtYHnqIvjgILku6PnoIHnmoQgcmV2aWV3IOadpeiusu+8jOS4gOiIrOWwseaYr+eci+agvOW8j+OAgeWRveWQjeOAgemAu+i+keaYr+WQpuaciemUme+8jOS7o+eggeaYr+WQpui/mOacieWPr+S7peaKveixoeeahOWcsOaWue+8jOi/memHjOaAu+e7k+S4gOS4i+iHquW3semBh+WIsOeahOS7o+eggeinhOiMg+aWuemdoueahOmXrumimO+8jOWkp+WutuS4gOi1t+WGmeinhOiMg+eahOS7o+egge+8jOWBmuS4gOS4queci+S4iuWOu+S4k+S4mueggeWGnOWQp+OAglxcbioqKlxcbiMjIyMgKipqc+inhOiMgyoqXFxuLSDku6PnoIHnmoTnvKnov5vkuobvvIzkuIDoiKzmmK/kuKTmoLzmiJblm5vmoLzvvIzmiJHlj7jph4fnlKjnmoTmmK/lm5vmoLzvvIzov5nph4zlj6/ku6XmoLnmja7oh6rlt7Hllpzlpb3lkozlhazlj7jopoHmsYLkuobjgIJcXG5cXG4tIOS4reiLseaWh+S5i+mXtOacieepuuagvOmXtOmalO+8jOWDj+i/meagtzogYOaIkeS4k+S4muW8leeUqCBFbmdsaXNoIOWNleivjWBcXG5cXG4tIOWRveWQjeinhOiMg++8jOWRveWQjeeahOmpvOWzsOW8j+S4jeeUqOWGjeivtOS6huOAgui/memHjOWFt+S9k+aDheWGteWFt+S9k+WIhuaekOS4gOS4i1xcbiAgIC0g5Y+Y6YeP55qE5ZG95ZCN77ya5bCP6am85bOw5byPXFxuICAgLSDlh73mlbDnmoTlkb3lkI3vvJrlsI/pqbzls7DlvI9cXG4gICAtIOW4uOmHj++8muWFqOmDqOWkp+WGmVxcbiAgIC0g5p6E6YCg5Ye95pWw77yaIOWkp+mpvOWzsOW8j1xcbiAgIC0g57G755qE5oiQ5ZGY77yaIOWFrOWFseWxnuaAp+WSjOaWueazleWwseaYr+Wwj+mpvOWzsOW8j++8jCDnp4HmnInlsZ7mgKflkozmlrnms5XliqDkuIpgLWDliY3nvIAs54S25ZCO5piv5bCP6am85bOw5byP77yM5aaCIGBfbmFtZUZyaXN0XFxuICBcXG4gIC0tLVxcbiAgIFxcbiMjIyMgKipjc3Pop4TojIMqKlxcbi0gY3NzIOeahOWfuuacrOWRveWQjSwgIOiHquW3seWImuWGmeeahOaXtuWAmeS7peS4uuS5n+aYr+WGmeWwj+mpvOWzsOW8j++8jOWQjuadpeWwseWRteWRteS6huOAgmNzcyDlvZPkuK3lsLHmmK/nlKggYC1gIOi/nuaOpeS6hu+8jCDlpoIgYHNlYXJjaC1idXR0b25g77yM5Zyo5a6a5LmJIGlkIOeahOaXtuWAmeaYr+eUqOWwj+mpvOWzsOS6huOAglxcblxcbi0gY3NzIOWQjeWtl+aEj+aAneWumuS5ieOAgui/memHjOacieS4gOS4qiBCRU0g55qE5ZG95ZCN5rOV5YiZ5Y+C6ICD77yM5Y+v5Lul55yL55yL5oiR5LmL5YmN5YaZ55qE5LiA56+H5Y2a5a6iW+S6huino0JFTV0oaHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVvL2FydGljbGUvZGV0YWlscy83NjYwMDI2NClcXG4tIGNzcyDlkb3lkI3nmoTnu5/kuIDliY3nvIDvvIwg5Zyo5LiA5Liq6aG555uu5Lit77yM57qm5a6a5aW95ZCM5LiA5Liq5YmN57yA77yM5Y+v6YG/5YWN5qC35byP55qE6KaG55uW44CCXFxuXFxuLSBjc3Mg5qC35byP5Lmm5YaZ6aG65bqP77yaXFxuXFx0LSDmmL7npLrlsZ7mgKfvvJpkaXNwbGF5L2xpc3Qtc3R5bGUvcG9zaXRpb24vZmxvYXQvY2xlYXIg4oCmXFxuXFx0LSDoh6rouqvlsZ7mgKfvvIjnm5LmqKHlnovvvInvvJp3aWR0aC9oZWlnaHQvbWFyZ2luL3BhZGRpbmcvYm9yZGVyXFxuXFx0LSDog4zmma/vvJpiYWNrZ3JvdW5kXFxuXFx0LSDooYzpq5jvvJpsaW5lLWhlaWdodFxcblxcdC0g5paH5pys5bGe5oCn77yaY29sb3IvZm9udC90ZXh0LWRlY29yYXRpb24vdGV4dC1hbGlnbi8uLi5cXG5cXHQtIOWFtuS7lu+8mmN1cnNvci96LWluZGV4L3pvb20vb3ZlcmZsb3dcXG5cXHQtIENTUzPlsZ7mgKfvvJp0cmFuc2Zvcm0vdHJhbnNpdGlvbi9hbmltYXRpb24vYm94LXNoYWRvdy9ib3JkZXItcmFkaXVzXFxuXFx0LSDlpoLmnpzkvb/nlKhDU1Mz55qE5bGe5oCn77yM5aaC5p6c5pyJ5b+F6KaB5Yqg5YWl5rWP6KeI5Zmo5YmN57yA77yM5YiZ5oyJ54WnIC13ZWJraXQtIC8gLW1vei0gLyAtbXMtIC8gLW8tIC9cXG5zdGTnmoTpobrluo/ov5vooYzmt7vliqDvvIzmoIflh4blsZ7mgKflhpnlnKjmnIDlkI7jgIJcXG5cXHQtIOmTvuaOpeeahOagt+W8j+ivt+S4peagvOaMieeFp+WmguS4i+mhuuW6j+a3u+WKoO+8miBhOmxpbmsgLT4gYTp2aXNpdGVkIC0+IGE6aG92ZXIgLT4gYTphY3RpdmVcXG5cXG4tIOS7o+eggeS8mOWMlu+8jOiDveWQiOW5tueahOWxnuaAp+WwseWQiOW5tuWGme+8jOayoeeUqOeahOWxnuaAp+S5n+WIoOaOie+8jOmBv+WFjemHjeWkjeagt+W8j++8jOmBv+WFjeS9v+eUqCBgIWltcG9ydGFudGBcXG5cXG4tLS1cXG5cXG4jIyMjICoqZ2l0IGNvbW1pdCBsb2cg6KeE5YiZKipcXG5cXG4tIOmmluWFiOWwseaYr2NvbW1pdCDlhoXlrrnnmoTliIbnsbvkuobvvIzlpoLlm77niYfmiYDnpLrvvJpcXG4hW+i/memHjOWGmeWbvueJh+aPj+i/sF0oaHR0cHM6Ly9pbWctYmxvZy5jc2RuLm5ldC8yMDE3MDgzMDE0NDEzOTQwMz93YXRlcm1hcmsvMi90ZXh0L2FIUjBjRG92TDJKc2IyY3VZM05rYmk1dVpYUXZaR0ZrWVdSbFoyRnVhSFZ2L2ZvbnQvNWE2TDVMMlQvZm9udHNpemUvNDAwL2ZpbGwvSTBKQlFrRkNNQT09L2Rpc3NvbHZlLzcwL2dyYXZpdHkvU291dGhFYXN0KeWumuWlveWIhuexu++8jOWIhuexu+WQjumdouWPr+S7peWKoOS9oOacrOasoeS/ruaUueWFt+S9k+aWh+S7tu+8jOeEtuWQjue7hOe7h+acrOasoeS/ruaUueeahOWGheWuue+8jOWwseWGmeWlveS6hiBjb21taXQgbG9n5ZWm44CC5q+U5aaC77yaYGZlYXQobG9naW4pOiDmlrDlop7nmbvlvZXpqozor4Hlip/og71gLOi/meihqOi+vuWHuuS6huS9oOWGjWxvZ2lu5paH5Lu25LiK5paw5aKe5LqG5LiA5Liq6aqM6K+B55qE5Yqf6IO944CC57yW5YaZ5q2j56Gu55qEIGxvZyDkv6Hmga/vvIzog73lpJ/muIXmpZrnmoTooajov7DkvaDlhpnnmoTku6PnoIHnm67nmoTjgIJcXG5cXG4tIGNvbW1pdCDmrKHmlbDvvIzov5nph4zmiJHku6zmr4/lrozmiJDkuIDkuKrlsI/ngrnnmoTml7blgJnvvIzpg73lj6/ku6UgY29tbWl0IOS4gOS4i++8jOWboOS4umNvbW1pdCDmmK/orrDlvZXkvaDlrozmiJDkuIDkuKrpobnnm67nmoTlhbfkvZPov4fnqIvjgIJcXG5cXG4tLS1cXG49ID0g5LmL5YmN5rKh5aW95aW95oC757uT77yM5LuK5aSp5YaZ5oC757uT55qE5pe25YCZ77yM5Lmf5Y675pCc5LqG5pCc5Yir55qE5paH56ug77yM5Y+R546w6L+Z5qC355qE5paH56ug5YW25a6e5oy65aSa77yM6Ieq5bex5Lul5YmN6YO95rKh5oCO5LmI5aW95aW955yL55yLID0gPSDjgIJcXG7mrKLov47ooaXlhYXllYp+XFxuXFxuIyMjIyDlj4LogIMgXFxuPiBb5YmN56uv5Lq65ZGY5b+F55yL55qEQ1NT6KeE6IyDXShodHRwczovL3d3dy5kb3ViYW4uY29tL25vdGUvNDk5OTc2NDA1Lz90eXBlPWxpa2UpXFxuPiBbQ29tbWl0IG1lc3NhZ2Ug5ZKMIENoYW5nZSBsb2cg57yW5YaZ5oyH5Y2XXShodHRwOi8vd3d3LnJ1YW55aWZlbmcuY29tL2Jsb2cvMjAxNi8wMS9jb21taXRfbWVzc2FnZV9jaGFuZ2VfbG9nLmh0bWwpXFxuXCI7Il0sIm5hbWVzIjpbXSwic291cmNlUm9vdCI6IiJ9 \ No newline at end of file diff --git a/344.bundle.js b/344.bundle.js new file mode 100644 index 0000000..782c780 --- /dev/null +++ b/344.bundle.js @@ -0,0 +1,2 @@ +"use strict";(self.webpackChunkreact_wyz=self.webpackChunkreact_wyz||[]).push([[344],{344:(e,n,t)=>{t.r(n),t.d(n,{default:()=>s});const s="#### 一 webpack 是什么？\n它是一个打包工具。 噗，完啦？\n\n来，我们看官方概念: webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。\n\n内部如何构建一个依赖图，我们知道 webpack 会配置一个入口，这就是从这入口文件开始， 找到所有被依赖到的文件，比如其他 js / image / json 文件等，然后通过 loader 对这些文件进行处理、编译、打包、优化，生成一个 bundle 或者多个 bundle。\n\n#### 它的原理\n通过以上，主要就是找依赖, 通过配置处理相应环境，根据你的需要配置插件进行优化（如 profill、babel、 miniSize etc) 打包出文件，可以放到服务器上运行。 \n\n关于找依赖，可以想到关于模块化的语法: import 、require、@import etc， 通过解析对应的语法寻找相应的依赖。然后通过读取依赖到的文件，根据对应的 loader 进行处理文件，最后根据你的插件配置，分割，压缩或注入等，根据 output config输出到对应的文件夹。\n\n这里推荐一篇 [webpack原理](https://juejin.im/entry/5b0e3eba5188251534379615) 文章, 下面就提一提我最近遇到的一个很神奇的问题吧\n\n#### 关于 [tree shaking](https://webpack.docschina.org/guides/tree-shaking/)\n想象抖一抖树，枯萎的叶子就会脱落。 这里指的是把没有用到的代码删除掉，从而减小文件的大小。通过这一优化，在引用多个第三方库时，能够大大的减少你的文件大小，但请确定这个包是没有副作用的。\n>什么是副作用?\n就是在导入时会自行运行一段函数，从而改变了 window 变量啊或者其他的变量以供导入的包能正常运行， 而不是只单单 export 了变量。\n\n它是依赖于 es2015 的 `静态导入导出( import / export)`。在打包时就会通过 import 确定引用包的 export 导出的某一个变量之一， 在告知没有副作用的情况下，删除掉没有用到的其他的导出代码。 \n> 静态导入是指一开始就默认加载这个文件，而不是一步一步执行代码判断逻辑，去导入对应文件\n\nwebpack 在生成环境下，默认打开树抖动配置, 如下配置。\n```\noptimization： {\n\tprovidedExports: true,\n\tusedExports: true,\n\tsideEffects: true,\n\tconcatenateModules: true,\n }\n ```\n \n `providedExports` 开启 export 导出收集；\n` usedExportts` 告诉webpack确定每个模块的已使用导出；\n` concatenateModules` 告诉webpack查找模块图的各个部分，这些部分可以安全地连接成一个模块；\n`sideEffects` 告诉webpack识别 sideEffects 标志的 package.json 或规则以跳过模块，这些模块在未使用导出时被标记为不包含副作用， 则可以把无副作用的未使用的导出进行删除。\n\n所以如果你的包无副作用，推荐在 package.json 设置 `sideEffects: false` 开启树抖动。\n注意, 它会删掉样式文件，因为样式文件是没有 export 的。所以我们需要声明样式文件是有副作用的。\n在 package.json 中设置：\n```\nsideEffects: [\n\t'*.css'\n]\n```\n>总结，为了利用树木摇晃，你必须：\n> 1 使用ES2015模块语法 (配置 babel 禁止转义 es6 模块语义）\n> 2 将\"sideEffects\"属性添加到项目的 package.json文件中。\n> 3 配合压缩工具一起使用\n\n\n[demo](https://github.com/cleverboy32/tree-shaking-css)\n通过配置 `webpack.prod.js` sideEffects 值， 你可以看到 build 时 main.js 文件的大小发生改变。"}}]); +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMzQ0LmJ1bmRsZS5qcyIsIm1hcHBpbmdzIjoia0lBQUEsZzZEIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vcmVhY3Rfd3l6Ly4uLy4uL2Jsb2dzL21hcmtkb3duL3dlYnBhY2subWQiXSwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGRlZmF1bHQgXCIjIyMjIOS4gCAgd2VicGFjayDmmK/ku4DkuYjvvJ9cXG7lroPmmK/kuIDkuKrmiZPljIXlt6XlhbfjgIIg5ZmX77yM5a6M5ZWm77yfXFxuXFxu5p2l77yM5oiR5Lus55yL5a6Y5pa55qaC5b+1OiAgd2VicGFjayDmmK/kuIDkuKrnjrDku6MgSmF2YVNjcmlwdCDlupTnlKjnqIvluo/nmoTpnZnmgIHmqKHlnZfmiZPljIXlt6XlhbfjgILlvZMgd2VicGFjayDlpITnkIblupTnlKjnqIvluo/ml7bvvIzlroPkvJrlnKjlhoXpg6jmnoTlu7rkuIDkuKog5L6d6LWW5Zu+KGRlcGVuZGVuY3kgZ3JhcGgp77yM5q2k5L6d6LWW5Zu+5Lya5pig5bCE6aG555uu5omA6ZyA55qE5q+P5Liq5qih5Z2X77yM5bm255Sf5oiQ5LiA5Liq5oiW5aSa5LiqIGJ1bmRsZeOAglxcblxcbuWGhemDqOWmguS9leaehOW7uuS4gOS4quS+nei1luWbvu+8jOaIkeS7rOefpemBkyB3ZWJwYWNrIOS8mumFjee9ruS4gOS4quWFpeWPo++8jOi/meWwseaYr+S7jui/meWFpeWPo+aWh+S7tuW8gOWni++8jCDmib7liLDmiYDmnInooqvkvp3otZbliLDnmoTmlofku7bvvIzmr5TlpoLlhbbku5YganMgLyBpbWFnZSAvIGpzb24g5paH5Lu2562J77yM54S25ZCO6YCa6L+HIGxvYWRlciDlr7nov5nkupvmlofku7bov5vooYzlpITnkIbjgIHnvJbor5HjgIHmiZPljIXjgIHkvJjljJbvvIznlJ/miJDkuIDkuKogYnVuZGxlIOaIluiAheWkmuS4qiBidW5kbGXjgIJcXG5cXG4jIyMjIOWug+eahOWOn+eQhlxcbumAmui/h+S7peS4iu+8jOS4u+imgeWwseaYr+aJvuS+nei1liwg6YCa6L+H6YWN572u5aSE55CG55u45bqU546v5aKD77yM5qC55o2u5L2g55qE6ZyA6KaB6YWN572u5o+S5Lu26L+b6KGM5LyY5YyW77yI5aaCIHByb2ZpbGzjgIFiYWJlbOOAgSBtaW5pU2l6ZSBldGMpIOaJk+WMheWHuuaWh+S7tu+8jOWPr+S7peaUvuWIsOacjeWKoeWZqOS4iui/kOihjOOAgiBcXG5cXG7lhbPkuo7mib7kvp3otZbvvIzlj6/ku6Xmg7PliLDlhbPkuo7mqKHlnZfljJbnmoTor63ms5U6IGltcG9ydCDjgIFyZXF1aXJl44CBQGltcG9ydCBldGPvvIwg6YCa6L+H6Kej5p6Q5a+55bqU55qE6K+t5rOV5a+75om+55u45bqU55qE5L6d6LWW44CC54S25ZCO6YCa6L+H6K+75Y+W5L6d6LWW5Yiw55qE5paH5Lu277yM5qC55o2u5a+55bqU55qEIGxvYWRlciDov5vooYzlpITnkIbmlofku7bvvIzmnIDlkI7moLnmja7kvaDnmoTmj5Lku7bphY3nva7vvIzliIblibLvvIzljovnvKnmiJbms6jlhaXnrYnvvIzmoLnmja4gb3V0cHV0IGNvbmZpZ+i+k+WHuuWIsOWvueW6lOeahOaWh+S7tuWkueOAglxcblxcbui/memHjOaOqOiNkOS4gOevhyBbd2VicGFja+WOn+eQhl0oaHR0cHM6Ly9qdWVqaW4uaW0vZW50cnkvNWIwZTNlYmE1MTg4MjUxNTM0Mzc5NjE1KSDmlofnq6AsIOS4i+mdouWwseaPkOS4gOaPkOaIkeacgOi/kemBh+WIsOeahOS4gOS4quW+iOelnuWlh+eahOmXrumimOWQp1xcblxcbiMjIyMg5YWz5LqOIFt0cmVlIHNoYWtpbmddKGh0dHBzOi8vd2VicGFjay5kb2NzY2hpbmEub3JnL2d1aWRlcy90cmVlLXNoYWtpbmcvKVxcbuaDs+ixoeaKluS4gOaKluagke+8jOaer+iQjueahOWPtuWtkOWwseS8muiEseiQveOAgiDov5nph4zmjIfnmoTmmK/miormsqHmnInnlKjliLDnmoTku6PnoIHliKDpmaTmjonvvIzku47ogIzlh4/lsI/mlofku7bnmoTlpKflsI/jgILpgJrov4fov5nkuIDkvJjljJbvvIzlnKjlvJXnlKjlpJrkuKrnrKzkuInmlrnlupPml7bvvIzog73lpJ/lpKflpKfnmoTlh4/lsJHkvaDnmoTmlofku7blpKflsI/vvIzkvYbor7fnoa7lrprov5nkuKrljIXmmK/msqHmnInlia/kvZznlKjnmoTjgIJcXG4+5LuA5LmI5piv5Ymv5L2c55SoP1xcbuWwseaYr+WcqOWvvOWFpeaXtuS8muiHquihjOi/kOihjOS4gOauteWHveaVsO+8jOS7juiAjOaUueWPmOS6hiB3aW5kb3cg5Y+Y6YeP5ZWK5oiW6ICF5YW25LuW55qE5Y+Y6YeP5Lul5L6b5a+85YWl55qE5YyF6IO95q2j5bi46L+Q6KGM77yMIOiAjOS4jeaYr+WPquWNleWNlSBleHBvcnQg5LqG5Y+Y6YeP44CCXFxuXFxu5a6D5piv5L6d6LWW5LqOIGVzMjAxNSDnmoQgYOmdmeaAgeWvvOWFpeWvvOWHuiggaW1wb3J0IC8gZXhwb3J0KWDjgILlnKjmiZPljIXml7blsLHkvJrpgJrov4cgaW1wb3J0IOehruWumuW8leeUqOWMheeahCBleHBvcnQg5a+85Ye655qE5p+Q5LiA5Liq5Y+Y6YeP5LmL5LiA77yMIOWcqOWRiuefpeayoeacieWJr+S9nOeUqOeahOaDheWGteS4i++8jOWIoOmZpOaOieayoeacieeUqOWIsOeahOWFtuS7lueahOWvvOWHuuS7o+eggeOAgiBcXG4+IOmdmeaAgeWvvOWFpeaYr+aMh+S4gOW8gOWni+Wwsem7mOiupOWKoOi9vei/meS4quaWh+S7tu+8jOiAjOS4jeaYr+S4gOatpeS4gOatpeaJp+ihjOS7o+eggeWIpOaWremAu+i+ke+8jOWOu+WvvOWFpeWvueW6lOaWh+S7tlxcblxcbndlYnBhY2sg5Zyo55Sf5oiQ546v5aKD5LiL77yM6buY6K6k5omT5byA5qCR5oqW5Yqo6YWN572uLCDlpoLkuIvphY3nva7jgIJcXG5gYGBcXG5vcHRpbWl6YXRpb27vvJoge1xcblxcdHByb3ZpZGVkRXhwb3J0czogdHJ1ZSxcXG5cXHR1c2VkRXhwb3J0czogdHJ1ZSxcXG5cXHRzaWRlRWZmZWN0czogdHJ1ZSxcXG5cXHRjb25jYXRlbmF0ZU1vZHVsZXM6IHRydWUsXFxuIH1cXG4gYGBgXFxuIFxcbiBgcHJvdmlkZWRFeHBvcnRzYCDlvIDlkK8gZXhwb3J0IOWvvOWHuuaUtumbhu+8m1xcbmAgdXNlZEV4cG9ydHRzYCDlkYror4l3ZWJwYWNr56Gu5a6a5q+P5Liq5qih5Z2X55qE5bey5L2/55So5a+85Ye677ybXFxuYCBjb25jYXRlbmF0ZU1vZHVsZXNgICDlkYror4l3ZWJwYWNr5p+l5om+5qih5Z2X5Zu+55qE5ZCE5Liq6YOo5YiG77yM6L+Z5Lqb6YOo5YiG5Y+v5Lul5a6J5YWo5Zyw6L+e5o6l5oiQ5LiA5Liq5qih5Z2X77ybXFxuYHNpZGVFZmZlY3RzYCDlkYror4l3ZWJwYWNr6K+G5YirIHNpZGVFZmZlY3RzIOagh+W/l+eahCBwYWNrYWdlLmpzb24g5oiW6KeE5YiZ5Lul6Lez6L+H5qih5Z2X77yM6L+Z5Lqb5qih5Z2X5Zyo5pyq5L2/55So5a+85Ye65pe26KKr5qCH6K6w5Li65LiN5YyF5ZCr5Ymv5L2c55So77yMIOWImeWPr+S7peaKiuaXoOWJr+S9nOeUqOeahOacquS9v+eUqOeahOWvvOWHuui/m+ihjOWIoOmZpOOAglxcblxcbuaJgOS7peWmguaenOS9oOeahOWMheaXoOWJr+S9nOeUqO+8jOaOqOiNkOWcqCBwYWNrYWdlLmpzb24g6K6+572uIGBzaWRlRWZmZWN0czogZmFsc2VgIOW8gOWQr+agkeaKluWKqOOAglxcbuazqOaEjywg5a6D5Lya5Yig5o6J5qC35byP5paH5Lu277yM5Zug5Li65qC35byP5paH5Lu25piv5rKh5pyJIGV4cG9ydCDnmoTjgILmiYDku6XmiJHku6zpnIDopoHlo7DmmI7moLflvI/mlofku7bmmK/mnInlia/kvZznlKjnmoTjgIJcXG7lnKggcGFja2FnZS5qc29uIOS4reiuvue9ru+8mlxcbmBgYFxcbnNpZGVFZmZlY3RzOiBbXFxuXFx0JyouY3NzJ1xcbl1cXG5gYGBcXG4+5oC757uT77yM5Li65LqG5Yip55So5qCR5pyo5pGH5pmD77yM5L2g5b+F6aG777yaXFxuPiAxIOS9v+eUqEVTMjAxNeaooeWdl+ivreazlSAo6YWN572uIGJhYmVsIOemgeatoui9rOS5iSBlczYg5qih5Z2X6K+t5LmJ77yJXFxuPiAyIOWwhlxcXCJzaWRlRWZmZWN0c1xcXCLlsZ7mgKfmt7vliqDliLDpobnnm67nmoQgcGFja2FnZS5qc29u5paH5Lu25Lit44CCXFxuPiAgMyDphY3lkIjljovnvKnlt6XlhbfkuIDotbfkvb/nlKhcXG5cXG5cXG5bZGVtb10oaHR0cHM6Ly9naXRodWIuY29tL2NsZXZlcmJveTMyL3RyZWUtc2hha2luZy1jc3MpXFxu6YCa6L+H6YWN572uICBgd2VicGFjay5wcm9kLmpzYCBzaWRlRWZmZWN0cyDlgLzvvIwg5L2g5Y+v5Lul55yL5YiwIGJ1aWxkIOaXtiBtYWluLmpzIOaWh+S7tueahOWkp+Wwj+WPkeeUn+aUueWPmOOAglwiOyJdLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIifQ== \ No newline at end of file diff --git a/360.bundle.js b/360.bundle.js new file mode 100644 index 0000000..5eb8839 --- /dev/null +++ b/360.bundle.js @@ -0,0 +1,2 @@ +"use strict";(self.webpackChunkcboy_blog=self.webpackChunkcboy_blog||[]).push([[360],{360:function(e,n,c){c.r(n),c.d(n,{default:function(){return t}});var r=c(358);const u={class:"component-readme"},o={};var t=(0,c(389).A)(o,[["render",function(e,n){return(0,r.uX)(),(0,r.CE)("div",u,n[0]||(n[0]=[(0,r.Lk)("h1",null,"cleverboy 的学习笔记",-1)]))}]])}}]); +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMzYwLmJ1bmRsZS5qcyIsIm1hcHBpbmdzIjoiNktBQWVBLE1BQU0sb0JDQ2ZDLEVBQVMsQ0FBQyxFQUtoQixPQUZpQyxFLE9BQUEsR0FBZ0JBLEVBQVEsQ0FBQyxDQUFDLFMsZ0NESmpEQyxFQUFBQSxFQUFBQSxJQUNKLE1BRElDLEVBQ0pDLEVBQUEsS0FBQUEsRUFBQSxLQURrQ0MsRUFBQUEsRUFBQUEsSUFBd0IsVUFBcEIsbUJBQWUsSyIsInNvdXJjZXMiOlsid2VicGFjazovL2Nib3ktYmxvZy8uLi8uLi9ibG9ncy9tYXJrZG93bi9yZWFkbWUubWQiLCJ3ZWJwYWNrOi8vY2JveS1ibG9nLy4uLy4uL2Jsb2dzL21hcmtkb3duL3JlYWRtZS5tZD8xZTYzIl0sInNvdXJjZXNDb250ZW50IjpbIjx0ZW1wbGF0ZT48ZGl2IGNsYXNzPVwiY29tcG9uZW50LXJlYWRtZVwiPjxoMT5jbGV2ZXJib3kg55qE5a2m5Lmg56yU6K6wPC9oMT5cbjwvZGl2PjwvdGVtcGxhdGU+IiwiaW1wb3J0IHsgcmVuZGVyIH0gZnJvbSBcIi4vcmVhZG1lLm1kP3Z1ZSZ0eXBlPXRlbXBsYXRlJmlkPWQ4ZTllMWQ0XCJcbmNvbnN0IHNjcmlwdCA9IHt9XG5cbmltcG9ydCBleHBvcnRDb21wb25lbnQgZnJvbSBcIi4uLy4uL25vZGVfbW9kdWxlcy8ucG5wbS92dWUtbG9hZGVyQDE3LjQuMl9AdnVlK2NvbXBpbGVyLXNmY0AzLjUuM192dWVAMy41LjNfdHlwZXNjcmlwdEA1LjUuNF9fd2VicGFja0A1Ljk0LjBfd2VicGFjay1fZnVxa3dnZ3BsaGV5M29pdnR3ZTJzdGRvNmUvbm9kZV9tb2R1bGVzL3Z1ZS1sb2FkZXIvZGlzdC9leHBvcnRIZWxwZXIuanNcIlxuY29uc3QgX19leHBvcnRzX18gPSAvKiNfX1BVUkVfXyovZXhwb3J0Q29tcG9uZW50KHNjcmlwdCwgW1sncmVuZGVyJyxyZW5kZXJdXSlcblxuZXhwb3J0IGRlZmF1bHQgX19leHBvcnRzX18iXSwibmFtZXMiOlsiY2xhc3MiLCJzY3JpcHQiLCJfY3JlYXRlRWxlbWVudEJsb2NrIiwiX2hvaXN0ZWRfMSIsIl9jYWNoZSIsIl9jcmVhdGVFbGVtZW50Vk5vZGUiXSwic291cmNlUm9vdCI6IiJ9 \ No newline at end of file diff --git a/403.bundle.js b/403.bundle.js new file mode 100644 index 0000000..207760b --- /dev/null +++ b/403.bundle.js @@ -0,0 +1,2 @@ +"use strict";(self.webpackChunkcboy_blog=self.webpackChunkcboy_blog||[]).push([[403],{403:function(t,e,o){o.r(e),o.d(e,{default:function(){return i}});var s=o(358);const a={class:"component-aliyun-server"},c={};var i=(0,o(389).A)(c,[["render",function(t,e){return(0,s.uX)(),(0,s.CE)("div",a,e[0]||(e[0]=[(0,s.Fv)('

购买服务器

学生购买可以使用阿里云优惠专享， 每个月只要9.9 就好了。这里我用的是学生优惠，机型内存什么都限定好了的。所以- - 没什么可以说的。关于国内外服务器的区别就是，如果你购买了国外的服务器，就可以在云服务器上搭梯子访问国外的网站，也就是翻墙了。

安装环境

因为服务器默认 linux 系统，所以这里讲怎么配置 linux 云服务环境。 我第一次使用的时候，还以为是要去安装一个界面化桌面，以便我这个命令小白可以操作。但是，对于只有2G 的内存来说安装了之后将会很卡很卡。后来我问学长，他说不要安装界面化，使用命令就好了。

首先关于远程服务器的登录， 默认系统的用户名是 root, 然后登录密码可以在控制台进行修改。如下图点击重置密码。 重置密码处

重置之后，然后点击远程连接，就可以连接登录到你的服务器上了。这里要将一点，如果你是 mac 电脑的话，可以在你的电脑上通过 ssh 登录到你的服务器。 命令如下： ssh root@你的公网IP，比如 ssh root@120.78.32.12 然后输入密码即可连接成功。

登录成功图

接下来在终端中输入命令。配置环境。如果你是配置 java 环境，那么可以去谷歌一下如何在 linux 中配置 java 环境，这里我是配置的 node 环境，就讲一下如何配置 node 环境以及 npm。

这里我用的是源码安装。首先安装 node 编译依赖的第三方模块 yum -y install gcc make gcc-c++ openssl-devel

然后下载 node 的源码包 这里写图片描述

node 官网的源码 包。 wget https://nodejs.org/dist/v8.9.4/node-v8.9.4.tar.gz

你下载的时候可以手动改成当前最新版本。下载后，进行解压 tar -zxvf node-v8.9.4.tar.gz, 然后进入解压后的文件夹 cd node-v8.9.4, 依次 ./configure makesudo make install 这里编译时间会有点久，请耐心等待- - 查看安装成功 这里写图片描述

安装 npm 同样下载 npm 包 wget http://nodejs.org/dist/npm/npm-1.4.9.zip 解压 tar -zxvf npm-1.4.9.tgz 查看是否安装成功 npm -v

这就是 node 环境配置了， 然后就是 mysql 数据库。 http://blog.csdn.net/win7system/article/details/53579500

关于项目的上传，如果你本地编写了代码，想上传至服务器，第一个方式，可以是使用 ftp 上传文件。 第二个方式，就是在你的服务器上搭建一个 git 服务器，通过从服务器推送和克隆项目来获取文件。这里我使用的是第二种方法，参见教程： https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137583770360579bc4b458f044ce7afed3df579123eca000 这里注意一下， 关于 设置 ssh 登录，一定要把创建的 .ssh 文件放到你创建的用户下，如我这里是 git 用户，路径就是 这里写图片描述

放置在正确位置之后，还要注意项目的归属者也要是 git 用户，这样才会在 git 用户里匹配到对应的 ssh key。也就是下面这一个步骤 这里写图片描述

还有一点要注意的就是，你再本地推送了代码上 git 服务器之后，想要在云服务器上获取到代码， 需要在服务器上再次克隆 git clone git@server:/srv/sample.git 项目，git pull 获取到代码。 这里也可以通过自己配置 git 服务器的钩子函数，使其自动更新代码，我还没配置，就先不说了 - -。

好了，现在现在基本环境配置好了就可以开始开发你的项目啦。

另外附： 项目在服务器上启动了，发现在本地电脑无法通过 ip 访问，那么可能是你的端口号没有开放，需要去服务器上设置安全组。 具体添加方法 ，以及其他一些关于服务器的配置，都可以随时点击右侧的 点我提问，像云博士提问。 = = 这里写图片描述

',19)]))}]])}}]); +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiNDAzLmJ1bmRsZS5qcyIsIm1hcHBpbmdzIjoiNktBQWVBLE1BQU0sMkJDQ2ZDLEVBQVMsQ0FBQyxFQUtoQixPQUZpQyxFLE9BQUEsR0FBZ0JBLEVBQVEsQ0FBQyxDQUFDLFMsZ0NESmpEQyxFQUFBQSxFQUFBQSxJQTRDSixNQTVDSUMsRUE0Q0pDLEVBQUEsS0FBQUEsRUFBQSxLQTVDTkMsRUFBQUEsRUFBQUEsSUFBQSxrcUgiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9jYm95LWJsb2cvLi4vLi4vYmxvZ3MvbWFya2Rvd24vYWxpeXVuLXNlcnZlci5tZCIsIndlYnBhY2s6Ly9jYm95LWJsb2cvLi4vLi4vYmxvZ3MvbWFya2Rvd24vYWxpeXVuLXNlcnZlci5tZD85M2VlIl0sInNvdXJjZXNDb250ZW50IjpbIjx0ZW1wbGF0ZT48ZGl2IGNsYXNzPVwiY29tcG9uZW50LWFsaXl1bi1zZXJ2ZXJcIj48aDM+6LSt5Lmw5pyN5Yqh5ZmoPC9oMz5cbjxwPuWtpueUn+i0reS5sOWPr+S7peS9v+eUqOmYv+mHjOS6keS8mOaDoOS4k+S6q++8jCDmr4/kuKrmnIjlj6ropoE5Ljkg5bCx5aW95LqG44CC6L+Z6YeM5oiR55So55qE5piv5a2m55Sf5LyY5oOg77yM5py65Z6L5YaF5a2Y5LuA5LmI6YO96ZmQ5a6a5aW95LqG55qE44CC5omA5LulLSAtIOayoeS7gOS5iOWPr+S7peivtOeahOOAguWFs+S6juWbveWGheWkluacjeWKoeWZqOeahOWMuuWIq+WwseaYr++8jOWmguaenOS9oOi0reS5sOS6huWbveWklueahOacjeWKoeWZqO+8jOWwseWPr+S7peWcqOS6keacjeWKoeWZqOS4iuaQreair+WtkOiuv+mXruWbveWklueahOe9keerme+8jOS5n+WwseaYr+e/u+WimeS6huOAgjwvcD5cbjxoMz7lronoo4Xnjq/looM8L2gzPlxuPHA+5Zug5Li65pyN5Yqh5Zmo6buY6K6kIGxpbnV4IOezu+e7n++8jOaJgOS7pei/memHjOiusuaAjuS5iOmFjee9riBsaW51eCDkupHmnI3liqHnjq/looPjgIJcbuaIkeesrOS4gOasoeS9v+eUqOeahOaXtuWAme+8jOi/mOS7peS4uuaYr+imgeWOu+WuieijheS4gOS4queVjOmdouWMluahjOmdou+8jOS7peS+v+aIkei/meS4quWRveS7pOWwj+eZveWPr+S7peaTjeS9nOOAguS9huaYr++8jOWvueS6juWPquaciTJHIOeahOWGheWtmOadpeivtOWuieijheS6huS5i+WQjuWwhuS8muW+iOWNoeW+iOWNoeOAguWQjuadpeaIkemXruWtpumVv++8jOS7luivtOS4jeimgeWuieijheeVjOmdouWMlu+8jOS9v+eUqOWRveS7pOWwseWlveS6huOAgjwvcD5cbjxwPummluWFiOWFs+S6jui/nOeoi+acjeWKoeWZqOeahOeZu+W9le+8jCDpu5jorqTns7vnu5/nmoTnlKjmiLflkI3mmK8gcm9vdCwg54S25ZCO55m75b2V5a+G56CB5Y+v5Lul5Zyo5o6n5Yi25Y+w6L+b6KGM5L+u5pS544CC5aaC5LiL5Zu+54K55Ye76YeN572u5a+G56CB44CCXG48aW1nIHNyYz1cImh0dHBzOi8vaW1nLWJsb2cuY3Nkbi5uZXQvMjAxODAxMDcxNzAwNTQ5MTg/d2F0ZXJtYXJrLzIvdGV4dC9hSFIwY0RvdkwySnNiMmN1WTNOa2JpNXVaWFF2WkdGa1lXUmxaMkZ1YUhWdi9mb250LzVhNkw1TDJUL2ZvbnRzaXplLzQwMC9maWxsL0kwSkJRa0ZDTUE9PS9kaXNzb2x2ZS83MC9ncmF2aXR5L1NvdXRoRWFzdFwiIGFsdD1cIumHjee9ruWvhueggeWkhFwiPjwvcD5cbjxwPumHjee9ruS5i+WQju+8jOeEtuWQjueCueWHu+i/nOeoi+i/nuaOpe+8jOWwseWPr+S7pei/nuaOpeeZu+W9leWIsOS9oOeahOacjeWKoeWZqOS4iuS6huOAgui/memHjOimgeWwhuS4gOeCue+8jOWmguaenOS9oOaYryBtYWMg55S16ISR55qE6K+d77yM5Y+v5Lul5Zyo5L2g55qE55S16ISR5LiK6YCa6L+HIHNzaCDnmbvlvZXliLDkvaDnmoTmnI3liqHlmajjgIIg5ZG95Luk5aaC5LiL77yaXG48Y29kZT5zc2ggcm9vdEDkvaDnmoTlhaznvZFJUDwvY29kZT7vvIzmr5TlpoIgPGNvZGU+c3NoIHJvb3RAMTIwLjc4LjMyLjEyPC9jb2RlPlxu54S25ZCO6L6T5YWl5a+G56CB5Y2z5Y+v6L+e5o6l5oiQ5Yqf44CCPC9wPlxuPHA+PGltZyBzcmM9XCJodHRwczovL2ltZy1ibG9nLmNzZG4ubmV0LzIwMTgwMTA3MTcwNTAzMzMzP3dhdGVybWFyay8yL3RleHQvYUhSMGNEb3ZMMkpzYjJjdVkzTmtiaTV1WlhRdlpHRmtZV1JsWjJGdWFIVnYvZm9udC81YTZMNUwyVC9mb250c2l6ZS80MDAvZmlsbC9JMEpCUWtGQ01BPT0vZGlzc29sdmUvNzAvZ3Jhdml0eS9Tb3V0aEVhc3RcIiBhbHQ9XCLnmbvlvZXmiJDlip/lm75cIj48L3A+XG48cD7mjqXkuIvmnaXlnKjnu4jnq6/kuK3ovpPlhaXlkb3ku6TjgILphY3nva7njq/looPjgILlpoLmnpzkvaDmmK/phY3nva4gamF2YSDnjq/looPvvIzpgqPkuYjlj6/ku6XljrvosLfmrYzkuIDkuIvlpoLkvZXlnKggbGludXgg5Lit6YWN572uIGphdmEg546v5aKD77yM6L+Z6YeM5oiR5piv6YWN572u55qEIG5vZGUg546v5aKD77yM5bCx6K6y5LiA5LiL5aaC5L2V6YWN572uIG5vZGUg546v5aKD5Lul5Y+KIG5wbeOAgjwvcD5cbjxwPui/memHjOaIkeeUqOeahOaYr+a6kOeggeWuieijheOAgummluWFiOWuieijhSBub2RlIOe8luivkeS+nei1lueahOesrOS4ieaWueaooeWdl1xuPGNvZGU+eXVtIC15IGluc3RhbGwgZ2NjIG1ha2UgZ2NjLWMrKyBvcGVuc3NsLWRldmVsPC9jb2RlPjwvcD5cbjxwPueEtuWQjuS4i+i9vSBub2RlIOeahOa6kOeggeWMhVxuPGltZyBzcmM9XCJodHRwczovL2ltZy1ibG9nLmNzZG4ubmV0LzIwMTgwMTA3MTcxMzAwMDM2P3dhdGVybWFyay8yL3RleHQvYUhSMGNEb3ZMMkpzYjJjdVkzTmtiaTV1WlhRdlpHRmtZV1JsWjJGdWFIVnYvZm9udC81YTZMNUwyVC9mb250c2l6ZS80MDAvZmlsbC9JMEpCUWtGQ01BPT0vZGlzc29sdmUvNzAvZ3Jhdml0eS9Tb3V0aEVhc3RcIiBhbHQ9XCLov5nph4zlhpnlm77niYfmj4/ov7BcIj48L3A+XG48cD5ub2RlIOWumOe9keeahOa6kOeggSDljIXjgIJcbjxjb2RlPndnZXQgaHR0cHM6Ly9ub2RlanMub3JnL2Rpc3QvdjguOS40L25vZGUtdjguOS40LnRhci5nejwvY29kZT48L3A+XG48cD7kvaDkuIvovb3nmoTml7blgJnlj6/ku6XmiYvliqjmlLnmiJDlvZPliY3mnIDmlrDniYjmnKzjgILkuIvovb3lkI7vvIzov5vooYzop6PljosgPGNvZGU+dGFyIC16eHZmIG5vZGUtdjguOS40LnRhci5nejwvY29kZT4sIOeEtuWQjui/m+WFpeino+WOi+WQjueahOaWh+S7tuWkuSA8Y29kZT4gY2Qgbm9kZS12OC45LjQ8L2NvZGU+LCDkvp3mrKFcbjxjb2RlPiAgLi9jb25maWd1cmU8L2NvZGU+XG48Y29kZT4gIG1ha2U8L2NvZGU+XG48Y29kZT5zdWRvIG1ha2UgaW5zdGFsbDwvY29kZT5cbui/memHjOe8luivkeaXtumXtOS8muacieeCueS5he+8jOivt+iAkOW/g+etieW+hS0gLVxu5p+l55yL5a6J6KOF5oiQ5YqfXG48aW1nIHNyYz1cImh0dHBzOi8vaW1nLWJsb2cuY3Nkbi5uZXQvMjAxODAxMDcxNzIzMTE2ODQ/d2F0ZXJtYXJrLzIvdGV4dC9hSFIwY0RvdkwySnNiMmN1WTNOa2JpNXVaWFF2WkdGa1lXUmxaMkZ1YUhWdi9mb250LzVhNkw1TDJUL2ZvbnRzaXplLzQwMC9maWxsL0kwSkJRa0ZDTUE9PS9kaXNzb2x2ZS83MC9ncmF2aXR5L1NvdXRoRWFzdFwiIGFsdD1cIui/memHjOWGmeWbvueJh+aPj+i/sFwiPjwvcD5cbjxwPuWuieijhSBucG1cbuWQjOagt+S4i+i9vSBucG0g5YyFXG48Y29kZT53Z2V0IGh0dHA6Ly9ub2RlanMub3JnL2Rpc3QvbnBtL25wbS0xLjQuOS56aXA8L2NvZGU+XG7op6PljosgPGNvZGU+dGFyIC16eHZmIG5wbS0xLjQuOS50Z3o8L2NvZGU+XG7mn6XnnIvmmK/lkKblronoo4XmiJDlip8gPGNvZGU+bnBtIC12PC9jb2RlPjwvcD5cbjxwPui/meWwseaYryBub2RlIOeOr+Wig+mFjee9ruS6hu+8jCDnhLblkI7lsLHmmK8gbXlzcWwg5pWw5o2u5bqT44CCXG48YSBocmVmPVwiaHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2luN3N5c3RlbS9hcnRpY2xlL2RldGFpbHMvNTM1Nzk1MDBcIj5odHRwOi8vYmxvZy5jc2RuLm5ldC93aW43c3lzdGVtL2FydGljbGUvZGV0YWlscy81MzU3OTUwMDwvYT48L3A+XG48cD7lhbPkuo7pobnnm67nmoTkuIrkvKDvvIzlpoLmnpzkvaDmnKzlnLDnvJblhpnkuobku6PnoIHvvIzmg7PkuIrkvKDoh7PmnI3liqHlmajvvIznrKzkuIDkuKrmlrnlvI/vvIzlj6/ku6XmmK/kvb/nlKggZnRwIOS4iuS8oOaWh+S7tuOAgiDnrKzkuozkuKrmlrnlvI/vvIzlsLHmmK/lnKjkvaDnmoTmnI3liqHlmajkuIrmkK3lu7rkuIDkuKogZ2l0IOacjeWKoeWZqO+8jOmAmui/h+S7juacjeWKoeWZqOaOqOmAgeWSjOWFi+mahumhueebruadpeiOt+WPluaWh+S7tuOAgui/memHjOaIkeS9v+eUqOeahOaYr+esrOS6jOenjeaWueazle+8jOWPguingeaVmeeoi++8mlxuPGEgaHJlZj1cImh0dHBzOi8vd3d3LmxpYW94dWVmZW5nLmNvbS93aWtpLzAwMTM3Mzk1MTYzMDU5Mjk2MDZkZDE4MzYxMjQ4NTc4YzY3YjgwNjdjOGMwMTdiMDAwLzAwMTM3NTgzNzcwMzYwNTc5YmM0YjQ1OGYwNDRjZTdhZmVkM2RmNTc5MTIzZWNhMDAwXCI+aHR0cHM6Ly93d3cubGlhb3h1ZWZlbmcuY29tL3dpa2kvMDAxMzczOTUxNjMwNTkyOTYwNmRkMTgzNjEyNDg1NzhjNjdiODA2N2M4YzAxN2IwMDAvMDAxMzc1ODM3NzAzNjA1NzliYzRiNDU4ZjA0NGNlN2FmZWQzZGY1NzkxMjNlY2EwMDA8L2E+XG7ov5nph4zms6jmhI/kuIDkuIvvvIwg5YWz5LqOIOiuvue9riBzc2gg55m75b2V77yM5LiA5a6a6KaB5oqK5Yib5bu655qEIC5zc2gg5paH5Lu25pS+5Yiw5L2g5Yib5bu655qE55So5oi35LiL77yM5aaC5oiR6L+Z6YeM5pivIGdpdCDnlKjmiLfvvIzot6/lvoTlsLHmmK9cbjxpbWcgc3JjPVwiaHR0cHM6Ly9pbWctYmxvZy5jc2RuLm5ldC8yMDE4MDEwNzE3NDUyOTk2OT93YXRlcm1hcmsvMi90ZXh0L2FIUjBjRG92TDJKc2IyY3VZM05rYmk1dVpYUXZaR0ZrWVdSbFoyRnVhSFZ2L2ZvbnQvNWE2TDVMMlQvZm9udHNpemUvNDAwL2ZpbGwvSTBKQlFrRkNNQT09L2Rpc3NvbHZlLzcwL2dyYXZpdHkvU291dGhFYXN0XCIgYWx0PVwi6L+Z6YeM5YaZ5Zu+54mH5o+P6L+wXCI+PC9wPlxuPHA+5pS+572u5Zyo5q2j56Gu5L2N572u5LmL5ZCO77yM6L+Y6KaB5rOo5oSP6aG555uu55qE5b2S5bGe6ICF5Lmf6KaB5pivIGdpdCDnlKjmiLfvvIzov5nmoLfmiY3kvJrlnKggZ2l0IOeUqOaIt+mHjOWMuemFjeWIsOWvueW6lOeahCBzc2gga2V544CC5Lmf5bCx5piv5LiL6Z2i6L+Z5LiA5Liq5q2l6aqkXG48aW1nIHNyYz1cImh0dHBzOi8vaW1nLWJsb2cuY3Nkbi5uZXQvMjAxODAxMDcxNzQ3NDkxNjg/d2F0ZXJtYXJrLzIvdGV4dC9hSFIwY0RvdkwySnNiMmN1WTNOa2JpNXVaWFF2WkdGa1lXUmxaMkZ1YUhWdi9mb250LzVhNkw1TDJUL2ZvbnRzaXplLzQwMC9maWxsL0kwSkJRa0ZDTUE9PS9kaXNzb2x2ZS83MC9ncmF2aXR5L1NvdXRoRWFzdFwiIGFsdD1cIui/memHjOWGmeWbvueJh+aPj+i/sFwiPjwvcD5cbjxwPui/mOacieS4gOeCueimgeazqOaEj+eahOWwseaYr++8jOS9oOWGjeacrOWcsOaOqOmAgeS6huS7o+eggeS4iiBnaXQg5pyN5Yqh5Zmo5LmL5ZCO77yM5oOz6KaB5Zyo5LqR5pyN5Yqh5Zmo5LiK6I635Y+W5Yiw5Luj56CB77yMIOmcgOimgeWcqOacjeWKoeWZqOS4iuWGjeasoeWFi+mahiA8Y29kZT5naXQgY2xvbmUgZ2l0QHNlcnZlcjovc3J2L3NhbXBsZS5naXQ8L2NvZGU+IOmhueebru+8jGdpdCBwdWxsIOiOt+WPluWIsOS7o+eggeOAgiDov5nph4zkuZ/lj6/ku6XpgJrov4foh6rlt7HphY3nva4gZ2l0IOacjeWKoeWZqOeahOmSqeWtkOWHveaVsO+8jOS9v+WFtuiHquWKqOabtOaWsOS7o+egge+8jOaIkei/mOayoemFjee9ru+8jOWwseWFiOS4jeivtOS6hiAtIC3jgII8L3A+XG48cD7lpb3kuobvvIznjrDlnKjnjrDlnKjln7rmnKznjq/looPphY3nva7lpb3kuoblsLHlj6/ku6XlvIDlp4vlvIDlj5HkvaDnmoTpobnnm67llabjgII8L3A+XG48cD7lj6blpJbpmYTvvJpcbumhueebruWcqOacjeWKoeWZqOS4iuWQr+WKqOS6hu+8jOWPkeeOsOWcqOacrOWcsOeUteiEkeaXoOazlemAmui/hyBpcCDorr/pl67vvIzpgqPkuYjlj6/og73mmK/kvaDnmoTnq6/lj6Plj7fmsqHmnInlvIDmlL7vvIzpnIDopoHljrvmnI3liqHlmajkuIrorr7nva7lronlhajnu4TjgIJcbuWFt+S9k+a3u+WKoOaWueazlSDvvIzku6Xlj4rlhbbku5bkuIDkupvlhbPkuo7mnI3liqHlmajnmoTphY3nva7vvIzpg73lj6/ku6Xpmo/ml7bngrnlh7vlj7PkvqfnmoQgPHN0cm9uZz7ngrnmiJHmj5Dpl648L3N0cm9uZz7vvIzlg4/kupHljZrlo6vmj5Dpl67jgIIgPSA9XG48aW1nIHNyYz1cImh0dHBzOi8vaW1nLWJsb2cuY3Nkbi5uZXQvMjAxODAxMDcxNzU1NDg3MDM/d2F0ZXJtYXJrLzIvdGV4dC9hSFIwY0RvdkwySnNiMmN1WTNOa2JpNXVaWFF2WkdGa1lXUmxaMkZ1YUhWdi9mb250LzVhNkw1TDJUL2ZvbnRzaXplLzQwMC9maWxsL0kwSkJRa0ZDTUE9PS9kaXNzb2x2ZS83MC9ncmF2aXR5L1NvdXRoRWFzdFwiIGFsdD1cIui/memHjOWGmeWbvueJh+aPj+i/sFwiPjwvcD5cbjwvZGl2PjwvdGVtcGxhdGU+IiwiaW1wb3J0IHsgcmVuZGVyIH0gZnJvbSBcIi4vYWxpeXVuLXNlcnZlci5tZD92dWUmdHlwZT10ZW1wbGF0ZSZpZD1jNDRlNzg5MlwiXG5jb25zdCBzY3JpcHQgPSB7fVxuXG5pbXBvcnQgZXhwb3J0Q29tcG9uZW50IGZyb20gXCIuLi8uLi9ub2RlX21vZHVsZXMvLnBucG0vdnVlLWxvYWRlckAxNy40LjJfQHZ1ZStjb21waWxlci1zZmNAMy41LjNfdnVlQDMuNS4zX3R5cGVzY3JpcHRANS41LjRfX3dlYnBhY2tANS45NC4wX3dlYnBhY2stX2Z1cWt3Z2dwbGhleTNvaXZ0d2Uyc3RkbzZlL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2Rpc3QvZXhwb3J0SGVscGVyLmpzXCJcbmNvbnN0IF9fZXhwb3J0c19fID0gLyojX19QVVJFX18qL2V4cG9ydENvbXBvbmVudChzY3JpcHQsIFtbJ3JlbmRlcicscmVuZGVyXV0pXG5cbmV4cG9ydCBkZWZhdWx0IF9fZXhwb3J0c19fIl0sIm5hbWVzIjpbImNsYXNzIiwic2NyaXB0IiwiX2NyZWF0ZUVsZW1lbnRCbG9jayIsIl9ob2lzdGVkXzEiLCJfY2FjaGUiLCJfY3JlYXRlU3RhdGljVk5vZGUiXSwic291cmNlUm9vdCI6IiJ9 \ No newline at end of file diff --git a/520.bundle.js b/520.bundle.js new file mode 100644 index 0000000..b815573 --- /dev/null +++ b/520.bundle.js @@ -0,0 +1,2 @@ +"use strict";(self.webpackChunkcboy_blog=self.webpackChunkcboy_blog||[]).push([[520],{520:function(e,t,n){n.r(t),n.d(t,{default:function(){return p}});var o=n(358);const s={class:"component-pwa"},r={};var p=(0,n(389).A)(r,[["render",function(e,t){return(0,o.uX)(),(0,o.CE)("div",s,t[0]||(t[0]=[(0,o.Fv)('

什么是PWA

先说一下全名，progressive web app： 渐进式网页应用。这是谷歌推出的，我是这样理解的：

  • 我们一般写web应用，在 pc 上是没有缓存的，打开页面的时去请求数据。

  • 第二个也没有像 app 一样的小图标放在桌面，一点开就进入了应用，而是通过打开浏览器输入网址，

  • 第三个就是，不能像 app 一样给用户推送消息，像微博会跟你推送说有谁评论了你的微博之类的功能。

而谷歌推出的 pwa，就是具有这些了这些特点， 使我们的 web 应用，能够像一款 app 一样使用。并且对比与 app, 它不用复杂的安装，也不用下载更新包，刷新页面就可以了(注意到缓存的处理)。

那么这些功能分别是怎么实现的呢？

关于缓存

其实这个就是 我们平时做的 Session 啊、localStorage、CacheStorage 之类的。

这里用的就是 cacheStorage 缓存，它提供了一个ServiceWorker类型的工作者或window范围可以访问的所有命名缓存的主目录, 并维护字符串的映射名称到相应的 Cache 对象。 主要方法包括： 这里写图片描述 有了这些方法你可以对你的缓存进行操作。目前还在草案状态，仅火狐和谷歌浏览器支持此特性。

PWA是通过 ServiceWorker 访问 cache ,所以需要注册 ServiceWorker 工作者。在之前别忘记判断浏览器是否支持。

if ('serviceWorker' in navigator) {\n\tnavigator.serviceWorker.register(sw.js) // 注册sw.js 文件中变成的服务对象，返回注册成功的对象\n\t.then(function(swReg){\n          swRegistration = swReg;\n     }).catch(function(error) {\n          console.error('Service Worker Error', error);\n     });\n}\n

这个 Service Worker 服务工作者就厉害了，它相当于浏览器和网络之间的代理服务器，可以拦截网络请求，做一些你可能需要的处理(请求资源从缓存中获取等)。

  • 它能够创建有效的离线体验，拦截网络请求，并根据网络是否可用判断是否使用缓存数据或者更新缓存数据。

  • 它们还允许访问推送的通知和后台的API。

关于 sw.js 中具体的缓存的代码：

创建需要缓存的文件

'use strict'\nlet cacheName = 'pwa-demo-assets'; // 缓存名字\nlet imgCacheName = 'pwa-img';\nlet filesToCache;\nfilesToCache = [ // 所需缓存的文件\n    '/',\n    '/index.html',\n    '/scripts/app.js',\n    '/assets/imgs/48.png',\n    '/assets/imgs/96.png',\n    '/assets/imgs/192.png',\n    '/dist/js/app.js',\n    '/manifest.json'\n];\n\nself.addEventListener('install', function(e) {\n    e.waitUntil(\n\t    // 安装服务者时，对需要缓存的文件进行缓存\n        caches.open(cacheName).then(function(cache) {\n            return cache.addAll(filesToCache);\n        })\n    );\n});\n\n\nself.addEventListener('fetch', (e) => {\n    // 判断地址是不是需要实时去请求，是就继续发送请求\n    if (e.request.url.indexOf('/api/400/200') > -1) {\n        e.respondWith(\n            caches.open(imgCacheName).then(function(cache){\n                 return fetch(e.request).then(function (response){\n                    cache.put(e.request.url, response.clone()); // 每请求一次缓存更新一次新加载的图片\n                    return response;\n                });\n            })\n        );\n    } else {\n        e.respondWith(\n\t        // 匹配到缓存资源，就从缓存中返回数据\n            caches.match(e.request).then(function (response) {\n                return response || fetch(e.request);\n            })\n        );\n    }\n\n});\n

这里进而就引入到 pwa 的推送通知功能。这都是通过 ServiceWorker 去实现的。

基本原理是，你的客户端要和推送服务进行绑定，会生成一个绑定后的推送服务API接口，服务端调用此接口，发送消息。同时，浏览器也要支持推送功能，在注册 sw 时, 加上推送功能的判断。

if ('serviceWorker' in navigator && 'PushManager' in window) {\n\tnavigator.serviceWorker.register(sw.js)\n\t.then(function(swReg) {\n        swRegistration = swReg;\n    }).catch(function(error) {\n        console.error('Service Worker Error', error);\n        });\n } else {\n     console.warn('Push messaging is not supported');\n }\n

PushManager 注册好之后， 那么要做的就是浏览器和服务器的绑定了。

这里写图片描述 此图是用户订阅某个应用程序的推送服务。 客户端传入应用程序服务器公钥，向将生成端点的 webpush 服务器( 这是谷歌自己实现的一个推送功能的服务器)发出网络请求，将生成的端点(一个推送服务)与应用程序公钥关联，并将端点返回给应用程序。浏览器会将此端点添加到 PushSubscription，通过 promise异步成功时，可以将它的信息保存到你的数据库。

这里写图片描述 服务器发送推送的时候,请求相关接口，验证成功后推送服务会发消息给客户端。

最后关于桌面小图标

这个可以说是非常简单了，就是一个manifest.json配置文件，然后在页面引入此文件就好了

<!-- 加载清单 -->\n<link rel="manifest" href="./manifest.json">\n

关于清单内容这里简单介绍一下：

{\n    "short_name": "pwa",\n    "name": "pwa - demo", // 应用名称\n    "icons": [ // 应用显示图标，根据容器大小适配\n        {\n            "src": "assets/imgs/48.png",\n            "type": "image/png",\n            "sizes": "48x48"\n        },\n        {\n            "src": "assets/imgs/96.png",\n            "type": "image/png",\n            "sizes": "96x96"\n        },\n        {\n            "src": "assets/imgs/192.png",\n            "type": "image/png",\n            "sizes": "192x192"\n        }\n    ],\n    "background_color": "#2196F3", // 刚打开页面时的背景\n    "theme_color": "#2196F3", // 主题颜色\n    "display": "standalone", //独立显示\n    "start_url": "index.html?launcher=true" // 启动的页面\n}\n

好了， 如果感兴趣赶快上手吧。 可以查看谷歌官方教程。

这里说一下坑的点， PWA应用需要在本地localhost:8080 上运行或者 https 协议下， 要保证你的页面是安全页面。

添加桌面时，确保你的谷歌浏览器可以显示弹出通知。

如果你要自己实现推送，自己服务器要有公钥和私钥的获取， 这里可以通过 https://web-push-codelab.glitch.me 获取， 用 chrome 的 webpush 推送。

这里也可以看一下我的 GitHub 项项目 ，官方也有很多例子。

',31)]))}]])}}]); +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiNTIwLmJ1bmRsZS5qcyIsIm1hcHBpbmdzIjoiNktBQWVBLE1BQU0saUJDQ2ZDLEVBQVMsQ0FBQyxFQUtoQixPQUZpQyxFLE9BQUEsR0FBZ0JBLEVBQVEsQ0FBQyxDQUFDLFMsZ0NESmpEQyxFQUFBQSxFQUFBQSxJQWtKSixNQWxKSUMsRUFrSkpDLEVBQUEsS0FBQUEsRUFBQSxLQWxKTkMsRUFBQUEsRUFBQUEsSUFBQSwyZ00iLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9jYm95LWJsb2cvLi4vLi4vYmxvZ3MvbWFya2Rvd24vcHdhLm1kIiwid2VicGFjazovL2Nib3ktYmxvZy8uLi8uLi9ibG9ncy9tYXJrZG93bi9wd2EubWQ/NTNiNCJdLCJzb3VyY2VzQ29udGVudCI6WyI8dGVtcGxhdGU+PGRpdiBjbGFzcz1cImNvbXBvbmVudC1wd2FcIj48aDM+PHN0cm9uZz7ku4DkuYjmmK9QV0E8L3N0cm9uZz48L2gzPlxuPHA+5YWI6K+05LiA5LiL5YWo5ZCN77yMcHJvZ3Jlc3NpdmUgd2ViIGFwcO+8miDmuJDov5vlvI/nvZHpobXlupTnlKjjgILov5nmmK/osLfmrYzmjqjlh7rnmoTvvIzmiJHmmK/ov5nmoLfnkIbop6PnmoTvvJo8L3A+XG48dWw+XG48bGk+XG48cD7miJHku6zkuIDoiKzlhpl3ZWLlupTnlKjvvIzlnKggcGMg5LiK5piv5rKh5pyJ57yT5a2Y55qE77yM5omT5byA6aG16Z2i55qE5pe25Y676K+35rGC5pWw5o2u44CCPC9wPlxuPC9saT5cbjxsaT5cbjxwPuesrOS6jOS4quS5n+ayoeacieWDjyBhcHAg5LiA5qC355qE5bCP5Zu+5qCH5pS+5Zyo5qGM6Z2i77yM5LiA54K55byA5bCx6L+b5YWl5LqG5bqU55So77yM6ICM5piv6YCa6L+H5omT5byA5rWP6KeI5Zmo6L6T5YWl572R5Z2A77yMPC9wPlxuPC9saT5cbjxsaT5cbjxwPuesrOS4ieS4quWwseaYr++8jOS4jeiDveWDjyBhcHAg5LiA5qC357uZ55So5oi35o6o6YCB5raI5oGv77yM5YOP5b6u5Y2a5Lya6Lef5L2g5o6o6YCB6K+05pyJ6LCB6K+E6K665LqG5L2g55qE5b6u5Y2a5LmL57G755qE5Yqf6IO944CCPC9wPlxuPC9saT5cbjwvdWw+XG48cD7ogIzosLfmrYzmjqjlh7rnmoQgcHdh77yM5bCx5piv5YW35pyJ6L+Z5Lqb5LqG6L+Z5Lqb54m554K577yMIOS9v+aIkeS7rOeahCB3ZWIg5bqU55So77yM6IO95aSf5YOP5LiA5qy+IGFwcCDkuIDmoLfkvb/nlKjjgILlubbkuJTlr7nmr5TkuI4gYXBwLCDlroPkuI3nlKjlpI3mnYLnmoTlronoo4XvvIzkuZ/kuI3nlKjkuIvovb3mm7TmlrDljIXvvIzliLfmlrDpobXpnaLlsLHlj6/ku6XkuoYo5rOo5oSP5Yiw57yT5a2Y55qE5aSE55CGKeOAgjwvcD5cbjxoND48c3Ryb25nPumCo+S5iOi/meS6m+WKn+iDveWIhuWIq+aYr+aAjuS5iOWunueOsOeahOWRou+8nzwvc3Ryb25nPjwvaDQ+XG48cD48c3Ryb25nPuWFs+S6jue8k+WtmDwvc3Ryb25nPjwvcD5cbjxwPuWFtuWunui/meS4quWwseaYryDmiJHku6zlubPml7blgZrnmoQgU2Vzc2lvbiDllYrjgIFsb2NhbFN0b3JhZ2XjgIFDYWNoZVN0b3JhZ2Ug5LmL57G755qE44CCPC9wPlxuPHA+6L+Z6YeM55So55qE5bCx5pivIDxhIGhyZWY9XCJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZy96aC1DTi9kb2NzL1dlYi9BUEkvQ2FjaGVTdG9yYWdlXCI+Y2FjaGVTdG9yYWdlPC9hPiDnvJPlrZjvvIzlroPmj5DkvpvkuobkuIDkuKpTZXJ2aWNlV29ya2Vy57G75Z6L55qE5bel5L2c6ICF5oiWd2luZG936IyD5Zu05Y+v5Lul6K6/6Zeu55qE5omA5pyJ5ZG95ZCN57yT5a2Y55qE5Li755uu5b2VLCDlubbnu7TmiqTlrZfnrKbkuLLnmoTmmKDlsITlkI3np7DliLDnm7jlupTnmoQgQ2FjaGUg5a+56LGh44CCXG7kuLvopoHmlrnms5XljIXmi6zvvJpcbjxpbWcgc3JjPVwiaHR0cHM6Ly9pbWctYmxvZy5jc2RuLm5ldC8yMDE3MTExMjIxMjMwMjA3Mz93YXRlcm1hcmsvMi90ZXh0L2FIUjBjRG92TDJKc2IyY3VZM05rYmk1dVpYUXZaR0ZrWVdSbFoyRnVhSFZ2L2ZvbnQvNWE2TDVMMlQvZm9udHNpemUvNDAwL2ZpbGwvSTBKQlFrRkNNQT09L2Rpc3NvbHZlLzcwL2dyYXZpdHkvU291dGhFYXN0XCIgYWx0PVwi6L+Z6YeM5YaZ5Zu+54mH5o+P6L+wXCI+XG7mnInkuobov5nkupvmlrnms5XkvaDlj6/ku6Xlr7nkvaDnmoTnvJPlrZjov5vooYzmk43kvZzjgILnm67liY3ov5jlnKjojYnmoYjnirbmgIHvvIzku4Xngavni5DlkozosLfmrYzmtY/op4jlmajmlK/mjIHmraTnibnmgKfjgII8L3A+XG48cD5QV0HmmK/pgJrov4cgU2VydmljZVdvcmtlciDorr/pl64gY2FjaGUgLOaJgOS7pemcgOimgeazqOWGjCBTZXJ2aWNlV29ya2VyIOW3peS9nOiAheOAguWcqOS5i+WJjeWIq+W/mOiusOWIpOaWrea1j+iniOWZqOaYr+WQpuaUr+aMgeOAgjwvcD5cbjxwcmUgdi1wcmU9XCJcIj48Y29kZT5pZiAoJ3NlcnZpY2VXb3JrZXInIGluIG5hdmlnYXRvcikge1xuXHRuYXZpZ2F0b3Iuc2VydmljZVdvcmtlci5yZWdpc3Rlcihzdy5qcykgLy8g5rOo5YaMc3cuanMg5paH5Lu25Lit5Y+Y5oiQ55qE5pyN5Yqh5a+56LGh77yM6L+U5Zue5rOo5YaM5oiQ5Yqf55qE5a+56LGhXG5cdC50aGVuKGZ1bmN0aW9uKHN3UmVnKXtcbiAgICAgICAgICBzd1JlZ2lzdHJhdGlvbiA9IHN3UmVnO1xuICAgICB9KS5jYXRjaChmdW5jdGlvbihlcnJvcikge1xuICAgICAgICAgIGNvbnNvbGUuZXJyb3IoJ1NlcnZpY2UgV29ya2VyIEVycm9yJywgZXJyb3IpO1xuICAgICB9KTtcbn1cbjwvY29kZT48L3ByZT5cbjxwPui/meS4qiA8YSBocmVmPVwiaHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvQVBJL1NlcnZpY2VfV29ya2VyX0FQSVwiPlNlcnZpY2UgV29ya2VyPC9hPiDmnI3liqHlt6XkvZzogIXlsLHljonlrrPkuobvvIzlroPnm7jlvZPkuo7mtY/op4jlmajlkoznvZHnu5zkuYvpl7TnmoTku6PnkIbmnI3liqHlmajvvIzlj6/ku6Xmi6bmiKrnvZHnu5zor7fmsYLvvIzlgZrkuIDkupvkvaDlj6/og73pnIDopoHnmoTlpITnkIYo6K+35rGC6LWE5rqQ5LuO57yT5a2Y5Lit6I635Y+W562JKeOAgjwvcD5cbjx1bD5cbjxsaT5cbjxwPuWug+iDveWkn+WIm+W7uuacieaViOeahOemu+e6v+S9k+mqjO+8jOaLpuaIque9kee7nOivt+axgu+8jOW5tuagueaNrue9kee7nOaYr+WQpuWPr+eUqOWIpOaWreaYr+WQpuS9v+eUqOe8k+WtmOaVsOaNruaIluiAheabtOaWsOe8k+WtmOaVsOaNruOAgjwvcD5cbjwvbGk+XG48bGk+XG48cD7lroPku6zov5jlhYHorrjorr/pl67mjqjpgIHnmoTpgJrnn6XlkozlkI7lj7DnmoRBUEnjgII8L3A+XG48L2xpPlxuPC91bD5cbjxwPuWFs+S6jiBzdy5qcyDkuK3lhbfkvZPnmoTnvJPlrZjnmoTku6PnoIHvvJo8L3A+XG48cD7liJvlu7rpnIDopoHnvJPlrZjnmoTmlofku7Y8L3A+XG48cHJlIHYtcHJlPVwiXCI+PGNvZGU+J3VzZSBzdHJpY3QnXG5sZXQgY2FjaGVOYW1lID0gJ3B3YS1kZW1vLWFzc2V0cyc7IC8vIOe8k+WtmOWQjeWtl1xubGV0IGltZ0NhY2hlTmFtZSA9ICdwd2EtaW1nJztcbmxldCBmaWxlc1RvQ2FjaGU7XG5maWxlc1RvQ2FjaGUgPSBbIC8vIOaJgOmcgOe8k+WtmOeahOaWh+S7tlxuICAgICcvJyxcbiAgICAnL2luZGV4Lmh0bWwnLFxuICAgICcvc2NyaXB0cy9hcHAuanMnLFxuICAgICcvYXNzZXRzL2ltZ3MvNDgucG5nJyxcbiAgICAnL2Fzc2V0cy9pbWdzLzk2LnBuZycsXG4gICAgJy9hc3NldHMvaW1ncy8xOTIucG5nJyxcbiAgICAnL2Rpc3QvanMvYXBwLmpzJyxcbiAgICAnL21hbmlmZXN0Lmpzb24nXG5dO1xuXG5zZWxmLmFkZEV2ZW50TGlzdGVuZXIoJ2luc3RhbGwnLCBmdW5jdGlvbihlKSB7XG4gICAgZS53YWl0VW50aWwoXG5cdCAgICAvLyDlronoo4XmnI3liqHogIXml7bvvIzlr7npnIDopoHnvJPlrZjnmoTmlofku7bov5vooYznvJPlrZhcbiAgICAgICAgY2FjaGVzLm9wZW4oY2FjaGVOYW1lKS50aGVuKGZ1bmN0aW9uKGNhY2hlKSB7XG4gICAgICAgICAgICByZXR1cm4gY2FjaGUuYWRkQWxsKGZpbGVzVG9DYWNoZSk7XG4gICAgICAgIH0pXG4gICAgKTtcbn0pO1xuXG5cbnNlbGYuYWRkRXZlbnRMaXN0ZW5lcignZmV0Y2gnLCAoZSkgPSZndDsge1xuICAgIC8vIOWIpOaWreWcsOWdgOaYr+S4jeaYr+mcgOimgeWunuaXtuWOu+ivt+axgu+8jOaYr+Wwsee7p+e7reWPkemAgeivt+axglxuICAgIGlmIChlLnJlcXVlc3QudXJsLmluZGV4T2YoJy9hcGkvNDAwLzIwMCcpICZndDsgLTEpIHtcbiAgICAgICAgZS5yZXNwb25kV2l0aChcbiAgICAgICAgICAgIGNhY2hlcy5vcGVuKGltZ0NhY2hlTmFtZSkudGhlbihmdW5jdGlvbihjYWNoZSl7XG4gICAgICAgICAgICAgICAgIHJldHVybiBmZXRjaChlLnJlcXVlc3QpLnRoZW4oZnVuY3Rpb24gKHJlc3BvbnNlKXtcbiAgICAgICAgICAgICAgICAgICAgY2FjaGUucHV0KGUucmVxdWVzdC51cmwsIHJlc3BvbnNlLmNsb25lKCkpOyAvLyDmr4/or7fmsYLkuIDmrKHnvJPlrZjmm7TmlrDkuIDmrKHmlrDliqDovb3nmoTlm77niYdcbiAgICAgICAgICAgICAgICAgICAgcmV0dXJuIHJlc3BvbnNlO1xuICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgfSlcbiAgICAgICAgKTtcbiAgICB9IGVsc2Uge1xuICAgICAgICBlLnJlc3BvbmRXaXRoKFxuXHQgICAgICAgIC8vIOWMuemFjeWIsOe8k+WtmOi1hOa6kO+8jOWwseS7jue8k+WtmOS4rei/lOWbnuaVsOaNrlxuICAgICAgICAgICAgY2FjaGVzLm1hdGNoKGUucmVxdWVzdCkudGhlbihmdW5jdGlvbiAocmVzcG9uc2UpIHtcbiAgICAgICAgICAgICAgICByZXR1cm4gcmVzcG9uc2UgfHwgZmV0Y2goZS5yZXF1ZXN0KTtcbiAgICAgICAgICAgIH0pXG4gICAgICAgICk7XG4gICAgfVxuXG59KTtcbjwvY29kZT48L3ByZT5cbjxwPjxzdHJvbmc+6L+Z6YeM6L+b6ICM5bCx5byV5YWl5YiwIHB3YSDnmoTmjqjpgIHpgJrnn6Xlip/og73jgILov5npg73mmK/pgJrov4cgU2VydmljZVdvcmtlciDljrvlrp7njrDnmoTjgII8L3N0cm9uZz48L3A+XG48cD7ln7rmnKzljp/nkIbmmK/vvIzkvaDnmoTlrqLmiLfnq6/opoHlkozmjqjpgIHmnI3liqHov5vooYznu5HlrprvvIzkvJrnlJ/miJDkuIDkuKrnu5HlrprlkI7nmoTmjqjpgIHmnI3liqFBUEnmjqXlj6PvvIzmnI3liqHnq6/osIPnlKjmraTmjqXlj6PvvIzlj5HpgIHmtojmga/jgILlkIzml7bvvIzmtY/op4jlmajkuZ/opoHmlK/mjIHmjqjpgIHlip/og73vvIzlnKjms6jlhowgc3cg5pe2LCDliqDkuIrmjqjpgIHlip/og73nmoTliKTmlq3jgII8L3A+XG48cHJlIHYtcHJlPVwiXCI+PGNvZGU+aWYgKCdzZXJ2aWNlV29ya2VyJyBpbiBuYXZpZ2F0b3IgJmFtcDsmYW1wOyAnUHVzaE1hbmFnZXInIGluIHdpbmRvdykge1xuXHRuYXZpZ2F0b3Iuc2VydmljZVdvcmtlci5yZWdpc3Rlcihzdy5qcylcblx0LnRoZW4oZnVuY3Rpb24oc3dSZWcpIHtcbiAgICAgICAgc3dSZWdpc3RyYXRpb24gPSBzd1JlZztcbiAgICB9KS5jYXRjaChmdW5jdGlvbihlcnJvcikge1xuICAgICAgICBjb25zb2xlLmVycm9yKCdTZXJ2aWNlIFdvcmtlciBFcnJvcicsIGVycm9yKTtcbiAgICAgICAgfSk7XG4gfSBlbHNlIHtcbiAgICAgY29uc29sZS53YXJuKCdQdXNoIG1lc3NhZ2luZyBpcyBub3Qgc3VwcG9ydGVkJyk7XG4gfVxuPC9jb2RlPjwvcHJlPlxuPHA+UHVzaE1hbmFnZXIg5rOo5YaM5aW95LmL5ZCO77yMIOmCo+S5iOimgeWBmueahOWwseaYr+a1j+iniOWZqOWSjOacjeWKoeWZqOeahOe7keWumuS6huOAgjwvcD5cbjxwPjxpbWcgc3JjPVwiaHR0cHM6Ly9pbWctYmxvZy5jc2RuLm5ldC8yMDE3MTExMjIwMzM0NzIyMj93YXRlcm1hcmsvMi90ZXh0L2FIUjBjRG92TDJKc2IyY3VZM05rYmk1dVpYUXZaR0ZrWVdSbFoyRnVhSFZ2L2ZvbnQvNWE2TDVMMlQvZm9udHNpemUvNDAwL2ZpbGwvSTBKQlFrRkNNQT09L2Rpc3NvbHZlLzcwL2dyYXZpdHkvU291dGhFYXN0XCIgYWx0PVwi6L+Z6YeM5YaZ5Zu+54mH5o+P6L+wXCI+XG7mraTlm77mmK/nlKjmiLforqLpmIXmn5DkuKrlupTnlKjnqIvluo/nmoTmjqjpgIHmnI3liqHjgIJcbuWuouaIt+err+S8oOWFpeW6lOeUqOeoi+W6j+acjeWKoeWZqOWFrOmSpe+8jOWQkeWwhueUn+aIkOerr+eCueeahCA8Y29kZT53ZWJwdXNoIOacjeWKoeWZqDwvY29kZT4oIOi/meaYr+iwt+atjOiHquW3seWunueOsOeahOS4gOS4quaOqOmAgeWKn+iDveeahOacjeWKoeWZqCnlj5Hlh7rnvZHnu5zor7fmsYLvvIzlsIbnlJ/miJDnmoTnq6/ngrko5LiA5Liq5o6o6YCB5pyN5YqhKeS4juW6lOeUqOeoi+W6j+WFrOmSpeWFs+iBlO+8jOW5tuWwhuerr+eCuei/lOWbnue7meW6lOeUqOeoi+W6j+OAgua1j+iniOWZqOS8muWwhuatpOerr+eCuea3u+WKoOWIsCBQdXNoU3Vic2NyaXB0aW9u77yM6YCa6L+HIHByb21pc2XlvILmraXmiJDlip/ml7bvvIzlj6/ku6XlsIblroPnmoTkv6Hmga/kv53lrZjliLDkvaDnmoTmlbDmja7lupPjgII8L3A+XG48cD48aW1nIHNyYz1cImh0dHBzOi8vaW1nLWJsb2cuY3Nkbi5uZXQvMjAxNzExMTIyMDM3NTM4MjA/d2F0ZXJtYXJrLzIvdGV4dC9hSFIwY0RvdkwySnNiMmN1WTNOa2JpNXVaWFF2WkdGa1lXUmxaMkZ1YUhWdi9mb250LzVhNkw1TDJUL2ZvbnRzaXplLzQwMC9maWxsL0kwSkJRa0ZDTUE9PS9kaXNzb2x2ZS83MC9ncmF2aXR5L1NvdXRoRWFzdFwiIGFsdD1cIui/memHjOWGmeWbvueJh+aPj+i/sFwiPlxu5pyN5Yqh5Zmo5Y+R6YCB5o6o6YCB55qE5pe25YCZLOivt+axguebuOWFs+aOpeWPo++8jOmqjOivgeaIkOWKn+WQjuaOqOmAgeacjeWKoeS8muWPkea2iOaBr+e7meWuouaIt+err+OAgjwvcD5cbjxwPjxzdHJvbmc+5pyA5ZCO5YWz5LqO5qGM6Z2i5bCP5Zu+5qCHPC9zdHJvbmc+PC9wPlxuPHA+6L+Z5Liq5Y+v5Lul6K+05piv6Z2e5bi4566A5Y2V5LqG77yM5bCx5piv5LiA5LiqbWFuaWZlc3QuanNvbumFjee9ruaWh+S7tu+8jOeEtuWQjuWcqOmhtemdouW8leWFpeatpOaWh+S7tuWwseWlveS6hjwvcD5cbjxwcmUgdi1wcmU9XCJcIj48Y29kZT4mbHQ7IS0tIOWKoOi9vea4heWNlSAtLSZndDtcbiZsdDtsaW5rIHJlbD1cIm1hbmlmZXN0XCIgaHJlZj1cIi4vbWFuaWZlc3QuanNvblwiJmd0O1xuPC9jb2RlPjwvcHJlPlxuPHA+5YWz5LqOPGEgaHJlZj1cImh0dHBzOi8vZGV2ZWxvcGVycy5nb29nbGUuY29tL3dlYi9mdW5kYW1lbnRhbHMvd2ViLWFwcC1tYW5pZmVzdC9cIj7muIXljZXlhoXlrrk8L2E+6L+Z6YeM566A5Y2V5LuL57uN5LiA5LiL77yaPC9wPlxuPHByZSB2LXByZT1cIlwiPjxjb2RlPntcbiAgICBcInNob3J0X25hbWVcIjogXCJwd2FcIixcbiAgICBcIm5hbWVcIjogXCJwd2EgLSBkZW1vXCIsIC8vIOW6lOeUqOWQjeensFxuICAgIFwiaWNvbnNcIjogWyAvLyDlupTnlKjmmL7npLrlm77moIfvvIzmoLnmja7lrrnlmajlpKflsI/pgILphY1cbiAgICAgICAge1xuICAgICAgICAgICAgXCJzcmNcIjogXCJhc3NldHMvaW1ncy80OC5wbmdcIixcbiAgICAgICAgICAgIFwidHlwZVwiOiBcImltYWdlL3BuZ1wiLFxuICAgICAgICAgICAgXCJzaXplc1wiOiBcIjQ4eDQ4XCJcbiAgICAgICAgfSxcbiAgICAgICAge1xuICAgICAgICAgICAgXCJzcmNcIjogXCJhc3NldHMvaW1ncy85Ni5wbmdcIixcbiAgICAgICAgICAgIFwidHlwZVwiOiBcImltYWdlL3BuZ1wiLFxuICAgICAgICAgICAgXCJzaXplc1wiOiBcIjk2eDk2XCJcbiAgICAgICAgfSxcbiAgICAgICAge1xuICAgICAgICAgICAgXCJzcmNcIjogXCJhc3NldHMvaW1ncy8xOTIucG5nXCIsXG4gICAgICAgICAgICBcInR5cGVcIjogXCJpbWFnZS9wbmdcIixcbiAgICAgICAgICAgIFwic2l6ZXNcIjogXCIxOTJ4MTkyXCJcbiAgICAgICAgfVxuICAgIF0sXG4gICAgXCJiYWNrZ3JvdW5kX2NvbG9yXCI6IFwiIzIxOTZGM1wiLCAvLyDliJrmiZPlvIDpobXpnaLml7bnmoTog4zmma9cbiAgICBcInRoZW1lX2NvbG9yXCI6IFwiIzIxOTZGM1wiLCAvLyDkuLvpopjpopzoibJcbiAgICBcImRpc3BsYXlcIjogXCJzdGFuZGFsb25lXCIsIC8v54us56uL5pi+56S6XG4gICAgXCJzdGFydF91cmxcIjogXCJpbmRleC5odG1sP2xhdW5jaGVyPXRydWVcIiAvLyDlkK/liqjnmoTpobXpnaJcbn1cbjwvY29kZT48L3ByZT5cbjxwPuWlveS6hu+8jCDlpoLmnpzmhJ/lhbTotqPotbblv6vkuIrmiYvlkKfjgIJcbuWPr+S7peafpeecizxhIGhyZWY9XCJodHRwczovL2RldmVsb3BlcnMuZ29vZ2xlLmNvbS93ZWIvcHJvZ3Jlc3NpdmUtd2ViLWFwcHMvXCI+6LC35q2M5a6Y5pa55pWZ56iLPC9hPuOAgjwvcD5cbjxwPui/memHjOivtOS4gOS4i+WdkeeahOeCue+8jFx0UFdB5bqU55So6ZyA6KaB5Zyo5pys5ZywbG9jYWxob3N0OjgwODAg5LiK6L+Q6KGM5oiW6ICFIGh0dHBzIOWNj+iuruS4i++8jCDopoHkv53or4HkvaDnmoTpobXpnaLmmK/lronlhajpobXpnaLjgII8L3A+XG48cD7mt7vliqDmoYzpnaLml7bvvIznoa7kv53kvaDnmoTosLfmrYzmtY/op4jlmajlj6/ku6XmmL7npLrlvLnlh7rpgJrnn6XjgII8L3A+XG48cD7lpoLmnpzkvaDopoHoh6rlt7Hlrp7njrDmjqjpgIHvvIzoh6rlt7HmnI3liqHlmajopoHmnInlhazpkqXlkoznp4HpkqXnmoTojrflj5bvvIwg6L+Z6YeM5Y+v5Lul6YCa6L+HIDxhIGhyZWY9XCJodHRwczovL3dlYi1wdXNoLWNvZGVsYWIuZ2xpdGNoLm1lXCI+aHR0cHM6Ly93ZWItcHVzaC1jb2RlbGFiLmdsaXRjaC5tZTwvYT4g6I635Y+W77yMIOeUqCBjaHJvbWUg55qEIDxhIGhyZWY9XCJodHRwczovL2dpdGh1Yi5jb20vemFydS93ZWJwdXNoXCI+d2VicHVzaDwvYT4g5o6o6YCB44CCPC9wPlxuPHA+6L+Z6YeM5Lmf5Y+v5Lul55yL5LiA5LiL5oiR55qEPGEgaHJlZj1cImh0dHBzOi8vZ2l0aHViLmNvbS9jbGV2ZXJib3kzMi9jaG9ybWUtUHdhRGVtb1wiPiBHaXRIdWIg6aG56aG555uuIDwvYT7vvIzlrpjmlrnkuZ/mnInlvojlpJrkvovlrZDjgII8L3A+XG48L2Rpdj48L3RlbXBsYXRlPiIsImltcG9ydCB7IHJlbmRlciB9IGZyb20gXCIuL3B3YS5tZD92dWUmdHlwZT10ZW1wbGF0ZSZpZD03OGJiYjdkYlwiXG5jb25zdCBzY3JpcHQgPSB7fVxuXG5pbXBvcnQgZXhwb3J0Q29tcG9uZW50IGZyb20gXCIuLi8uLi9ub2RlX21vZHVsZXMvLnBucG0vdnVlLWxvYWRlckAxNy40LjJfQHZ1ZStjb21waWxlci1zZmNAMy41LjNfdnVlQDMuNS4zX3R5cGVzY3JpcHRANS41LjRfX3dlYnBhY2tANS45NC4wX3dlYnBhY2stX2Z1cWt3Z2dwbGhleTNvaXZ0d2Uyc3RkbzZlL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2Rpc3QvZXhwb3J0SGVscGVyLmpzXCJcbmNvbnN0IF9fZXhwb3J0c19fID0gLyojX19QVVJFX18qL2V4cG9ydENvbXBvbmVudChzY3JpcHQsIFtbJ3JlbmRlcicscmVuZGVyXV0pXG5cbmV4cG9ydCBkZWZhdWx0IF9fZXhwb3J0c19fIl0sIm5hbWVzIjpbImNsYXNzIiwic2NyaXB0IiwiX2NyZWF0ZUVsZW1lbnRCbG9jayIsIl9ob2lzdGVkXzEiLCJfY2FjaGUiLCJfY3JlYXRlU3RhdGljVk5vZGUiXSwic291cmNlUm9vdCI6IiJ9 \ No newline at end of file diff --git a/551.bundle.js b/551.bundle.js new file mode 100644 index 0000000..a926b3d --- /dev/null +++ b/551.bundle.js @@ -0,0 +1,2 @@ +"use strict";(self.webpackChunkcboy_blog=self.webpackChunkcboy_blog||[]).push([[551],{551:function(e,n,t){t.r(n),t.d(n,{default:function(){return s}});var r=t(358);const o={class:"component-typescript"},p={};var s=(0,t(389).A)(p,[["render",function(e,n){return(0,r.uX)(),(0,r.CE)("div",o,n[0]||(n[0]=[(0,r.Fv)('

learn typescript

类型

基本类型:

string number bool \n

数组 []:

string[]  number[]\n

元祖:

[string, number]. 数组中有不同的数据类型\n

对象:

{ name: string; age: number }\n

函数：

(arg1: string, arg?: bool) => void\n

Symbol:

let symbol = Symbol("key"); \n

空：

undefined   null\n

任何类型：

any\n

不存在的值：

never\n

如何定义类型

type 定义类型变量

type Person = { name: string; age: number}\nts 使用 const person1：Person = { name: '22', age: 1};\n

Interfaces 声明 对象 类型的一种方法

Interface Person { name: string; age: number}\n

extends 类型继承于声明的类型

interface a { name: string}\ninterface b extends a {\n\tage: number\n}\nb 的类型等于 { name: string; age: number }\n

in 判断属性是哪个类型中的

type PersonListQuery = { user_ids: string[] }\ntype DogListQuery = { dog_ids: string[] }\n\nfunction getList(query: PersonListQuery | DogListQuery ) {\n\tif ('user_ids' in PersonListQuery) {\n\t \t// 这里可以推导出 query 类型是 PersonListQuery\n\t}\n}\n\n

类型组合

Required<T> 将 T 中所有属性变成必选

Required<{ a?: bool} > = { a: bool }\n

Partial<T> 将 T 中所有属性变成可选

Partial<{ a: bool }> = { a?: bool }\n

Readonly<T> 将 T 中所有属性变成只读，后续 ts 会检测该类型不允许修改

const person2: Readonly<{name: string}> = {name: '22'}\nperson2.name = '33' //error\n

Omit<T, keys> 删除某些属性

interface Person {\n  name: string;\n  age: number;\n}\n \ntype Name = Omit<Person, 'age'>;\nName 的类型定义为 { name: string }\n

Pick<T, keys> 选择类型中的某些属性

interface Person {\n  name: string;\n  age: number;\n}\ntype Name = Pick<Person, 'name'>;\nName 的类型定义为 { name: string }\n

Exclude<T, deleteT> 删除类型 T 中 deleteT 的类型， 相当于 Omit, 第二个值可以是 keys ，也可以是一个类型变量

interface Person {\n  name: string;\n  age: number;\n}\ntype Age = { age: number }\ntype Name = Exclude<Person, Age>\nName 的类型定义为 { name: string }\n

Extract<T, U> 提取 T 继承于的 U 类型

type Person = {  name: string ; age: number } \ntype PersonDetail = { pet: any; phone: number } \ntype Name = { name: string }\ntype Name = Extract<Person | PersonDetail , Name>\n 将提取出含有 name 的类型 Person\n

Parameters<function T> 获取函数类型的函数类型

type getName = (perpson: Person) => string;\ntype queryType = Parameters<getName>;\nqueryType  的类型定义为 Person\n

ReturnType<function T> 获取函数类型的返回值类型

type getName = (perpson: Person) => string;\ntype resType = ReturnType<getName>;\nvalueType 类型为 string\n

Awaited<Promise Type> 获取异步返回的值类型

type getPerson = (id: string) => Promise<Person>\ntype resType = ReturnType<getPerson> // Promise<Person>\ntype valueType = Awaited<resType> // Person\n

Record<K extends keyof any, T> 定义对象的 key 键类型

type Keys = 'name' | 'age' \ntype person = Record<Keys, any>\n// person 的属性只能为 name 和 age\n

NonNullable<T> 去除类型中定义的 null 和 undefined

type PersonHobby = hobby: string | undefined;\ntype Hobby = NonNullable<hobby>\nHobby 类型为  string\n

类型操作

typeof Object 获得对象的类型

const person1 = { name: '22', age: 1}\ntype Person = typeof person1\nPerson 类型为 { name: string; age: number }\n

keyof T 获得类型中的属性

type Person = { name: string; age: number }\ntype Key = keyof Person \nkey 的类型为 'name' | 'age'\n

通常我们可以通过 keyof 约束对象的传参， 如

type Person = { name: string; age: number }\ntype Key = keyof Person;\ntype getPersonAtrribute = (person: Person, key: Key) => Person[Key];\n

或者某些情况下我们想知道一个对象的属性值

const workPerson = { \n\t'1': { name: '1', age: 1},\n\t'2': { name: '2', age: 2},\n}\ntype WorkPerson  = typeof workPerson;  // { '1': {name: string; age: number }, '2': {name: string; age: number }\ntype Key = keyof WorkPerson  // '1' | '2'\ntype Person = WorkPerson[Key]   // {name: string; age: number }\n

| 类型兼容

type width = 'string' | 'number';\n\n则 width 可以是 '32px' 也可以是 '32' 在 渲染时兼容两种类型\n

函数重载

定义不同类型的输入，推到出不同类型的输出

type PersonListQuery = { user_ids: string[] };\ntype DongListQuery = { dog_ids: string[] };\nfunction getList(request: PersonListQuery): Person[];\nfunction getList(request: DogListQuery): Dog[];\n\nfunction getList(query: PersonListQuery | DogListQuery) {\n  if ('user_ids' in query) {  \n    return [] as Person[];\n  } else {\n    return [] as Dog[];\n  }\n}\n\nconst a = getList({ personIds: [], region: 'us'})\n此时 a 的类型将能推到出是 Person[]\n

泛型

类型的传参。 用 T 标识，在实际运用时你传入什么类型，该类型就作为后续推导。

async function request<T>(url: string): Promise<T> {\n  const res = await fetch(url)\n  return res.json();\n}\n\nconst res = await request<Person>('getPersonInfo?id=1'); \n此时 ts 可以推导出 res 的类型是 Person\n

Infer 类型参数使用

通过 Infer 一个类型为变量，定义出获取类型的方法

type addResultType<T> = T extends { a: infer U, b: infer U } ?  U : never;\ntype numberAdd =  addResultType<{ a: 1, b: 2 }>     // 推到出结果类型为 number\ntype textAdd = addResultType<{ a: 'hello', b: 'world' }>     // 推到出结果类型为 string\n

枚举 enum

变量的值是约定的几个取值

const enum PageType {\n  HOME = 'home',\n  VIDEO = 'video',\n}\n\nfunction getPageUrl(page: PageType) {\n  return {\n    [PageType.VIDEO]: "/video",\n    [PageType.HOME]: "/home",\n  }[page];\n}\n

tsconfig

了解了 ts 对于类型的定义和各种规则后，我们则可以在编写 js 代码时利用并进行类型约束。于此同时，我们需要引入 typescript 库去获得这些 ts 能力。

如何引入

npm install  typescript  \n// 不必再多说\n

命令

typescript 包是有命令文件的，通常 ts 的运行则是通过 tsc 配合相关命令去执行的. 具体命令大家可以安装包之后通过 tsc -h 查看 在这里插入图片描述

配置 官网

如果你看了 tsc 命令，你会发现它是有很多命令的，并且有的命令还伴随这相关参数。在工作文件夹中，我们则通过配置文件 tsconfig.js 去配置，保证在项目中的运用。 配置参数这里就不细讲了，还是看官方文档靠谱点。

',85)]))}]])}}]); +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiNTUxLmJ1bmRsZS5qcyIsIm1hcHBpbmdzIjoiNktBQWVBLE1BQU0sd0JDQ2ZDLEVBQVMsQ0FBQyxFQUtoQixPQUZpQyxFLE9BQUEsR0FBZ0JBLEVBQVEsQ0FBQyxDQUFDLFMsZ0NESmpEQyxFQUFBQSxFQUFBQSxJQXFOSixNQXJOSUMsRUFxTkpDLEVBQUEsS0FBQUEsRUFBQSxLQXJOTkMsRUFBQUEsRUFBQUEsSUFBQSwrNk4iLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9jYm95LWJsb2cvLi4vLi4vYmxvZ3MvbWFya2Rvd24vdHlwZXNjcmlwdC5tZCIsIndlYnBhY2s6Ly9jYm95LWJsb2cvLi4vLi4vYmxvZ3MvbWFya2Rvd24vdHlwZXNjcmlwdC5tZD9mNjZmIl0sInNvdXJjZXNDb250ZW50IjpbIjx0ZW1wbGF0ZT48ZGl2IGNsYXNzPVwiY29tcG9uZW50LXR5cGVzY3JpcHRcIj48aDI+bGVhcm4gdHlwZXNjcmlwdDwvaDI+XG48aDM+57G75Z6LPC9oMz5cbjxwPuWfuuacrOexu+Weizo8L3A+XG48cHJlIHYtcHJlPVwiXCI+PGNvZGU+c3RyaW5nIG51bWJlciBib29sIFxuPC9jb2RlPjwvcHJlPlxuPHA+5pWw57uEIDxjb2RlPltdPC9jb2RlPjo8L3A+XG48cHJlIHYtcHJlPVwiXCI+PGNvZGU+c3RyaW5nW10gIG51bWJlcltdXG48L2NvZGU+PC9wcmU+XG48cD7lhYPnpZY6PC9wPlxuPHByZSB2LXByZT1cIlwiPjxjb2RlPltzdHJpbmcsIG51bWJlcl0uIOaVsOe7hOS4reacieS4jeWQjOeahOaVsOaNruexu+Wei1xuPC9jb2RlPjwvcHJlPlxuPHA+5a+56LGhOjwvcD5cbjxwcmUgdi1wcmU9XCJcIj48Y29kZT57IG5hbWU6IHN0cmluZzsgYWdlOiBudW1iZXIgfVxuPC9jb2RlPjwvcHJlPlxuPHA+5Ye95pWw77yaPC9wPlxuPHByZSB2LXByZT1cIlwiPjxjb2RlPihhcmcxOiBzdHJpbmcsIGFyZz86IGJvb2wpID0mZ3Q7IHZvaWRcbjwvY29kZT48L3ByZT5cbjxwPlN5bWJvbDo8L3A+XG48cHJlIHYtcHJlPVwiXCI+PGNvZGU+bGV0IHN5bWJvbCA9IFN5bWJvbChcImtleVwiKTsgXG48L2NvZGU+PC9wcmU+XG48cD7nqbrvvJo8L3A+XG48cHJlIHYtcHJlPVwiXCI+PGNvZGU+dW5kZWZpbmVkICAgbnVsbFxuPC9jb2RlPjwvcHJlPlxuPHA+5Lu75L2V57G75Z6L77yaPC9wPlxuPHByZSB2LXByZT1cIlwiPjxjb2RlPmFueVxuPC9jb2RlPjwvcHJlPlxuPHA+5LiN5a2Y5Zyo55qE5YC877yaPC9wPlxuPHByZSB2LXByZT1cIlwiPjxjb2RlPm5ldmVyXG48L2NvZGU+PC9wcmU+XG48aDM+5aaC5L2V5a6a5LmJ57G75Z6LPC9oMz5cbjxwPjxjb2RlPnR5cGU8L2NvZGU+ICDlrprkuYnnsbvlnovlj5jph488L3A+XG48cHJlIHYtcHJlPVwiXCI+PGNvZGU+dHlwZSBQZXJzb24gPSB7IG5hbWU6IHN0cmluZzsgYWdlOiBudW1iZXJ9XG50cyDkvb/nlKggY29uc3QgcGVyc29uMe+8mlBlcnNvbiA9IHsgbmFtZTogJzIyJywgYWdlOiAxfTtcbjwvY29kZT48L3ByZT5cbjxwPjxjb2RlPkludGVyZmFjZXM8L2NvZGU+IOWjsOaYjiA8Y29kZT7lr7nosaE8L2NvZGU+IOexu+Wei+eahOS4gOenjeaWueazlTwvcD5cbjxwcmUgdi1wcmU9XCJcIj48Y29kZT5JbnRlcmZhY2UgUGVyc29uIHsgbmFtZTogc3RyaW5nOyBhZ2U6IG51bWJlcn1cbjwvY29kZT48L3ByZT5cbjxwPjxjb2RlPmV4dGVuZHM8L2NvZGU+IOexu+Wei+e7p+aJv+S6juWjsOaYjueahOexu+WeizwvcD5cbjxwcmUgdi1wcmU9XCJcIj48Y29kZT5pbnRlcmZhY2UgYSB7IG5hbWU6IHN0cmluZ31cbmludGVyZmFjZSBiIGV4dGVuZHMgYSB7XG5cdGFnZTogbnVtYmVyXG59XG5iIOeahOexu+Wei+etieS6jiB7IG5hbWU6IHN0cmluZzsgYWdlOiBudW1iZXIgfVxuPC9jb2RlPjwvcHJlPlxuPHA+aW4g5Yik5pat5bGe5oCn5piv5ZOq5Liq57G75Z6L5Lit55qEPC9wPlxuPHByZSB2LXByZT1cIlwiPjxjb2RlPnR5cGUgUGVyc29uTGlzdFF1ZXJ5ID0geyB1c2VyX2lkczogc3RyaW5nW10gfVxudHlwZSBEb2dMaXN0UXVlcnkgPSB7IGRvZ19pZHM6IHN0cmluZ1tdIH1cblxuZnVuY3Rpb24gZ2V0TGlzdChxdWVyeTogUGVyc29uTGlzdFF1ZXJ5IHwgRG9nTGlzdFF1ZXJ5ICkge1xuXHRpZiAoJ3VzZXJfaWRzJyBpbiBQZXJzb25MaXN0UXVlcnkpIHtcblx0IFx0Ly8g6L+Z6YeM5Y+v5Lul5o6o5a+85Ye6IHF1ZXJ5IOexu+Wei+aYryBQZXJzb25MaXN0UXVlcnlcblx0fVxufVxuXG48L2NvZGU+PC9wcmU+XG48aDM+57G75Z6L57uE5ZCIPC9oMz5cbjxwPjxjb2RlPlJlcXVpcmVkJmx0O1QmZ3Q7PC9jb2RlPiDlsIYgVCDkuK3miYDmnInlsZ7mgKflj5jmiJDlv4XpgIk8L3A+XG48cHJlIHYtcHJlPVwiXCI+PGNvZGU+UmVxdWlyZWQmbHQ7eyBhPzogYm9vbH0gJmd0OyA9IHsgYTogYm9vbCB9XG48L2NvZGU+PC9wcmU+XG48cD48Y29kZT5QYXJ0aWFsJmx0O1QmZ3Q7PC9jb2RlPiDlsIYgVCDkuK3miYDmnInlsZ7mgKflj5jmiJDlj6/pgIk8L3A+XG48cHJlIHYtcHJlPVwiXCI+PGNvZGU+UGFydGlhbCZsdDt7IGE6IGJvb2wgfSZndDsgPSB7IGE/OiBib29sIH1cbjwvY29kZT48L3ByZT5cbjxwPjxjb2RlPlJlYWRvbmx5Jmx0O1QmZ3Q7PC9jb2RlPiDlsIYgVCDkuK3miYDmnInlsZ7mgKflj5jmiJDlj6ror7vvvIzlkI7nu60gdHMg5Lya5qOA5rWL6K+l57G75Z6L5LiN5YWB6K645L+u5pS5PC9wPlxuPHByZSB2LXByZT1cIlwiPjxjb2RlPmNvbnN0IHBlcnNvbjI6IFJlYWRvbmx5Jmx0O3tuYW1lOiBzdHJpbmd9Jmd0OyA9IHtuYW1lOiAnMjInfVxucGVyc29uMi5uYW1lID0gJzMzJyAvL2Vycm9yXG48L2NvZGU+PC9wcmU+XG48cD48Y29kZT5PbWl0Jmx0O1QsIGtleXMmZ3Q7PC9jb2RlPiDliKDpmaTmn5DkupvlsZ7mgKc8L3A+XG48cHJlIHYtcHJlPVwiXCI+PGNvZGU+aW50ZXJmYWNlIFBlcnNvbiB7XG4gIG5hbWU6IHN0cmluZztcbiAgYWdlOiBudW1iZXI7XG59XG4gXG50eXBlIE5hbWUgPSBPbWl0Jmx0O1BlcnNvbiwgJ2FnZScmZ3Q7O1xuTmFtZSDnmoTnsbvlnovlrprkuYnkuLogeyBuYW1lOiBzdHJpbmcgfVxuPC9jb2RlPjwvcHJlPlxuPHA+PGNvZGU+UGljayZsdDtULCBrZXlzJmd0OzwvY29kZT4g6YCJ5oup57G75Z6L5Lit55qE5p+Q5Lqb5bGe5oCnPC9wPlxuPHByZSB2LXByZT1cIlwiPjxjb2RlPmludGVyZmFjZSBQZXJzb24ge1xuICBuYW1lOiBzdHJpbmc7XG4gIGFnZTogbnVtYmVyO1xufVxudHlwZSBOYW1lID0gUGljayZsdDtQZXJzb24sICduYW1lJyZndDs7XG5OYW1lIOeahOexu+Wei+WumuS5ieS4uiB7IG5hbWU6IHN0cmluZyB9XG48L2NvZGU+PC9wcmU+XG48cD48Y29kZT5FeGNsdWRlJmx0O1QsIGRlbGV0ZVQmZ3Q7PC9jb2RlPiDliKDpmaTnsbvlnosgVCDkuK0gZGVsZXRlVCDnmoTnsbvlnovvvIwg55u45b2T5LqOIE9taXQsIOesrOS6jOS4quWAvOWPr+S7peaYryBrZXlzIO+8jOS5n+WPr+S7peaYr+S4gOS4quexu+Wei+WPmOmHjzwvcD5cbjxwcmUgdi1wcmU9XCJcIj48Y29kZT5pbnRlcmZhY2UgUGVyc29uIHtcbiAgbmFtZTogc3RyaW5nO1xuICBhZ2U6IG51bWJlcjtcbn1cbnR5cGUgQWdlID0geyBhZ2U6IG51bWJlciB9XG50eXBlIE5hbWUgPSBFeGNsdWRlJmx0O1BlcnNvbiwgQWdlJmd0O1xuTmFtZSDnmoTnsbvlnovlrprkuYnkuLogeyBuYW1lOiBzdHJpbmcgfVxuPC9jb2RlPjwvcHJlPlxuPHA+PGNvZGU+RXh0cmFjdCZsdDtULCBVJmd0OzwvY29kZT4g5o+Q5Y+WIFQg57un5om/5LqO55qEIFUg57G75Z6LPC9wPlxuPHByZSB2LXByZT1cIlwiPjxjb2RlPnR5cGUgUGVyc29uID0geyAgbmFtZTogc3RyaW5nIDsgYWdlOiBudW1iZXIgfSBcbnR5cGUgUGVyc29uRGV0YWlsID0geyBwZXQ6IGFueTsgcGhvbmU6IG51bWJlciB9IFxudHlwZSBOYW1lID0geyBuYW1lOiBzdHJpbmcgfVxudHlwZSBOYW1lID0gRXh0cmFjdCZsdDtQZXJzb24gfCBQZXJzb25EZXRhaWwgLCBOYW1lJmd0O1xuIOWwhuaPkOWPluWHuuWQq+aciSBuYW1lIOeahOexu+WeiyBQZXJzb25cbjwvY29kZT48L3ByZT5cbjxwPjxjb2RlPlBhcmFtZXRlcnMmbHQ7ZnVuY3Rpb24gVCZndDs8L2NvZGU+IOiOt+WPluWHveaVsOexu+Wei+eahOWHveaVsOexu+WeizwvcD5cbjxwcmUgdi1wcmU9XCJcIj48Y29kZT50eXBlIGdldE5hbWUgPSAocGVycHNvbjogUGVyc29uKSA9Jmd0OyBzdHJpbmc7XG50eXBlIHF1ZXJ5VHlwZSA9IFBhcmFtZXRlcnMmbHQ7Z2V0TmFtZSZndDs7XG5xdWVyeVR5cGUgIOeahOexu+Wei+WumuS5ieS4uiBQZXJzb25cbjwvY29kZT48L3ByZT5cbjxwPjxjb2RlPlJldHVyblR5cGUmbHQ7ZnVuY3Rpb24gVCZndDs8L2NvZGU+IOiOt+WPluWHveaVsOexu+Wei+eahOi/lOWbnuWAvOexu+WeizwvcD5cbjxwcmUgdi1wcmU9XCJcIj48Y29kZT50eXBlIGdldE5hbWUgPSAocGVycHNvbjogUGVyc29uKSA9Jmd0OyBzdHJpbmc7XG50eXBlIHJlc1R5cGUgPSBSZXR1cm5UeXBlJmx0O2dldE5hbWUmZ3Q7O1xudmFsdWVUeXBlIOexu+Wei+S4uiBzdHJpbmdcbjwvY29kZT48L3ByZT5cbjxwPjxjb2RlPkF3YWl0ZWQmbHQ7UHJvbWlzZSBUeXBlJmd0OzwvY29kZT4g6I635Y+W5byC5q2l6L+U5Zue55qE5YC857G75Z6LPC9wPlxuPHByZSB2LXByZT1cIlwiPjxjb2RlPnR5cGUgZ2V0UGVyc29uID0gKGlkOiBzdHJpbmcpID0mZ3Q7IFByb21pc2UmbHQ7UGVyc29uJmd0O1xudHlwZSByZXNUeXBlID0gUmV0dXJuVHlwZSZsdDtnZXRQZXJzb24mZ3Q7IC8vIFByb21pc2UmbHQ7UGVyc29uJmd0O1xudHlwZSB2YWx1ZVR5cGUgPSBBd2FpdGVkJmx0O3Jlc1R5cGUmZ3Q7IC8vIFBlcnNvblxuPC9jb2RlPjwvcHJlPlxuPHA+PGNvZGU+UmVjb3JkJmx0O0sgZXh0ZW5kcyBrZXlvZiBhbnksIFQmZ3Q7PC9jb2RlPiAg5a6a5LmJ5a+56LGh55qEIGtleSDplK7nsbvlnos8L3A+XG48cHJlIHYtcHJlPVwiXCI+PGNvZGU+dHlwZSBLZXlzID0gJ25hbWUnIHwgJ2FnZScgXG50eXBlIHBlcnNvbiA9IFJlY29yZCZsdDtLZXlzLCBhbnkmZ3Q7XG4vLyBwZXJzb24g55qE5bGe5oCn5Y+q6IO95Li6IG5hbWUg5ZKMIGFnZVxuPC9jb2RlPjwvcHJlPlxuPHA+PGNvZGU+Tm9uTnVsbGFibGUmbHQ7VCZndDs8L2NvZGU+IOWOu+mZpOexu+Wei+S4reWumuS5ieeahCBudWxsIOWSjCB1bmRlZmluZWQ8L3A+XG48cHJlIHYtcHJlPVwiXCI+PGNvZGU+dHlwZSBQZXJzb25Ib2JieSA9IGhvYmJ5OiBzdHJpbmcgfCB1bmRlZmluZWQ7XG50eXBlIEhvYmJ5ID0gTm9uTnVsbGFibGUmbHQ7aG9iYnkmZ3Q7XG5Ib2JieSDnsbvlnovkuLogIHN0cmluZ1xuPC9jb2RlPjwvcHJlPlxuPGgzPuexu+Wei+aTjeS9nDwvaDM+XG48cD48Y29kZT50eXBlb2YgT2JqZWN0PC9jb2RlPiDojrflvpc8Y29kZT7lr7nosaE8L2NvZGU+55qE57G75Z6LPC9wPlxuPHByZSB2LXByZT1cIlwiPjxjb2RlPmNvbnN0IHBlcnNvbjEgPSB7IG5hbWU6ICcyMicsIGFnZTogMX1cbnR5cGUgUGVyc29uID0gdHlwZW9mIHBlcnNvbjFcblBlcnNvbiDnsbvlnovkuLogeyBuYW1lOiBzdHJpbmc7IGFnZTogbnVtYmVyIH1cbjwvY29kZT48L3ByZT5cbjxwPjxjb2RlPmtleW9mIFQ8L2NvZGU+ICDojrflvpfnsbvlnovkuK3nmoTlsZ7mgKc8L3A+XG48cHJlIHYtcHJlPVwiXCI+PGNvZGU+dHlwZSBQZXJzb24gPSB7IG5hbWU6IHN0cmluZzsgYWdlOiBudW1iZXIgfVxudHlwZSBLZXkgPSBrZXlvZiBQZXJzb24gXG5rZXkg55qE57G75Z6L5Li6ICduYW1lJyB8ICdhZ2UnXG48L2NvZGU+PC9wcmU+XG48cD7pgJrluLjmiJHku6zlj6/ku6XpgJrov4cga2V5b2Yg57qm5p2f5a+56LGh55qE5Lyg5Y+C77yMIOWmgjwvcD5cbjxwcmUgdi1wcmU9XCJcIj48Y29kZT50eXBlIFBlcnNvbiA9IHsgbmFtZTogc3RyaW5nOyBhZ2U6IG51bWJlciB9XG50eXBlIEtleSA9IGtleW9mIFBlcnNvbjtcbnR5cGUgZ2V0UGVyc29uQXRycmlidXRlID0gKHBlcnNvbjogUGVyc29uLCBrZXk6IEtleSkgPSZndDsgUGVyc29uW0tleV07XG48L2NvZGU+PC9wcmU+XG48cD7miJbogIXmn5Dkupvmg4XlhrXkuIvmiJHku6zmg7Pnn6XpgZPkuIDkuKrlr7nosaHnmoTlsZ7mgKflgLw8L3A+XG48cHJlIHYtcHJlPVwiXCI+PGNvZGU+Y29uc3Qgd29ya1BlcnNvbiA9IHsgXG5cdCcxJzogeyBuYW1lOiAnMScsIGFnZTogMX0sXG5cdCcyJzogeyBuYW1lOiAnMicsIGFnZTogMn0sXG59XG50eXBlIFdvcmtQZXJzb24gID0gdHlwZW9mIHdvcmtQZXJzb247ICAvLyB7ICcxJzoge25hbWU6IHN0cmluZzsgYWdlOiBudW1iZXIgfSwgJzInOiB7bmFtZTogc3RyaW5nOyBhZ2U6IG51bWJlciB9XG50eXBlIEtleSA9IGtleW9mIFdvcmtQZXJzb24gIC8vICcxJyB8ICcyJ1xudHlwZSBQZXJzb24gPSBXb3JrUGVyc29uW0tleV0gICAvLyB7bmFtZTogc3RyaW5nOyBhZ2U6IG51bWJlciB9XG48L2NvZGU+PC9wcmU+XG48cD48Y29kZT58PC9jb2RlPiDnsbvlnovlhbzlrrk8L3A+XG48cHJlIHYtcHJlPVwiXCI+PGNvZGU+dHlwZSB3aWR0aCA9ICdzdHJpbmcnIHwgJ251bWJlcic7XG5cbuWImSB3aWR0aCDlj6/ku6XmmK8gJzMycHgnIOS5n+WPr+S7peaYryAnMzInIOWcqCDmuLLmn5Pml7blhbzlrrnkuKTnp43nsbvlnotcbjwvY29kZT48L3ByZT5cbjxoMz7lh73mlbDph43ovb08L2gzPlxuPHA+5a6a5LmJ5LiN5ZCM57G75Z6L55qE6L6T5YWl77yM5o6o5Yiw5Ye65LiN5ZCM57G75Z6L55qE6L6T5Ye6PC9wPlxuPHByZSB2LXByZT1cIlwiPjxjb2RlPnR5cGUgUGVyc29uTGlzdFF1ZXJ5ID0geyB1c2VyX2lkczogc3RyaW5nW10gfTtcbnR5cGUgRG9uZ0xpc3RRdWVyeSA9IHsgZG9nX2lkczogc3RyaW5nW10gfTtcbmZ1bmN0aW9uIGdldExpc3QocmVxdWVzdDogUGVyc29uTGlzdFF1ZXJ5KTogUGVyc29uW107XG5mdW5jdGlvbiBnZXRMaXN0KHJlcXVlc3Q6IERvZ0xpc3RRdWVyeSk6IERvZ1tdO1xuXG5mdW5jdGlvbiBnZXRMaXN0KHF1ZXJ5OiBQZXJzb25MaXN0UXVlcnkgfCBEb2dMaXN0UXVlcnkpIHtcbiAgaWYgKCd1c2VyX2lkcycgaW4gcXVlcnkpIHsgIFxuICAgIHJldHVybiBbXSBhcyBQZXJzb25bXTtcbiAgfSBlbHNlIHtcbiAgICByZXR1cm4gW10gYXMgRG9nW107XG4gIH1cbn1cblxuY29uc3QgYSA9IGdldExpc3QoeyBwZXJzb25JZHM6IFtdLCByZWdpb246ICd1cyd9KVxu5q2k5pe2IGEg55qE57G75Z6L5bCG6IO95o6o5Yiw5Ye65pivIFBlcnNvbltdXG48L2NvZGU+PC9wcmU+XG48aDM+5rOb5Z6LPC9oMz5cbjxwPuexu+Wei+eahOS8oOWPguOAgiDnlKggVCDmoIfor4bvvIzlnKjlrp7pmYXov5DnlKjml7bkvaDkvKDlhaXku4DkuYjnsbvlnovvvIzor6XnsbvlnovlsLHkvZzkuLrlkI7nu63mjqjlr7zjgII8L3A+XG48cHJlIHYtcHJlPVwiXCI+PGNvZGU+YXN5bmMgZnVuY3Rpb24gcmVxdWVzdCZsdDtUJmd0Oyh1cmw6IHN0cmluZyk6IFByb21pc2UmbHQ7VCZndDsge1xuICBjb25zdCByZXMgPSBhd2FpdCBmZXRjaCh1cmwpXG4gIHJldHVybiByZXMuanNvbigpO1xufVxuXG5jb25zdCByZXMgPSBhd2FpdCByZXF1ZXN0Jmx0O1BlcnNvbiZndDsoJ2dldFBlcnNvbkluZm8/aWQ9MScpOyBcbuatpOaXtiB0cyDlj6/ku6Xmjqjlr7zlh7ogcmVzIOeahOexu+Wei+aYryBQZXJzb25cbjwvY29kZT48L3ByZT5cbjxoMz5JbmZlciAg57G75Z6L5Y+C5pWw5L2/55SoPC9oMz5cbjxwPumAmui/hyBJbmZlciDkuIDkuKrnsbvlnovkuLrlj5jph4/vvIzlrprkuYnlh7rojrflj5bnsbvlnovnmoTmlrnms5U8L3A+XG48cHJlIHYtcHJlPVwiXCI+PGNvZGU+dHlwZSBhZGRSZXN1bHRUeXBlJmx0O1QmZ3Q7ID0gVCBleHRlbmRzIHsgYTogaW5mZXIgVSwgYjogaW5mZXIgVSB9ID8gIFUgOiBuZXZlcjtcbnR5cGUgbnVtYmVyQWRkID0gIGFkZFJlc3VsdFR5cGUmbHQ7eyBhOiAxLCBiOiAyIH0mZ3Q7ICAgICAvLyDmjqjliLDlh7rnu5PmnpznsbvlnovkuLogbnVtYmVyXG50eXBlIHRleHRBZGQgPSBhZGRSZXN1bHRUeXBlJmx0O3sgYTogJ2hlbGxvJywgYjogJ3dvcmxkJyB9Jmd0OyAgICAgLy8g5o6o5Yiw5Ye657uT5p6c57G75Z6L5Li6IHN0cmluZ1xuPC9jb2RlPjwvcHJlPlxuPGgzPuaemuS4viBlbnVtPC9oMz5cbjxwPuWPmOmHj+eahOWAvOaYr+e6puWumueahOWHoOS4quWPluWAvDwvcD5cbjxwcmUgdi1wcmU9XCJcIj48Y29kZT5jb25zdCBlbnVtIFBhZ2VUeXBlIHtcbiAgSE9NRSA9ICdob21lJyxcbiAgVklERU8gPSAndmlkZW8nLFxufVxuXG5mdW5jdGlvbiBnZXRQYWdlVXJsKHBhZ2U6IFBhZ2VUeXBlKSB7XG4gIHJldHVybiB7XG4gICAgW1BhZ2VUeXBlLlZJREVPXTogXCIvdmlkZW9cIixcbiAgICBbUGFnZVR5cGUuSE9NRV06IFwiL2hvbWVcIixcbiAgfVtwYWdlXTtcbn1cbjwvY29kZT48L3ByZT5cbjxoMj50c2NvbmZpZzwvaDI+XG48cD7kuobop6PkuoYgdHMg5a+55LqO57G75Z6L55qE5a6a5LmJ5ZKM5ZCE56eN6KeE5YiZ5ZCO77yM5oiR5Lus5YiZ5Y+v5Lul5Zyo57yW5YaZIGpzIOS7o+eggeaXtuWIqeeUqOW5tui/m+ihjOexu+Wei+e6puadn+OAguS6juatpOWQjOaXtu+8jOaIkeS7rOmcgOimgeW8leWFpSB0eXBlc2NyaXB0IOW6k+WOu+iOt+W+l+i/meS6myB0cyDog73lipvjgII8L3A+XG48aDM+5aaC5L2V5byV5YWlPC9oMz5cbjxwcmUgdi1wcmU9XCJcIj48Y29kZT5ucG0gaW5zdGFsbCAgdHlwZXNjcmlwdCAgXG4vLyDkuI3lv4Xlho3lpJror7RcbjwvY29kZT48L3ByZT5cbjxoMz7lkb3ku6Q8L2gzPlxuPHA+dHlwZXNjcmlwdCDljIXmmK/mnInlkb3ku6Tmlofku7bnmoTvvIzpgJrluLggdHMg55qE6L+Q6KGM5YiZ5piv6YCa6L+HIHRzYyDphY3lkIjnm7jlhbPlkb3ku6TljrvmiafooYznmoQuIOWFt+S9k+WRveS7pOWkp+WutuWPr+S7peWuieijheWMheS5i+WQjumAmui/hyB0c2MgLWgg5p+l55yLXG48aW1nIHNyYz1cImh0dHBzOi8vaS1ibG9nLmNzZG5pbWcuY24vYmxvZ19taWdyYXRlLzM0OWZmYzM2MmYwZDgzMWE3ODBkMmQ3Zjc1NDg5M2ExLnBuZ1wiIGFsdD1cIuWcqOi/memHjOaPkuWFpeWbvueJh+aPj+i/sFwiPjwvcD5cbjxoMz7phY3nva4gPGEgaHJlZj1cImh0dHBzOi8vd3d3LnR5cGVzY3JpcHRsYW5nLm9yZy9kb2NzL2hhbmRib29rL3RzY29uZmlnLWpzb24uaHRtbFwiPuWumOe9kTwvYT48L2gzPlxuPHA+5aaC5p6c5L2g55yL5LqGIHRzYyDlkb3ku6TvvIzkvaDkvJrlj5HnjrDlroPmmK/mnInlvojlpJrlkb3ku6TnmoTvvIzlubbkuJTmnInnmoTlkb3ku6Tov5jkvLTpmo/ov5nnm7jlhbPlj4LmlbDjgILlnKjlt6XkvZzmlofku7blpLnkuK3vvIzmiJHku6zliJnpgJrov4fphY3nva7mlofku7YgPGNvZGU+dHNjb25maWcuanMgPC9jb2RlPiDljrvphY3nva7vvIzkv53or4HlnKjpobnnm67kuK3nmoTov5DnlKjjgIIg6YWN572u5Y+C5pWw6L+Z6YeM5bCx5LiN57uG6K6y5LqG77yM6L+Y5piv55yL5a6Y5pa55paH5qGj6Z2g6LCx54K544CCPC9wPlxuPC9kaXY+PC90ZW1wbGF0ZT4iLCJpbXBvcnQgeyByZW5kZXIgfSBmcm9tIFwiLi90eXBlc2NyaXB0Lm1kP3Z1ZSZ0eXBlPXRlbXBsYXRlJmlkPTNkZGU3MDgyXCJcbmNvbnN0IHNjcmlwdCA9IHt9XG5cbmltcG9ydCBleHBvcnRDb21wb25lbnQgZnJvbSBcIi4uLy4uL25vZGVfbW9kdWxlcy8ucG5wbS92dWUtbG9hZGVyQDE3LjQuMl9AdnVlK2NvbXBpbGVyLXNmY0AzLjUuM192dWVAMy41LjNfdHlwZXNjcmlwdEA1LjUuNF9fd2VicGFja0A1Ljk0LjBfd2VicGFjay1fZnVxa3dnZ3BsaGV5M29pdnR3ZTJzdGRvNmUvbm9kZV9tb2R1bGVzL3Z1ZS1sb2FkZXIvZGlzdC9leHBvcnRIZWxwZXIuanNcIlxuY29uc3QgX19leHBvcnRzX18gPSAvKiNfX1BVUkVfXyovZXhwb3J0Q29tcG9uZW50KHNjcmlwdCwgW1sncmVuZGVyJyxyZW5kZXJdXSlcblxuZXhwb3J0IGRlZmF1bHQgX19leHBvcnRzX18iXSwibmFtZXMiOlsiY2xhc3MiLCJzY3JpcHQiLCJfY3JlYXRlRWxlbWVudEJsb2NrIiwiX2hvaXN0ZWRfMSIsIl9jYWNoZSIsIl9jcmVhdGVTdGF0aWNWTm9kZSJdLCJzb3VyY2VSb290IjoiIn0= \ No newline at end of file diff --git a/627.bundle.js b/627.bundle.js new file mode 100644 index 0000000..278bdf1 --- /dev/null +++ b/627.bundle.js @@ -0,0 +1,2 @@ +"use strict";(self.webpackChunkcboy_blog=self.webpackChunkcboy_blog||[]).push([[627],{627:function(e,n,t){t.r(n),t.d(n,{default:function(){return i}});var o=t(358);const r={class:"component-module"},c={};var i=(0,t(389).A)(c,[["render",function(e,n){return(0,o.uX)(),(0,o.CE)("div",r,n[0]||(n[0]=[(0,o.Fv)('

当我们要完成一个应用的时候，会根据对应的功能划分为许多不同的模块，就像一个论坛，有发帖的模块，评论的模块，js 中的模块也正是如此，一个具体功能的代码抽成一个文件，当你做一个东西的时候需要用到这个功能的时，可以直接使用这个文件，实现功能的分离，并能在多个需要的地方使用。就像是螺丝钉、螺丝帽、垫片一样的，通过组合使用实现出你的产品。

通过直白的描述，我们可以知道，模块化的好处就是，抽离代码，重复使用，如现在很直观的代表 npm 包。

那么模块化到底是怎么实现的呢？

先来了解一下历史，以前的 html 不知道大家还记不记的， 一个html 页面引入了多个 js 文件.

<!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n    <meta charset="UTF-8">\n    <title>So UI - A Component Library for Vue.js.</title>\n</head>\n<body>\n    <div id="app"></div>\n    <script src="a.js"></script>\n    <script src="b.js"></script>\n    <script src="c.js"></script>\n    <script src="d.js"></script>\n    <script src="e.js"></script>\n</body>\n</html>\n

如上，引入了 a/b/c/d/e 五个文件，这五个文件如果相互之间有依赖，还要注意引入的顺序，并且还需要注意它们里面的变量名，若是重复利用到其他的项目，其他项目也需要注意到以上两点问题。为了解决这一问题，就有了模块化的规范。

模块化的规范，有 CMD 和 AMD

CMD (Common Module Definition), 是sea.js在推广过程中对模块定义的规范化产出，主要用于浏览器端。它主要特点是：对于依赖的模块是延迟执行，依赖可以就近书写，等到需要用这个依赖的时候再引入这个依赖，应用有sea.js.

AMD规范（Asynchronous Module Definition）：是 RequireJS 在推广过程中对模块定义的规范化产出，也是主要用于浏览器端。其特点是：依赖前置，需要在定义时就写好需要的依赖，提前执行依赖，应用有require.js

尽情的猜测，require.js 是怎么弄的呢？ 它需要依次的加载模块然后去进行相应的操作，加载模块就是要引入这个文件，那么这里也还是通过动态加载 script 的方法，并通过 onload 去执行后面的回调了。

我们知道现如今 es6 已经支持模块化了，它分为 export 和 import 两个命令。 export 导出你定义的模块变量， import 引入一个模块变量。

export { \n \tone, \n \ttwo\n }\n export default three;\n

对应的引入代码

import  { one, two }  three from 'a.js'\n

可以看到 export 可以导出一个默认的变量，也可以导出变量对象，这里引入的时候名字不要写错了。 那么 es6 的模块化通过babel 转码其实就是 umd 模块规范， 它是一个兼容 cmd 和 amd 的模块化规范, 同时还支持老式的“全局”变量规范

(function (root, factory) {\n    if (typeof define === 'function' && define.amd) {\n        // AMD\n        define(['jquery'], factory);\n    } else if (typeof exports === 'object') {\n        // Node, CommonJS之类的\n        module.exports = factory(require('jquery'));\n    } else {\n        // 浏览器全局变量(root 即 window)\n        root.returnExports = factory(root.jQuery);\n    }\n}(this, function ($) {\n    //    方法\n    function myFunc(){};\n \n    //    暴露公共方法\n    return myFunc;\n}));\n

那么浏览器是如何支持这种规范的呢？ 其实是实现了根据这种规范定制出来的功能。这里我们就按照 实现了 AMD 规范的 require.js 来讲一下实现代码。

AMD 定义一个模块的方法是 define(id?, dependencies?, factory)。

参考define 的方法代码

 define = function (name, deps, callback) {\n        var node, context;\n        \n        //Allow for anonymous modules\n        if (typeof name !== 'string') {\n            //Adjust args appropriately\n            callback = deps;\n            deps = name;\n            name = null;\n        }\n\n        //This module may not have dependencies\n        if (!isArray(deps)) {\n            callback = deps;\n            deps = null;\n        }\n\n        //If no name, and callback is a function, then figure out if it a\n        //CommonJS thing with dependencies.\n        if (!deps && isFunction(callback)) {\n            deps = [];\n            //移除注释\n            //查找 require 语句，收集依赖到 deps 里面\n            // but only if there are function args.\n            if (callback.length) {\n                callback\n                    .toString()\n                    .replace(commentRegExp, commentReplace)\n                    .replace(cjsRequireRegExp, function (match, dep) {\n                        deps.push(dep);\n                    });\n\n                //May be a CommonJS thing even without require calls, but still\n                //could use exports, and module. Avoid doing exports and module\n                //work though if it just needs require.\n                //REQUIRES the function to expect the CommonJS variables in the\n                //order listed below.\n                deps = (callback.length === 1 ? ['require'] : ['require', 'exports', 'module']).concat(deps);\n            }\n        }\n\n        //If in IE 6-8 and hit an anonymous define() call, do the interactive\n        //work.\n        if (useInteractive) {\n            node = currentlyAddingScript || getInteractiveScript();\n            if (node) {\n                if (!name) {\n                    name = node.getAttribute('data-requiremodule');\n                }\n                context = contexts[node.getAttribute('data-requirecontext')];\n            }\n        }\n\n        //Always save off evaluating the def call until the script onload handler.\n        //This allows multiple modules to be in a file without prematurely\n        //tracing dependencies, and allows for anonymous module support,\n        //where the module name is not known until the script onload event\n        //occurs. If no context, use the global queue, and get it processed\n        //in the onscript load callback.\n        if (context) {\n            context.defQueue.push([name, deps, callback]);\n            context.defQueueMap[name] = true;\n        } else {\n            globalDefQueue.push([name, deps, callback]);\n        }\n    };\n\n    define.amd = {\n        jQuery: true\n    };\n    \n\treq.exec = function (text) {\n        /*jslint evil: true */\n        return eval(text);\n    };\n\n    //Set up with config info.\n    req(cfg);\n

可以知道，这一段代码是解析定义是模块所需的依赖放置 context 的模块定义队列中。然后我们就要通过 req 去执行加载依赖，我们来看看 req 的定义。

req = requirejs = function (deps, callback, errback, optional) {\n\n        //Find the right context, use default\n        var context, config,\n            contextName = defContextName;\n\n        // Determine if have config object in the call.\n        if (!isArray(deps) && typeof deps !== 'string') {\n            // deps is a config object\n            config = deps;\n            if (isArray(callback)) {\n                // Adjust args if there are dependencies\n                deps = callback;\n                callback = errback;\n                errback = optional;\n            } else {\n                deps = [];\n            }\n        }\n\n        if (config && config.context) {\n            contextName = config.context;\n        }\n       \n        if (config) {\n            context.configure(config); // 完善配置\n        }\n\n        return context.require(deps, callback, errback); \n

这里的代码把 依赖，回调， 错误处理和配置项都传进来了，进行了配置上的处理之后，我们可以看到最后再去根据配置加载。 我们再来看 context.require 方法

makeRequire: function (relMap, options) {\n\t\toptions = options || {};\n\t\tfunction localRequire(deps, callback, errback) {\n\t\t\t.... 当前 require 的转换\n      \t \treturn localRequire;\n  \t\t }\n\t\tcompleteLoad: function (moduleName) {\n\t\t\t判断 context 的依赖队列，是继续加载还是执行回调\n\t\t}\n\t\t nameToUrl: function (moduleName, ext, skipExt) {\n\t\t \t根据模块名和配置得到加载的路径\n\t\t }\n\t\t load: function (id, url) {\n\t               req.load(context, id, url);\n\t      },\n\t      execCb: function (name, callback, args, exports) {\n\t                return callback.apply(exports, args);\n\t        },\n\t\tonScriptLoad: function (evt) {\n\t\t\t脚本加载完成后得到数据，执行 context.completeLoad(data.id);\n\t\t}\n\t\tonScriptError: function (evt) {\n\t\t\t加载错误执行错误处理\n\t\t}\n\t};\n   context.require = context.makeRequire();\n

那我们知道其实就是围着这语法的解析，进行一系列的脚本加载，然后执行回调。

',25)]))}]])}}]); +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiNjI3LmJ1bmRsZS5qcyIsIm1hcHBpbmdzIjoiNktBQWVBLE1BQU0sb0JDQ2ZDLEVBQVMsQ0FBQyxFQUtoQixPQUZpQyxFLE9BQUEsR0FBZ0JBLEVBQVEsQ0FBQyxDQUFDLFMsZ0NESmpEQyxFQUFBQSxFQUFBQSxJQXVNSixNQXZNSUMsRUF1TUpDLEVBQUEsS0FBQUEsRUFBQSxLQXZNTkMsRUFBQUEsRUFBQUEsSUFBQSxtOE8iLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9jYm95LWJsb2cvLi4vLi4vYmxvZ3MvbWFya2Rvd24vbW9kdWxlLm1kIiwid2VicGFjazovL2Nib3ktYmxvZy8uLi8uLi9ibG9ncy9tYXJrZG93bi9tb2R1bGUubWQ/MTE2MiJdLCJzb3VyY2VzQ29udGVudCI6WyI8dGVtcGxhdGU+PGRpdiBjbGFzcz1cImNvbXBvbmVudC1tb2R1bGVcIj48cD7lvZPmiJHku6zopoHlrozmiJDkuIDkuKrlupTnlKjnmoTml7blgJnvvIzkvJrmoLnmja7lr7nlupTnmoTlip/og73liJLliIbkuLrorrjlpJrkuI3lkIznmoTmqKHlnZfvvIzlsLHlg4/kuIDkuKrorrrlnZvvvIzmnInlj5HluJbnmoTmqKHlnZfvvIzor4TorrrnmoTmqKHlnZfvvIxqcyDkuK3nmoTmqKHlnZfkuZ/mraPmmK/lpoLmraTvvIzkuIDkuKrlhbfkvZPlip/og73nmoTku6PnoIHmir3miJDkuIDkuKrmlofku7bvvIzlvZPkvaDlgZrkuIDkuKrkuJzopb/nmoTml7blgJnpnIDopoHnlKjliLDov5nkuKrlip/og73nmoTml7bvvIzlj6/ku6Xnm7TmjqXkvb/nlKjov5nkuKrmlofku7bvvIzlrp7njrDlip/og73nmoTliIbnprvvvIzlubbog73lnKjlpJrkuKrpnIDopoHnmoTlnLDmlrnkvb/nlKjjgILlsLHlg4/mmK/onrrkuJ3pkonjgIHonrrkuJ3luL3jgIHlnqvniYfkuIDmoLfnmoTvvIzpgJrov4fnu4TlkIjkvb/nlKjlrp7njrDlh7rkvaDnmoTkuqflk4HjgII8L3A+XG48cD7pgJrov4fnm7Tnmb3nmoTmj4/ov7DvvIzmiJHku6zlj6/ku6Xnn6XpgZPvvIzmqKHlnZfljJbnmoTlpb3lpITlsLHmmK/vvIzmir3nprvku6PnoIHvvIzph43lpI3kvb/nlKjvvIzlpoLnjrDlnKjlvojnm7Top4LnmoTku6PooaggbnBtIOWMheOAgjwvcD5cbjxwPumCo+S5iOaooeWdl+WMluWIsOW6leaYr+aAjuS5iOWunueOsOeahOWRou+8nzwvcD5cbjxwPuWFiOadpeS6huino+S4gOS4i+WOhuWPsu+8jOS7peWJjeeahCBodG1sIOS4jeefpemBk+Wkp+Wutui/mOiusOS4jeiusOeahO+8jCDkuIDkuKpodG1sIOmhtemdouW8leWFpeS6huWkmuS4qiBqcyDmlofku7YuPC9wPlxuPHByZSB2LXByZT1cIlwiPjxjb2RlPiZsdDshRE9DVFlQRSBodG1sJmd0O1xuJmx0O2h0bWwgbGFuZz1cInpoLUNOXCImZ3Q7XG4mbHQ7aGVhZCZndDtcbiAgICAmbHQ7bWV0YSBjaGFyc2V0PVwiVVRGLThcIiZndDtcbiAgICAmbHQ7dGl0bGUmZ3Q7U28gVUkgLSBBIENvbXBvbmVudCBMaWJyYXJ5IGZvciBWdWUuanMuJmx0Oy90aXRsZSZndDtcbiZsdDsvaGVhZCZndDtcbiZsdDtib2R5Jmd0O1xuICAgICZsdDtkaXYgaWQ9XCJhcHBcIiZndDsmbHQ7L2RpdiZndDtcbiAgICAmbHQ7c2NyaXB0IHNyYz1cImEuanNcIiZndDsmbHQ7L3NjcmlwdCZndDtcbiAgICAmbHQ7c2NyaXB0IHNyYz1cImIuanNcIiZndDsmbHQ7L3NjcmlwdCZndDtcbiAgICAmbHQ7c2NyaXB0IHNyYz1cImMuanNcIiZndDsmbHQ7L3NjcmlwdCZndDtcbiAgICAmbHQ7c2NyaXB0IHNyYz1cImQuanNcIiZndDsmbHQ7L3NjcmlwdCZndDtcbiAgICAmbHQ7c2NyaXB0IHNyYz1cImUuanNcIiZndDsmbHQ7L3NjcmlwdCZndDtcbiZsdDsvYm9keSZndDtcbiZsdDsvaHRtbCZndDtcbjwvY29kZT48L3ByZT5cbjxwPuWmguS4iu+8jOW8leWFpeS6hiBhL2IvYy9kL2Ug5LqU5Liq5paH5Lu277yM6L+Z5LqU5Liq5paH5Lu25aaC5p6c55u45LqS5LmL6Ze05pyJ5L6d6LWW77yM6L+Y6KaB5rOo5oSP5byV5YWl55qE6aG65bqP77yM5bm25LiU6L+Y6ZyA6KaB5rOo5oSP5a6D5Lus6YeM6Z2i55qE5Y+Y6YeP5ZCN77yM6Iul5piv6YeN5aSN5Yip55So5Yiw5YW25LuW55qE6aG555uu77yM5YW25LuW6aG555uu5Lmf6ZyA6KaB5rOo5oSP5Yiw5Lul5LiK5Lik54K56Zeu6aKY44CC5Li65LqG6Kej5Yaz6L+Z5LiA6Zeu6aKY77yM5bCx5pyJ5LqG5qih5Z2X5YyW55qE6KeE6IyD44CCPC9wPlxuPHA+5qih5Z2X5YyW55qE6KeE6IyD77yM5pyJIDxhIGhyZWY9XCJodHRwOi8vamF2YXNjcmlwdC5ydWFueWlmZW5nLmNvbS9ub2RlanMvbW9kdWxlLmh0bWxcIj5DTUQ8L2E+ICDlkowgPGEgaHJlZj1cImh0dHA6Ly93d3cucnVhbnlpZmVuZy5jb20vYmxvZy8yMDEyLzEwL2FzeW5jaHJvbm91c19tb2R1bGVfZGVmaW5pdGlvbi5odG1sXCI+QU1EPC9hPjwvcD5cbjxwPkNNRCAoQ29tbW9uIE1vZHVsZSBEZWZpbml0aW9uKSwg5pivc2VhLmpz5Zyo5o6o5bm/6L+H56iL5Lit5a+55qih5Z2X5a6a5LmJ55qE6KeE6IyD5YyW5Lqn5Ye677yM5Li76KaB55So5LqO5rWP6KeI5Zmo56uv44CC5a6D5Li76KaB54m554K55piv77ya5a+55LqO5L6d6LWW55qE5qih5Z2X5piv5bu26L+f5omn6KGM77yM5L6d6LWW5Y+v5Lul5bCx6L+R5Lmm5YaZ77yM562J5Yiw6ZyA6KaB55So6L+Z5Liq5L6d6LWW55qE5pe25YCZ5YaN5byV5YWl6L+Z5Liq5L6d6LWW77yM5bqU55So5pyJc2VhLmpzLjwvcD5cbjxwPkFNROinhOiMg++8iEFzeW5jaHJvbm91cyBNb2R1bGUgRGVmaW5pdGlvbu+8ie+8muaYryBSZXF1aXJlSlMg5Zyo5o6o5bm/6L+H56iL5Lit5a+55qih5Z2X5a6a5LmJ55qE6KeE6IyD5YyW5Lqn5Ye677yM5Lmf5piv5Li76KaB55So5LqO5rWP6KeI5Zmo56uv44CC5YW254m554K55piv77ya5L6d6LWW5YmN572u77yM6ZyA6KaB5Zyo5a6a5LmJ5pe25bCx5YaZ5aW96ZyA6KaB55qE5L6d6LWW77yM5o+Q5YmN5omn6KGM5L6d6LWW77yM5bqU55So5pyJcmVxdWlyZS5qczwvcD5cbjxwPuWwveaDheeahOeMnOa1i++8jHJlcXVpcmUuanMg5piv5oCO5LmI5byE55qE5ZGi77yfIOWug+mcgOimgeS+neasoeeahOWKoOi9veaooeWdl+eEtuWQjuWOu+i/m+ihjOebuOW6lOeahOaTjeS9nO+8jOWKoOi9veaooeWdl+WwseaYr+imgeW8leWFpei/meS4quaWh+S7tu+8jOmCo+S5iOi/memHjOS5n+i/mOaYr+mAmui/h+WKqOaAgeWKoOi9vSBzY3JpcHQg55qE5pa55rOV77yM5bm26YCa6L+HIG9ubG9hZCDljrvmiafooYzlkI7pnaLnmoTlm57osIPkuobjgII8L3A+XG48cD7miJHku6znn6XpgZPnjrDlpoLku4ogZXM2IOW3sue7j+aUr+aMgeaooeWdl+WMluS6hu+8jOWug+WIhuS4uiBleHBvcnQg5ZKMIGltcG9ydCDkuKTkuKrlkb3ku6TjgIIgZXhwb3J0IOWvvOWHuuS9oOWumuS5ieeahOaooeWdl+WPmOmHj++8jCBpbXBvcnQg5byV5YWl5LiA5Liq5qih5Z2X5Y+Y6YeP44CCPC9wPlxuPHByZSB2LXByZT1cIlwiPjxjb2RlPmV4cG9ydCB7IFxuIFx0b25lLCBcbiBcdHR3b1xuIH1cbiBleHBvcnQgZGVmYXVsdCB0aHJlZTtcbjwvY29kZT48L3ByZT5cbjxwPuWvueW6lOeahOW8leWFpeS7o+eggTwvcD5cbjxwcmUgdi1wcmU9XCJcIj48Y29kZT5pbXBvcnQgIHsgb25lLCB0d28gfSAgdGhyZWUgZnJvbSAnYS5qcydcbjwvY29kZT48L3ByZT5cbjxwPuWPr+S7peeci+WIsCBleHBvcnQg5Y+v5Lul5a+85Ye65LiA5Liq6buY6K6k55qE5Y+Y6YeP77yM5Lmf5Y+v5Lul5a+85Ye65Y+Y6YeP5a+56LGh77yM6L+Z6YeM5byV5YWl55qE5pe25YCZ5ZCN5a2X5LiN6KaB5YaZ6ZSZ5LqG44CCIOmCo+S5iCBlczYg55qE5qih5Z2X5YyW6YCa6L+HYmFiZWwg6L2s56CB5YW25a6e5bCx5pivIHVtZCDmqKHlnZfop4TojIPvvIwg5a6D5piv5LiA5Liq5YW85a65IGNtZCDlkowgYW1kIOeahOaooeWdl+WMluinhOiMgywg5ZCM5pe26L+Y5pSv5oyB6ICB5byP55qE4oCc5YWo5bGA4oCd5Y+Y6YeP6KeE6IyDPC9wPlxuPHByZSB2LXByZT1cIlwiPjxjb2RlPihmdW5jdGlvbiAocm9vdCwgZmFjdG9yeSkge1xuICAgIGlmICh0eXBlb2YgZGVmaW5lID09PSAnZnVuY3Rpb24nICZhbXA7JmFtcDsgZGVmaW5lLmFtZCkge1xuICAgICAgICAvLyBBTURcbiAgICAgICAgZGVmaW5lKFsnanF1ZXJ5J10sIGZhY3RvcnkpO1xuICAgIH0gZWxzZSBpZiAodHlwZW9mIGV4cG9ydHMgPT09ICdvYmplY3QnKSB7XG4gICAgICAgIC8vIE5vZGUsIENvbW1vbkpT5LmL57G755qEXG4gICAgICAgIG1vZHVsZS5leHBvcnRzID0gZmFjdG9yeShyZXF1aXJlKCdqcXVlcnknKSk7XG4gICAgfSBlbHNlIHtcbiAgICAgICAgLy8g5rWP6KeI5Zmo5YWo5bGA5Y+Y6YePKHJvb3Qg5Y2zIHdpbmRvdylcbiAgICAgICAgcm9vdC5yZXR1cm5FeHBvcnRzID0gZmFjdG9yeShyb290LmpRdWVyeSk7XG4gICAgfVxufSh0aGlzLCBmdW5jdGlvbiAoJCkge1xuICAgIC8vICAgIOaWueazlVxuICAgIGZ1bmN0aW9uIG15RnVuYygpe307XG4gXG4gICAgLy8gICAg5pq06Zyy5YWs5YWx5pa55rOVXG4gICAgcmV0dXJuIG15RnVuYztcbn0pKTtcbjwvY29kZT48L3ByZT5cbjxwPumCo+S5iOa1j+iniOWZqOaYr+WmguS9leaUr+aMgei/meenjeinhOiMg+eahOWRou+8n1xu5YW25a6e5piv5a6e546w5LqG5qC55o2u6L+Z56eN6KeE6IyD5a6a5Yi25Ye65p2l55qE5Yqf6IO944CC6L+Z6YeM5oiR5Lus5bCx5oyJ54WnIOWunueOsOS6hiBBTUQg6KeE6IyD55qEIHJlcXVpcmUuanMg5p2l6K6y5LiA5LiL5a6e546w5Luj56CB44CCPC9wPlxuPHA+QU1EIOWumuS5ieS4gOS4quaooeWdl+eahOaWueazleaYryBkZWZpbmUoaWQ/LCBkZXBlbmRlbmNpZXM/LCBmYWN0b3J5KeOAgjwvcD5cbjxwPuWPguiAg2RlZmluZSDnmoTmlrnms5Xku6PnoIE8L3A+XG48cHJlIHYtcHJlPVwiXCI+PGNvZGU+IGRlZmluZSA9IGZ1bmN0aW9uIChuYW1lLCBkZXBzLCBjYWxsYmFjaykge1xuICAgICAgICB2YXIgbm9kZSwgY29udGV4dDtcbiAgICAgICAgXG4gICAgICAgIC8vQWxsb3cgZm9yIGFub255bW91cyBtb2R1bGVzXG4gICAgICAgIGlmICh0eXBlb2YgbmFtZSAhPT0gJ3N0cmluZycpIHtcbiAgICAgICAgICAgIC8vQWRqdXN0IGFyZ3MgYXBwcm9wcmlhdGVseVxuICAgICAgICAgICAgY2FsbGJhY2sgPSBkZXBzO1xuICAgICAgICAgICAgZGVwcyA9IG5hbWU7XG4gICAgICAgICAgICBuYW1lID0gbnVsbDtcbiAgICAgICAgfVxuXG4gICAgICAgIC8vVGhpcyBtb2R1bGUgbWF5IG5vdCBoYXZlIGRlcGVuZGVuY2llc1xuICAgICAgICBpZiAoIWlzQXJyYXkoZGVwcykpIHtcbiAgICAgICAgICAgIGNhbGxiYWNrID0gZGVwcztcbiAgICAgICAgICAgIGRlcHMgPSBudWxsO1xuICAgICAgICB9XG5cbiAgICAgICAgLy9JZiBubyBuYW1lLCBhbmQgY2FsbGJhY2sgaXMgYSBmdW5jdGlvbiwgdGhlbiBmaWd1cmUgb3V0IGlmIGl0IGFcbiAgICAgICAgLy9Db21tb25KUyB0aGluZyB3aXRoIGRlcGVuZGVuY2llcy5cbiAgICAgICAgaWYgKCFkZXBzICZhbXA7JmFtcDsgaXNGdW5jdGlvbihjYWxsYmFjaykpIHtcbiAgICAgICAgICAgIGRlcHMgPSBbXTtcbiAgICAgICAgICAgIC8v56e76Zmk5rOo6YeKXG4gICAgICAgICAgICAvL+afpeaJviByZXF1aXJlIOivreWPpe+8jOaUtumbhuS+nei1luWIsCBkZXBzIOmHjOmdolxuICAgICAgICAgICAgLy8gYnV0IG9ubHkgaWYgdGhlcmUgYXJlIGZ1bmN0aW9uIGFyZ3MuXG4gICAgICAgICAgICBpZiAoY2FsbGJhY2subGVuZ3RoKSB7XG4gICAgICAgICAgICAgICAgY2FsbGJhY2tcbiAgICAgICAgICAgICAgICAgICAgLnRvU3RyaW5nKClcbiAgICAgICAgICAgICAgICAgICAgLnJlcGxhY2UoY29tbWVudFJlZ0V4cCwgY29tbWVudFJlcGxhY2UpXG4gICAgICAgICAgICAgICAgICAgIC5yZXBsYWNlKGNqc1JlcXVpcmVSZWdFeHAsIGZ1bmN0aW9uIChtYXRjaCwgZGVwKSB7XG4gICAgICAgICAgICAgICAgICAgICAgICBkZXBzLnB1c2goZGVwKTtcbiAgICAgICAgICAgICAgICAgICAgfSk7XG5cbiAgICAgICAgICAgICAgICAvL01heSBiZSBhIENvbW1vbkpTIHRoaW5nIGV2ZW4gd2l0aG91dCByZXF1aXJlIGNhbGxzLCBidXQgc3RpbGxcbiAgICAgICAgICAgICAgICAvL2NvdWxkIHVzZSBleHBvcnRzLCBhbmQgbW9kdWxlLiBBdm9pZCBkb2luZyBleHBvcnRzIGFuZCBtb2R1bGVcbiAgICAgICAgICAgICAgICAvL3dvcmsgdGhvdWdoIGlmIGl0IGp1c3QgbmVlZHMgcmVxdWlyZS5cbiAgICAgICAgICAgICAgICAvL1JFUVVJUkVTIHRoZSBmdW5jdGlvbiB0byBleHBlY3QgdGhlIENvbW1vbkpTIHZhcmlhYmxlcyBpbiB0aGVcbiAgICAgICAgICAgICAgICAvL29yZGVyIGxpc3RlZCBiZWxvdy5cbiAgICAgICAgICAgICAgICBkZXBzID0gKGNhbGxiYWNrLmxlbmd0aCA9PT0gMSA/IFsncmVxdWlyZSddIDogWydyZXF1aXJlJywgJ2V4cG9ydHMnLCAnbW9kdWxlJ10pLmNvbmNhdChkZXBzKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuXG4gICAgICAgIC8vSWYgaW4gSUUgNi04IGFuZCBoaXQgYW4gYW5vbnltb3VzIGRlZmluZSgpIGNhbGwsIGRvIHRoZSBpbnRlcmFjdGl2ZVxuICAgICAgICAvL3dvcmsuXG4gICAgICAgIGlmICh1c2VJbnRlcmFjdGl2ZSkge1xuICAgICAgICAgICAgbm9kZSA9IGN1cnJlbnRseUFkZGluZ1NjcmlwdCB8fCBnZXRJbnRlcmFjdGl2ZVNjcmlwdCgpO1xuICAgICAgICAgICAgaWYgKG5vZGUpIHtcbiAgICAgICAgICAgICAgICBpZiAoIW5hbWUpIHtcbiAgICAgICAgICAgICAgICAgICAgbmFtZSA9IG5vZGUuZ2V0QXR0cmlidXRlKCdkYXRhLXJlcXVpcmVtb2R1bGUnKTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgY29udGV4dCA9IGNvbnRleHRzW25vZGUuZ2V0QXR0cmlidXRlKCdkYXRhLXJlcXVpcmVjb250ZXh0JyldO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG5cbiAgICAgICAgLy9BbHdheXMgc2F2ZSBvZmYgZXZhbHVhdGluZyB0aGUgZGVmIGNhbGwgdW50aWwgdGhlIHNjcmlwdCBvbmxvYWQgaGFuZGxlci5cbiAgICAgICAgLy9UaGlzIGFsbG93cyBtdWx0aXBsZSBtb2R1bGVzIHRvIGJlIGluIGEgZmlsZSB3aXRob3V0IHByZW1hdHVyZWx5XG4gICAgICAgIC8vdHJhY2luZyBkZXBlbmRlbmNpZXMsIGFuZCBhbGxvd3MgZm9yIGFub255bW91cyBtb2R1bGUgc3VwcG9ydCxcbiAgICAgICAgLy93aGVyZSB0aGUgbW9kdWxlIG5hbWUgaXMgbm90IGtub3duIHVudGlsIHRoZSBzY3JpcHQgb25sb2FkIGV2ZW50XG4gICAgICAgIC8vb2NjdXJzLiBJZiBubyBjb250ZXh0LCB1c2UgdGhlIGdsb2JhbCBxdWV1ZSwgYW5kIGdldCBpdCBwcm9jZXNzZWRcbiAgICAgICAgLy9pbiB0aGUgb25zY3JpcHQgbG9hZCBjYWxsYmFjay5cbiAgICAgICAgaWYgKGNvbnRleHQpIHtcbiAgICAgICAgICAgIGNvbnRleHQuZGVmUXVldWUucHVzaChbbmFtZSwgZGVwcywgY2FsbGJhY2tdKTtcbiAgICAgICAgICAgIGNvbnRleHQuZGVmUXVldWVNYXBbbmFtZV0gPSB0cnVlO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgZ2xvYmFsRGVmUXVldWUucHVzaChbbmFtZSwgZGVwcywgY2FsbGJhY2tdKTtcbiAgICAgICAgfVxuICAgIH07XG5cbiAgICBkZWZpbmUuYW1kID0ge1xuICAgICAgICBqUXVlcnk6IHRydWVcbiAgICB9O1xuICAgIFxuXHRyZXEuZXhlYyA9IGZ1bmN0aW9uICh0ZXh0KSB7XG4gICAgICAgIC8qanNsaW50IGV2aWw6IHRydWUgKi9cbiAgICAgICAgcmV0dXJuIGV2YWwodGV4dCk7XG4gICAgfTtcblxuICAgIC8vU2V0IHVwIHdpdGggY29uZmlnIGluZm8uXG4gICAgcmVxKGNmZyk7XG48L2NvZGU+PC9wcmU+XG48cD7lj6/ku6Xnn6XpgZPvvIzov5nkuIDmrrXku6PnoIHmmK/op6PmnpDlrprkuYnmmK/mqKHlnZfmiYDpnIDnmoTkvp3otZbmlL7nva4gY29udGV4dCDnmoTmqKHlnZflrprkuYnpmJ/liJfkuK3jgILnhLblkI7miJHku6zlsLHopoHpgJrov4cgcmVxIOWOu+aJp+ihjOWKoOi9veS+nei1lu+8jOaIkeS7rOadpeeci+eciyByZXEg55qE5a6a5LmJ44CCPC9wPlxuPHByZSB2LXByZT1cIlwiPjxjb2RlPnJlcSA9IHJlcXVpcmVqcyA9IGZ1bmN0aW9uIChkZXBzLCBjYWxsYmFjaywgZXJyYmFjaywgb3B0aW9uYWwpIHtcblxuICAgICAgICAvL0ZpbmQgdGhlIHJpZ2h0IGNvbnRleHQsIHVzZSBkZWZhdWx0XG4gICAgICAgIHZhciBjb250ZXh0LCBjb25maWcsXG4gICAgICAgICAgICBjb250ZXh0TmFtZSA9IGRlZkNvbnRleHROYW1lO1xuXG4gICAgICAgIC8vIERldGVybWluZSBpZiBoYXZlIGNvbmZpZyBvYmplY3QgaW4gdGhlIGNhbGwuXG4gICAgICAgIGlmICghaXNBcnJheShkZXBzKSAmYW1wOyZhbXA7IHR5cGVvZiBkZXBzICE9PSAnc3RyaW5nJykge1xuICAgICAgICAgICAgLy8gZGVwcyBpcyBhIGNvbmZpZyBvYmplY3RcbiAgICAgICAgICAgIGNvbmZpZyA9IGRlcHM7XG4gICAgICAgICAgICBpZiAoaXNBcnJheShjYWxsYmFjaykpIHtcbiAgICAgICAgICAgICAgICAvLyBBZGp1c3QgYXJncyBpZiB0aGVyZSBhcmUgZGVwZW5kZW5jaWVzXG4gICAgICAgICAgICAgICAgZGVwcyA9IGNhbGxiYWNrO1xuICAgICAgICAgICAgICAgIGNhbGxiYWNrID0gZXJyYmFjaztcbiAgICAgICAgICAgICAgICBlcnJiYWNrID0gb3B0aW9uYWw7XG4gICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgIGRlcHMgPSBbXTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuXG4gICAgICAgIGlmIChjb25maWcgJmFtcDsmYW1wOyBjb25maWcuY29udGV4dCkge1xuICAgICAgICAgICAgY29udGV4dE5hbWUgPSBjb25maWcuY29udGV4dDtcbiAgICAgICAgfVxuICAgICAgIFxuICAgICAgICBpZiAoY29uZmlnKSB7XG4gICAgICAgICAgICBjb250ZXh0LmNvbmZpZ3VyZShjb25maWcpOyAvLyDlrozlloTphY3nva5cbiAgICAgICAgfVxuXG4gICAgICAgIHJldHVybiBjb250ZXh0LnJlcXVpcmUoZGVwcywgY2FsbGJhY2ssIGVycmJhY2spOyBcbjwvY29kZT48L3ByZT5cbjxwPui/memHjOeahOS7o+eggeaKiiDkvp3otZbvvIzlm57osIPvvIwg6ZSZ6K+v5aSE55CG5ZKM6YWN572u6aG56YO95Lyg6L+b5p2l5LqG77yM6L+b6KGM5LqG6YWN572u5LiK55qE5aSE55CG5LmL5ZCO77yM5oiR5Lus5Y+v5Lul55yL5Yiw5pyA5ZCO5YaN5Y675qC55o2u6YWN572u5Yqg6L2944CCXG7miJHku6zlho3mnaXnnIsgY29udGV4dC5yZXF1aXJlIOaWueazlTwvcD5cbjxwcmUgdi1wcmU9XCJcIj48Y29kZT5tYWtlUmVxdWlyZTogZnVuY3Rpb24gKHJlbE1hcCwgb3B0aW9ucykge1xuXHRcdG9wdGlvbnMgPSBvcHRpb25zIHx8IHt9O1xuXHRcdGZ1bmN0aW9uIGxvY2FsUmVxdWlyZShkZXBzLCBjYWxsYmFjaywgZXJyYmFjaykge1xuXHRcdFx0Li4uLiDlvZPliY0gcmVxdWlyZSDnmoTovazmjaJcbiAgICAgIFx0IFx0cmV0dXJuIGxvY2FsUmVxdWlyZTtcbiAgXHRcdCB9XG5cdFx0Y29tcGxldGVMb2FkOiBmdW5jdGlvbiAobW9kdWxlTmFtZSkge1xuXHRcdFx05Yik5patIGNvbnRleHQg55qE5L6d6LWW6Zif5YiX77yM5piv57un57ut5Yqg6L296L+Y5piv5omn6KGM5Zue6LCDXG5cdFx0fVxuXHRcdCBuYW1lVG9Vcmw6IGZ1bmN0aW9uIChtb2R1bGVOYW1lLCBleHQsIHNraXBFeHQpIHtcblx0XHQgXHTmoLnmja7mqKHlnZflkI3lkozphY3nva7lvpfliLDliqDovb3nmoTot6/lvoRcblx0XHQgfVxuXHRcdCBsb2FkOiBmdW5jdGlvbiAoaWQsIHVybCkge1xuXHQgICAgICAgICAgICAgICByZXEubG9hZChjb250ZXh0LCBpZCwgdXJsKTtcblx0ICAgICAgfSxcblx0ICAgICAgZXhlY0NiOiBmdW5jdGlvbiAobmFtZSwgY2FsbGJhY2ssIGFyZ3MsIGV4cG9ydHMpIHtcblx0ICAgICAgICAgICAgICAgIHJldHVybiBjYWxsYmFjay5hcHBseShleHBvcnRzLCBhcmdzKTtcblx0ICAgICAgICB9LFxuXHRcdG9uU2NyaXB0TG9hZDogZnVuY3Rpb24gKGV2dCkge1xuXHRcdFx06ISa5pys5Yqg6L295a6M5oiQ5ZCO5b6X5Yiw5pWw5o2u77yM5omn6KGMIGNvbnRleHQuY29tcGxldGVMb2FkKGRhdGEuaWQpO1xuXHRcdH1cblx0XHRvblNjcmlwdEVycm9yOiBmdW5jdGlvbiAoZXZ0KSB7XG5cdFx0XHTliqDovb3plJnor6/miafooYzplJnor6/lpITnkIZcblx0XHR9XG5cdH07XG4gICBjb250ZXh0LnJlcXVpcmUgPSBjb250ZXh0Lm1ha2VSZXF1aXJlKCk7XG48L2NvZGU+PC9wcmU+XG48cD7pgqPmiJHku6znn6XpgZPlhbblrp7lsLHmmK/lm7TnnYDov5nor63ms5XnmoTop6PmnpDvvIzov5vooYzkuIDns7vliJfnmoTohJrmnKzliqDovb3vvIznhLblkI7miafooYzlm57osIPjgII8L3A+XG48L2Rpdj48L3RlbXBsYXRlPiIsImltcG9ydCB7IHJlbmRlciB9IGZyb20gXCIuL21vZHVsZS5tZD92dWUmdHlwZT10ZW1wbGF0ZSZpZD02YTZmOTgzNFwiXG5jb25zdCBzY3JpcHQgPSB7fVxuXG5pbXBvcnQgZXhwb3J0Q29tcG9uZW50IGZyb20gXCIuLi8uLi9ub2RlX21vZHVsZXMvLnBucG0vdnVlLWxvYWRlckAxNy40LjJfQHZ1ZStjb21waWxlci1zZmNAMy41LjNfdnVlQDMuNS4zX3R5cGVzY3JpcHRANS41LjRfX3dlYnBhY2tANS45NC4wX3dlYnBhY2stX2Z1cWt3Z2dwbGhleTNvaXZ0d2Uyc3RkbzZlL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2Rpc3QvZXhwb3J0SGVscGVyLmpzXCJcbmNvbnN0IF9fZXhwb3J0c19fID0gLyojX19QVVJFX18qL2V4cG9ydENvbXBvbmVudChzY3JpcHQsIFtbJ3JlbmRlcicscmVuZGVyXV0pXG5cbmV4cG9ydCBkZWZhdWx0IF9fZXhwb3J0c19fIl0sIm5hbWVzIjpbImNsYXNzIiwic2NyaXB0IiwiX2NyZWF0ZUVsZW1lbnRCbG9jayIsIl9ob2lzdGVkXzEiLCJfY2FjaGUiLCJfY3JlYXRlU3RhdGljVk5vZGUiXSwic291cmNlUm9vdCI6IiJ9 \ No newline at end of file diff --git a/643.bundle.js b/643.bundle.js new file mode 100644 index 0000000..90100ac --- /dev/null +++ b/643.bundle.js @@ -0,0 +1,2 @@ +"use strict";(self.webpackChunkreact_wyz=self.webpackChunkreact_wyz||[]).push([[643],{643:(n,t,i)=>{i.r(t),i.d(t,{default:()=>o});const o='作为一个前端，写页面结构，写CSS怎么命名? \n就算不用，但你的了解， 让自己的代码更规范。\n\n##### BEM是什么\n它是css命名的一种规范。试想，你写了一个页面，有input, button, div, 这些元素是什么样的关系，给他们添加样式的时候，怎么知道他们是一个页面的？ 怎么知道input 是否放在div里面的？ 不要急，这就说到了下面的命名之作用\n\n#### BEM是怎么命名的\n```html\n\n\t
\n\t\t\n\t\t\t\n\t
\n\n```\n通过上面命名可以很直接看出，input 和button 在div 里面。\n这里讲 后面的 __input/__confim 这里后面接两个下划线，表示的是div里面的子元素。\n```html\n\n\t
\n\t\t\n\t\t\t\n\t
\n\n```\n这里说， --big表示添加的描述， 很明显是大的注册表单的样式嘛。\n\n#### BEM总结\n好了， 这里loggin-from 相当于一块整体(block)， 里面包含了元素input/button(element), 还有这个块或者一些元素的修饰big(modifier) => BEM\n它一般和sass一起使用，在用@C代表块、 @d代表元素、 @m代码修饰符的时候， css可以这样写了\n```\n@C loggin-from {\n\twidth: 100px;\n\theight: 100px;\n\t@m big {\n\t\twidth: 200px;\n\t\theight: 200px;\n\t}\n\t@d input {\n\t\tcolor: red;\n\t}\n\t@d button {\n\t\tcolor: blue;\n\t}\n}\n```\n怎么样，这样是不是就不用写那么长了， 而且一看样式文件，就能知道页面布局是什么样的。\n**以上写法， 要通过sass 插件配置的**\n这里有一个包 ，可以使用[sass-bem-constructor](https://www.npmjs.com/package/sass-bem-constructor)'}}]); +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiNjQzLmJ1bmRsZS5qcyIsIm1hcHBpbmdzIjoia0lBQUEsNnFDIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vcmVhY3Rfd3l6Ly4uLy4uL2Jsb2dzL21hcmtkb3duL2JlbS5tZCJdLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZGVmYXVsdCBcIuS9nOS4uuS4gOS4quWJjeerr++8jOWGmemhtemdoue7k+aehO+8jOWGmUNTU+aAjuS5iOWRveWQjT8gXFxu5bCx566X5LiN55So77yM5L2G5L2g55qE5LqG6Kej77yMIOiuqeiHquW3seeahOS7o+eggeabtOinhOiMg+OAglxcblxcbiMjIyMjIEJFTeaYr+S7gOS5iFxcbuWug+aYr2Nzc+WRveWQjeeahOS4gOenjeinhOiMg+OAguivleaDs++8jOS9oOWGmeS6huS4gOS4qumhtemdou+8jOaciWlucHV0LCBidXR0b24sIGRpdiwg6L+Z5Lqb5YWD57Sg5piv5LuA5LmI5qC355qE5YWz57O777yM57uZ5LuW5Lus5re75Yqg5qC35byP55qE5pe25YCZ77yM5oCO5LmI55+l6YGT5LuW5Lus5piv5LiA5Liq6aG16Z2i55qE77yfIOaAjuS5iOefpemBk2lucHV0IOaYr+WQpuaUvuWcqGRpdumHjOmdoueahO+8nyDkuI3opoHmgKXvvIzov5nlsLHor7TliLDkuobkuIvpnaLnmoTlkb3lkI3kuYvkvZznlKhcXG5cXG4jIyMjIEJFTeaYr+aAjuS5iOWRveWQjeeahFxcbmBgYGh0bWxcXG48aHRtbD5cXG5cXHQ8ZGl2IGNsYXNzPVxcXCJsb2dnaW4tZnJvbVxcXCI+XFxuXFx0XFx0PGlucHV0IGNsYXNzPVxcXCJsb2dnaW4tZnJvbV9faW5wdXRcXFwiLz5cXG5cXHRcXHQ8YnV0dG9uIGNsYXNzPVxcXCJsb2dnaW4tZnJvbV9fY29uZmltXFxcIj7noa7lrpo8L2J1dHRvbj5cXHRcXG5cXHQ8L2Rpdj5cXG48L2h0bWw+XFxuYGBgXFxu6YCa6L+H5LiK6Z2i5ZG95ZCN5Y+v5Lul5b6I55u05o6l55yL5Ye677yMaW5wdXQg5ZKMYnV0dG9uIOWcqGRpdiDph4zpnaLjgIJcXG7ov5nph4zorrIg5ZCO6Z2i55qEIF9faW5wdXQvX19jb25maW0g6L+Z6YeM5ZCO6Z2i5o6l5Lik5Liq5LiL5YiS57q/77yM6KGo56S655qE5pivZGl26YeM6Z2i55qE5a2Q5YWD57Sg44CCXFxuYGBgaHRtbFxcbjxodG1sPlxcblxcdDxkaXYgY2xhc3M9XFxcImxvZ2dpbi1mcm9tLS1iaWdcXFwiPlxcblxcdFxcdDxpbnB1dCBjbGFzcz1cXFwibG9nZ2luLWZyb21fX2lucHV0XFxcIi8+XFxuXFx0XFx0PGJ1dHRvbiBjbGFzcz1cXFwibG9nZ2luLWZyb21fX2NvbmZpbVxcXCI+56Gu5a6aPC9idXR0b24+XFx0XFxuXFx0PC9kaXY+XFxuPC9odG1sPlxcbmBgYFxcbui/memHjOivtO+8jCAtLWJpZ+ihqOekuua3u+WKoOeahOaPj+i/sO+8jCDlvojmmI7mmL7mmK/lpKfnmoTms6jlhozooajljZXnmoTmoLflvI/lmJvjgIJcXG5cXG4jIyMjIEJFTeaAu+e7k1xcbuWlveS6hu+8jCDov5nph4xsb2dnaW4tZnJvbSDnm7jlvZPkuo7kuIDlnZfmlbTkvZMoYmxvY2sp77yMIOmHjOmdouWMheWQq+S6huWFg+e0oGlucHV0L2J1dHRvbihlbGVtZW50KSwg6L+Y5pyJ6L+Z5Liq5Z2X5oiW6ICF5LiA5Lqb5YWD57Sg55qE5L+u6aWwYmlnKG1vZGlmaWVyKSA9PiBCRU1cXG7lroPkuIDoiKzlkoxzYXNz5LiA6LW35L2/55So77yM5Zyo55SoQEPku6PooajlnZfjgIEgQGTku6PooajlhYPntKDjgIEgQG3ku6PnoIHkv67ppbDnrKbnmoTml7blgJnvvIwgY3Nz5Y+v5Lul6L+Z5qC35YaZ5LqGXFxuYGBgXFxuQEMgbG9nZ2luLWZyb20ge1xcblxcdHdpZHRoOiAxMDBweDtcXG5cXHRoZWlnaHQ6IDEwMHB4O1xcblxcdEBtIGJpZyB7XFxuXFx0XFx0d2lkdGg6IDIwMHB4O1xcblxcdFxcdGhlaWdodDogMjAwcHg7XFxuXFx0fVxcblxcdEBkIGlucHV0IHtcXG5cXHRcXHRjb2xvcjogcmVkO1xcblxcdH1cXG5cXHRAZCBidXR0b24ge1xcblxcdFxcdGNvbG9yOiBibHVlO1xcblxcdH1cXG59XFxuYGBgXFxu5oCO5LmI5qC377yM6L+Z5qC35piv5LiN5piv5bCx5LiN55So5YaZ6YKj5LmI6ZW/5LqG77yMIOiAjOS4lOS4gOeci+agt+W8j+aWh+S7tu+8jOWwseiDveefpemBk+mhtemdouW4g+WxgOaYr+S7gOS5iOagt+eahOOAglxcbioq5Lul5LiK5YaZ5rOV77yMIOimgemAmui/h3Nhc3Mg5o+S5Lu26YWN572u55qEKipcXG7ov5nph4zmnInkuIDkuKrljIUg77yM5Y+v5Lul5L2/55SoW3Nhc3MtYmVtLWNvbnN0cnVjdG9yXShodHRwczovL3d3dy5ucG1qcy5jb20vcGFja2FnZS9zYXNzLWJlbS1jb25zdHJ1Y3RvcilcIjsiXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0= \ No newline at end of file diff --git a/658.bundle.js b/658.bundle.js new file mode 100644 index 0000000..6073d76 --- /dev/null +++ b/658.bundle.js @@ -0,0 +1,2 @@ +"use strict";(self.webpackChunkcboy_blog=self.webpackChunkcboy_blog||[]).push([[658],{658:function(e,p,o){o.r(p),o.d(p,{default:function(){return d}});var c=o(358);const h={class:"component-safe"},s={};var d=(0,o(389).A)(s,[["render",function(e,p){return(0,c.uX)(),(0,c.CE)("div",h,p[0]||(p[0]=[(0,c.Fv)('

安全意识

你要离开家了, 所有的父母都会说，路上注意安全，可见安全是多么的重要！那么作为软件开发，有哪些危险使我们要知道并避免的呢？ 下面我说一些基本的需要知道的安全攻击, 以及应对方案。

ps 作为一个安全小白，了解各种各样的防范方案真的太难了，我是真的水🤭。欢迎补充，以增长见识

XSS: 跨站脚本攻击

在用户可以输入的地方，并且将作为代码编译时，攻击者可以通过输入一个脚本地址的方式进行对页面注入脚本攻击。解决方式: 任何用户输入的地方都不要相信，对用户输入内容进行转义，如 < 使用转义字符串 &lt; 代替。

CSRF: 跨站伪装请求攻击

在用户已登录的情况下，伪装用户的身份发起请求，进行相关攻击。解决方式，确认用户的身份。比较好理解的解决方式是: 二次确认，通过用户的二次确认确认请求方为真实用户。然后就是 X-Requested-With 请求标志，通过该请求头设置标志位 ajax 请求，可以一定程度阻止跨域的伪装。Anti-CSRF TOKEN 方案：通过服务端与客户端唯一的 token 值进行校验，可以看做一个暗号，让别人无法伪装！

网络劫持

Jsonp 劫持

我们都知道 jsonp 就是为了解决跨域的，如果传输信息设计到比较敏感的数据，那么别人可以很方便调用你的接口，获取你的数据，存储在自己的数据库中。解决方法，添加脚本可运行白名单，不要传输敏感信息。

HTTP 劫持。

HTTP 是明文传输，所以运营商可以知道你的代码是什么，然后在里面加一点小广告什么的，改变你的内容。解决方法就是使用 https 协议，可耻的运营商

DNS 劫持

通过域名解析我们才能找到对域名的服务器 ip 地址，劫持了 DNS 就可以给你返回一个错误的 ip 地址。在 dns 解析中，会先在本机搜索域名解析记录，无相关记录像 dns 服务商发起请求。所以要么你本地信息被篡改，要么服务商欺骗你。 转一篇 DNS 劫持详解链接

接口安全

数据库

数据库，插入数据库的参数，在执行 sql 的时候小心它把你整个数据库表给删了。这里的攻击类似 xss 攻击，通过传输、拼接一些字符串改变原本的 sql 语义

推送消息

比如短信发送消息，非常的有代表性。通过接口的参数传递，以及最后的发送内容，可以推测出你的推送内容的组合相关方式，就可以通过不良参数，很方便的发送的一些不合法的信息，或有毒链接给用户。解决方式就是不要相信用户传入的任何参数，对参数进行校验，发送内容尽量可选择匹配模式，如 code 值映射，对不合法的参数才有默认内容发送。

DDOS：分布式拒绝服务

就是很多请求大量涌入你的服务器，导致它们都没有空闲可以响应真正的用户请求。通过 TCP 连接，我们知道建立连接需要三次确认，一般攻击者可以伪造 ip, 发起大量连接请求，却又不确认 = = 导致服务器白白等待直到超时。其次可以借用别的用户，在一个大流量用户网站地方的某一个页面上了，通过 xss 默认发起对攻击网站的请求，并发送很大的数据，但每次发送很少的字节，这些用户就被当成了肉鸡，然后使其瘫痪。解决防范：增加机器， 对同一个ip 的过多请求进行防范。

',21)]))}]])}}]); +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiNjU4LmJ1bmRsZS5qcyIsIm1hcHBpbmdzIjoiNktBQWVBLE1BQU0sa0JDQ2ZDLEVBQVMsQ0FBQyxFQUtoQixPQUZpQyxFLE9BQUEsR0FBZ0JBLEVBQVEsQ0FBQyxDQUFDLFMsZ0NESmpEQyxFQUFBQSxFQUFBQSxJQXlCSixNQXpCSUMsRUF5QkpDLEVBQUEsS0FBQUEsRUFBQSxLQXpCTkMsRUFBQUEsRUFBQUEsSUFBQSx3bkQiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9jYm95LWJsb2cvLi4vLi4vYmxvZ3MvbWFya2Rvd24vc2FmZS5tZCIsIndlYnBhY2s6Ly9jYm95LWJsb2cvLi4vLi4vYmxvZ3MvbWFya2Rvd24vc2FmZS5tZD85NDMxIl0sInNvdXJjZXNDb250ZW50IjpbIjx0ZW1wbGF0ZT48ZGl2IGNsYXNzPVwiY29tcG9uZW50LXNhZmVcIj48aDE+5a6J5YWo5oSP6K+GPC9oMT5cbjxwPuS9oOimgeemu+W8gOWutuS6hiwg5omA5pyJ55qE54i25q+N6YO95Lya6K+077yM6Lev5LiK5rOo5oSP5a6J5YWo77yM5Y+v6KeB5a6J5YWo5piv5aSa5LmI55qE6YeN6KaB77yB6YKj5LmI5L2c5Li66L2v5Lu25byA5Y+R77yM5pyJ5ZOq5Lqb5Y2x6Zmp5L2/5oiR5Lus6KaB55+l6YGT5bm26YG/5YWN55qE5ZGi77yfXG7kuIvpnaLmiJHor7TkuIDkupvln7rmnKznmoTpnIDopoHnn6XpgZPnmoTlronlhajmlLvlh7ssIOS7peWPiuW6lOWvueaWueahiOOAgjwvcD5cbjxibG9ja3F1b3RlPlxuPHA+cHMg5L2c5Li65LiA5Liq5a6J5YWo5bCP55m977yM5LqG6Kej5ZCE56eN5ZCE5qC355qE6Ziy6IyD5pa55qGI55yf55qE5aSq6Zq+5LqG77yM5oiR5piv55yf55qE5rC08J+kreOAguasoui/juihpeWFhe+8jOS7peWinumVv+ingeivhjwvcD5cbjwvYmxvY2txdW90ZT5cbjxoMj5YU1M6IOi3qOermeiEmuacrOaUu+WHuzwvaDI+XG48cD7lnKjnlKjmiLflj6/ku6XovpPlhaXnmoTlnLDmlrnvvIzlubbkuJTlsIbkvZzkuLrku6PnoIHnvJbor5Hml7bvvIzmlLvlh7vogIXlj6/ku6XpgJrov4fovpPlhaXkuIDkuKrohJrmnKzlnLDlnYDnmoTmlrnlvI/ov5vooYzlr7npobXpnaLms6jlhaXohJrmnKzmlLvlh7vjgILop6PlhrPmlrnlvI86IOS7u+S9leeUqOaIt+i+k+WFpeeahOWcsOaWuemDveS4jeimgeebuOS/oe+8jOWvueeUqOaIt+i+k+WFpeWGheWuuei/m+ihjOi9rOS5ie+8jOWmgiA8Y29kZT4mbHQ7PC9jb2RlPiDkvb/nlKjovazkuYnlrZfnrKbkuLIgPGNvZGU+JmFtcDtsdDs8L2NvZGU+IOS7o+abv+OAgjwvcD5cbjxoMj5DU1JGOiDot6jnq5nkvKroo4Xor7fmsYLmlLvlh7s8L2gyPlxuPHA+5Zyo55So5oi35bey55m75b2V55qE5oOF5Ya15LiL77yM5Lyq6KOF55So5oi355qE6Lqr5Lu95Y+R6LW36K+35rGC77yM6L+b6KGM55u45YWz5pS75Ye744CC6Kej5Yaz5pa55byP77yM56Gu6K6k55So5oi355qE6Lqr5Lu944CC5q+U6L6D5aW955CG6Kej55qE6Kej5Yaz5pa55byP5pivOiDkuozmrKHnoa7orqTvvIzpgJrov4fnlKjmiLfnmoTkuozmrKHnoa7orqTnoa7orqTor7fmsYLmlrnkuLrnnJ/lrp7nlKjmiLfjgILnhLblkI7lsLHmmK8gWC1SZXF1ZXN0ZWQtV2l0aCAg6K+35rGC5qCH5b+X77yM6YCa6L+H6K+l6K+35rGC5aS06K6+572u5qCH5b+X5L2NIDxjb2RlPmFqYXg8L2NvZGU+IOivt+axgu+8jOWPr+S7peS4gOWumueoi+W6pumYu+atoui3qOWfn+eahOS8quijheOAgjxjb2RlPkFudGktQ1NSRiBUT0tFTjwvY29kZT4g5pa55qGI77ya6YCa6L+H5pyN5Yqh56uv5LiO5a6i5oi356uv5ZSv5LiA55qEIHRva2VuIOWAvOi/m+ihjOagoemqjO+8jOWPr+S7peeci+WBmuS4gOS4quaal+WPt++8jOiuqeWIq+S6uuaXoOazleS8quijhe+8gTwvcD5cbjxoMj7nvZHnu5zliqvmjIE8L2gyPlxuPGgzPkpzb25wIOWKq+aMgTwvaDM+XG48cD7miJHku6zpg73nn6XpgZMgPGNvZGU+anNvbnA8L2NvZGU+IOWwseaYr+S4uuS6huino+WGs+i3qOWfn+eahO+8jOWmguaenOS8oOi+k+S/oeaBr+iuvuiuoeWIsOavlOi+g+aVj+aEn+eahOaVsOaNru+8jOmCo+S5iOWIq+S6uuWPr+S7peW+iOaWueS+v+iwg+eUqOS9oOeahOaOpeWPo++8jOiOt+WPluS9oOeahOaVsOaNru+8jOWtmOWCqOWcqOiHquW3seeahOaVsOaNruW6k+S4reOAguino+WGs+aWueazle+8jOa3u+WKoOiEmuacrOWPr+i/kOihjOeZveWQjeWNle+8jOS4jeimgeS8oOi+k+aVj+aEn+S/oeaBr+OAgjwvcD5cbjxoMz5IVFRQIOWKq+aMgeOAgjwvaDM+XG48cD5IVFRQIOaYr+aYjuaWh+S8oOi+k++8jOaJgOS7pei/kOiQpeWVhuWPr+S7peefpemBk+S9oOeahOS7o+eggeaYr+S7gOS5iO+8jOeEtuWQjuWcqOmHjOmdouWKoOS4gOeCueWwj+W5v+WRiuS7gOS5iOeahO+8jOaUueWPmOS9oOeahOWGheWuueOAguino+WGs+aWueazleWwseaYr+S9v+eUqCBodHRwcyDljY/orq7vvIzlj6/ogLvnmoTov5DokKXllYY8L3A+XG48aDM+RE5TIOWKq+aMgTwvaDM+XG48cD7pgJrov4fln5/lkI3op6PmnpDmiJHku6zmiY3og73mib7liLDlr7nln5/lkI3nmoTmnI3liqHlmaggaXAg5Zyw5Z2A77yM5Yqr5oyB5LqGIEROUyDlsLHlj6/ku6Xnu5nkvaDov5Tlm57kuIDkuKrplJnor6/nmoQgaXAg5Zyw5Z2A44CC5ZyoIGRucyDop6PmnpDkuK3vvIzkvJrlhYjlnKjmnKzmnLrmkJzntKLln5/lkI3op6PmnpDorrDlvZXvvIzml6Dnm7jlhbPorrDlvZXlg48gZG5zIOacjeWKoeWVhuWPkei1t+ivt+axguOAguaJgOS7peimgeS5iOS9oOacrOWcsOS/oeaBr+iiq+evoeaUue+8jOimgeS5iOacjeWKoeWVhuasuumql+S9oOOAglxuPGEgaHJlZj1cImh0dHBzOi8vanVlamluLmltL3Bvc3QvNWNmZjg1OGE2ZmI5YTA3ZWQ4NDIzOGVjXCI+6L2s5LiA56+HIEROUyDliqvmjIHor6bop6Ppk77mjqU8L2E+PC9wPlxuPGgyPuaOpeWPo+WuieWFqDwvaDI+XG48aDM+5pWw5o2u5bqTPC9oMz5cbjxwPuaVsOaNruW6k++8jOaPkuWFpeaVsOaNruW6k+eahOWPguaVsO+8jOWcqOaJp+ihjCBzcWwg55qE5pe25YCZ5bCP5b+D5a6D5oqK5L2g5pW05Liq5pWw5o2u5bqT6KGo57uZ5Yig5LqG44CC6L+Z6YeM55qE5pS75Ye757G75Ly8IDxjb2RlPnhzczwvY29kZT4g5pS75Ye777yM6YCa6L+H5Lyg6L6T44CB5ou85o6l5LiA5Lqb5a2X56ym5Liy5pS55Y+Y5Y6f5pys55qEIHNxbCDor63kuYk8L3A+XG48aDM+5o6o6YCB5raI5oGvPC9oMz5cbjxwPuavlOWmguefreS/oeWPkemAgea2iOaBr++8jOmdnuW4uOeahOacieS7o+ihqOaAp+OAgumAmui/h+aOpeWPo+eahOWPguaVsOS8oOmAku+8jOS7peWPiuacgOWQjueahOWPkemAgeWGheWuue+8jOWPr+S7peaOqOa1i+WHuuS9oOeahOaOqOmAgeWGheWuueeahOe7hOWQiOebuOWFs+aWueW8j++8jOWwseWPr+S7pemAmui/h+S4jeiJr+WPguaVsO+8jOW+iOaWueS+v+eahOWPkemAgeeahOS4gOS6m+S4jeWQiOazleeahOS/oeaBr++8jOaIluacieavkumTvuaOpee7meeUqOaIt+OAguino+WGs+aWueW8j+WwseaYr+S4jeimgeebuOS/oeeUqOaIt+S8oOWFpeeahOS7u+S9leWPguaVsO+8jOWvueWPguaVsOi/m+ihjOagoemqjO+8jOWPkemAgeWGheWuueWwvemHj+WPr+mAieaLqeWMuemFjeaooeW8j++8jOWmgiBjb2RlIOWAvOaYoOWwhO+8jOWvueS4jeWQiOazleeahOWPguaVsOaJjeaciem7mOiupOWGheWuueWPkemAgeOAgjwvcD5cbjxoMj5ERE9T77ya5YiG5biD5byP5ouS57ud5pyN5YqhPC9oMj5cbjxwPuWwseaYr+W+iOWkmuivt+axguWkp+mHj+a2jOWFpeS9oOeahOacjeWKoeWZqO+8jOWvvOiHtOWug+S7rOmDveayoeacieepuumXsuWPr+S7peWTjeW6lOecn+ato+eahOeUqOaIt+ivt+axguOAgumAmui/hyBUQ1Ag6L+e5o6l77yM5oiR5Lus55+l6YGT5bu656uL6L+e5o6l6ZyA6KaB5LiJ5qyh56Gu6K6k77yM5LiA6Iis5pS75Ye76ICF5Y+v5Lul5Lyq6YCgIGlwLCDlj5HotbflpKfph4/ov57mjqXor7fmsYLvvIzljbTlj4jkuI3noa7orqQgPSA9IOWvvOiHtOacjeWKoeWZqOeZveeZveetieW+heebtOWIsOi2heaXtuOAguWFtuasoeWPr+S7peWAn+eUqOWIq+eahOeUqOaIt++8jOWcqOS4gOS4quWkp+a1gemHj+eUqOaIt+e9keermeWcsOaWueeahOafkOS4gOS4qumhtemdouS4iuS6hu+8jOmAmui/hyA8Y29kZT54c3M8L2NvZGU+IOm7mOiupOWPkei1t+WvueaUu+WHu+e9keermeeahOivt+axgu+8jOW5tuWPkemAgeW+iOWkp+eahOaVsOaNru+8jOS9huavj+asoeWPkemAgeW+iOWwkeeahOWtl+iKgu+8jOi/meS6m+eUqOaIt+Wwseiiq+W9k+aIkOS6huiCiem4oe+8jOeEtuWQjuS9v+WFtueYq+eXquOAguino+WGs+mYsuiMg++8muWinuWKoOacuuWZqO+8jCDlr7nlkIzkuIDkuKppcCDnmoTov4flpJror7fmsYLov5vooYzpmLLojIPjgII8L3A+XG48L2Rpdj48L3RlbXBsYXRlPiIsImltcG9ydCB7IHJlbmRlciB9IGZyb20gXCIuL3NhZmUubWQ/dnVlJnR5cGU9dGVtcGxhdGUmaWQ9MmIwODcyN2NcIlxuY29uc3Qgc2NyaXB0ID0ge31cblxuaW1wb3J0IGV4cG9ydENvbXBvbmVudCBmcm9tIFwiLi4vLi4vbm9kZV9tb2R1bGVzLy5wbnBtL3Z1ZS1sb2FkZXJAMTcuNC4yX0B2dWUrY29tcGlsZXItc2ZjQDMuNS4zX3Z1ZUAzLjUuM190eXBlc2NyaXB0QDUuNS40X193ZWJwYWNrQDUuOTQuMF93ZWJwYWNrLV9mdXFrd2dncGxoZXkzb2l2dHdlMnN0ZG82ZS9ub2RlX21vZHVsZXMvdnVlLWxvYWRlci9kaXN0L2V4cG9ydEhlbHBlci5qc1wiXG5jb25zdCBfX2V4cG9ydHNfXyA9IC8qI19fUFVSRV9fKi9leHBvcnRDb21wb25lbnQoc2NyaXB0LCBbWydyZW5kZXInLHJlbmRlcl1dKVxuXG5leHBvcnQgZGVmYXVsdCBfX2V4cG9ydHNfXyJdLCJuYW1lcyI6WyJjbGFzcyIsInNjcmlwdCIsIl9jcmVhdGVFbGVtZW50QmxvY2siLCJfaG9pc3RlZF8xIiwiX2NhY2hlIiwiX2NyZWF0ZVN0YXRpY1ZOb2RlIl0sInNvdXJjZVJvb3QiOiIifQ== \ No newline at end of file diff --git a/707.bundle.js b/707.bundle.js new file mode 100644 index 0000000..4c09e75 --- /dev/null +++ b/707.bundle.js @@ -0,0 +1,2 @@ +"use strict";(self.webpackChunkreact_wyz=self.webpackChunkreact_wyz||[]).push([[707],{707:(n,e,t)=>{t.r(e),t.d(e,{default:()=>o});const o="当我们要完成一个应用的时候，会根据对应的功能划分为许多不同的模块，就像一个论坛，有发帖的模块，评论的模块，js 中的模块也正是如此，一个具体功能的代码抽成一个文件，当你做一个东西的时候需要用到这个功能的时，可以直接使用这个文件，实现功能的分离，并能在多个需要的地方使用。就像是螺丝钉、螺丝帽、垫片一样的，通过组合使用实现出你的产品。\n\n通过直白的描述，我们可以知道，模块化的好处就是，抽离代码，重复使用，如现在很直观的代表 npm 包。\n\n\n\n那么模块化到底是怎么实现的呢？\n\n先来了解一下历史，以前的 html 不知道大家还记不记的， 一个html 页面引入了多个 js 文件.\n```\n\n\n\n \n So UI - A Component Library for Vue.js.\n\n\n
\n
\ No newline at end of file diff --git a/post-github.sh b/post-github.sh index c48f4d2..2b24853 100755 --- a/post-github.sh +++ b/post-github.sh @@ -1,38 +1,42 @@ #!/bin/bash -npm run build +# npm run build -output_dir="./build_file" -rm -rf $output_dir -mkdir $output_dir -search_dir="./packages/" +# output_dir="./build_file" +# rm -rf $output_dir +# mkdir $output_dir +# search_dir="./packages/" -for package in `ls $search_dir`; do - package_dist="$search_dir$package/dist/"; - cp -r $package_dist $output_dir -done +# for package in `ls $search_dir`; do +# package_dist="$search_dir$package/dist/"; +# cp -r $package_dist $output_dir +# done -git stash -git branch -D gh-pages -git fetch -p -git checkout -b gh-pages origin/gh-pages +# git stash +# git branch -D gh-pages +# git fetch -p +# git checkout -b gh-pages origin/gh-pages -for file in ./*; do - # echo $file; - if [[ "$file" != "./post-github.sh" && - "$file" != "./build_file" && - "$file" != "./packages" && - "$file" != "./node_modules" - ]]; then - rm -r "$file" - fi -done +# for file in ./*; do +# # echo $file; +# if [[ "$file" != "./post-github.sh" && +# "$file" != "./build_file" && +# "$file" != "./packages" && +# "$file" != "./node_modules" +# ]]; then +# rm -r "$file" +# fi +# done -mv $output_dir/* ./ -rm -rf $output_dir \ No newline at end of file +# mv $output_dir/* ./ +# rm -rf $output_dir + +git add . +git commit -m "feat: update blog" +git push origin gh-pages \ No newline at end of file