前端日记

面试官：如何实现上拉加载，下拉刷新？ 一、前言下拉刷新和上拉加载这两种交互方式通常出现在移动端中 本质上等同于PC网页中的分页，只是交互形式不同 开源社区也有很多优秀的解决方案，如iscroll、better-scroll、pulltorefresh.js库等等 这些第三方库使用起来非常便捷 我们通过原生的方式实现一次上拉加载，下拉刷新，有助于对第三方库有更好的理解与使用 二、实现原理上拉加载及下拉刷新都依赖于用户交互 最重要的是要理解在什么场景，什么时机下触发交互动作 上拉加载首先可以看一张图 上拉加载的本质是页面触底，或者快要触底时的动作 判断页面触底我们需要先了解一下下面几个属性 scrollTop：滚动视窗的高度距离window顶部的距离，它会随着往上滚动而不断增加，初始值是0，它是一个变化的值 clientHeight:它是一个定值，表示屏幕可视区域的高度； scrollHeight：页面不能滚动时也是存在的,此时scrollHeight等于clientHeight。scrollHeight表示body所有元素的总长度(包括body元素自身的padding) ...

面试官：说说你对正则表达式的理解？应用场景？ 一、是什么正则表达式是一种用来匹配字符串的强有力的武器 它的设计思想是用一种描述性的语言定义一个规则，凡是符合规则的字符串，我们就认为它“匹配”了，否则，该字符串就是不合法的 在 JavaScript中，正则表达式也是对象，构建正则表达式有两种方式： 字面量创建，其由包含在斜杠之间的模式组成 1const re = /\d+/g; 调用RegExp对象的构造函数 1234const re = new RegExp("\\d+","g");const rul = "\\d+"const re1 = new RegExp(rul,"g"); 使用构建函数创建，第一个参数可以是一个变量，遇到特殊字符\需要使用\\进行转义 二、匹配规则常见的校验规则如下： 规则 描述 \ 转义 ^ 匹配输入的开始 $ 匹配输入的结束 * 匹配前一个表达式 0 次或多次 + 匹配前面一个表达式 1 次或者多次。等价于 {1,} ...

面试官：说说你对作用域链的理解 一、作用域作用域，即变量（变量作用域又称上下文）和函数生效（能被访问）的区域或集合 换句话说，作用域决定了代码区块中变量和其他资源的可见性 举个例子 12345function myFunction() { let inVariable = "函数内部变量";}myFunction();//要先执行这个函数，否则根本不知道里面是啥console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined 上述例子中，函数myFunction内部创建一个inVariable变量，当我们在全局访问这个变量的时候，系统会报错 这就说明我们在全局是无法获取到（闭包除外）函数内部的变量 我们一般将作用域分成： 全局作用域 函数作用域 块级作用域 全局作用域任何不在函数中或是大括号中声明的变量，都是在全局作用域下，全局作用域下声明的变量可以在程序的任意位置访问 1234567// 全局变量var greeting =  ...

面试官：web常见的攻击方式有哪些？如何防御？ 一、是什么Web攻击（WebAttack）是针对用户上网行为或网站服务器等设备进行攻击的行为 如植入恶意代码，修改网站权限，获取网站用户隐私信息等等 Web应用程序的安全性是任何基于Web业务的重要组成部分 确保Web应用程序安全十分重要，即使是代码中很小的 bug 也有可能导致隐私信息被泄露 站点安全就是为保护站点不受未授权的访问、使用、修改和破坏而采取的行为或实践 我们常见的Web攻击方式有 XSS (Cross Site Scripting) 跨站脚本攻击 CSRF（Cross-site request forgery）跨站请求伪造 SQL注入攻击 二、XSSXSS，跨站脚本攻击，允许攻击者将恶意代码植入到提供给其它用户使用的页面中 XSS涉及到三方，即攻击者、客户端与Web应用 XSS的攻击目标是为了盗取存储在客户端的cookie或者其他网站用于识别客户端身份的敏感信息。一旦获取到合法用户的信息后，攻击者甚至可以假冒合法用户与网站进行交互 举个例子： 一个搜索页面，根据url参数决定关键词的内容 12345<input ...

