Ryder
Ryder
## 观察者模式 这是一个非常有趣的模式，它允许你通过对某个输入作出反应来响应，而不是主动地检查是否提供了输入。换句话说，使用此模式，可以指定你正在等待的输入类型，并被动地等待，直到提供该输入才执行代码。 在这里，观察者是一个对象，它们知道想要接收的输入类型和要响应的操作，这些对象的作用是“观察”另一个对象并等待它与它们通信。 另一方面，可观察对象将让观察者知道何时有新的输入可用，以便他们可以对它做出反应(如果适用的话)。如果这听起来很熟悉，那是因为Node.js中处理事件的任何东西都是这种模式。 下面的代码是一段HTTP Server的实现 ```js const http = require('http'); const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Your own server here'); }) server.on('error',...
# Node.js && JavaScript 面试常用的设计模式 设计模式是任何软件开发人员日常工作的一部分，不管他们是否意识到这一点。 在本文中，我们将研究如何识别这些设计模式，以及如何在自己的项目中开始使用它们。 ## 什么是设计模式 简单地说，设计模式就是一种可以让你以某种方式更好的组织代码的方法，从而获得一些好处。比如更快的开发速度、代码的可重用性等等。 所有模式都很容易采用OOP范式。尽管考虑到JavaScript的灵活性，你也可以在非OOP项目中实现这些概念。事实上，每年都会有新的设计模式被创建，有太多的设计模式无法在一篇文章中涵盖，本文将重点介绍和实现几种常见的设计模式。 ## 立即执行函数表达式（IIFE） 我要展示的第一个是允许同时定义和调用函数的模式。由于JavaScript作用域的工作方式，使用IIFE可以很好地模拟类中的私有属性之类的东西。事实上，这个特定的模式有时被用作其他更复杂需求的一部分。我们待会再看。 ### IIFE常见例子 在我们深入研究用例和它背后的机制之前，让我快速地看一下它到底是什么样子的: ```js (function() { const x = 20 const y = 20 const answer...
在本文中，我将介绍常用的安全头信息设置，并对每个响应头设置给出一个示例。 ## Content-Security-Policy 内容安全策略（CSP）常用来通过指定允许加载哪些资源来防止跨站点脚本攻击。在接下来所介绍的所有安全头信息中，CSP 可能是创建和维护花费时间最多的而且也是最容易出问题的。在配置你的网站 CSP 过程中，要小心彻底地测试它，因为阻止某些资源有可能会破坏你的网站的功能。 ### 功能 CSP 的主要目标是减少和报告 XSS 攻击， XSS 攻击利用了浏览器对于从服务器所获取的内容的信任。使得恶意脚本有可能在用户的浏览器中执行，因为浏览器信任其内容来源，即使有时候这些脚本并非来自该站点的服务器当中。 CSP 通过指定允许浏览器加载和执行那些资源，使服务器管理者有能力减少或消除 XSS 攻击的可能性。 一个 CSP 兼容的浏览器将会仅执行从白名单域获取得到的脚本文件，忽略所有其他的脚本（包括内联脚本）。 ### 示例 一个最佳的 CSP 可能是下面这样(注释按照配置值的顺序)，在站点包含的每一部分资源请求相关都加入域名限制。 ```yaml # 所有的内容(比如:...
# 介绍下深度优先遍历和广度优先遍历，如何实现？ ## 深度优先遍历 ### 定义 以二叉树为例，从根节点 V 出发，首先访问根节点，然后依次从它的各个未被访问的邻接节点出发深度优先搜索，直至二叉树中所有和 V 相通的节点都被访问到。 ### 实现 ```html ``` 假设有如上 dom 结构,深度优先遍历出 root 下面的所有子孙节点。 ```js // 递归实现 function dfs(node,nodeList = []) { if (node)...
## Introduction 面试过程通常从最初的电话面试开始，然后是现场面试，检查编程技能和文化契合度。几乎毫无例外，最终的决定因素是还是编码能力。通常上，不仅仅要求能得到正确的答案，更重要的是要有清晰的思维过程。写代码中就像在生活中一样，正确的答案并不总是清晰的，但是好的推理通常就足够了。有效推理的能力预示着学习、适应和进化的潜力。好的工程师一直是在成长的，好的公司总是在创新的。 算法挑战是有用的，因为解决它们的方法不止一种。这为决策的制定和决策的计算提供了可能性。在解决算法问题时，我们应该挑战自己从多个角度来看待问题的定义，然后权衡各种方法的优缺点。通过足够的尝试后，我们甚至可能看到一个普遍的真理:不存在“完美”的解决方案。 要真正掌握算法，就必须了解它们与数据结构的关系。数据结构和算法就像阴阳、水杯和水一样密不可分。没有杯子，水就不能被容纳。没有数据结构，我们就没有对象来应用逻辑。没有水，杯子是空的，没有营养。没有算法，对象就不能被转换或“消费”。 要了解和分析JavaScript中的数据结构，请看[JavaScript中的数据结构](https://github.com/lvwxx/blog/issues/1) ## Primer 在**JavaScript**中，算法只是一个函数，它将某个确定的数据结构输入转换为某个确定的数据结构输出。函数内部的逻辑决定了怎么转换。首先，输入和输出应该清楚地提前定义。这需要我们充分理解手上的问题，因为对问题的全面分析可以很自然地提出解决方案，而不需要编写任何代码。 一旦完全理解了问题，就可以开始对解决方案进行思考，需要那些变量？ 有几种循环？ 有那些JavaScript内置方法可以提供帮助？需要考虑那些边缘情况？复杂或者重复的逻辑会导致代码十分的难以阅读和理解，可以考虑能否提出抽象成多个函数？一个算法通常上需要可扩展的。随着输入**size**的增加，函数将如何执行? 是否应该有某种缓存机制吗? 通常上，需要牺牲内存优化(空间)来换取性能提升(时间)。 ### 为了使问题更加具体，画图表！ 当解决方案的具体结构开始出现时，伪代码就可以开始了。为了给面试官留下深刻印象，请提前寻找重构和重用代码的机会。有时，行为相似的函数可以组合成一个更通用的函数，该函数接受一个额外的参数。其他时候，函数柯里的效果更好。保证函数功能的纯粹方便测试和维护也是非常重要的。换句话说，在做出解决问题的决策时需要考虑到架构和设计模式。 ### Big O（复杂度） 为了计算出算法运行时的复杂性，我们需要将算法的输入大小外推到无穷大，从而近似得出算法的复杂度。最优算法有一个恒定的时间复杂度和空间复杂度。这意味着它不关心输入的数量增长多少，其次是对数时间复杂度或空间复杂度，然后是线性、二次和指数。最糟糕的是阶乘时间复杂度或空间复杂度。算法复杂度可用以下符号表示: 1. Constabt: O(1) 2. Logarithmic: O(log n) 3. Linear:...
# JavaScript中的数据结构 ## Intruduction 随着业务逻辑越来越多的从后端转向前端,专业的前端工程知识变的更加关键。作为前端的工程师，我们依赖像**React**这样的库来开发view层,同时又依赖**Redux**这样的库来管理数据状态，两者组合起来作为响应式编程，当数据动态变化时，UI层可以实时的更新。渐渐地，后端可以专注于api的开发，仅仅提供数据的检索和更新。这样实际上，后端只是将数据库转发到前端，前端工程师处理所有的逻辑，微服务和graphql的日益增长证明了这个趋势。 如今，前端工程师不仅要精通html和css，也要精通JavaScript。随着客户端的数据存储成为服务器端数据库的“副本”，熟悉惯用数据结构就变得至关重要。事实上，工程师的经验水平可以从他/她区分何时以及为什么使用特定数据结构的能力中推断出来。 ``` Bad programmers worry about the code. Good programmers worry about data structures and their relationships. — Linus Torvalds, Creator of Linux and Git...
类型转换是将值从一种类型转换为另一种类型的过程（比如字符串转数字，对象转布尔值等）。任何类型不论是原始类型还是对象类型都可以进行类型转换，JavaScript 的原始类型有：number, string, boolean, null, undefined, Symbol。 本文将通过 17 道题目来深入的了解 JS 中的类型转换，通过阅读本文之后，你将能自信的回答出下面题目的答案，并且能够理解背后的原理。在文章的最后，我讲写出答案并解释。在看答案之前，你可以把答案写下来，最后再对照一下，便于找出理解有误的地方。 ```js true + false 12 / "6" "number" + 15 + 3 15 + 3 + "number" [1]...
已知数组 ```js var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10] ``` ## 解法一 ```js...