mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-15 16:51:37 +00:00
3 lines
20 KiB
HTML
3 lines
20 KiB
HTML
<!DOCTYPE html><html lang="zh-CN" data-default-color-scheme=""auto""><head><meta charset="UTF-8"><link rel="apple-touch-icon" sizes="76x76" href="/images/img/apple-touch-icon.webp"><link rel="icon" type="image/png" href="/images/img/favicon.webp"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="theme-color" content="#9DC8C8"><meta name="description" content=""><meta name="author" content="Defectink"><meta name="keywords" content=""><title>🍭Defectink</title><link rel="stylesheet" href="https://cdn.defectink.com/static/twitter-bootstrap/4.5.3/css/bootstrap.min.css"><link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css"><link rel="stylesheet" href="https://cdn.defectink.com/static/t/font_1736178_kmeydafke9r.css"><link rel="stylesheet" href="/css/main.css"><link rel="stylesheet" href="/css/xfy.css"><script src="/js/utils.js"></script><script src="/js/color-schema.js"></script><meta name="generator" content="Hexo 5.2.0"><link rel="alternate" href="/xml/atom.xml" title="🍭Defectink" type="application/atom+xml"><link rel="alternate" href="/xml/rss.xml" title="🍭Defectink" type="application/rss+xml"></head><body><header style="height:90vh"><nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar"><div class="container"><a class="navbar-brand" href="/"> <strong>🍭Defectink</strong> </a> <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><div class="animated-icon"><span></span><span></span><span></span></div></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav ml-auto text-center"><li class="nav-item"><a class="nav-link" href="/">🏠 首页</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">📕 索引</a><div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="/categories/">🎁 分类</a> <a class="dropdown-item" href="/tags/">🎐 标签</a></div></li><li class="nav-item"><a class="nav-link" href="/archives/">📂 归档</a></li><li class="nav-item"><a class="nav-link" href="/about/">🎃 关于</a></li><li class="nav-item"><a class="nav-link" href="/links/">🙆♀️ 小伙伴</a></li><li class="nav-item"><a class="nav-link" href="/pgp/">🔐 PGP</a></li><li class="nav-item" id="search-btn"><a class="nav-link" data-toggle="modal" data-target="#modalSearch"> <i class="iconfont icon-search"></i> </a></li><li class="nav-item" id="color-toggle-btn"><a class="nav-link" href="javascript:"> <i class="iconfont icon-dark" id="color-toggle-icon"></i> </a></li></ul></div></div></nav><div class="banner intro-2" id="background" parallax="true" style="background:url(/images/img/index.webp) no-repeat center center;background-size:cover"><div class="full-bg-img"><div class="mask flex-center" style="background-color:rgba(0,0,0,.3)"><div class="container page-header text-center fade-in-up"><span class="h2" id="subtitle"></span></div><div class="scroll-down-bar"><i class="iconfont icon-arrowdown"></i></div></div></div></div></header><main><div class="container nopadding-md"><div class="py-5" id="board"><div class="container"><div class="row"><div class="col-12 col-md-10 m-auto"><div class="row mx-auto index-card"><div class="col-12 col-md-4 m-auto index-img"><a href="/defect/response-data-in-Vue3.html" target="_self"><img src="/images/Vue3%E4%B8%AD%E7%9A%84%E5%93%8D%E5%BA%94%E6%95%B0%E6%8D%AE/logo.webp" srcset="/images/img/loading.gif" alt="Vue3中的响应数据"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/defect/response-data-in-Vue3.html">Vue3中的响应数据</a></h1><p class="index-excerpt"><a href="/defect/response-data-in-Vue3.html">实时渲染在学习Vue2.x的过程中，做过一个更改数据从而触发实时渲染DOM的小实例。期间很顺利，而后在同样方法测试Vue3的时候发现遇到了一些不同的行为。根据查阅了一些文档以及源码，做出了一些推测。 数据与方法当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-11-02 10:01" pubdate>2020-11-02</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E7%AC%94%E8%AE%B0/">笔记</a></div><div class="post-meta"><i class="iconfont icon-tags"></i> <a href="/tags/JavaScript/">JavaScript</a> <a href="/tags/Vue/">Vue</a></div></div></article></div><div class="row mx-auto index-card"><div class="col-12 col-md-4 m-auto index-img"><a href="/defect/javascript-iterable-object-and-for-of.html" target="_self"><img src="/images/JavaScript-%E5%8F%AF%E8%BF%AD%E4%BB%A3%E5%AF%B9%E8%B1%A1%E4%B8%8Efor-of/logo.webp" srcset="/images/img/loading.gif" alt="JavaScript-可迭代对象与for-of"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/defect/javascript-iterable-object-and-for-of.html">JavaScript-可迭代对象与for-of</a></h1><p class="index-excerpt"><a href="/defect/javascript-iterable-object-and-for-of.html">Iterable object（可迭代对象）可迭代（Iterable） 对象是数组的泛化。这个概念是说任何对象都可以被定制为可在for...of循环中使用的对象。数组是可迭代的。但不仅仅是数组，很多其他的内建对象也是可迭代的。例如字符串就是可迭代的。 总最早开始可能十年前或者更加久远的年代，我们遍历一个数组需要这样： let arr = [1, 2, 3, 4, 5]; for (let i =</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-10-29 17:15" pubdate>2020-10-29</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E7%AC%94%E8%AE%B0/">笔记</a></div><div class="post-meta"><i class="iconfont icon-tags"></i> <a href="/tags/JavaScript/">JavaScript</a></div></div></article></div><div class="row mx-auto index-card"><div class="col-12 col-md-4 m-auto index-img"><a href="/defect/Vue-js-get-started.html" target="_self"><img src="/images/Vue.js-%E8%B5%B7%E6%AD%A5!/logo.webp" srcset="/images/img/loading.gif" alt="Vue.js-起步!"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/defect/Vue-js-get-started.html">Vue.js-起步!</a></h1><p class="index-excerpt"><a href="/defect/Vue-js-get-started.html">在我打算学习vue的时候，正是其3.0版本发布不久的时候。很庆幸生活在这个时代，但困扰我的是是否应该由旧版本的2.x开始学习？一向选择困难的我最终打算两个版本一起学习，从2.x开始入门，顺便还能一睹其与3.0版本的变化。 起步Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-10-22 11:21" pubdate>2020-10-22</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E7%AC%94%E8%AE%B0/">笔记</a></div><div class="post-meta"><i class="iconfont icon-tags"></i> <a href="/tags/JavaScript/">JavaScript</a> <a href="/tags/Vue/">Vue</a></div></div></article></div><div class="row mx-auto index-card"><div class="col-12 col-md-4 m-auto index-img"><a href="/defect/get-starting-for-node-js.html" target="_self"><img src="/images/Node.js%E4%B9%8B%E6%97%85/2020-09-03-16-16-04.webp" srcset="/images/img/loading.gif" alt="Node.js之旅"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/defect/get-starting-for-node-js.html">Node.js之旅</a></h1><p class="index-excerpt"><a href="/defect/get-starting-for-node-js.html">Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js不仅仅是服务器上的JavaScript。 并不熟悉的JavaScript虽然说Node直接般来了个V8来运行JavaScript，但它毕竟不运行在浏览器上，并且是由事件驱动的异步程序，它的本来的目的就是用来搭建高性能的Web服务器。在</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-09-03 16:09" pubdate>2020-09-03</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E7%AC%94%E8%AE%B0/">笔记</a></div><div class="post-meta"><i class="iconfont icon-tags"></i> <a href="/tags/JavaScript/">JavaScript</a> <a href="/tags/Node/">Node</a></div></div></article></div><div class="row mx-auto index-card"><div class="col-12 col-md-4 m-auto index-img"><a href="/defect/irc-getting-started.html" target="_self"><img src="/images/%E5%85%A5%E5%9D%91IRC/logo.webp" srcset="/images/img/loading.gif" alt="入坑IRC"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/defect/irc-getting-started.html">入坑IRC</a></h1><p class="index-excerpt"><a href="/defect/irc-getting-started.html">IRCIRC的全称为Internet Relay Chat，是一种应用层的协议。主要用于聊天，是早期互联网中主流的聊天工具，在今天依然也有不少人活跃。要使用它需要使用客户端来连接到服务器。 IRC的组成服务器IRC是一个分布式的C/S架构。通过连接到一个服务器，就可以访问其连接的其他服务器上的频道。目前常见的有irc.freenode.net。 频道频道存在于一个IRC服务器上。一个频道类似于一个</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-08-22 18:37" pubdate>2020-08-22</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E6%97%A5%E5%B8%B8/">日常</a></div><div class="post-meta"><i class="iconfont icon-tags"></i> <a href="/tags/Linux/">Linux</a> <a href="/tags/tools/">tools</a> <a href="/tags/IRC/">IRC</a></div></div></article></div><div class="row mx-auto index-card"><div class="col-12 col-md-4 m-auto index-img"><a href="/defect/function-of-javascript.html" target="_self"><img src="/images/JavaScript%E7%9A%84%E5%87%BD%E6%95%B0/index.webp" srcset="/images/img/loading.gif" alt="JavaScript的函数"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/defect/function-of-javascript.html">JavaScript的函数</a></h1><p class="index-excerpt"><a href="/defect/function-of-javascript.html">函数表达式是JavaScript中一个强大同时容易令人困惑的特性。 定义函数的方式有两种：函数声明和函数表达式。 函数声明首先是function关键字，其后是函数的名字，这就是指定函数名字的方式。 // 函数声明 function test() { console.log('Hi, there'); } 关于函数声明，其一个重要特征就是函数声明体提</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-08-07 11:26" pubdate>2020-08-07</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E7%AC%94%E8%AE%B0/">笔记</a></div><div class="post-meta"><i class="iconfont icon-tags"></i> <a href="/tags/JavaScript/">JavaScript</a></div></div></article></div><div class="row mx-auto index-card"><div class="col-12 col-md-4 m-auto index-img"><a href="/defect/cant-install-gifsicle.html" target="_self"><img src="/images/Can't%20install%20gifsicle/index.webp" srcset="/images/img/loading.gif" alt="Can't install gifsicle"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/defect/cant-install-gifsicle.html">Can't install gifsicle</a></h1><p class="index-excerpt"><a href="/defect/cant-install-gifsicle.html">Hexo-all-minifierIn a long time, i’m used to Hexo-all-minifier to optimization blog. But recently i can’t even install it. The error logs with npm install: ‼ getaddrinfo ENOENT raw.githubusercontent</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-08-04 14:03" pubdate>2020-08-04</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E8%B8%A9%E5%9D%91/">踩坑</a></div><div class="post-meta"><i class="iconfont icon-tags"></i> <a href="/tags/network/">network</a></div></div></article></div><div class="row mx-auto index-card"><div class="col-12 col-md-4 m-auto index-img"><a href="/defect/javascript-object-oriented-programming.html" target="_self"><img src="/images/JavaScript%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%9A%84%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1/logo.webp" srcset="/images/img/loading.gif" alt="JavaScript面向对象的程序设计"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/defect/javascript-object-oriented-programming.html">JavaScript面向对象的程序设计</a></h1><p class="index-excerpt"><a href="/defect/javascript-object-oriented-programming.html">Standing on Shoulders of Giants. 本篇参考与《JavaScript高级程序设计》第六章：面向对象的程序设计。 面向对象（Object-Oriented，OO）的语言都有一个标志，那就是他们都有类的概念。通过类来创建任意多个具有相同属性和方法的对象。 ECMAScript中没有类的概念，所以它的对象也与基于类的语言中的对象有所不同。 ECMAScript-262的</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-07-27 16:42" pubdate>2020-07-27</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E7%AC%94%E8%AE%B0/">笔记</a></div><div class="post-meta"><i class="iconfont icon-tags"></i> <a href="/tags/JavaScript/">JavaScript</a></div></div></article></div><div class="row mx-auto index-card"><div class="col-12 col-md-4 m-auto index-img"><a href="/defect/javascript-scope-and-chain.html" target="_self"><img src="/images/JavaScript%E7%9A%84%E4%BD%9C%E7%94%A8%E5%9F%9F%E4%B8%8E%E9%93%BE/index.webp" srcset="/images/img/loading.gif" alt="JavaScript的作用域与链"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/defect/javascript-scope-and-chain.html">JavaScript的作用域与链</a></h1><p class="index-excerpt"><a href="/defect/javascript-scope-and-chain.html">JavaScript是一门动态语言，也常称呼为弱类型/解释型的语言。除了不需要明确写出数据类型外，JavaScript的作用域也和其他类型的语言不同。并且作用域还以链的方式互相连接。 预编译要想彻底的了解作用域与变量提升，就得先了解js语言的执行过程。 JavaScript语言会分为三步来解释执行代码，分别是： 语法分析 预编译 解释执行 语法分析主要是检查整体代码中有没有明显的会导致程序无</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-07-03 15:13" pubdate>2020-07-03</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E7%AC%94%E8%AE%B0/">笔记</a></div><div class="post-meta"><i class="iconfont icon-tags"></i> <a href="/tags/JavaScript/">JavaScript</a></div></div></article></div><div class="row mx-auto index-card"><div class="col-12 col-md-4 m-auto index-img"><a href="/defect/write-and-cooperation.html" target="_self"><img src="/images/%E5%86%99%E4%BD%9C%E4%B8%8E%E5%8D%8F%E4%BD%9C/index.webp" srcset="/images/img/loading.gif" alt="写作与协作"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/defect/write-and-cooperation.html">写作与协作</a></h1><p class="index-excerpt"><a href="/defect/write-and-cooperation.html">出于对速度无理的追求，最终还是放弃了使用动态内容。转战静态blog。以前也稍微尝试过hexo，所以决定还是主要为hexo为主了。 在之前试过的typecho、wordpress之中，越是臃肿复杂的程序，1M的带宽越是不够。再详细的折腾了hexo之后，发现了最佳的解决方案。 在早期的一些常识之后，我也学会了很多。在刚入坑hexo的时候是盯上了阿里云的ECS+OSS和CDN的。虽然部署还是比较麻烦，但</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-06-29 12:12" pubdate>2020-06-29</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E5%AE%9E%E8%B7%B5/">实践</a></div><div class="post-meta"><i class="iconfont icon-tags"></i> <a href="/tags/Tools/">Tools</a></div></div></article></div><nav aria-label="navigation"><span class="pagination" id="pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><a class="page-number" href="/page/4/">4</a><a class="extend next" rel="next" href="/page/2/"><i class="iconfont icon-arrowright"></i></a></span></nav><script>for (ele of document.getElementById("pagination").getElementsByTagName("a")) {
|
||
ele.href += '#board';
|
||
}</script></div></div></div></div></div></main><a id="scroll-top-button" href="#" role="button"><i class="iconfont icon-arrowup" aria-hidden="true"></i></a><div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true"><div class="modal-dialog modal-dialog-scrollable modal-lg" role="document"><div class="modal-content"><div class="modal-header text-center"><h4 class="modal-title w-100 font-weight-bold">搜索</h4><button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body mx-3"><div class="md-form mb-5"><input type="text" id="local-search-input" class="form-control validate"> <label data-error="x" data-success="v" for="local-search-input">关键词</label></div><div class="list-group" id="local-search-result"></div></div></div></div></div><footer class="text-center mt-5 py-3"><div class="footer-content"><a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a><i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a></div><div class="beian"><a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">皖ICP备17017808号</a></div></footer><script src="https://cdn.defectink.com/static/jquery/3.4.1/jquery.min.js"></script><script src="https://cdn.defectink.com/static/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script><script src="/js/debouncer.js"></script><script src="/js/main.js"></script><script src="/js/lazyload.js"></script><script defer="defer" src="https://cdn.defectink.com/static/clipboard.js/2.0.6/clipboard.min.js"></script><script src="/js/clipboard-use.js"></script><script src="/js/xfy.js"></script><script src="https://cdn.defectink.com/static/typed.js/2.0.11/typed.min.js"></script><script>var typed=new Typed("#subtitle",{strings:[" ","只要心还在跳 "],cursorChar:"❤",typeSpeed:70,loop:!1});typed.stop(),$(document).ready(function(){$(".typed-cursor").addClass("h2"),typed.start()})</script><script src="/js/local-search.js"></script><script>var path="/xml/local-search.xml",inputArea=document.querySelector("#local-search-input");inputArea.onclick=function(){searchFunc(path,"local-search-input","local-search-result"),this.onclick=null}</script></body></html> |