-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
201 lines (177 loc) · 21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Ellenyyyy's Blog</title><meta name="author" content="Ellenyyyy"><meta name="copyright" content="Ellenyyyy"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta property="og:type" content="website">
<meta property="og:title" content="Ellenyyyy's Blog">
<meta property="og:url" content="http://example.com/index.html">
<meta property="og:site_name" content="Ellenyyyy's Blog">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://example.com/img/avatar.JPG">
<meta property="article:author" content="Ellenyyyy">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://example.com/img/avatar.JPG"><link rel="shortcut icon" href="/img/avatar.JPG"><link rel="canonical" href="http://example.com/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: undefined,
translate: undefined,
noticeOutdate: undefined,
highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
copy: {
success: '复制成功',
error: '复制错误',
noSupport: '浏览器不支持'
},
relativeDate: {
homepage: false,
post: false
},
runtime: '天',
date_suffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: undefined,
lightbox: 'fancybox',
Snackbar: undefined,
source: {
jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
justifiedGallery: {
js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
},
fancybox: {
js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
}
},
isPhotoFigcaption: false,
islazyload: false,
isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
isPost: false,
isHome: true,
isHighlightShrink: false,
isToc: false,
postUpdate: '2021-06-07 18:39:08'
}</script><noscript><style type="text/css">
#nav {
opacity: 1
}
.justified-gallery img {
opacity: 1
}
#recent-posts time,
#post-meta time {
display: inline !important
}
</style></noscript><script>(win=>{
win.saveToLocal = {
set: function setWithExpiry(key, value, ttl) {
if (ttl === 0) return
const now = new Date()
const expiryDay = ttl * 86400000
const item = {
value: value,
expiry: now.getTime() + expiryDay,
}
localStorage.setItem(key, JSON.stringify(item))
},
get: function getWithExpiry(key) {
const itemStr = localStorage.getItem(key)
if (!itemStr) {
return undefined
}
const item = JSON.parse(itemStr)
const now = new Date()
if (now.getTime() > item.expiry) {
localStorage.removeItem(key)
return undefined
}
return item.value
}
}
win.getScript = url => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
script.onerror = reject
script.onload = script.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
script.onload = script.onreadystatechange = null
resolve()
}
document.head.appendChild(script)
})
win.activateDarkMode = function () {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
}
}
win.activateLightMode = function () {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
}
}
const t = saveToLocal.get('theme')
if (t === 'dark') activateDarkMode()
else if (t === 'light') activateLightMode()
const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
if (asideStatus === 'hide') {
document.documentElement.classList.add('hide-aside')
} else {
document.documentElement.classList.remove('hide-aside')
}
}
})(window)</script><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/atom.xml" title="Ellenyyyy's Blog" type="application/atom+xml">
</head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" src="/img/avatar.JPG" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">4</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">2</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> Home</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> Archives</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> Tags</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> Categories</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> List</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> Music</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> Movie</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> Link</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> About</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('/img/bg.JPG')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Ellenyyyy's Blog</a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> Home</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> Archives</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> Tags</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> Categories</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> List</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> Music</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> Movie</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> Link</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> About</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">Ellenyyyy's Blog</h1></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2021/06/06/this%E6%8C%87%E5%90%91/" title="JS重难点之this指向"> <img class="post_bg" src="/img/ts.JPG" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS重难点之this指向"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/06/06/this%E6%8C%87%E5%90%91/" title="JS重难点之this指向">JS重难点之this指向</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-06-06T05:42:16.108Z" title="发表于 2021-06-06 13:42:16">2021-06-06</time></span></div><div class="content">
this指向
一句话总结: this指向就是函数运行时所在的环境对象
这句话总共有两个关键词: 运行时 和 环境对象
只有我们弄清楚了 this 是在 运行时的环境对象是什么
那么对于 this 指向我们就可以了解的很清楚，下面我们来看看几种 this 的用法
纯粹的函数调用var x = 1;function test(){ console.log(this.x);}test();//1
分析:
首先，我们看 text() 执行是在 全局作用域 中执行的
那么 由此可知 test 中的 this 就代表全局对象
调用 x 那肯定是找全局的 x
所以输出 1
var x = 1;function test(){ this.x = 2; console.log(this.x);}test();//2
作为对象方法的调用var x = 2;var obj = { x: 1, func: test}function test() { console.log(this.x);}obj. ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2021/06/05/%E9%97%AD%E5%8C%85/" title="JS重难点之闭包"> <img class="post_bg" src="/img/bb.JPG" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS重难点之闭包"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/06/05/%E9%97%AD%E5%8C%85/" title="JS重难点之闭包">JS重难点之闭包</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-06-05T15:07:06.389Z" title="发表于 2021-06-05 23:07:06">2021-06-05</time></span></div><div class="content">
闭包
什么是闭包闭包就是可以访问自由变量的函数
什么是自由变量不是函数参数也不是函数局部变量 就是 自由变量
那么我们可以说从技术的角度上说，所有的函数都是闭包
但其实实践上的闭包却是这样的：
内部函数被保存到了外部就会形成闭包
创建它的函数上下文已经被销毁，但是它任然存在
在代码中引用了自由变量
常见形成闭包的形式内部函数被return出去
var c ='1';function a(){ return function b(){ console.log(c); }}console.log(a()())
全局变量接收内部函数的值
var c = []for(var i = 0;i < 3; i++){ c[i] = function(){ console.log(i); }}console.log(c[0]());console.log(c[1]());console.log(c[2]());
闭包的作用实现共有变量 函数累加器
做 ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2021/05/20/%E5%8E%9F%E5%9E%8B/" title="JS重难点之原型"> <img class="post_bg" src="/img/yx.JPG" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS重难点之原型"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/05/20/%E5%8E%9F%E5%9E%8B/" title="JS重难点之原型">JS重难点之原型</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-05-20T01:45:12.257Z" title="发表于 2021-05-20 09:45:12">2021-05-20</time></span></div><div class="content">原型什么是原型定义了构造函数制造出的对象的公共祖先
每一个构造函数都有一个prototype属性，这个属性是一个指针，指向一个对象，而这个就是原型。
为什么会有原型(下面的结论有待考证)js语言是面向对象的一门语言，但是以前创造出对象都无法共享属性和方法，做不到继承，由此就出现了原型，这类似于继承，有了原型之后，那么我们通过构造函数new出的对象，都可以继承自原型
原型的好处1.实现了所有对象都能共享原型上的属性和方法，节省了内存
2.基于原型，有了原型链，可以实现了继承
我们想要弄清楚原型这个概念之前，首先我们需要了解几个名词
function Person(){ }let person = new Person();
对象从上面的代码来说，person就是对象。因为是通过构造函数Person new出来的，所以称为对象
相当于 构造函数是一个生产车间 而对象就是工厂批量生产出来的流水线的东西
构造函数从上面的代码来说 Person这个函数就是我们所说的构造函数
prototype每一个函数都有一个prototype属性
那么函数的prototype属性是 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2021/04/22/hexo%E4%B9%8Bbutterfly%E4%B8%BB%E9%A2%98/" title="hexo之butterfly主题"> <img class="post_bg" src="/img/pageImg.JPG" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="hexo之butterfly主题"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/04/22/hexo%E4%B9%8Bbutterfly%E4%B8%BB%E9%A2%98/" title="hexo之butterfly主题">hexo之butterfly主题</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-04-22T02:30:23.819Z" title="发表于 2021-04-22 10:30:23">2021-04-22</time></span></div><div class="content">
hexo之Butterfly主题定制
导航栏theme下面的config.yml文件加上menu
之后创建各个板块
主页面图片theme下面的config.yml文件
# The banner image of home page (主页的横幅图像)index_img: /img/index_img.jpg
导航栏各子标签页图片default_top_img: /img/tag.jpg #这个推荐：不加入可能部分标签页不出现图片archive_img: /img/tag.jpg //归档tag_img: /img/tag.jpg //标签category_img: /img/tag.jpg //分类
头像avatar: img: /img/avatar.JPG effect: false
网站图标favicon: /img/avatar.JPG
文章图片显示cover: # display the cover or not (是否顯示文章封面) index_enable: true aside_enable: true archives_enable: true ...</div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-info-avatar is-center"><img class="avatar-img" src="/img/avatar.JPG" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">Ellenyyyy</div><div class="author-info__description"></div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">4</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">2</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">This is Ellenyyyy's Blog</div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2021/06/06/this%E6%8C%87%E5%90%91/" title="JS重难点之this指向"><img src="/img/ts.JPG" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS重难点之this指向"/></a><div class="content"><a class="title" href="/2021/06/06/this%E6%8C%87%E5%90%91/" title="JS重难点之this指向">JS重难点之this指向</a><time datetime="2021-06-06T05:42:16.108Z" title="发表于 2021-06-06 13:42:16">2021-06-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/06/05/%E9%97%AD%E5%8C%85/" title="JS重难点之闭包"><img src="/img/bb.JPG" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS重难点之闭包"/></a><div class="content"><a class="title" href="/2021/06/05/%E9%97%AD%E5%8C%85/" title="JS重难点之闭包">JS重难点之闭包</a><time datetime="2021-06-05T15:07:06.389Z" title="发表于 2021-06-05 23:07:06">2021-06-05</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/05/20/%E5%8E%9F%E5%9E%8B/" title="JS重难点之原型"><img src="/img/yx.JPG" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS重难点之原型"/></a><div class="content"><a class="title" href="/2021/05/20/%E5%8E%9F%E5%9E%8B/" title="JS重难点之原型">JS重难点之原型</a><time datetime="2021-05-20T01:45:12.257Z" title="发表于 2021-05-20 09:45:12">2021-05-20</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/04/22/hexo%E4%B9%8Bbutterfly%E4%B8%BB%E9%A2%98/" title="hexo之butterfly主题"><img src="/img/pageImg.JPG" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="hexo之butterfly主题"/></a><div class="content"><a class="title" href="/2021/04/22/hexo%E4%B9%8Bbutterfly%E4%B8%BB%E9%A2%98/" title="hexo之butterfly主题">hexo之butterfly主题</a><time datetime="2021-04-22T02:30:23.819Z" title="发表于 2021-04-22 10:30:23">2021-04-22</time></div></div></div></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/hexo/" style="font-size: 1.1em; color: #999">hexo</a> <a href="/tags/javascript/" style="font-size: 1.5em; color: #99a9bf">javascript</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/06/"><span class="card-archive-list-date">六月 2021</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/05/"><span class="card-archive-list-date">五月 2021</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/04/"><span class="card-archive-list-date">四月 2021</span><span class="card-archive-list-count">1</span></a></li></ul></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">©2021 By Ellenyyyy</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text">学习前端的同时不断输出idol的魅力嘿嘿😁</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><div class="js-pjax"></div><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body></html>