前端
文章平均质量分 59
暮春风
Web前端工程师
展开
-
认识 openlayers
认识 openlayersopenlayers 版本 4.6.5实现一张地图这是一个地图实例,你可以把以下内容复制到一个新的 html 文件中,打开试试。<!doctype html><html lang="en"> <head> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> <style&原创 2020-12-23 15:52:24 · 539 阅读 · 1 评论 -
JavaScript 常规深拷贝方法
JavaScript 深拷贝(无 function 拷贝)function isObject (obj) { return (typeof obj === 'object' || typeof obj === 'function') && (obj !== null)}function deepcopy (obj, hash = new WeakMap()) { let copyObj, constructor = obj.construc原创 2020-08-31 15:04:04 · 290 阅读 · 1 评论 -
JavaScript Symbol 对象的理解与使用
Symbol唯一值,用于防止属性名冲突使用Symbol()来创建值不会进行记录,所以无论值看起来是否一样都不会引用同一份内存地址。没有构造函数,直接使用let sybl = Symbol()let syblObject = { [sybl]: "通过唯一值创建"}可作为私有变量不想被 for/in、for/of 遍历操作找到时可使用Symbol,若想找到时需使用Reflect.ownKeys(syblObject)Object.getOwnPropertySymbols(s原创 2020-08-31 11:17:38 · 337 阅读 · 0 评论 -
JavaScript Map 对象的理解与使用
MapMap 对标的是 Object,是一种类似于对象的键值对数据结构不同于Object 的是Map 的键可以为任意类型的值(null 会被当做 undefined),而不仅仅为字符串Map 的键值是有序的,可通过 size 获取长度Map 在频繁增删键值对的场景下会有一些性能优势let map = new Map([ ["姓名", "张三"], ["年龄","18"]])// 类似于:let obj = { '姓名': '张三', '年龄': 18}原创 2020-08-31 10:49:45 · 644 阅读 · 0 评论 -
JavaScript Set 的用法与理解
SetSet 与数组类似, Set 集合中的元素不重复。查找元素: 在数组中使用 indexOf() 或 includes() 检查元素是否存在比较慢。删除元素: 在 Set 中,可以通过值删除元素。即在数组中,基于索引的splice() 功能。插入元素: 在 Set 中添加元素比在数组中通过 push()、 unshift() 或其他同类操作要快。去重: Set 对象仅能存储不同的值。如果你想避免存储重复的值,这会比数组具有更大的优势。在数组中你需要一些额外的代码来做去重。let arr原创 2020-08-31 09:56:29 · 11633 阅读 · 0 评论 -
深度优先和广度优先的概念理解
概念深度优先:找到一个节点后,把它的后辈都找出来,最常用递归法。广度优先:找到一个节点后,把他同级的兄弟节点都找出来放在前边,把孩子放到后边,最常用 while。举例数据 var nodes = [ { name: "爷爷", children: [ { name: '爸爸', children: [{ ...原创 2019-07-12 11:36:32 · 2589 阅读 · 0 评论 -
掌握 XMLHttpRequest ,了解请求库的实现机制
先做个尝试为了确保没有跨域的错误,使用浏览器打开百度首页,然后打开控制台,将如下代码输入控制台并执行var type = "GET" var isAsync = true var url = "https://www.baidu.com/" var xhr = new XMLHttpRequest()xhr.onreadystatechange = stateChange ...原创 2018-04-24 14:21:28 · 370 阅读 · 0 评论 -
JavaScript setTimeout 的原理
JavaScript 引擎是基于事件驱动单线程执行的,JavaScript 引擎一直等待着任务队列中的任务,接收到任务就加以处理,任务过多时会按序等待处理。setTimeout 调用的时候,JavaScript引擎会启动定时器 timer,在第二个参数 n 毫秒 以后执行第一个参数回调或代码段,当定时器的时间到了,就把该事件放到主事件队列等待处理。也就是说需要看任务放到队列中的顺序。...原创 2017-11-10 14:25:57 · 725 阅读 · 0 评论 -
前端性能优化
前端性能优化减少请求数量js css 文件压缩合并不可矢量化的图片,进行合并处理 css sprites可合并的请求尽量一次完成,如:页面首次加载请求合并提高请求质量使用 GET 请求替代 POST 请求缓存 Ajax 请求空闲时发送其他页面首次加载所必需的请求,并缓存请求数据减少跳转(301 302)优化 js 把脚本置于页面底部 减少 DOM 访问优化 css 样式置于顶部原创 2017-08-31 09:28:49 · 340 阅读 · 0 评论 -
http 协议
http 协议是干什么的为了实现数据的通信,所制定的一套数据通讯协议。一张图看 TPC/IP 协议IP(Internet Protocol) 网际协议,与我们常说的“IP 地址”不同。 TCP 提供可靠的字节流服务,把数据分割,更容易传输。三次握手(不含https)通俗点说 客户端:我想在你那拿点资料,行吗? 服务器:可以,给你。(或者:不行,你没权限,...原创 2017-08-22 08:51:01 · 449 阅读 · 0 评论 -
前端工程师应该注意的一些细节,面试容易问到
个人最近整理的一些资料:每个问题都值得思考,有问题的地方还望广大码友批评指正,请勿用于其他用途!!!所有示例务必亲自试一试!!!javascriptajax 原理Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Aja...原创 2015-12-25 15:08:59 · 5718 阅读 · 1 评论 -
vue 快速入门与最佳实践(vue-cli, webpack, vue 最佳实践)
技术与依赖环境分层结构使用vue-cli 部署环境安装 nodejs & npmVue组件化框架的作用Vue 是什么?能做什么?原理订阅发布模式,响应式数据流生命周期常用API解读与一些最佳实践(不只是vue)Vue 生命周期(keep-alive 保留组件状态或避免重新渲染,将页面缓存到内存中)变量绑定(容易产生的误区)组件定义的方式父子组件...原创 2017-03-22 15:42:44 · 6282 阅读 · 0 评论 -
开始 vue-cli webpack 打包工具的demo
在命令行执行如下语句npm install -g vue-clivue init webpack-simple my-projectcd my-projectnpm installnpm run dev以上步骤参考 点击打开链接完成以上步骤例子就可以跑起来了,npm install 可能会出问题,失败的同学可以去试试 cnpm如果 npm install 失败n原创 2016-12-23 16:59:57 · 2233 阅读 · 0 评论 -
angularstrap typeahead 处理异步数据
使用 angularstrap typeahead 的时候下拉列表总是比输入的数据慢一步选中列表的事件原创 2016-04-17 09:45:29 · 1024 阅读 · 0 评论 -
使用 str.indexOf(sourceStr,indexOffset) 匹配所有项
var source = 'asdf aa asdfv ass aaa asdff,dsfsd', result = getAllIndexOf(source,'aa'); function getAllIndexOf(sourceStr,filterStr) { var arr = []; var index = -1; while(sourceStr.indexOf(filt原创 2015-12-22 21:29:01 · 1343 阅读 · 0 评论 -
使用jquery 和 css 实现互斥按钮状态切换
实现效果如上图所示css代码.invitebtn .selected { color: #fff; background: rgba(59,181,182, 1); } jquery代码//切换样式 $(".invitebtn input").click(function(e){ $(this).addClass('selected').原创 2015-12-02 10:51:20 · 4358 阅读 · 2 评论