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...