- 博客(64)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 css的30个项目常用的技巧，太有用了
1、多行文本溢出显示省略号p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }2.中英文自动换行word-break:break-all;只对英文起作用，以字母作为换行依据word-wrap:break-word; 只对英文起作用，以单词作为换行依据white-space:pre-wrap; 只对中文起作用，强制换行w
2021-07-28 17:40:38
202
原创 JavaScript数据结构和算法
前言在过去的几年中，得益于Node.js的兴起，JavaScript越来越广泛地用于服务器端编程。鉴于JavaScript语言已经走出了浏览器，程序员发现他们需要更多传统语言（比如C++和Java）提供的工具。这些工具包括传统的数据结构（如链表，栈，队列，图等），也包括传统的排序和查找算法。本文主要是总结什么情况下使用何种数据结构较好，并没有细讲里面的原理和实现方式，仅仅提供给阅读过《数据结构和算法》的同学作为总结和参考笔记，如果未细究过数据结构和算法的同学，本文也可以作为一个方向，希望能引导你去深究数
2021-03-15 11:52:44
158
原创 十六进制颜色透明度alpha值对照表
100% — FF99% — FC98% — FA97% — F796% — F595% — F294% — F093% — ED92% — EB91% — E890% — E689% — E388% — E087% — DE86% — DB85% — D984% — D683% — D482% — D181% — CF80% — CC79% — C978% — C777% — C476% — C275% — BF74% — BD73% — BA72%
2022-05-18 09:18:04
1636
原创 主流webGis框架优劣比较
选择的方式主要是根据业务需求，主要分为: 传统GIS业务(Leaflet)，三维业务(Cesium)，互联网展示型(MapboxGL)，老IE浏览器，老业务维护(OpenLayers)。1、Leafletleaflet是常规的的最适合常规gis开发的地图，因此核心功能就是“传统GIS”功能.优点主流投影坐标支持：几乎所有的主流投影坐标系都可以支持;矢量表达：矢量专题图，矢量空间分析，矢量瓦片，矢量可视化等矢量表达;全样式表达：可结合主流的互联网可视化技术，如D3,Echarts,Mapv，几乎主
2022-01-06 15:13:31
1745
原创 web前端工程师编码规范
命名规范语义化：包括文件名，变量名，方法名，参数名、css选择器、path路径名，语义时应根据业务优先考虑通用的、熟知的、简洁的英文。如登录模块通常用login、logout、userName、phone、password、register、inviteCode等命名权限模块通常用user、role、function、menu等命名获取列表数据，常用getXXXList、getXXXs、getXXXData等命名获取详情数据：常用getXXX、getXXXInfo、getXXXDetail等
2021-09-24 10:51:57
133
原创 NodeJs三大框架之koa.js、egg.js、express.js
Express.js 是 Node.JS 诞生之初，最早出现的一款框架，现在仍然很流行，作者是TJ。 随着ECMAScript的发展，推出了generator yield语法，JS向同步方式写异步代码迈出了一步，作为回应，TJ大神推出了Koa.js。 Koa.js是一款微型Web框架，写一个hello world很简单，但web应用离不开session，视图模板，路由，文件上传，日志管理。这些 Koa 都不提供，需要自行去官方的Middleware寻找。然而，100个人可能找出100种搭配。 E...
2021-08-08 12:39:46
4068
原创 Js的垃圾回收机制
标记清除js中最常见的垃圾回收方式是标记清除标记清除的概念也好理解，从根部出发看是否能达到某个对象，如果能达到则认定这个对象还被需要，如果无法达到，则释放它，这个过程大致分为三步垃圾回收器创建roots列表,roots通常是代码中保留引用的全局变量，在js中，我们一般认定全局对象window作为root，也就是所谓的根部 从根部出发，检查所有的roots，所有的childs也会被递归检查，能从root到达的都会被标记为active 未被标记为active的数据被认定为不再需要，垃圾回收器开始
2021-07-30 16:13:43
143
原创 js闭包变量回收问题
变量回收原则：1.全局变量不会被回收2.局部变量会被回收，也就是函数一旦运行完以后，函数内部的东西就会被销毁3.只要被另外一个作用域所引用就不会被回收两个实例：一function a(){ var b= 10; return function(){ b++; console.log(b); }}a()(); //11a()(); //11分析：在函数a中返回了一个匿名函数，在这个匿名函数中我们num++了一下，然后在函数外面执行了这个匿名函
2021-07-30 15:38:00
1179
1
原创 JS二分法查询元素所在位置
function getIndex(arr,num){ var len = arr.length, st = 0, end = len-1 while(st<=end){ var mid = Math.floor((st+end)/2) if(num==arr[mid]){ return mid }else if(num>arr[mid]){ st = mid+1 }...
2021-07-29 13:44:20
244
原创 HTTP 请求方法，响应头信息，状态码
HTTP 请求方法根据 HTTP 标准，HTTP 请求可以使用多种请求方法。HTTP1.0 定义了三种请求方法： GET, POST 和 HEAD方法。HTTP1.1 新增了六种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法。# 方法 描述 1 GET 请求指定的页面信息，并返回实体主体。 2 HEAD 类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头 3 POST
2021-07-29 13:16:53
515
原创 web前端18个需要重点掌握的地方，大厂面试必看
1.js事件循环(同步=>异步(微运动=>宏运动))2.JS事件委托（事件冒泡，事件捕获）3.js闭包4.js作用域(var声明提交，const, let块级作用域，函数声明提升)5.原型和原型链(prototype和__proto__)6.this指向(指向调用对象的上下文环境，如果找不到，就指向window，严格模式是undefined)7.http和https的区别（证书机制，对称加密，非对称加密）8.浏览器渲染(三次握手，四次挥手，DNS..
2021-07-29 13:00:27
125
原创 MapboxDraw API（建议用谷歌浏览器翻译为中文）
API 参考使用绘图```js // 创建一个 Mapbox GL JS 地图var map = new Map ( mapOptions ) ; // 创建一个 Draw 控件var draw = new MapboxDraw ( drawOptions ) ; // 将 Draw 控件添加到您的地图map 。addControl （绘制）；``只画出Mapbox GL JS地图加载之后的作品，所以你必须只绘制互动后地图的’负荷’事件：```js地图。on(‘load’,function(){
2021-06-04 11:25:16
1763
原创 小程序WebSocket 简单实例
<button bindtap='startConnect'>创建连接</button><button bindtap='sendOne'>发送内容</button><button bindtap='closeOne'>关闭连接</button>//创建连接startConnect: function () { //本地测试使用 ws协议 ,正式上线使用 wss 协议 var url = 'ws://localho.
2021-01-11 16:44:21
247
原创 https协议的SSL证书的作用
SSL证书概述1.是数字证书的一种 也称为服务器证书。2.遵循ssl协议，在验证服务器身份后颁发，具有服务器身份验证和数据传输加密功能。3.在客户端浏览器和Web服务器之间建立一条SSL安全通道，主要用来提供对用户和服务器的认证，对 传送数据进行加密隐藏，以及确保数据的完整性。 4. 数字签名（ssl证书）主要用于安全发送电子邮件，访问安全站点，网上订购，网上办公，网上缴 费，等网上电子交易活动。 5.未来电子商务的发展提供可靠的安全保障。-----优点。 6.证...
2020-11-06 15:32:52
3945
原创 reflow(回流)和repaint(重绘)，减少回流有哪些方法？
简要：整个在浏览器的渲染过程中（页面初始化，用户行为改变界面样式，动画改变界面样式等）reflow(回流)和repaint(重绘) 会大大影响web性能，尤其是手机页面。因此我们在页面设计的时候要尽量减少reflow和repaint。什么是reflow和repaint（原文链接：http://www.cnblogs.com/Peng2014/p/4687218.html）reflow：例如某个子元素样式发生改变，直接影响到了其父元素以及往上追溯很多祖先元素（包括兄弟元素），这个时候浏览器要重新去渲染
2020-11-06 13:02:49
630
原创 长列表性能优化
需求场景1.长列表，大约超过1000行数据2.每一行至少8列，每一列都不是单纯的文本节点，都是input，select，checkbox之类的复杂组件，可以理解成可编辑表格。3.列表可以进行拖拽排序4.每行最后一列有删除按钮，可以进行删除行操作。5.每一行有序号标识，序号不能去除，且必须显示出来。6.锁列问题1.每次打开这个长列表，过多的数据，造成大量组件节点需要渲染，200行数据渲染大约需要12s2.点击删除某一行的时候，行数越靠前，删除，需要重新渲染的节点越多，由于序
2020-11-06 11:11:17
1456
原创 DOM 树 和 渲染树 的区别
HTML 经过解析生成 DOM树； CSS经过解析生成 Style Rules。 二者一结合生成了Render Tree。 通过layout计算出DOM要显示的宽高、位置、颜色。 最后渲染在界面上，用户就看到了浏览器的渲染过程：解析 HTML 构建 DOM(DOM 树)，并行请求 css/image/js CSS 文件下载完成，开始构建 CSSOM(CSS 树) CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树) 布局(Layout)：计算出每个节点在屏幕中的位置
2020-11-05 18:15:47
1776
原创 mapbox gl主要技术点
1.styles中source的配置2.styles中layer的配置3.popup的实现4.marker的实现5.geoserver矢量切片6.glyphs和sprite离线
2020-10-28 10:09:21
443
原创 小程序性能优化需要做哪些工作？
1.控制包的大小提升体验最直接的方法是控制小程序包的大小，基本上可以说，1M的代码包，下载耗时1秒左右。控制包的大小的措施压缩代码，清理无用的代码 图片放在cdn 采用分包策略 分包预加载 独立分包（版本要求有点高） 除了上面讲的控制包的大小，对异步请求的优化也很重要。2.优化异步请求onLoad 阶段就可以发起请求，不用等ready 请求结果放在缓存中, 下次接着用 请求中可以先展示骨架图 先反馈，再请求。比如说，点赞的按钮，可以先改变按钮的样式，再发起异步请求。
2020-08-23 17:36:07
393
1
原创 微信小程序和H5有四个方面的区别
一、运行环境的不同H5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，因为小程序的开发过程中只用到一部分H5技术。小程序的运行环境是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对性做了优化，配合自己定义的开发语言标准，提升了小程序的性能。二、开发成本的不同开发一个微信小程序，由于微信团队提供了开发者工具，并且规范了开发标准，则简单得多。前端常见的HTML、CSS变成了微信自定义的WXML、WXSS，WXML，官方文档中都有明确的使用介绍，开发者按照说
2020-08-23 13:22:33
4603
原创 React面试题常考1
state 和 props有什么区别state 和 props都是普通的JavaScript对象。尽管它们两者都具有影响渲染输出的信息，但它们在组件方面的功能不同。即props是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会改变。 state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性...
2020-08-21 20:06:15
194
原创 terser作为js代码压缩工具
# 全局安装terser命令行工具npm install -g terser# 使用terserterser ./foo.js -c pure_funcs=[console.log],toplevel=true -m -o bar.js# -c即compress表示普通的压缩代码# pure_funcs表示删除代码中的console.log方法# toplevel为true表示只在顶级作用域压缩清理变量# -m即mangle会压缩变量名等等# -o代表输出路径const Terser.
2020-08-21 18:56:13
6812
原创 webpack开启gzip压缩打包，需要服务器端nigx配置
我们使用 compression-webpack-plugin 插件进行压缩。npm install compression-webpack-plugin --save-dev成功之后，在vue-config.js里配置const CompressionPlugin = require("compression-webpack-plugin")plugins:[newCompressionPlugin({asset:'[path].gz[query]',//目标资源名称。...
2020-08-21 18:36:50
640
原创 Vue 事件机制,手写$on,$off,$emit,$once
Vue 事件机制 本质上就是 一个 发布-订阅class Vue {constructor() {// 事件通道调度中心this._events = Object.create(null);}$on(event, fn) {if (Array.isArray(event)) {event.map(item => {this.$on(item, fn);});} else ...
2020-08-20 16:06:31
898
原创 keep-alive 的实现原理和使用方法
export default { name: "keep-alive", abstract: true, // 抽象组件属性 ,它在组件实例建立父子关系的时候会被忽略,发生在 initLifecycle 的过程中 props: { include: patternTypes, // 被缓存组件 exclude: patternTypes, // 不被缓存组件 max: [String, Number] // 指定缓存大小 }, create.
2020-08-20 15:52:21
947
转载 React的虚拟Dom解决了什么问题
为什么需要虚拟DOM传统网页在进行更新的时候会有一个很棘手的问题，那就是需要用繁杂的DOMApi去操作DOM，很容易出现bug且难以维护，对于如何从这种繁杂的dom操作中脱离出来，react提出了一个新的思想，-始终整体刷新页面，当数据发生变化时，react会自动更新UI, 从而让我们只关心数据以及最后UI是什么样子。这种方式虽然简单，但是有一个很明显的问题，慢。每次数据改变就重新渲染整个页面会做大量的“无用功”，而且无法保存节点状态，比如失去焦点，为了解决这个问题，react又提出了一个解决方案
2020-08-19 18:47:06
643
原创 HTTP缓存-强制缓存和协商缓存区别
http缓存指的是: 当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。常见的http缓存只能缓存get请求响应的资源，对于其他类型的响应则无能为力，所以后续说的请求缓存都是指GET请求。http缓存都是从第二次请求开始的。第一次请求资源时，服务器返回资源，并在respone header头中回传资源的缓存参数；第二次请求时，浏览器判断这些请求参数，命中强缓存就直接200，否则就把请求参数加到request
2020-08-19 16:03:38
625
原创 this的绑定方式和改变this指向的方式
【1】改变this的指向并且执行调用函数call(), call(thisScope, arg1, arg2, arg3...)apply(), apply(thisScope, [arg1, arg2, arg3...]);两个参数bind 改变this的指向，返回的是函数【2】https://blog.csdn.net/xuehangongzi/article/details/80841167...
2020-08-18 22:04:39
135
原创 常见typeof返回值（P0）
// Numberstypeof 37 === 'number';typeof 3.14 === 'number';typeof Math.LN2 === 'number';typeof Infinity === 'number';typeof NaN === 'number'; // 尽管NaN是"Not-A-Number"的缩写typeof Number(1) === 'number'; // 但不要使用这种形式! // Stringstypeof "" === 'string';.
2020-08-18 21:54:39
580
原创 vue中的mixins如何使用
实现目的某些组件可能会公用一些data，方法，生命周期的钩子或者事件监听，而不仅仅是js定义的一些方法，如果你希望在一些组件中重复使用这部分的语法，可以使用mixins来进行代码的优化。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。如果你需要更复杂的，你也可以将若干的公共组件作为一个混入的组件分组。选项合并对于组件中重复的数据以及方法进行合并，同名函数均执行，生命周期钩子函数，混入的先执行，其中数据冲突的部分，以当前组件优先级为高，其他的形成
2020-08-18 21:44:13
323
原创 vue项目优化方案（4点，面试必问）
1.代码包优化屏蔽sourcemap，vue.config.js里面设置productionSourceMap为false对项目代码中的js,css,svg,ico文件进行gzip压缩，在vue-cli脚手架的配置信息中，有对代码进行压缩的配置项，例如index.js的通用配置，productionGzip设置为true，但是首先需要对compress-webpack-plugin支持对路由组件进行懒加载，在router.js里面对组件进行按需加载2.源码优化v-if和v-show的选择
2020-08-18 21:24:04
677
1
原创 js实现冒泡排序，二分法排序，插入排序，选择排序
思路：a)比较两个相邻的元素，如果后一个比前一个大，则交换位置b) 第一轮的时候最后一个元素应该是最大的一个c) 按照第一步的方法进行两个相邻的元素的比较，由于最后一个元素已经是最大的了，所以最后一个元素不用比较。 function sort(element){ for(var i = 0;i<element.length-1;i++) { console.log("i="+element[i]) for(var
2020-08-18 20:58:26
288
原创 js计算数组中每个元素出现的次数（2种方法）
计算数组中每个元素出现的次数var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];var countedNames = names.reduce(function (allNames, name) { if (name in allNames) { allNames[name]++; } else { allNames[name] = 1; } return allNames;}, {});// cou.
2020-08-18 20:55:08
15693
原创 JS中0.1+0.2 != 0.3 的原因及解决办法
例子：console.log(0.1+0.2) // 结果0.30000000000000004 而不是0.3原因：在计算机中数字无论是定点数还是浮点数都是以多位二进制的方式进行存储的。在JS中数字采用的IEEE 754的双精度标准进行存储(存储一个数值所使用的二进制位数比较多,精度更准确)解决办法想办法规避掉这类小数计算时的精度问题就好了，那么最常用的方法就是将浮点数转化成整数计算。因为整数都是可以精确表示的。0.1+0.2 => (0.1*10+0.2*10)/10...
2020-08-10 16:04:33
2952
原创 JS数组reduce的用法
1.（求和和乘积）var arr = [1, 2, 3, 4];var sum = arr.reduce((x,y)=>x+y)var mul = arr.reduce((x,y)=>x*y)console.log( sum ); //求和，10console.log( mul ); //求乘积，242.计算数组中每个元素出现的次数let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];let nameNum .
2020-08-03 17:34:48
229
原创 JS数组reduce()方法详解
1.语法arr.reduce(callback,[initialValue])callback （执行数组中每个值的函数，包含四个参数） 1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue）） 2、currentValue （数组中当前被处理的元素） 3、index （当前元素在数组中的索引） 4、array （调用 reduce 的数组）initialValue （作为第一次调用 callback 的第一
2020-08-03 17:29:19
217
原创 elementUI重难点
el-table（表格）过滤、模糊搜索、字段复选框、动态列、分页、下拉菜单，选择，排序，超出显示省略号el-tree（树状图）过滤、选择，展开、选择高亮，点击，加图标el-dialog（弹框）设置宽高、加footer、加模态点击el-dropmenu（下拉菜单）下拉的可以是div，用visiable属性可以控制显示隐藏el-col span属性控制栅栏布局e...
2020-01-19 21:03:08
470
原创 proxy的几个参数
api;{target:'https;//www.baidu.com',changeOrigin:true,wx:true,还有几个其它参数onProxyReq:function(proxyReq,req,res){proxyReq.setHeader('Cookie','session=12324343535')}pathRewrite：{}}sas...
2020-01-15 10:21:30
2423
原创 JS获取真实的外网IP和内网IP以及IPv6地址
1.https://blog.csdn.net/kirinlau/article/details/808338052.https://unbug.github.io/codelf/3.https://github.com/unbug/codelf#codelf-for-vs-code4.vxe-tablehttps://xuliangzhan.github.io/vxe-table/...
2020-01-09 10:50:03
1106
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人