欢迎来到我的小站

目前准备隔三差五做个leetcode算法题保持一下算法思维，作为个人能力全方位提升的一部分 最长公共前缀12输入：strs = ["flower","flow","flight"]输出："fl" 要求： 1 <= strs.length <= 200 0 <= strs[i].length <= 200 strs[i] 仅由小写英文字母组成 逐位比较，比较全部通过时re增加当前字符，不通过时直接返回re。 123456789101112let longestCommonPrefix = function(strs) { let re = ''; if (!strs.length) return re; for (let j=0;j<strs[0].length;j++){//第j位 for (let i=1;i<strs.length;i++){//第i个 ...

js 命名规范 ECMAScript 规范中标识符采用驼峰大小写格式，驼峰命名法由小(大)写字母开始，后续每个单词首字母都大写。根据首字母是否大写，分为两种方式： Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfo Camel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo标识符，则包括变量、函数名、类名、属性名和函数或类的参数，每个命名方法又略有不同，下面详细解释一下： 项目命名全部采用小写方式， 以下划线分隔。 示例：my_project_name 目录命名参照项目命名规则；有复数结构时，要采用复数命名法。 示例：scripts, styles, images, data_models JS 文件命名变量 ：必须采用小驼峰式命名法。命名规范 ：前缀应当是名词。(函数的名字前缀为动词，以此区分变量和函数)命名建议 ：尽量在变量名字中体现所属类型，如:length、count 等表示数字类型；而包含 name、title 表示为字符串类型。 123 ...

JS 遍历方法 javascript 遍历的常用的遍历方法是 for 循环和 for-in，ES5 的时候加上了 forEach 方法（IE9 以下不支持） 123456789101112131415/****js原生遍历****///for循环遍历数组for ( var i=0;i<arrTmp.length;i++){ console.log(i+ ": " +arrTmp[i])}//for-in遍历对象属性,i指代属性名for ( var i in objTmp){ console.log(i+ ": " +objTmp[i])}//forEach遍历数组，三个参数依次是数组元素、索引、数组本身arrTmp.forEach( function (value,index,array){ console.log(value+ "," +index+ "," +array[index])}) for-i ...

JS遍历方法 JS数组遍历，基本就是for,for in,forEach,forof,map等等一些方法，以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 1.普通for循环12345for(j = 0; j < arr.length; j++) { }// 最简单的一种，也是使用频率最高的一种，虽然性能不弱，但仍有优化空间 2.优化版for循环12345for(j = 0,len=arr.length; j < len; j++) { }// 使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。 这种方法基本上是所有循环遍历方法中性能最高的一种 弱化版for循环1234for(j = 0; arr[j]!=null; j++) { }// 这种方法其实严格上也属于for循环，只不过是没有使用length判断，而使用变量本身判断 实际上，这种方法的性能要远远小于普通for循环 forEach循环1234arr.forEach(function(e)&# ...

添加样式和颜色如果想要给图形上色，有两个重要的属性可以做到。 fillStyle = color 设置图形的填充颜色 strokeStyle = color 设置图形轮廓的颜色 备注： color 可以是表示 css 颜色值的字符串、渐变对象或者图案对象。 默认情况下，线条和填充颜色都是黑色。 一旦您设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或 strokeStyle 的值。 fillStyle 12345678910111213function draw(){ var canvas = document.getElementById('tutorial'); if (!canvas.getContext) return; var ctx = canvas.getContext("2d"); for (var i = 0; i < 6; i++){ for (var j ...

绘制形状栅格 (grid) 和坐标空间 ​如下图所示，canvas 元素默认被网格所覆盖。通常来说网格中的一个单元相当于 canvas 元素中的一像素。栅格的起点为左上角，坐标为 (0,0) 。所有元素的位置都相对于原点来定位。所以图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素，坐标为 (x,y)。 绘制矩形 \​ 只支持一种原生的图形绘制：矩形。所有其他图形都至少需要生成一种路径 (path)。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。 canvast 提供了三种方法绘制矩形 ： fillRect(x, y, width, height)：绘制一个填充的矩形。 strokeRect(x, y, width, height)：绘制一个矩形的边框。 clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。 说明 ：这 3 个方法具有相同的参数。 x, y ：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)width, height ：指的是绘制的矩形的宽和高。 12 ...

Canvas 简介 <canvas> 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 ​ 它最初由苹果内部使用自己 MacOS X WebKit 推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来，有人通过 Gecko 内核的浏览器 (尤其是 Mozilla 和 Firefox)，Opera 和 Chrome 和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。​Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域，类似于其他通用的二维 API，通过一套完整的绘图函数来动态生成图形。 ​Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持 <canvas>, Internet Explorer 从 IE9 开始 <canvas> 。Chrome 和 Opera 9+ 也支持 &l ...

service worker 是什么一句话概括 一个服务器与浏览器之间的中间人角色，如果网站中注册了 service worker 那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器。从而大大提高浏览体验。 一些细碎的描述 基于 web worker（一个独立于 JavaScript 主线程的独立线程，在里面执行需要消耗大量资源的操作不会堵塞主线程） 在 web worker 的基础上增加了离线缓存的能力 本质上充当 Web 应用程序（服务器）与浏览器之间的代理服务器（可以拦截全站的请求，并作出相应的动作->由开发者指定的动作） 创建有效的离线体验（将一些不常更新的内容缓存在浏览器，提高访问体验） 由事件驱动的,具有生命周期 可以访问 cache 和 indexDB 支持推送 并且可以让开发者自己控制管理缓存的内容以及版本 如何使用 注册 Service worker 在你的 index.html 加入以下内容 1234567891011121314151617/* ...

Javascript 中 ?. 运算符和 ?? 运算符链判断运算符（?. 运算符）实际开发中，如果要读取对象内部的某个属性，往往需要先判断一下该对象是否存在。 比如，要读取 user.firstName，安全的写法应该是下面这样的： 1const firstName = (user && user.firstName) || 'default' 这样的层层判断非常麻烦，因此 ES2020 引入了“链判断运算符”（optional chaining operator）?. 来简化上面的写法 1const firstName = user?.firstName || 'default' 上面代码使用了 ?. 运算符，直接在链式调用的时候判断，左侧的对象是否为 null 或 undefined。如果是的，就不再往下运算，而是返回 undefined。 使用这个运算符，有几个注意点： 短路机制a?.[++x]// 等同于a == null ? undefined : a[++x]上面代码中，如果 a 是 undefined 或 nu ...

项目优化 移除生产环境的控制台打印。方案很多，esling+pre-commit、使用插件自动去除，插件包括babel-plugin-transform-remove-console、uglifyjs-webpack-plugin、terser-webpack-plugin。最后选择了terser-webpack-plugin，脚手架vue-cli用这个插件来开启缓存和多线程打包，无需安装额外的插件，仅需在configureWebpack中设置terser插件的drop_console为true即可。最好还是养成良好的代码习惯，在开发基本完- 成后去掉无用的console，vscode中的turbo console就蛮好的。 第三方库的按需加载。echarts，官方文档里是使用配置文件指定使用的模块，另一种使用babel-plugin-equire实现按需加载。element-ui使用babel-plugin-component实现按需引入。 前后端数据交换方面，推动项目组使用蓝湖、接口文档，与后端同学协商，规范后台数据返回。 雅虎军规提到的，避免css表达式、滤镜，较少DOM操作，优 ...