FrankKai

### 什么是暴力遍历？ - 初识暴力遍历 - 一个最简单的暴力遍历及算法图 #### 初识暴力遍历 唯心主义有句话叫存在即合理，对于场景1和2，用暴力遍历的方式无可厚非，因为将复杂业务场景抽象成代码已经是一件非常烧脑和耗时的工作了，不仅要考虑自身技术栈的代码实现，还要考虑与服务端联调接口消耗的时间。 上面这种情况下，代码稳定不出bug，代码可读性和可维护性较好，已经属实不易了。 但是对于场景3**算法和数据结构薄弱，对自身代码质量认识不足，不求更优解只求不出bug的代码，直到出现性能问题**，这种情况属实要好好思考一下了。在大脑中储备了足够多的算法知识后，产出的代码性能或多或少要比只会暴力遍历的同学的代码更加优雅，面对棘手的性能问题也会更加从容。 逻辑直观清晰，开发效率高属于暴力解法的优点，时间和空间复杂度高属于它的缺点。实际开发中，需要根据实际情况去选择合适的实现。 #### 一个最简单的暴力遍历及算法图 ```js const arr = [9,8,1,4,2,5,6,7,3] for(let i = 0; i

### 前端开发中的暴力遍历场景 - 数组类：forEach、map、reduce - 对象类：Object.entries(), of - DOM类：querySelectorAll - Vue渲染同一个类型的节点：v-for #### 数组类：forEach、map、reduce ```js const arr = [9,8,1,4,2,5,6,7,3] for(let i = 0; i{ console.log(num); // 依次打印每一项 }) // 9 8...

### leetcode 暴力遍历 解法题目 几乎所有不用栈、双指针、二分、递归等解法的题目，直接for或者for for循环的解法，都是暴利解法。 通常来说，暴利遍历解法的时间复杂度为O(n^x)，x通常为1，2，在[时间复杂度评估中处于糟糕](https://github.com/FrankKai/FrankKai.github.io/issues/211)。 - 1.两数之和（easy） - 136.只出现一次的数字（easy） - 167.两数之和 II - 输入有序数组（easy） - 389.找不同（easy） - 1431.拥有最多糖果的孩子（easy） - 11.盛最多水的容器（medium） - 739.每日温度（medium） #### 1.两数之和（easy） ```js var twoSum =...

- 跨域绘制脏canvas问题 DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.Tainted canvases may not be exported. ``` canvas.toDataURL('image/jpeg'); ``` 绘制异域图片到canvas画布导致矩阵变脏，从而转化base64格式失败，是一个canvas跨域问题。 ``` export class CanvasImage { constructor(url,...

### canvas裁剪图片 思路：根据mousedown起点，mouseup终点计算偏移，重新绘制一次canvas。 ```vue export default { name: 'index', data() { return { dWidth: 260, dHeight: '', downY: 0, upY: 0, offset: 0, }; }, mounted() { const canvas =...

### 如何使两次绘制之间的连续起来？ 思路：通过记录上一次的offsetY值，上一次的offset第一次是mousedown的offsetY值，之后是mousemove的offsetY值，持续重绘canvas，达到连续效果。 ```vue export default { name: 'index', data() { return { dWidth: 260, dHeight: '', downY: 0, offset: 0, }; }, mounted() { const canvas = document.getElementById('canvas'); const...

### 如何让两次绘制canvas之间有过渡效果？ 思路：根据mousemove的offsetY与mousedown的offsetY做比较，给其一个固定的偏移量（我们这里是4），不断重新绘制canvas，达到过渡效果。 ```vue export default { name: 'index', data() { return { dWidth: 260, dHeight: '', downY: 0, moveY: 0, offset: 0, }; }, mounted() { const canvas =...

### macOS与windows上的`canvas.toDataURL()`不同 场景：合成图片后，通过canvas.toDataURL()将合成canvas转化为base64格式，然后通过七牛SDK上传七牛。 影响：windows失真严重。通过macOS与windows系统上传的图片清晰度不同，假设windows为255KB，macOS为789KB，清晰度macOS约为windows的3倍。 原因：`canvas.toDataURL()`的生成结果不同，windows 255KB的为347534，macOS 789KB的为1088150。 根本原因：**屏幕分辨率不同，无解。**

### 如何解决canvas内存泄漏问题 最近遇到一个canvas内存泄漏问题，原因是没有将释放canvas的2D上下文内存导致的。 #### 内存泄漏 ```js import React, { useRef } from 'react' const canvasComponent = () => { const canvasRef = useRef(null) const canvasContext = useRef(null) useEffect(()=>{ canvasContext.current =...

>将 h作为createElement的别名是Vue生态系统中的一个通用惯例，实际也是JSX所要求的，如果在作用域中h失去作用，在应用中会出发报错。 1.那么vue中的createElement到底是个什么？[参考](https://cn.vuejs.org/v2/guide/render-function.html#createElement-%E5%8F%82%E6%95%B0) 2.和Document.createElement()是什么关系？ 3.和React.createElement()之间有何异同呢？ ```js // @returns {VNode} createElement( // {String | Object | Function} // 一个 HTML 标签字符串，组件选项对象，或者一个返回值 // 类型为 String/Object 的函数，必要参数 'div', // {Object} // 一个包含模板相关属性的数据对象 //...