A virtual proof that I'm awesome https://emily2010.github.io/ This is my first post, how exciting! Thu, 04 Jun 2020 00:00:00 -0700 https://emily2010.github.io/2020-06-04-%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8%E9%9D%A2%E8%AF%95%E5%AE%98-%E8%AF%B7%E4%BD%A0%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%A4%A7%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E5%92%8C%E6%96%AD%E7%82%B9%E7%BB%AD%E4%BC%A0/ https://emily2010.github.io/2020-06-04-%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8%E9%9D%A2%E8%AF%95%E5%AE%98-%E8%AF%B7%E4%BD%A0%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%A4%A7%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E5%92%8C%E6%96%AD%E7%82%B9%E7%BB%AD%E4%BC%A0/ This is my first post, how exciting! Thu, 04 Jun 2020 00:00:00 -0700 https://emily2010.github.io/2020-06-04-CSS%E7%9F%A5%E8%AF%86/ https://emily2010.github.io/2020-06-04-CSS%E7%9F%A5%E8%AF%86/ 什么是设计模式？ 设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论，而不是现成的代码，当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题，毕竟这是前人无数经验总结成的最佳实践，而代码实现则是对加深理解的辅助。 设计模式的类型 设计模式可以分为三大类： 结构型模式（Structural Patterns）： 通过识别系统中组件间的简单关系来简化系统的设计。 创建型模式（Creational Patterns）： 处理对象的创建，根据实际情况使用合适的方式创建对象。常规的对象创建方式可能会导致设计上的问题，或增加设计的复杂度。创建型模式通过以某种方式控制对象的创建来解决问题。 行为型模式（Behavioral Patterns）： 用于识别对象之间常见的交互模式并加以实现，如此，增加了这些交互的灵活性。 以上定义非常的抽象和晦涩，对于我们初学者并没有太多帮助，要了解这些设计模式真正的作用和价值还是需要通过实践去加以理解。这三大类设计模式又可以分成更多的小类，如下图： 下面我们选择一些在前端开发过程中常见的模式进行一一讲解。 一. 结构型模式（Structural Patterns） 1. 外观模式（Facade Pattern） 外观模式是最常见的设计模式之一，它为子系统中的一组接口提供一个统一的高层接口，使子系统更容易使用。简而言之外观设计模式就是把多个子系统中复杂逻辑进行抽象，从而提供一个更统一、更简洁、更易用的API。很多我们常用的框架和库基本都遵循了外观设计模式，比如JQuery就把复杂的原生DOM操作进行了抽象和封装，并消除了浏览器之间的兼容问题，从而提供了一个更高级更易用的版本。其实在平时工作中我们也会经常用到外观模式进行开发，只是我们不自知而已。 比如，我们可以应用外观模式封装一个统一的DOM元素事件绑定/取消方法，用于兼容不同版本的浏览器和更方便的调用： // 绑定事件 function addEvent(element, event, handler) { if (element.addEventListener) { element.addEventListener(event, handler, false); } else if (element.attachEvent) { element.attachEvent('on' + event, handler); } else { element['on' +... Fri, 24 Apr 2020 00:00:00 -0700 https://emily2010.github.io/2020-04-24-%E5%89%8D%E7%AB%AF%E9%9C%80%E8%A6%81%E4%BA%86%E8%A7%A3%E7%9A%849%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/ https://emily2010.github.io/2020-04-24-%E5%89%8D%E7%AB%AF%E9%9C%80%E8%A6%81%E4%BA%86%E8%A7%A3%E7%9A%849%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/ 题目：CSS经典布局-Sticky-Footer(footer高度不固定) 前言 Sticky Footer是css的一种布局场景。页脚footer永远固定在页面的底部，页面内容不够长的时候页脚黏在视窗底部，内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移，移动端特定布局也需要Sticky Footer来解决这些问题。 1.利用绝对定位和padding完美兼容 已知底部高度，利用绝对定位和padding完美兼容 去除标签多余的margin,padding,给html和body设置100%。 外部容器min-height为100%，使得内容少时也能撑开。 主体内容设置padding-bottom，这个为底部的高度，可以使内容完全显示否则会使主体内容有底部面积大小区域被遮挡 footer高度固定，进行绝对定位。 DOM节点 <div class="container"> <div class="header"></div> <div class="section"> </div> <div class="footer">Copyright© 1994-2019 切图妞</div> </div> 样式代码 html, body { height: 100%; } .container { position: relative; min-height: 100%; height: auto !important; height: 100%; /*IE6不识别min-height*/ } .section { padding-bottom: 60px; } .footer... Fri, 10 Apr 2020 00:00:00 -0700 https://emily2010.github.io/2020-04-10-CSS%E7%BB%8F%E5%85%B8%E5%B8%83%E5%B1%80-Sticky-Footer/ https://emily2010.github.io/2020-04-10-CSS%E7%BB%8F%E5%85%B8%E5%B8%83%E5%B1%80-Sticky-Footer/ 2020 年 4 月 4 日，星期六，清明节。 我们的国家经历了非常惨痛的时刻，很多英雄在救助他人的路上倒下，更有很多烈士英雄保卫人民的安危遇难，今天全国下降半旗，北京时间 10 点全国默哀三分钟，来致敬英雄们。同时今天一切公共娱乐活动也都会停止，包括直播、综艺、影视、游戏等等。 我也在这里也向全国抗击新冠肺炎疫情斗争牺牲的烈士和逝世的同胞表达深切的哀悼，向所有在抗战在疫情前线的工作和医护人员致敬。我们每一个人的平安面前，都是英雄的人墙。 网站变灰 今天大家可以看到很多很多网站包括主页和内容也都已经变成了灰色，比如百度、B 站、爱奇艺、CSDN 等等。 CSDN 爱奇艺 百度 大家可以看到全站的内容都变成灰色了，包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢？ 有人会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了，而且万一某个控件忘记加灰色样式了岂不是太突兀了。 其实，解决方案很简单，只需要几行代码就能搞定了。 实现 我们选择一个网站，比如 B 站吧，打开浏览器开发者工具。 审查一下网页的源代码，我们可以发现在 html 的这个地方多了一个疑似的 class，叫做 gray，gray 中文即灰色。 变灰效果 可以看到，我们只要将下面这行 CSS 样式，加入到页面指定节点，即可实现网页变灰的效果： -webkit-filter: grayscale(.95); 其完整内容为： html.gray { -webkit-filter: grayscale(.95); } 我们将其取消，就能发现网站的颜色就能重新还原回来了。 还原效果 果然是这个样式在起作用，而且是全局的效果，因为它是作用在了 html 这个节点之上的。 另外看看... Sat, 04 Apr 2020 00:00:00 -0700 https://emily2010.github.io/2020-04-04-%E5%A6%82%E4%BD%95%E7%94%A8%E4%B8%80%E8%A1%8C%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0%E7%BD%91%E9%A1%B5%E5%8F%98%E7%81%B0%E6%95%88%E6%9E%9C/ https://emily2010.github.io/2020-04-04-%E5%A6%82%E4%BD%95%E7%94%A8%E4%B8%80%E8%A1%8C%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0%E7%BD%91%E9%A1%B5%E5%8F%98%E7%81%B0%E6%95%88%E6%9E%9C/ 服务器端渲染定义 服务器端渲染 Server-Side Rendering 也常被人写作 SSR 是 Vue.js 2.0 版本发布的时候同时推出的功能，Virtual-DOM 的实现让 DOM 生成被 JavaScript 来描述也就给了前后端在 JavaScript 环境下都可以生成页面内容，而其最主要的业务 vue-server-renderer也包含在了 Vue.js核心库中。 为什么选择SSR SEO：除了 Google 和 Bing 比较完美地实现了对于 SPA（Single-Page Application）的爬虫渲染及内容抓取，大多数搜索引擎包括百度都没有支持。因而，包含丰富内容的产品并需要 SEO 流量的产品也就自然需要 SSR 实现。 加载速度：Faster Time-to-Content 当网站是 SPA 时，渲染网站需要：第一次加载 HTML、加载 JavaScript、加载相应页面需要的 Vue Components（为了性能大多数组建都是异步取的）、渲染 DOM、加载数据、渲染 DOM、展示 … 而后端提前渲染好页面，可以快速展示到页面内容（其实加载数据部分的时间成本是省不下来的），因而还包含了使用缓存、renderToStream 等等优化速度的方法。 服务端渲染的流程 在使用服务端渲染的时候，首先要有个server端。因为在开发vue项目时，需要起一个webpack-dev-server的服务，端口8000。因为我们要使用它的热更替，这样能加快开发效率。 由于webpack是一个自主的server，我们没有办法在里面添加服务端渲染的代码，而这段代码是需要自己去写的，所以需要再起一个node server，去执行服务端渲染的逻辑。 我们会用到vue-server-renderer这个包来帮我们在node.js环境里面去渲染出vue代码生成的HTML代码，这部分代码是直接返回给用户的，用户可以在浏览器里直接看到HTML的内容。... Thu, 02 Apr 2020 00:00:00 -0700 https://emily2010.github.io/2020-04-02-%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E4%BD%A0%E5%85%A5%E9%97%A8Vue%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93-SSR/ https://emily2010.github.io/2020-04-02-%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E4%BD%A0%E5%85%A5%E9%97%A8Vue%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93-SSR/ 一、类 概述：在ES5中提出类概念【构造函数】，但是ES6中提出类的新的语法；需要使用关键字class进行定义； 1.1 ES5中类 1.2 ES6中类 概述：ES6规范当中可以使用class关键字定义类； 1.3ES5中继承 概述：很多面向对象语言【JS:基于面向对象一门语言】，都有三大特征：继承、封装、多态 在JS当中多个类之间可以完成继承功能：让某一个类继承另外一个类属性、方法 继承实现原理：子类的 原型对象 指向 父类的一个实例，可以实现继承； //JS当中继承：多类之间实现的 1.4 ES6中继承 二、箭头函数 概述：在ES5中声明函数我们需要使用关键字function声明函数 【关键字 + 表达式】 但是在ES6中提出所谓箭头函数 2.1 箭头函数基本使用 概述：以后关键字const经常集合箭头函数一起使用； 箭头函数如果有返回值且 一行代码 可以省略return关键字 函数体； 箭头函数如果有一个形参 而且有返回值 可以省略return关键字、函数体、省略函数小括号； 箭头函数如果 返回值为JSON【狭义对象】 需要给对象外层加上一个小括号变为表达式返回； 箭头函数不允许用关键字new执行【因为ES6中类使用class定义，不是箭头函数了】 2.2 箭头函数练习 闭包：闭包是函数一种特性，可以记住作用域发生变化的函数【我们称之为闭包】 由于sum函数可以记住全局作用域当中a数值变化 【sum函数就是一个闭包】 2.3 函数默认参数 2.4 箭头函数上下文 2.4.1 ES5中函数上下文判断 概述:以前函数上下文判断：前提函数是怎么样执行的? 注意：ES6中箭头函数的上下文判断：下面规律都是不行；... Tue, 31 Mar 2020 00:00:00 -0700 https://emily2010.github.io/2020-03-31-%E5%85%A8%E9%9D%A2%E6%B7%B1%E5%85%A5ES6-%E7%9C%8B%E5%AE%8C%E8%BF%9B%E9%98%B6%E5%89%8D%E7%AB%AF%E6%A0%B8%E5%BF%83/ https://emily2010.github.io/2020-03-31-%E5%85%A8%E9%9D%A2%E6%B7%B1%E5%85%A5ES6-%E7%9C%8B%E5%AE%8C%E8%BF%9B%E9%98%B6%E5%89%8D%E7%AB%AF%E6%A0%B8%E5%BF%83/ 答题大纲 先说基本知识点，宏任务、微任务有哪些 说事件循环机制过程，边说边画图出来 说async/await执行顺序注意，可以把 chrome 的优化，做法其实是违反了规范的，V8 团队的PR这些自信点说出来，显得你很好学，理解得很详细，很透彻。 把node的事件循环也说一下，重复1、2、3点，node中的第3点要说的是node11前后的事件循环变动点。 下面就跟着这个大纲走，每个点来说一下吧～ 浏览器中的事件循环 JavaScript代码的执行过程中，除了依靠函数调用栈来搞定函数的执行顺序外，还依靠任务队列(task queue)来搞定另外一些代码的执行。整个执行过程，我们称为事件循环过程。一个线程中，事件循环是唯一的，但是任务队列可以拥有多个。任务队列又分为macro-task（宏任务）与micro-task（微任务），在最新标准中，它们被分别称为task与jobs。 macro-task大概包括： script(整体代码) setTimeout setInterval setImmediate I/O UI render micro-task大概包括: process.nextTick Promise Async/Await(实际就是promise) MutationObserver(html5新特性) 整体执行，我画了一个流程图： GitHub 总的结论就是，执行宏任务，然后执行该宏任务产生的微任务，若微任务在执行过程中产生了新的微任务，则继续执行微任务，微任务执行完毕后，再回到宏任务中进行下一轮循环。举个例子： 结合流程图理解，答案输出为：async2 end => Promise => async1 end => promise1 => promise2 => setTimeout 但是，对于async/await ，我们有个细节还要处理一下。如下： async/await执行顺序 我们知道async隐式返回 Promise 作为结果的函数,那么可以简单理解为，await后面的函数执行完毕时，await会产生一个微任务(Promise.then是微任务)。但是我们要注意这个微任务产生的时机，它是执行完await之后，直接跳出async函数，执行其他代码(此处就是协程的运作，A暂停执行，控制权交给B)。其他代码执行完毕后，再回到async函数去执行剩下的代码，然后把await后面的代码注册到微任务队列当中。我们来看个例子： console.log('script start') async... Sat, 04 Jan 2020 00:00:00 -0800 https://emily2010.github.io/2020-01-04-%E9%9D%A2%E8%AF%95%E9%A2%98-%E8%AF%B4%E8%AF%B4%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6(%E6%BB%A1%E5%88%86%E7%AD%94%E6%A1%88%E6%9D%A5%E4%BA%86)/ https://emily2010.github.io/2020-01-04-%E9%9D%A2%E8%AF%95%E9%A2%98-%E8%AF%B4%E8%AF%B4%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6(%E6%BB%A1%E5%88%86%E7%AD%94%E6%A1%88%E6%9D%A5%E4%BA%86)/ 网上有不少关于 JS 编写优化建议，这里我根据自己的经验提出一些比较有用的意见。 1. 按强类型风格写代码 JS 是弱类型的，但是写代码的时候不能太随意，写得太随意也体现了编码风格不好。下面分点说明： （1）定义变量的时候要指明类型，告诉 JS 解释器这个变量是什么数据类型的，而不要让解释器去猜，例如不好的写法： var num, str, obj; 声明了三个变量，但其实没什么用，因为解释器不知道它们是什么类型的，好的写法应该是这样的： var num = 0, str = '', obj = null; 定义变量的时候就给他一个默认值，这样不仅方便了解释器，也方便了阅读代码的人，他会在心里有数——知道这些变量可能会当作什么用。 （2）不要随意地改变变量的类型，例如下面代码： var num = 5; num = "-" + num; 第 1 行它是一个整型，第 2 行它变成了一个字符串。因为 JS 最终都会被解释成汇编的语言，汇编语言变量的类型肯定是要确定的，你把一个整型的改成了字符串，那解释器就得做一些额外的处理。并且这种编码风格是不提倡的，有一个变量第 1 行是一个整型，第 10 行变成了一个字符串，第 20 行又变成了一个 object，这样就让阅读代码的人比较困惑，上面明明是一个整数，怎么突然又变成一个字符串了。好的写法应该是再定义一个字符串的变量：... Sat, 04 Jan 2020 00:00:00 -0800 https://emily2010.github.io/2020-01-04-%E7%AE%80%E5%8D%95%E5%87%A0%E6%AD%A5%E8%AE%A9%E4%BD%A0%E7%9A%84-JS-%E5%86%99%E5%BE%97%E6%9B%B4%E6%BC%82%E4%BA%AE/ https://emily2010.github.io/2020-01-04-%E7%AE%80%E5%8D%95%E5%87%A0%E6%AD%A5%E8%AE%A9%E4%BD%A0%E7%9A%84-JS-%E5%86%99%E5%BE%97%E6%9B%B4%E6%BC%82%E4%BA%AE/ 前言 最近部门在对以往的代码做一些优化，我在代码中看到一连串的 if(){}elseif(){} 的逻辑判断。这明显是有优化空间的。 由于内部代码不适合分享，这里我就用 来讲讲逻辑判断优化的一些方案。 我们在项目中使用的很可能会有多层的嵌套，不像我的例子只有一层。不过其优化的思想是大致相同的。由于 returnWeekday() 方法异常之简单，所以提前声明。 需求 写一个 returnWeekday() 方法返回"今天是星期*"。 接下来我们就一步一步来。 优化过程 这里我简单的分为 “初学 —> 入门 —> 中级” 这几个阶段。 初学 当我们开始拿到需求的时候，看到一系列的逻辑判断，首先想到的应该就是 if 语句了。 代码如下： function returnWeekday() { let string = "今天是星期"; let date = new Date().getDay(); if (date === 0) { string += '日'; } else if... Sat, 04 Jan 2020 00:00:00 -0800 https://emily2010.github.io/2020-01-04-%E4%BD%A0%E5%8F%AF%E4%BB%A5%E8%BF%99%E6%A0%B7%E4%BC%98%E5%8C%96-if-else-%E4%BB%A3%E7%A0%81%E7%BB%93%E6%9E%84/ https://emily2010.github.io/2020-01-04-%E4%BD%A0%E5%8F%AF%E4%BB%A5%E8%BF%99%E6%A0%B7%E4%BC%98%E5%8C%96-if-else-%E4%BB%A3%E7%A0%81%E7%BB%93%E6%9E%84/ 问卷调查页面源码 <template> <div> <van-nav-bar title="问卷调查" left-text="返回" left-arrow :fixed="true" /> <div class="style-class"> <questionList class="list-style" ref="listComponent" :question="data" /> <div class="button-style"> <van-button round block type="info" @click="submitInfo()" >提交</van-button > </div> </div> </div> </template> <script> import questionList from "@/components/QuestionList"; // 问卷本地数据 import listData from "../../../mock/data"; export default { name: "Question", components: { questionList }, data()... Sat, 04 Jan 2020 00:00:00 -0800 https://emily2010.github.io/2020-01-04-Vue%E5%AE%9E%E8%B7%B5-%E7%96%AB%E6%83%85%E9%97%AE%E5%8D%B7%E8%B0%83%E6%9F%A5%E6%BA%90%E7%A0%81/ https://emily2010.github.io/2020-01-04-Vue%E5%AE%9E%E8%B7%B5-%E7%96%AB%E6%83%85%E9%97%AE%E5%8D%B7%E8%B0%83%E6%9F%A5%E6%BA%90%E7%A0%81/ Promise 想必大家都十分熟悉，想想就那么几个 api，可是你真的了解 Promise 吗？本文根据 Promise 的一些知识点总结了十道题，看看你能做对几道。 以下 promise 均指代 Promise 实例，环境是 Node.js。 题目一 const promise = new Promise((resolve, reject) => { console.log(1) resolve() console.log(2) }) promise.then(() => { console.log(3) }) console.log(4) 运行结果： 1 2 4 3 解释： Promise 构造函数是同步执行的，promise.then 中的函数是异步执行的。 题目二 const promise1 = new Promise((resolve, reject) => {... Sat, 04 Jan 2020 00:00:00 -0800 https://emily2010.github.io/2020-01-04-Promise%E7%9F%A5%E8%AF%86%E7%82%B9%E8%87%AA%E6%B5%8B/ https://emily2010.github.io/2020-01-04-Promise%E7%9F%A5%E8%AF%86%E7%82%B9%E8%87%AA%E6%B5%8B/ 重构方法概要 分解条件表达式 合并条件表达式 以卫语句替代嵌套条件表达式 以多态取代条件表达式 引入特例 引入断言 思考: 条件表达式易产生的问题 复杂度极高: 表现是 if 嵌套两三层设置更多 大型函数可读性下降: 不知道为什么会发生这样事情 重构手法 1：分解条件表达式 和任何大块头代码一样，我可以将它分解为多个独立的函数，根据每个小块代码的用途，为分解而得的新函数命名，并将原函数中对应的代码改为调用新函数，从而更清楚地表达自己的意图。对于条件逻辑，将每个分支条件分解成新函数还可以带来更多好处：可以突出条件逻辑，更清楚地表明每个分支的作用，并且突出每个分支的原因。本重构手法其实只是提炼函数的一个应用场景。 if (!aDate.isBefore(plan.summerStart) && !aDate.isAfter(plan.summerEnd)) 　charge = quantity * plan.summerRate; else 　charge = quantity * plan.regularRate + plan.regularServiceCharge; 进行重构后将条件提炼到一个独立的函数, 用三元运算符重新安排条件语句 : charge = summer() ? summerCharge() : regularCharge(); function summer() { 　return !aDate.isBefore(plan.summerStart)... Sat, 04 Jan 2020 00:00:00 -0800 https://emily2010.github.io/2020-01-04-Javascript%E6%9D%A1%E4%BB%B6%E9%80%BB%E8%BE%91%E8%AE%BE%E8%AE%A1%E9%87%8D%E6%9E%84/ https://emily2010.github.io/2020-01-04-Javascript%E6%9D%A1%E4%BB%B6%E9%80%BB%E8%BE%91%E8%AE%BE%E8%AE%A1%E9%87%8D%E6%9E%84/ 1、概述 jsonp是一种跨域通信的手段，它的原理其实很简单： 1. 首先是利用script标签的src属性来实现跨域。 2. 通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。 3. 由于使用script标签的src属性，因此只支持get方法 2、实现流程 1）、设定一个script标签. <script src="http://jsonp.js?callback=xxx"></script> 2）、callback定义了一个函数名，而远程服务端通过调用指定的函数并传入参数来实现传递参数，将fn(response)传递回客户端 $callback = !empty($_GET['callback']) ? $_GET['callback'] : 'callback'; echo $callback.'(.json_encode($data).)'; 3）、客户端接收到返回的js脚本，开始解析和执行fn(response) 3、jsonp简单实现 一个简单的jsonp实现，其实就是拼接url，然后将动态添加一个script元素到头部。 function jsonp(req){ var script = document.createElement('script'); var url = req.url + '?callback=' + req.callback.name; script.src = url; document.getElementsByTagName('head')[0].appendChild(script); } 前端js示例 function hello(res){ alert('hello ' +... Sat, 04 Jan 2020 00:00:00 -0800 https://emily2010.github.io/2020-01-04-JS%E4%B9%8B-jsonp%E7%9A%84%E5%8E%9F%E7%90%86%E4%B8%8E%E5%AE%9E%E7%8E%B0/ https://emily2010.github.io/2020-01-04-JS%E4%B9%8B-jsonp%E7%9A%84%E5%8E%9F%E7%90%86%E4%B8%8E%E5%AE%9E%E7%8E%B0/ Each post also has a subtitle - You can write regular markdown here and Jekyll will automatically convert it to a nice webpage. I strongly encourage you to take 5 minutes to learn how to write in markdown - it’ll teach you how to transform regular text into bold/italics/headings/tables/etc. Here is some bold text Here is a... Sat, 28 Feb 2015 00:00:00 -0800 https://emily2010.github.io/2015-02-28-test-markdown/ https://emily2010.github.io/2015-02-28-test-markdown/ Excerpt from Soulshaping by Jeff Brown - Under what circumstances should we step off a path? When is it essential that we finish what we start? If I bought a bag of peanuts and had an allergic reaction, no one would fault me if I threw it out. If I ended a relationship with a woman who... Thu, 26 Feb 2015 00:00:00 -0800 https://emily2010.github.io/2015-02-26-flake-it-till-you-make-it/ https://emily2010.github.io/2015-02-26-flake-it-till-you-make-it/ ... or not to be? - To be, or not to be–that is the question: Whether ‘tis nobler in the mind to suffer The slings and arrows of outrageous fortune Or to take arms against a sea of troubles And by opposing end them. To die, to sleep– No more–and by a sleep to say we... Fri, 13 Feb 2015 00:00:00 -0800 https://emily2010.github.io/2015-02-13-hamlet-monologue/ https://emily2010.github.io/2015-02-13-hamlet-monologue/ 实际开发工作中会经常遇到一个需求，就是判断当前登录网页的设备是PC还是移动，要求PC端和移动端显示的是不同的网页内容。 那么我们就需要对当前登录设备进行判断。 使用 navigator.userAgent 字符串检测 我是在PC端开发完接到要做移动端的需求，而且移动端只有一个页面，我就统一放在了一个文件夹内。 首先在 app.vue 文件内，判断当前设备是pc端还是移动端。 methods: { // 添加判断方法 isMobile() { let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i); return flag; } }, mounted: { if(this.isMobile) { alert("移动端"); this.$router.replace('/pc_index'); }else { alert("pc端"); this.$router.replace('/m_index'); } } 接下来就略微介绍一下这个方法，其中用到了 navigator.userAgent 。 这个方法会返回一个只读的字符串，声明了浏览器在发送 http 请求时的用户代理头的值。例如： <script> document.write("用户代理：" + navigator.userAgent) </script> // pc端输出结果： 用户代理：... Wed, 04 Feb 2015 00:00:00 -0800 https://emily2010.github.io/2015-02-04-VUE%E5%88%A4%E6%96%AD%E5%BD%93%E5%89%8D%E8%AE%BE%E5%A4%87%E6%98%AFPC%E8%BF%98%E6%98%AF%E7%A7%BB%E5%8A%A8%E7%AB%AF/ https://emily2010.github.io/2015-02-04-VUE%E5%88%A4%E6%96%AD%E5%BD%93%E5%89%8D%E8%AE%BE%E5%A4%87%E6%98%AFPC%E8%BF%98%E6%98%AF%E7%A7%BB%E5%8A%A8%E7%AB%AF/ What is it with that Mary girl? Dragging me to school every day. As if I had a choice. What you don’t hear in those nursery rhymes is that she starves me if I don’t go to school with her; it’s the only way I can stay alive! I’m thinking... Tue, 27 Jan 2015 00:00:00 -0800 https://emily2010.github.io/2015-01-27-dear-diary/ https://emily2010.github.io/2015-01-27-dear-diary/ Best sport ever! - From Wikipedia: Association football, more commonly known as football or soccer,[2] is a sport played between two teams of eleven players with a spherical ball. It is played by 250 million players in over 200 countries, making it the world’s most popular sport.[3][4][5][6] The game is played on a rectangular... Mon, 19 Jan 2015 00:00:00 -0800 https://emily2010.github.io/2015-01-19-soccer/ https://emily2010.github.io/2015-01-19-soccer/