LearningRecord
LearningRecord copied to clipboard
Rashomon511
学习资料汇总、阅读记录，持续学习,每天进步一点点.🏫🏫
sourceMap本质上是一种映射关系，打包出来的js文件中的代码可以映射到代码文件的具体位置。例如在打包后有代码错误，这种映射关系会帮助我们直接找到在源代码中的错误 [source map 的原理探究](https://www.cnblogs.com/Wayou/p/understanding_frontend_source_map.html)
一.path.join(path1，path2，path3.......) 作用：将路径片段使用特定的分隔符（window：\）连接起来形成路径，并规范化生成的路径。若任意一个路径片段类型错误，会报 二.path.resolve([from...],to) 作用：把一个路径或路径片段的序列解析为一个绝对路径。相当于执行cd操作 以webpack中webpack.config.js配置路径为例 ```javascript const DIST_DIR = path.resolve(__dirname, '../dist'); // 设置静态访问文件路径 const DIST_DIRs = path.join(__dirname, '/dist'); console.log(__dirname) // ...../React-Whole-barrels/build 即当前文件夹的绝对路径 console.log(DIST_DIR) // ..../React-Whole-barrels/dist 这是相对于当前文件夹的另一个文件的路径 console.log(DIST_DIRs) //...../React-Whole-barrels/build/dist 这是将两个路径连接起来 ```
以下数据结构中，id 代表部门编号，name 是部门名称，parentId 是父部门编号，为 0 代表一级部门，现在要求实现一个 convert 方法，把原始 list 转换成树形结构，parentId 为多少就挂载在该 id 的属性 children 数组下，结构如下 ```javascript // 原始 list 如下 let list =[ {id:1,name:'部门A',parentId:0}, {id:2,name:'部门B',parentId:0}, {id:3,name:'部门C',parentId:1}, {id:4,name:'部门D',parentId:1}, {id:5,name:'部门E',parentId:2}, {id:6,name:'部门F',parentId:3}, {id:7,name:'部门G',parentId:2},...
栈：原始数据类型（Undefined，Null，Boolean，Number、String、symbol） 堆：引用数据类型（object、array、function） 两种类型的区别是：存储位置不同； 原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储； 引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体 Object 是 JavaScript 中所有对象的父对象 数据封装类对象：Object、Array、Boolean、Number 和 String 其他对象：Function、Arguments、Math、Date、RegExp、Error
利用正则表达式 ```javascript (https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|] ```
 由于js是单线程的，这意味着需要有一个队列保存异步执行的代码 JavaScript 主线程在执行时，如果遇到异步的代码，就会将这些代码加入到异步队列中，然后继续执行同步代码栈中的代码 当同步代码栈被清空后，意味着同步代码已经执行完毕，这时就开始执行异步队列中代码。 异步队列中的代码在执行时，会将其的回调函数和相关的函数调用放到同步代码栈中去执行。当同步代码栈被清空，意味着当前的异步任务已经执行完毕，然后从异步队列中取下一个任务执行，循环往复 以上就是一个基本的 JavaScript 并发模型 具体介绍[彻底搞清楚Event Loop](https://github.com/LuoShengMen/StudyNotes/issues/278)
let a = [1,2,3,4,5] a.multiply() console.log(a) // [1, 2, 3, 4, 5, 1, 4, 9, 16, 25] ```javascript Object.prototype.multiply = function(){ let arr = this; a = arr.concat(arr.map(item => item...
### 常用两种方法 - display:none; (不占位隐藏) - visibility:hidden; (占位隐藏) ### 将透明度设置为0 - opacity:0; (需要考虑兼容性,filter:Alpha(opacity=0))(占位) ### 定位 ```javascript qwwww ``` - position:absolute;left:-999%;(移出可视区域，为何不使用正值自行尝试，不占位) - position:fixed;left:-999%;(移出可视区域，为何不使用正值自行尝试，不占位) - position:relative;left:-999%;(移出可视区域，为何不使用正值自行尝试，占位) - .box{background-color:#fff;}.self{position:absolute;z-index:-9;}(移至底层，使用背景遮罩，不占位) - .box{background-color:#fff;}.self{position:fixed;z-index:-9;}(移至底层，使用背景遮罩，不占位) - .box{background-color:#fff;}.self{position:relative;z-index:-9;}(移至底层，使用背景遮罩，占位)...
### XSS是什么 XSS是一种跨站脚本攻击，是属于代码注入的一种，攻击者通过将代码注入网页中，其他用户看到会受到影响(代码内容有请求外部服务器); ### xss攻击分类： - 反射型：攻击者构造一个带有恶意代码的url链接诱导正常用户点击，服务器接收到这个url对应的请求读取出其中的参数然后没有做过滤就拼接到Html页面发送给浏览器，浏览器解析执行 - 存储型： 攻击者将带有恶意代码的内容发送给服务器（比如在论坛上发帖），服务器没有做过滤就将内容存储到数据库中，下次再请求这个页面的时候服务器从数据库中读取出相关的内容拼接到html上，浏览器收到之后解析执行 - dom型：dom型xss主要和前端js有关，是前端js获取到用户的输入没有进行过滤然后拼接到html中 ### 扩展 CSRF是一种跨站请求伪造，冒充用户发起请求，完成一些违背用户请求的行为(删帖，改密码，发邮件，发帖等) ### 防御方法举例: - 使用encodeURIComponent对url中的参数进行编码(反射型xss)，对一些关键字和特殊字符进行过滤(,?,script等)，或对用户输入内容进行URL编码(encodeURIComponent); - Cookie不要存放用户名和密码，对cookie信息进行MD5等算法散列存放，必要时可以将IP和cookie绑定; - 对用户的输入进行过滤(适用于所有类型的xss攻击) - 对用户的输入使用innerText或者textContent进行设置，而不是使用innerHTML或者outerHTML进行设置 - 服务器端设置cookie为httpOnly让前端无法通过js获取到用户的cookie - 关键请求使用验证码，比如转账请求，避免恶意脚本发送这些关键请求
理解柯里化 ：用闭包把参数保存起来，当参数的数量足够执行函数了，就开始执行函数 ```javascript dd(2, 5); // 7 add(2)(5); // 7 ``` 基本实现： ```javascript function add(){ let data = Array.prototype.slice.call(arguments) if (data.length > 1){ return data.reduce(((source,item) => source+item), 0) } else...