-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
3 lines (3 loc) · 19.8 KB
/
index.html
File metadata and controls
3 lines (3 loc) · 19.8 KB
1
2
3
<!DOCTYPE html><html lang="zh-CN" data-default-color-scheme=""auto""><head><meta charset="UTF-8"><link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.png"><link rel="icon" type="image/png" href="/img/favicon.png"><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="#2f4154"><meta name="description" content="用于总结和分享个人技术学习心得"><meta name="author" content="Yihan Shaw"><meta name="keywords" content="前端技术"><title>逸水寒兮</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css"><link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_pf9vaxs7x7b.css"><link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css"><link rel="stylesheet" href="/css/main.css"><script src="/js/utils.js"></script><script src="/js/color-schema.js"></script><meta name="generator" content="Hexo 4.2.1"></head><body><header style="height:100vh"><nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar"><div class="container"><a class="navbar-brand" href="/"> <strong>逸水寒兮的博客</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="/"><i class="iconfont icon-home-fill"></i> 首页</a></li><li class="nav-item"><a class="nav-link" href="/archives/"><i class="iconfont icon-archive-fill"></i> 归档</a></li><li class="nav-item"><a class="nav-link" href="/categories/"><i class="iconfont icon-category-fill"></i> 分类</a></li><li class="nav-item"><a class="nav-link" href="/tags/"><i class="iconfont icon-tags-fill"></i> 标签</a></li><li class="nav-item"><a class="nav-link" href="/about/"><i class="iconfont icon-user-fill"></i> 关于</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(https://wallroom.io/img/1920x1080/bg-8b50499.jpg) 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" style="margin-top:0"><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="/2020/11/Javascript-Node-this/" target="_self"><img src="/img/this.jpg" srcset="/img/loading.gif" alt="Node和浏览器环境下的全局this"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/2020/11/Javascript-Node-this/">Node和浏览器环境下的全局this</a></h1><p class="index-excerpt"><a href="/2020/11/Javascript-Node-this/">Node和浏览器环境下的全局this在浏览器环境里，使用const和let都不会把变量添加到windows全局对象里，但是使用var会。浏览器环境里，在最外层定义一个函数，其内部的this就是windows对象function fn(){ this.num = 10 } fn(); console.log(this); // windows console.log(this</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-11-27 15:32" pubdate>2020-11-27</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%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="/2020/09/Javascript-Nuxt/" target="_self"><img src="/img/nuxt.jpg" srcset="/img/loading.gif" alt="Nuxt服务端渲染项目部署到阿里云"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/2020/09/Javascript-Nuxt/">Nuxt服务端渲染项目部署到阿里云</a></h1><p class="index-excerpt"><a href="/2020/09/Javascript-Nuxt/">Nuxt服务端渲染项目部署到阿里云asyncData方法1. 基本使用官方文档：https://zh.nuxtjs.org/guide/async-dataasyncData方法是Nuxt自带的一个异步数据获取方法，是Nuxt实现服务端渲染最重要的api它会将返回的数据合并到Vue组件的data里面。调用时机：服务端渲染期间和客户端路由更新之前。注意事项只能在页面组件（pages）中使用，普遍组件</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-09-29 21:35" pubdate>2020-09-29</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%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> <a href="/tags/Nuxt/">Nuxt</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="/2020/08/Javascript-vue-vuex/" target="_self"><img src="/img/vue.jpg" srcset="/img/loading.gif" alt="Vuex 数据流心法"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/2020/08/Javascript-vue-vuex/">Vuex 数据流心法</a></h1><p class="index-excerpt"><a href="/2020/08/Javascript-vue-vuex/">Vuex 数据流心法1. 父子组件传递数据的传统方法自从组件化模式成为前端主流后，开发中的一大问题就是如何在父子组件之间传递数据。1.1 PropsVue本身提供的props是最简单，也是最常用的父子组件通讯方式父组件可以在html模板里直接把数据传递给子组件。父组件：调用子组件时传递props<template> <div> <h1>Props D</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-08-30 18:19" pubdate>2020-08-30</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%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="/2020/08/Javascript-vue-responsive/" target="_self"><img src="/img/vue.jpg" srcset="/img/loading.gif" alt="Vue核心原理 - 自己实现一个Vue"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/2020/08/Javascript-vue-responsive/">Vue核心原理 - 自己实现一个Vue</a></h1><p class="index-excerpt"><a href="/2020/08/Javascript-vue-responsive/">Vue核心实现原理1. 观察者模式和发布订阅模式观察者模式和发布订阅模式是最为常用的事件响应设计模式。与观察者模式相比，发布订阅模式多了一层事件中心，隔离了发布者和订阅者，使其不需要相互依赖。既然我们希望当数据改变的时候视图也自动更新，那么就需要一个发布者来跟踪数据，当数据改变的时候这个发布者能够通知所有订阅自己的观察者，观察者再负责改变视图。所以简单来说：发布者 - 跟踪数据变化，有变化发生时通</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-08-28 22:08" pubdate>2020-08-28</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%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="/2020/08/Javascript-vue-sourcecode/" target="_self"><img src="/img/vue.jpg" srcset="/img/loading.gif" alt="Vue源码理解心得"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/2020/08/Javascript-vue-sourcecode/">Vue源码理解心得</a></h1><p class="index-excerpt"><a href="/2020/08/Javascript-vue-sourcecode/">Vue源码理解心得1. 响应式原理先上一张图作为总纲心法：里面有很多实现细节，但大概的原理都和自己实现的简化版的Vue类似。其中比较有意思的几个地方，也是面试里面常常考察的点，通过理解源码之后就再无任何疑问了，一通百通。1.1 数组响应式劫持众所周知，Vue对于数组的响应式处理是一个被经常讨论的话题，比较关键的源码如下：源码位置：vue\src\core\observer\index.js 是响应</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-08-13 12:06" pubdate>2020-08-13</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%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="/2020/07/Javascript-vue-router/" target="_self"><img src="/img/vue.jpg" srcset="/img/loading.gif" alt="VueRouter的原理和实现"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/2020/07/Javascript-vue-router/">VueRouter的原理和实现</a></h1><p class="index-excerpt"><a href="/2020/07/Javascript-vue-router/">Vue Router先来看看VueRouter的使用方式// router/index.js // 注册VueRouter插件 Vue.use(VueRouter) const router = new VueRouter({ route: [ {name: 'home', path: '/', component: homeComponent} ]</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-07-30 14:14" pubdate>2020-07-30</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%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="/2020/07/Javascript-webpack-advance/" target="_self"><img src="/img/webpack.png" srcset="/img/loading.gif" alt="Webpack进阶"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/2020/07/Javascript-webpack-advance/">Webpack进阶</a></h1><p class="index-excerpt"><a href="/2020/07/Javascript-webpack-advance/">Webpack进阶1. Dev-Serverwebpack-dev-server是使用率最高的webpack插件之一，其主要特点就是集成了打包和浏览器加载以及热更新这一套组合拳，特别是其打包后的文件是在内存中的，并不会真正生成到dist目录，避免了大量的重复磁盘读写。安装：yarn add webpack-dev-server --dev启动方式：yarn webpack-dev-server /</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-07-17 11:59" pubdate>2020-07-17</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">前端学习笔记</a> <a href="/categories/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/%E8%87%AA%E5%8A%A8%E5%8C%96%E5%B7%A5%E5%85%B7/">自动化工具</a></div><div class="post-meta"><i class="iconfont icon-tags"></i> <a href="/tags/javascript/">javascript</a> <a href="/tags/webpack/">webpack</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="/2020/07/Javascript-webpack-basic/" target="_self"><img src="/img/webpack.png" srcset="/img/loading.gif" alt="Webpack基础"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/2020/07/Javascript-webpack-basic/">Webpack基础</a></h1><p class="index-excerpt"><a href="/2020/07/Javascript-webpack-basic/">Webpack基础1. 安装很简单，主要就是webpack和webpack-cli两个模块yarn add webpack webpack-cli --dev然后就可以使用命令打包了yarn webpack默认情况下webpack会把src/index.html作为打包入口，打包结果存放在dist文件夹下2. 配置在项目根目录下添加webpack.config.js，注意这个文件默认是在node环</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-07-17 11:58" pubdate>2020-07-17</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">前端学习笔记</a> <a href="/categories/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/%E8%87%AA%E5%8A%A8%E5%8C%96%E5%B7%A5%E5%85%B7/">自动化工具</a></div><div class="post-meta"><i class="iconfont icon-tags"></i> <a href="/tags/javascript/">javascript</a> <a href="/tags/webpack/">webpack</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="/2020/07/Javascript-module/" target="_self"><img src="/img/module.png" srcset="/img/loading.gif" alt="JS模块化"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/2020/07/Javascript-module/">JS模块化</a></h1><p class="index-excerpt"><a href="/2020/07/Javascript-module/">模块化开发1. ES Module基本特性自动采用严格模式，忽略use strict每个ESM模块都是单独的私有作用域ESM是通过CORS去请求外部JS模块的（所以使用链接请求远程JS时要注意对方是否支持）ESM的script标签会延迟执行脚本（类似html的defer属性）如下就是在html里使用ES Module，就是把type定义为module<script type="module"</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-07-17 11:57" pubdate>2020-07-17</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%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="/2020/07/Javascript-gulp/" target="_self"><img src="/img/glup.png" srcset="/img/loading.gif" alt="自动化构建工具Gulp"></a></div><article class="col-12 col-md-8 mx-auto index-info"><h1 class="index-header"><a href="/2020/07/Javascript-gulp/">自动化构建工具Gulp</a></h1><p class="index-excerpt"><a href="/2020/07/Javascript-gulp/">自动化构建工具GulpGulp作为当下最流行的前端自动化构建工具，功能强大，插件丰富而且简单易上手。虽然最近Gulp的功能被全能的Webpack蚕食了不少，很多项目已经完全依赖Webpack构建了，但Gulp本身还是非常好用的，值得一学。1. 基本使用通过yarn/npm安装gulp之后，需要配置的有两个地方，一个是gulp的入口文件gulpfile.js，另一个则是安装gulp的一系列插件gul</a></p><div class="index-btm post-metas"><div class="post-meta mr-3"><i class="iconfont icon-date"></i> <time datetime="2020-07-09 21:48" pubdate>2020-07-09</time></div><div class="post-meta mr-3"><i class="iconfont icon-category"></i> <a href="/categories/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">前端学习笔记</a> <a href="/categories/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/%E8%87%AA%E5%8A%A8%E5%8C%96%E5%B7%A5%E5%85%B7/">自动化工具</a></div><div class="post-meta"><i class="iconfont icon-tags"></i> <a href="/tags/javascript/">javascript</a> <a href="/tags/gulp/">gulp</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="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="mt-5"><div class="text-center py-3"><div><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="statistics"><span id="busuanzi_container_site_pv" style="display:none">总访问量 <span id="busuanzi_value_site_pv"></span> 次 </span><span id="busuanzi_container_site_uv" style="display:none">总访客数 <span id="busuanzi_value_site_uv"></span> 人</span></div></div></footer><script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/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 src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js"></script><script src="/js/clipboard-use.js"></script><script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><script src="https://cdn.staticfile.org/typed.js/2.0.11/typed.min.js"></script><script>var typed=new Typed("#subtitle",{strings:[" ","Stay geek, stay childlike "],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="/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>