04 2020 档案
摘要：原生 Node 的单一请求处理函数，随着功能的扩张势必会变的越来越难以维护。 Express 框架则可以通过中间件的方式按照模块和功能对处理函数进行切割处理。这样拆分后的模块不仅逻辑清晰，更重要的是对后期维护和开发非常有利。 本文将会详细介绍 Express 的使用，其中主要内容包括： 中间件是什么
阅读全文
摘要：Express 框架的初衷是为了拓展 Node 内置模块的功能提高开发效率。 当你深入研究后就会发现，Express 其实是在 Node 内置的 HTTP 模块上构建了一层抽象。理论上所有 Express 实现的功能，同样可以使用纯 Node 实现。 在本文中，我们将基于前面的 Node 内容去探究
阅读全文
摘要：模块的使用 在大多数编程语言中，我们都会对代码进行拆分，然后在使用的时候将这些文件引入其中。 例如，C 和 C++ 中的 include，Python 的 import ，Ruby 和 PHP 中的 require。而另外一些语言，如 C# 是在编译时完成跨文件引用的。 很长一段时间内，JavaSc
阅读全文
摘要：在 Node.js 出现之前，前后端的开发必须使用不同的语言进行。为此你需要学习多种的语言和框架。有了 Node.js 之后，你就可以使用一门语言在前后端开发中自由切换，这是最吸引人的地方。 什么是 Express ？ Express 是一个基于 Node.js 封装的上层服务框架，它提供了更简洁的
阅读全文
摘要：先说下CSRF的定义 跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。[1] 跟
阅读全文
摘要：XSS XSS，即 Cross Site Script，中译是跨站脚本攻击；其原本缩写是 CSS，但为了和层叠样式表(Cascading Style Sheet)有所区分，因而在安全领域叫做 XSS。 XSS 攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏
阅读全文
摘要：Promise.all 接收一个 promise 对象的数组作为参数，当这个数组里的所有 promise 对象全部变为resolve或 有 reject 状态出现的时候，它才会去调用 .then 方法,它们是并发执行的。 var p1 = Promise.resolve(1), p2 = Promi
阅读全文
摘要：1、Promise 的声明 首先呢，promise肯定是一个类，我们就用class来声明。 由于new Promise((resolve, reject)=>{})，所以传入一个参数（函数），秘籍里叫他executor，传入就执行。 executor里面有两个参数，一个叫resolve（成功），一个
阅读全文
摘要：Async/Await 版本 function sleep(delay) { return new Promise(reslove => { setTimeout(reslove, delay) }) } !async function test() { const t1 = +new Date()
阅读全文
摘要：三角形 实现一个三角形 <!DOCTYPE html> <html> <head> <title>三角形</title> <style type="text/css"> .box1, .box2, .box3, .box4 { height: 0px; width: 0px; float: left
阅读全文
摘要：1.单例模式 单例模式的定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。 适用场景：一个单一对象。比如：弹窗，无论点击多少次，弹窗只应该被创建一次。 class CreateU
阅读全文
摘要：导读 移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题： 1px问题 UI图完美适配方案 iPhoneX适配方案 横屏适配 高清屏图片模糊问题 ... 上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们
阅读全文
摘要：二分查找，也称折半查找。利用二分思想，每次查找的时候把数据分为两半，从中间值开始找。 如上图所示，low和high代表数组的两边下标，mid代表数组的中间下标。 若目标值比中间值大，即目标值在mid与high之间，就修改low的值。再对比中间值。 若目标值比中间值小，即目标值在low与mid之间，就
阅读全文
摘要：中间件的功能和分类 中间件的本质就是一个函数，在收到请求和返回相应的过程中做一些我们想做的事情。Express文档中对它的作用是这么描述的： 执行任何代码。修改请求和响应对象。终结请求-响应循环。调用堆栈中的下一个中间件。 分类 Express文档中把他们分为了五类，但是他们的原理相同，只是用法不同
阅读全文
摘要：reduce() 方法接受一个数组作为输入值并返回一个值。这点挺有趣的。reduce 接受一个回调函数，回调函数参数包括一个累计器（数组每一段的累加值，它会像雪球一样增长），当前值，和索引。reduce 也接受一个初始值作为第二个参数： 来写一个炒菜函数和一个作料清单： // our list of
阅读全文
摘要：模块管理这个概念其实在前几年前端度过了刀耕火种年代之后就一直被提起。 直接回想起来的就是 cmd amd commonJS 这三大模块管理的印象。接下来，我们来详细聊聊。 一、什么是模块化开发 为了让一整个庞大的项目看起来整整齐齐，规规整整而出现的模块化管理，我们常见的三种模块化管理的库： requ
阅读全文
摘要：1. 当数据发生变化时，vue是怎么更新节点的？ 要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？diff算法能够帮助我们。 我们先根据真实DOM生成一颗v
阅读全文
摘要：Promise 出现的原因 在 Promise 出现以前，我们处理一个异步网络请求，大概是这样： // 请求 代表 一个异步网络调用。 // 请求结果 代表网络请求的响应。 请求1(function(请求结果1){ 处理请求结果1 }) 看起来还不错。但是，需求变化了，我们需要根据第一个网络请求的结
阅读全文
摘要：CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。 display属性指定网页的布局。两个重要的布局，弹性布局flex和网格布局grid。 本文介绍非常有用的position属性。我希望通过10分钟的阅读，帮助大家轻松掌握网页定位，说清楚浏览器如何计算网页元素的
阅读全文
摘要：vue中有一个较为特殊的API，nextTick。根据官方文档的解释，它可以在DOM更新完毕之后执行一个回调，用法如下： // 修改数据 vm.msg = 'Hello' // DOM 还没有更新 Vue.nextTick(function () { // DOM 更新了 }) 尽管MVVM框架并不
阅读全文
摘要：一、实例代码 父组件： <template> <div id="parent"> <child></child> </div> </template> <script> import child from './components/child' export default { name: 'pa
阅读全文
摘要：HTTP 引自维基百科HTTP:超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。 设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。通过HTTP或者H
阅读全文
摘要：原型 执行代码var o = new Object(); 此时o对象内部会存储一个指针，这个指针指向了Object.prototype，当执行o.toString()等方法（或访问其他属性）时，o会首先查看自身有没有该方法或属性，如果没有的话就沿着内部存储的指针找到Object.prototype对
阅读全文
摘要：apply,call,bind都是js给函数内置的一些api,调用他们可以为函数指定this的执行,同时也可以传参。 call call 接收多个参数，第一个为函数上下文也就是this，后边参数为函数本身的参数。 let obj = { name: "一个" } function allName(f
阅读全文
摘要：对象和数组时 Javascript 中最常用的两种数据结构，由于 JSON 数据格式的普及，二者已经成为 Javascript 语言中特别重要的一部分。 在编码过程中，我们经常定义许多对象和数组，然后有组织地从中提取相关的信息片段。 ES6 中添加了可以简化这种任务的新特性：解构。解构是一种打破数据
阅读全文
摘要：1. 箭头函数没有prototype(原型)，所以箭头函数本身没有this let a = () =>{}; console.log(a.prototype); // undefined 2. 箭头函数的this指向在定义的时候继承自外层第一个普通函数的this。 下面栗子中在一个函数中定义箭头函数
阅读全文
摘要：插入排序 上图演示了第4次遍历，此时元素1、3、5已经是有序序列，待排的元素是2，要把它插入到1和3之间。此时3和5都往后移动了一位。 可以看出该算法的核心是：如何在有序序列里找到正确的插入位置？ 思路是从有序序列的尾部开始，逐个与目标元素比较，如果大于目标元素，该元素需要后移。 代码实现： for
阅读全文
摘要：数组去重 双循环去重 双重for（或while）循环是比较笨拙的方法，它实现的原理很简单： 先定义一个包含原始数组第一个元素的数组，然后遍历原始数组，将原始数组中的每个元素与新数组中的每个元素进行比对。 如果不重复则添加到新数组中，最后返回新数组；因为它的时间复杂度是O(n^2)，如果数组长度很大，
阅读全文
摘要：寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。 记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐。 然而很快就失望的发现 CSS 中并不存在 float:
阅读全文
摘要：先来一张经典图 生命钩子函数 使用vue的朋友们知道，生命周期函数长这样～ mounted: function() { } // 或者 mounted() { } 注意点，Vue的所有生命周期函数都是自动绑定到this的上下文上。所以，你这里使用箭头函数的话，就会出现this指向的父级作用域，就会报
阅读全文
摘要：什么是 HTTPS HTTPS（全称：Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。 即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。 现在
阅读全文
摘要：强缓存和协商缓存 在介绍缓存的时候，我们习惯将缓存分为强缓存和协商缓存两种。两者的主要区别是使用本地缓存的时候，是否需要向服务器验证本地缓存是否依旧有效。 顾名思义，协商缓存，就是需要和服务器进行协商，最终确定是否使用本地缓存。 两种缓存方案的问题点 强缓存 我们知道，强缓存主要是通过http请求头
阅读全文
摘要：computed和watch定义 1.computed是计算属性，类似于过滤器,对绑定到视图的数据进行处理。官网的例子： <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message:
阅读全文
摘要：一、文本对话--从请求到响应 我们在浏览器中输入一个 URL，回车之后便会在浏览器中观察到页面内容。实际上这个过程是： （1）浏览器向网站所在的服务器发送了一个 Request（请求） （2）网站服务器接收到这个Request之后进行处理和解析 （3）然后返回对应的一个Response（响应）给浏览
阅读全文
摘要：3月5日开始学习日语，4月9日初日上的内容至此已经全部学完～！ 下面是初日上的语法总汇，供复习用。 1.AはBです。A是B A、B：体言（名词、代词、数量词） Aは：主语部分，Bです：谓语部分（谓语放在句末） です：判断动词“是” は：提示主题A（提示要说明、描述的对象），单拿出来没有含义。 主题相
阅读全文
摘要：深拷贝和浅拷贝的主要区别，就是，其在内存中的存储类型不同。 堆和栈都是内存中划分出来用来存储的区域。 栈（stack）为自动分配的内存空间，它由系统自动释放；而堆（heap）则是动态分配的内存，大小不定也不会自动释放。 在将深拷贝和浅拷贝之前，我们先来重新回顾一下 ECMAScript 中的数据类型
阅读全文
摘要：在进行窗口的resize、scroll，输入框内容校验等操作时。如果事件处理函数调用的频率无限制，浏览器的负担会很大，形成卡顿等问题，用户体验会非常糟糕。 此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果！ 马上来学习吧！ 防抖 函数防抖（
阅读全文
摘要：在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素。在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫C
阅读全文
摘要：CSS选择器分基本选择器(元素选择器，类选择器，通配符选择器，ID选择器，关系选择器)， 属性选择器，伪类选择器，伪元素选择器，以及一些特殊选择器,如has，not等。 在CSS中，权重决定了哪些CSS规则生效，浏览器按如下规则进行CSS权重计算 1000：内联样式 0100：ID选择器 0010：
阅读全文
摘要：三栏布局、两栏布局都是我们在平时项目里经常使用的，今天我们来玩一下三栏布局的四种写法，以及它的使用场景。 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式。 1.绝对定位法 <div class="left">Left</div> <div class="main">Ma
阅读全文
摘要：BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。要明白BFC到底是什么，首先来看看什么是视觉格式化模型。 视觉格式化模型 视觉格式化模型(visual formatting model)是用来处理文档并将它显示
阅读全文
摘要：1、個（こ） 用途:用于比较立体（非扁平，非细长）的小东西。至于为什么扁平细长不能用。 例如： 办公用品（橡皮擦、回形针等） 水果（苹果、橘子、哈密瓜、草莓等） 2、つ 「つ」是日文中最传统的数量单位词，也可以用于计算形状非扁平、非细长状东西。「つ」和上面介绍的「个」有几个地方不同。 ①「個」较偏向
阅读全文
摘要：javascript是一门单线程语言，在最新的HTML5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的，一切javascript多线程都是纸老虎！ javascript事件循环 js是单线程，那就像只有一
阅读全文
摘要：好多灯 CB Insights研究发现，美国硅谷公司第一次创业失败率90%，并分析101家科技创业公司的失败案例，发现主要原因是三个。 第一，市场的原因。不可抗拒的历史潮流，失败不一定是自己的原因，是市场是时势。头悬梁，锥刺股，也不行。 第二，人类发展速度快，技术被淘汰，没有云化，高度自动化。 第三
阅读全文
摘要：居中布局 水平居中 行内元素: text-align: center 块级元素: margin: 0 auto absolute + transform flex + justify-content: center 垂直居中 line-height: height absolute + transf
阅读全文
摘要：腾讯官网 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} body{font:12px"宋体","Arial Narrow",HELVE
阅读全文
摘要：7项重要储备 Flow 基本语法 发布/订阅模式 ES6+ 语法 原型链、闭包 函数柯里化 event loop 接上讲 聊到了ES6的几个重要语法，加下来到第四点继续开始。 4.原型链、闭包 原型链 继承于我们前端来说绝对是非常熟悉也必须熟悉的一个高频必懂知识点。熟悉到只要是面试一定会有关于继承的
阅读全文
摘要：星期： 星期一 月曜日 （げつようび） 【记忆方法】：月亮只有一个，所以是星期一 星期二 火曜日 （かようび） 【记忆方法】：火字上有两点，所以是星期二 星期三 水曜日 （すいようび） 【记忆方法】：有个偏旁叫三点水，所以就是星期三 星期四 木曜日 （もくようび） 【记忆方法】：木字有四划，所以是星
阅读全文
摘要：发布订阅模式，它其实是一种对象间一对多的依赖关系(不是综艺节目以一敌百那种)，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。 作用 广泛应用于异步编程中(替代了传递回调函数) 对象之间松散耦合的编写代码 先从最简单的说起 let corp = {}; // 自定义一个公司对象
阅读全文
摘要：从接下来的一段时间里，Mg要进行阅读源码的工作。再阅读源码前，梳理一下准备工作。 7项重要储备 Flow 基本语法 发布/订阅模式 ES6+ 语法 原型链、闭包 函数柯里化 event loop 1.flow 1.1 什么是flow 没有类型的静态检查是 JavaScript 语言的先天缺失，所有很
阅读全文
摘要：日语形容词江湖有两大门派 日语教育学中称为 一类形容词，二类形容词 日语国语教育中称为 形容词，形容动词 也称为イ形容詞、な形容詞。 咱们先从样子上做区分 形容词（一类形容词） 「高い」「低い」「辛い」「甘い」这样。形容词（一类形容词）词尾是「い」。 形容动词（二类形容词） 「大切」「親切」「綺麗」
阅读全文