面试官：什么是单点登录？如何实现？ 一、是什么单点登录（Single Sign On），简称为 SSO，是目前比较流行的企业业务整合的解决方案之一 SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统 SSO 一般都需要一个独立的认证中心（passport），子系统的登录均得通过passport，子系统本身将不参与登录操作 当一个系统成功登录以后，passport将会颁发一个令牌给各个子系统，子系统可以拿着令牌会获取各自的受保护资源，为了减少频繁认证，各个子系统在被passport授权以后，会建立一个局部会话，在一定时间内可以无需再次向passport发起认证 上图有四个系统，分别是Application1、Application2、Application3、和SSO，当Application1、Application2、Application3需要登录时，将跳到SSO系统，SSO系统完成登录，其他的应用系统也就随之登录了 举个例子淘宝、天猫都属于阿里旗下，当用户登录淘宝后，再打开天猫，系统便自动帮用户登录了天猫，这种现象就属于单点登录 二、如何实现 ...

面试官：JavaScript字符串的常用方法有哪些？ 一、操作方法我们也可将字符串常用的操作方法归纳为增、删、改、查，需要知道字符串的特点是一旦创建了，就不可变 增这里增的意思并不是说直接增添内容，而是创建字符串的一个副本，再进行操作 除了常用+以及${}进行字符串拼接之外，还可通过concat concat用于将一个或多个字符串拼接成一个新字符串 1234let stringValue = "hello ";let result = stringValue.concat("world");console.log(result); // "hello world"console.log(stringValue); // "hello" 删这里的删的意思并不是说删除原字符串的内容，而是创建字符串的一个副本，再进行操作 常见的有： slice() substr() substring() 这三个方法都返回调用它们的字符串的一个子字符串，而且都接收一或两个参数。 1234567le ...

面试官：举例说明你对尾递归的理解，有哪些应用场景 一、递归递归（英语：Recursion） 在数学与计算机科学中，是指在函数的定义中使用函数自身的方法 在函数内部，可以调用其他函数。如果一个函数在内部调用自身本身，这个函数就是递归函数 其核心思想是把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解 一般来说，递归需要有边界条件、递归前进阶段和递归返回阶段。当边界条件不满足时，递归前进；当边界条件满足时，递归返回 下面实现一个函数 pow(x, n)，它可以计算 x 的 n 次方 使用迭代的方式，如下： 123456789function pow(x, n) { let result = 1; // 再循环中，用 x 乘以 result n 次 for (let i = 0; i < n; i++) { result *= x; } return result;} 使用递归的方式，如下： 1234567function pow(x, n) { if (n == 1) { ret ...

面试官：谈谈this对象的理解 一、定义函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别 在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定） this 关键字是函数运行时自动生成的一个内部对象，只能在函数内部使用，总指向调用它的对象 举个例子： 123456789101112131415161718192021222324function baz() { // 当前调用栈是：baz // 因此，当前调用位置是全局作用域 console.log( "baz" ); bar(); // <-- bar的调用位置}function bar() { // 当前调用栈是：baz --> bar // 因此，当前调用位置在baz中 console.log( "bar" ); foo(); // <-- foo的调用位置}function foo() &# ...

面试官：谈谈 JavaScript 中的类型转换机制 一、概述前面我们讲到，JS 中有六种简单数据类型：undefined、null、boolean、string、number、symbol，以及引用类型：object 但是我们在声明的时候只有一种数据类型，只有到运行期间才会确定当前类型 1let x = y ? 1 : a; 上面代码中，x的值在编译阶段是无法获取的，只有等到程序运行时才能知道 虽然变量的数据类型是不确定的，但是各种运算符对数据类型是有要求的，如果运算子的类型与预期不符合，就会触发类型转换机制 常见的类型转换有： 强制转换（显示转换） 自动转换（隐式转换） 二、显示转换显示转换，即我们很清楚可以看到这里发生了类型的转变，常见的方法有： Number() parseInt() String() Boolean() Number()将任意类型的值转化为数值 先给出类型转换规则： 实践一下： 12345678910111213141516171819202122232425Number(324) // 324// 字符串：如果可以被解析为数值，则转换为相应的 ...

面试官：typeof 与 instanceof 区别 一、typeoftypeof 操作符返回一个字符串，表示未经计算的操作数的类型 使用方法如下： 12typeof operandtypeof(operand) operand表示对象或原始值的表达式，其类型将被返回 举个例子 12345678910typeof 1 // 'number'typeof '1' // 'string'typeof undefined // 'undefined'typeof true // 'boolean'typeof Symbol() // 'symbol'typeof null // 'object'typeof [] // 'object'typeof {} // 'object'typeof console // 'object'typeof console.log // ...