随笔分类 - 前端
摘要：Hook 前言 什么是Hook 自从 16.8 版本开始，hooks 的出现使得你可以在不编写 class 的情况下使用状态管理以及其它 React 的特性。 那么在 React Hooks 出现之前，class 类组件和 function 函数组件有什么区别？Hooks 出现之后，函数组件又是如何
阅读全文
摘要：前言 前段时间做了一个页面，做的是个人云盘的业务，操作功能上类似于百度网盘和windows文件管理。这个业务本身没有称得上是亮点的地方，但是当中有很多地方值得总结，无论是技术上还是感悟上。 我的感悟首先在产品上，作为一名前端，要不断地站在用户的角度上去感受它，一定有一些可以做的更友好、更人性化的地方
阅读全文
摘要：前言 从2015年的ES6开始，JavaScript的语言标准每年都在更新，其中尤其以ES6的力度之大，到现在ES10已经发布，这里总结一下新语法。 参考：阮一峰 ECMAScript 6 教程 、ECMAScript 6入门 、1.5万字概括ES6全部特性 声明变量 const 块级作用域，变量被
阅读全文
摘要：前言 为什么要使用构建工具？ 1.转换ES6语法（很多老版本的浏览器不支持新语法） 2.转换JSX 3.CSS前缀补全/预处理器 4.压缩混淆（将代码逻辑尽可能地隐藏起来） 5.图片压缩 6. .... 为什么选择webpack？ 基础概念 默认的配置文件是weback.config.js，在pac
阅读全文
摘要：Jest是Facebook推出的一款单元测试工具。 安装 在package.json中添加脚本： 生成Jest配置文件（生成jest.config.js） 使用 先简单编写一个ts文件 编写测试用例： 执行测试脚本： 使用ts-jest的好处是，能够在测试用例中进行类型检查。
阅读全文
摘要：泛型的概念 指不预先确定的数据类型，具体的类型要在使用的时候才能确定。咋一听，是不是觉得JavaScript本身就是这样？这是由于理解有误。前面说“在使用的时候确定”，而非在程序执行的时候确定。 泛型函数 现在有个需求：一个被定义的函数原本输入字符串输出字符串，现在想让它同时支持输入输出字符串数组，
阅读全文
摘要：什么是TypeScript? TypeScript是微软开发的一门编程语言，它是JavaScript的超集，即它基于JavaScript，拓展了JavaScript的语法，遵循ECMAScript规范（ES6/7/8+）。 TypeScript = Type + Script(标准JS)，它可以编译
阅读全文
摘要：高阶组件 本质 本质是函数，将组件作为接收参数，返回一个新的组件。HOC本身不是React API，是一种基于React组合的特而形成的设计模式。 解决的问题（作用） 一句话概括：功能的复用，减少代码冗余 进一步解释：在实际情况中，多个组件可能会做某些相同的事情，有着相同的功能，存在大量的代码冗余。
阅读全文
摘要：JavaScript异步类型 由宿主环境提供的API：setTimeout、setInterval、setImmediat、监听 new Image 加载状态、监听 script 加载状态、监听 iframe 加载状态、Message、Web Worker EcmaScript： Promise 需
阅读全文
摘要：LESS是什么？ less是一门CSS预处理语言。由于CSS本身并不是程序式语言，不方便维护和扩展，没有变量、函数、作用域等概念。而LESS在CSS的基础语法之上，引入了变量、Mixin混入、运算以及函数等功能，大大简化了CSS的编写，降低了CSS的维护成本。 本质上，LESS包含一套自定义的语法及
阅读全文
摘要：文件下载 传统的文件下载有两种方法： 这两种方法效果一样。但有个很大的问题，如果下载出现异常（连接路径失效、文件不存在、网络问题等），会导致原本的页面被覆盖掉，显示404等错误信息。 大致的优化思路如下： 我们来逐一分析： 如果服务端没有指定文件名，就以此属性规定的名称命名。 如果下载出现异常，该属
阅读全文
摘要：早期Web使用cookie在浏览器端保存数据，但存在以下问题： cookie的大小限制在4KB 浏览器会限制所有站点在计算机上的存储cookie总数 cookie会随着每次HTTP事务一起发送，会浪费一部分带宽 HTML5提供了WebStorage本地存储、IndexedDB本地数据库等，能够存储更
阅读全文
摘要：一、移动端事件问题 1.click事件300ms延迟问题 2007年第一代iphone发布，移动端Safari首创双击缩放功能，原理是click一次后，经过300ms之后检测是否再有一次click，如果有就会缩放，如果没有则是一个click事件。所以cilck操作会有卡顿感觉。 2.dblclick
阅读全文
摘要：CSS CSS是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。 存在方式有三种：元素内联、页面嵌入和外部导入，比较三种方式的优缺点。 语法：style = "key1:value1;key2:value2;" 在标签中使用 style="xx:xxx;"
阅读全文
摘要：原生JS 一、文档、窗口的宽高和位置 // 获取屏幕的宽高 window.screen.height | window.screen.width // 屏幕可用工作区宽高 window.screen.availHeight | window.screen.availWidth // 浏览器窗口可见区
阅读全文
摘要：初识jQuery 什么是jQuery？ jQuery就是JavaScript和Query，是辅助JavaScript开发的库，应用广泛，形成了行业标准。它对DOM操作做了很好的封装，我们可以用jQuery非常方便地来代替DOM操作。 为什么要使用jQuery？ 轻量级，最新版本的大小只有85KB；功
阅读全文
摘要：什么是DOM？ DOM是W3C（万维网联盟）的标准，是Document Object Model（文档对象模型）的缩写，它定义了访问HTML文档（也用于XML，这里不管XML）的标准： “W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
阅读全文
摘要：何谓JavaScript？它与Java有什么关系？ JavaScript与HTML、CSS组合使用应用于前端开发，JavaScript是一门独立的语言，浏览器内置了JS的解释器。它除了和Java名字长得相似，没有半毛线关系。 JavaScript组成 一个完整的JavaScript实现是由以下几个部
阅读全文
摘要：HTML HTML叫做超文本标记语言，是一种制作万维网页面标准语言。相当于定义一套规则，大家都来遵守它，这样浏览器就可以去解释它。 浏览器负责将标签翻译成用户看得懂的格式，呈现给用户。 作为开发者需要学习的： 1.学习HTML规则 2.从数据库获取数据，然后替换到HTML文件的指定位置（web框架）
阅读全文
浙公网安备 33010602011771号