手把手教你 Vue 服务端渲染
序在写这篇文章之前，我有写一篇 Vue 预渲染的教程 以及 在线示例，有需要的可以看一下~ 【下面开始 Vue 服务端渲染】 服务端渲染 = SSR = Server-Side Rendering Vue 服务器渲染 可以说是我们学习 Vue 技术的最后一个环节了；也是上手难度稍为高一点的一个环节。 目前还没有发现很好的学习资料或者教程，文档也不是特别明白，这也导致了很多人没能拿下 vue 的 ssr。 所以就想着写一个曲线平滑，循序渐进，明了易懂的 教程 来帮助大家找到 Vue SSR 的感觉。 写在前面由于内容较多，如果只写一篇文章就想把 Vue SSR 介绍清晰透彻的话，我觉得不太现实；所以就想着把一个完整的 Vue SSR 项目细分开来，每一个小节讲解一个知识点，这样效果应该会好一点吧。这个项目虽然不大，但已经包含了 Vue SSR 的所有内容。 项目仓库：[https://github.com/Neveryu/vue-ssr-lessons](https://github.com/Neveryu/vue-ssr-lessons) 1、这个教程 分为 7 个小节，每个 ...
【转】如何优雅处理前端异常
前端一直是距离用户最近的一层，随着产品的日益完善，我们会更加注重用户体验，而前端异常却如鲠在喉，甚是烦人。 一、为什么要处理异常？异常是不可控的，会影响最终的呈现结果，但是我们有充分的理由去做这样的事情。 1.增强用户体验；2.远程定位问题；3.未雨绸缪，及早发现问题；4.无法复线问题，尤其是移动端，机型，系统都是问题；5.完善的前端方案，前端监控系统； 对于 JS 而言，我们面对的仅仅只是异常，异常的出现不会直接导致 JS 引擎崩溃，最多只会使当前执行的任务终止。 二、需要处理哪些异常？对于前端来说，我们可做的异常捕获还真不少。总结一下，大概如下： JS 语法错误、代码异常 AJAX 请求异常 静态资源加载异常 Promise 异常 Iframe 异常 跨域 Script error 崩溃和卡顿 下面我会针对每种具体情况来说明如何处理这些异常。 三、Try-Catch 的误区`try-catch` 只能捕获到 **同步** 的运行时错误，对 语法 和 异步 错误却无能为力，捕获不到。【不能捕获XHR，AJAX的异常】 1.同步运行时错误： 123456try ...
JavaScript 内存管理 & 垃圾回收机制
简介低级语言，比如C，有低级的内存管理基元，像 malloc()，free()。另一方面，JavaScript 的内存基元在变量（对象，字符串等等）创建时分配，然后在他们不再被使用时“自动释放”。后者被称为垃圾回收。这个“自动”是混淆并给 JavaScript （和其他高级语言）开发者一个错觉：他们可以不用考虑内存管理。 JavaScript 的内存分配变量初始化为了不让程序员为分配费心，JavaScript 在定义变量时完成内存分配。例如： 123456789101112var n = 123; // 给数值变量分配内存// 为对象及其包含变量分配内存var o = { a: 1, b: null};// 函数表达式也能分配一个对象obj.addEventListener("click", function(){ obj.style.backgroundColor = 'blue';}, false); 通过函数调用的内存分配有些函数调用结果是分配对象内存： 12var d = ne ...
JavaScript深拷贝和浅拷贝
简介深拷贝和浅拷贝最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用，深拷贝在计算机中开辟了一块内存地址用于存放复制的对象，而浅拷贝仅仅是指向被拷贝的内存地址，如果原地址中对象被改变了，那么浅拷贝出来的对象也会相应改变。 JavaScript 的内存分配变量初始化为了不让程序员为分配费心，JavaScript 在定义变量时完成内存分配。例如： 123456789101112var n = 123; // 给数值变量分配内存// 为对象及其包含变量分配内存var o = { a: 1, b: null};// 函数表达式也能分配一个对象obj.addEventListener("click", function(){ obj.style.backgroundColor = 'blue';}, false); 通过函数调用的内存分配有些函数调用结果是分配对象内存： 12var d = new Date();var e = document.createElement(" ...
Vue 服务端渲染 or 预渲染
简介关于 Vue 的 SPA 说的已经太多太多了，它为我们带来了极速的开发体验，极强的开发效率。可能唯一有些许不足的就是，当我们对 SEO 很在乎的时候，我们如何去处理 SEO 的需求。 关于 SEO ，Vue 也有现成的解决方案： Vue 服务端渲染 那么什么是服务端渲染服务端将完整的页面 html 输出到客户端显示，与 SPA （Single-Page-Application）使用 js 渲染页面不同。 为什么使用服务端渲染 更好的 SEO 更快的内容到达时间 服务端渲染 or 预渲染就像官网所说的，如果你调研服务器端渲染(SSR)只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染，一个典型的预渲染使用场景可能类似这个网站。 区别服务端渲染和预渲染的使用场景还是有较明显的区别的。预渲染的使用场景更多是我们所说的静态页面的形式，比如说这个网站。服务端渲染适用于大型的、页面数据处理较多且较为复杂的、与服务端有数据交互的功能型网站，一个明显的使用场景就是电商网站。 如何使用预渲染预渲染的核心是使用 prerender-spa ...
Hexo-NexT搭建个人博客（六）
在 hexo 中，我们如何使用自己自定义的 html 页面呢？ 我们知道，在 hexo 中，我们使用的是 markdown 格式的文件，渲染出来的页面是有主题样式的。如果我们不希望我们的页面使用主题样式。那么需要在文件头部加一个 layout: false 的配置。 **使用 md 文件写文章时增加配置不使用 layout ** 12345678---title: 我来试一下如何禁止解析htmldate: 2018-10-04 13:25:24categories: [前端]tags: [Hexo, Next]comments: falselayout: false--- 这样，我们的文件就不会被主题渲染。 其实在我们的 hexo 中，是可以直接写 html 文件的，不过也会被渲染，出来的页面还是有主题样式的。如果我们不想要这个主题样式，怎么做呢？ ** 使用 skip_render ** skip_render 跳过指定文件的渲染，您可使用 glob 表达式 来匹配路径。 skip_render 的配置在 站点配置文件 中。 只有 source 目录下的文件才会发布到 ...
Hexo NexT 博客增加知乎豆瓣图标支持
因为 Hexo NexT 原始主题是采用了 Font Awesome 图标，并未包含如知乎、豆瓣这类中国大陆的社交网站图标。所以需要加入另一种图标的支持，使得博客可以显示出知乎、豆瓣这类的图标。 感谢评论区 jqgsninimo 提供的改进，方法更佳简单明了，本文已经更新该方法。 CSS 自定义文件指 /source/_data/styles.styl 本文适用于 Hexo 4.2.0 / NexT 7.7.1 1. 下载图标首先，前往 阿里巴巴矢量库 挑选需要的图标，在图标上点击 加入购物车。 然后，点击页面右上方 进入购物车，选择「下载代码」。 将下载的文件解压后，找到 iconfont.css 文件，打开后将其中的所有内容都复制加入到主题 CSS 自定义文件中的任意位置。这里需要修改部分内容，使得图标样式可以和主题样式保持一致。在这样设置好以后，就可以在博客需要额外图标的地方使用 <i class="iconfont icon-xxx"></i> 的进行引用了。 但是这里有一个问题，如果想在侧边栏的社交网站列表里加入知乎、豆 ...
Hexo NexT 博客增加网易云音乐
打开我们主题文件：themes\next\layout_macro\sidebar.swig，将网易云插件代码代码粘贴到此即可。 演示： 123456<aside class="sidebar"> <div class="sidebar-inner"> //从下面开始复制，粘贴到这里 <!--网易云插件--> <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="//music.163.com/outchain/player?type=0&id=5359536590&auto=1&height=32"> </iframe> 使用 Pajx 实现背景音乐全局播放即实现页面跳转刷新后音乐不间断播放 打开 the ...
Hexo使用记录
最近把 个人主页 与 博客 都重新设计了，所以就打算写个总结，自己记录一下一些细节。虽然自认为不会有几个访客，但还是进行了相应的区别定位。个人主页主要是展现个人的简历、研究项目等内容，主要是个人展示目的；博客偏向于个性化一些，主要想进行一些生活日常或者研究过程等记录，也可以展现一些自己的兴趣爱好之类的东西。 1. 域名与解析购买到合适的域名之后，就需要把网站通过 DNS 解析到对应的域名上，我的网站 DNS 解析由 阿里云 提供。 2. Hexo 初始化2.1 环境配置1sudo yarn global add hexo-cli #需要输入密码确认，或者 npm install -g hexo-cli 安装 Hexo 完成后，执行下列命令会在指定文件夹中新建所需要的文件： 123hexo init <folder-path> #在指定文件夹中初始化 Hexocd <folder-path> #定位到 Hexo 博客目录yarn install #或者 npm install 新建完成后，指定文件夹的目录中： _config.yml 站点配置文件，具体配 ...
关于 JavaScript 中 this 的详细总结
在 JavaScript 中，函数中的 this 指向，很多同学总是理不清楚【这必然会带来一些问题】。确实，JavaScript 中，函数的 this 指向比较复杂多变。它和你调用的方式有关系，和 **严格模式** 或者 **非严格模式** 有关系，和你是否使用了箭头函数有关系，和你在使用函数时是否传入了 this 有关系，和你是否主动修改了调用对象有关系。 在绝大多数情况下，函数的调用方式决定了 this 的值。this 不能再执行期间被赋值，并且在每次函数被调用时 this 的值也可能会不同。ES5 引入了 bind 方法来设置函数的 this 值，关于bind和call可以看我的文章，而不用考虑函数如何被调用的，ES2015 引入了支持 this 词法解析的箭头函数（它在闭合的执行上下文内设置 this 的值）。 与其他语言相比，函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在 严格模式 和 非严格模式之间也会有一些差别。 全局上下文无论是否在严格模式下，在全局执行上下文中（在任何函数体外部）this 都指代全局对象。【在全局执行上下文中 ...
