- 博客(28)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 监听DIV元素尺寸变化
web开发过程中为了更好的实现元素自适应效果，往往需要监听DIV的尺寸变化。而DIV元素不像window对象，是没有resize事件的，我们无法直接监听DIV的resize事件。因此在需要对DIV元素进行监听时，需要采用一些特定方法完成size的监听。...
2022-08-18 18:38:57
5646
原创 借助uni-app撸了个证件照小程序
借助于uni-app撸了个证件照小程序，主要用到了canvas的绘图功能，不得不说uni-app的云函数机制相当不错，直接省去了租服务器的费用，双手点个赞！！小程序支持g预览版
2021-05-28 09:32:07
1076
3
原创 git地理位置信息系统
git地理位置信息系统最近调研了一下gis系统的开发方式，发现bigmap这个插件相对来说还是挺好用的。这是官网的介绍：IGEMAP集合了谷歌地图、百度地图、高德地图、OpenStreet等50多种国内外优质的地图资源，主要包括卫星地图、电子地图、地形图等。同时我们也提供了全球矢量地图数据下载、设计。还包括海图、地质图、2.5D地图、地表覆盖以及人口、景观、植被等各种专题地图。资源确实很丰富，样例也挺不错，缺陷就是开发文档写的相当不友好。。。这次调研的需求还是很简单的，显示行政区域，显示迁移特显
2021-05-26 11:00:31
371
原创 bat脚本批量启动程序
每天上班第一件事就是开机，启动各种程序，需要手动点击很多次才能进行手头上的工作。这种无脑无意义的事为啥不让脚本干呢，于是就想写个bat脚本，每天开机后双击脚本，自动启动n个程序。1.首先，新建个txt空白文件，修改后缀为.bat2 .编辑start.bat文件格式为 ： start + 空格 + 引号 +空格+ 程序目录程序目录可以在程序的属性，目标中复制过来，直接粘贴...
2019-12-18 10:54:29
13393
3
原创 ES6的兼容方法
JavaScript的迅速演变给Js开发者带来了更多的便利，同时也遇到了问题。对于Js开发者来说，我们非常想要使用这些新特性，但同时又被担心旧版浏览器不支持新版本特性，比如IE浏览器。是否要等到所有浏览器都支持新版本特性之后才开始在代码中使用这些新的API和语法呢，所有负责语言发展的人士都希望，新的特性和模式一旦在标准中稳定下来，并且浏览器能够实现他们之后，就能够在开发者的代码中得到应用。怎么...
2019-10-25 10:35:57
1060
转载 Webpack性能优化
Webpack是现在主流的功能强大的模块化打包工具，在使用Webpack时，如果不注意性能优化，有非常大的可能会产生性能问题，性能问题主要分为开发时打包构建速度慢、开发调试时的重复性工作、以及输出文件质量不高等，因此性能优化也主要从这些方面来分析。本文主要是根据自己的理解对《深入浅出Webpack》这本书进行总结，涵盖了大部分的优化方法，可以作为Webpack性能优化时的参考和检查清单。基于Web...
2019-08-27 11:07:12
3825
原创 IE浏览器动画中使用calc计算方法不生效的坑
最近在写一个动画效果时，在动画中利用calc去计算元素的移动距离，在火狐和谷歌chrome下运动正常，效果很简单：示例代码如下：<div id='moveDiv'> </div> <style> body{ background-color:black; } #moveDiv{ width:30px; heig...
2019-05-24 15:16:16
3857
2
原创 无延迟css换肤方案
要实现前端换肤，大部分程序猿的思路无外乎下面两种：1.通过全局class名称，切换全局类名称实现换肤；2.通过js更改link标签的href进行加载不同的css文件。但是，方法1的方案比较繁琐，全局class控制样式会提高全局样式优先级，如果换肤样式很多，代码会非常啰嗦，不利于维护；方法2通过js更改href时，会重新下载href指向的css文件，多个文件会有延迟，导致样式有个过度状态...
2019-04-04 15:53:33
1057
原创 vue可视化组件
vue开发的可视化组件，包含柱状图组件，圆形进度条组件：使用方式：NPM下载安装vue-charts-jfnpm install vue-charts-jf --saveimport vueChart from 'vue-charts-jf'Vue.use(vueChart);github地址:https://github.com/jianfeng418/vue-charts...
2019-03-20 16:30:19
9313
原创 Vue编写的树形tree组件
近期在进行vue的学习，自研的vue项目需要一个tree组件。由于在学习阶段，不想‘拿来主义’，拿别人写好的组件使用，对于处于学习阶段的开发者来说不是一件好事，虽然拿别人开发好的东西过来用可以快速进行业务开发，但阻绝了学习者锻炼自身开发技能的机会。‘拿来主义’的学习方式，与其说是学习一门语言，不如说是学习一种成熟组件的使用方式。自己动手写一写还是非常有利于自身水平提升的。于是，开始动手自己写vue...
2019-02-21 10:50:46
44231
14
原创 vue-menu菜单 从开发到npm包发布
最近在开发vue项目，其中一些组件采用自研的方式开发，在这里对于一些通用性较强的组件进行一些总结，本文记录一下vue-menu菜单组件的开发过程和npm包发布过程。一、组件的开发1、需求分析组件需要的功能：（1）点击或者鼠标hover某一元素后弹出下拉菜单；（2）下拉菜单项具备点击功能；（3）下拉项可以置灰，点击无效；（4）可以为下拉菜单添加自定义的类；2、创建项目...
2019-01-07 17:46:25
4107
原创 vue实现easyui-layout的伸缩拖拽功能
最近在做一个vue项目，需要一个类似于easyui-layout的伸缩功能，要求可伸缩并且可拖拽，由于vue也提供了过度和动画的特性，决定利用vue提供的过渡特性自己动手写一个实现。Vue官网对于transition组件的解释：Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展...
2018-12-17 14:10:52
4241
原创 解决vue路由跳转未匹配路径时出现空白页的问题
在进行vue项目开发时，常用vue-router进行路由的导航，这种方式可以很好的进行路由和组件的匹配，但是当用户手动更改为未进行匹配的url时，系统找不到响应的组件进行页面渲染，就会出现空白页面。这种用户体验并不好，下面总结解决该问题的方法。1.导航守卫可以使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter({ ...
2018-11-19 09:01:11
19900
4
原创 几种CSS实现元素垂直居中的方式
最近在项目中又用到了元素的垂直居中，在这里整理总结一下可以实现元素垂直居中的几种方法。 方法1: 利用line-height实现单行元素的垂直居中。 实现方法：将行内文本的line-height设置为父级元素的高度：&...
2018-11-01 14:18:54
1609
原创 JS惰性载入函数
函数的惰性载入，在Js中很常见的一种编码现象。由于各大浏览器的差异，我们在实现一项功能的时候需要考虑不同浏览器之间的兼容性问题，因此需要进行浏览器嗅探。最常用的嗅探方法就是通过if else的方式判断当前环境是否支持某一对象。例如，使用原生js创建XHR对象：function createXHR(){ if(typeof XMLHttpRequest != 'undefine...
2018-10-25 09:54:50
784
原创 JS中的几种循环和跳出方式
JS中的循环是大家很常用的，这里总结一下几种常用循环的跳出方式。1.for循环var arr = ['q','w','e','r','t'];for(var i=0, len = arr.length ; i< len ; i++){ console.log(arr[i]); }// q , w , e , r , t跳出本次循环continue：f...
2018-09-27 11:34:03
48756
5
原创 JavaScript中的构造函数的作用域安全
在JS中，构造函数其实就是一个使用new操作符调用的函数，和普通函数的区别是函数名的首字母大写（不是强制规定）。当使用new调用时，构造函数内用到的this对象会指向新创建的对象实例：function Person(name,age,job){ this.name = name; this.age = age; this.job = job;}var perso...
2018-08-31 11:28:36
575
转载 深入浅出 JavaScript 关键词 -- this
原文地址：Mastering JavaScript this Keyword – Detailed Guide 原文作者：Jay 译文出自：掘金翻译计划 本文永久链接：github.com/xitu/gold-m… 译者：老教授 校对者：allen、dz要说 JavaScript 这门语言最容易让人困惑的知识点，this 关键词肯定算一个。JavaScript 语言面世多年，一直...
2018-08-21 10:16:18
214
原创 H5的Audio API音频
h5出现之前，要进行Web音频的展示，往往需要在浏览器加载flash等插件，h5中新增的<audio>标签允许用户进行一些基本的音频流操作，但是对于一些复杂的音频处理应用，其功能远远不能满足需求，而h5中提供的Audio API就派上了用场。H5的Web Audio API很强大，我们可以利用它去创建各种音频，甚至可以创建一段完整的音乐。在进行一些网站建设时，我们前端攻城狮可以摆脱网上...
2018-08-20 16:49:34
3956
原创 理解JavaScript的原型对象
在JavaScript中，只要创建一个新函数，系统都会为该函数自动创建一个prototype属性，这个属性是一个指针，指向函数的原型对象。看下面的代码：创建了一个空函数Person，打印Person后，可以看到有个prototype属性，它指向一个对象：这个对象就是传说中的原型对象，其中的constructor（构造函数）属性也是默认添加的，这个属性包含一个指向pr...
2018-08-06 10:44:39
179
原创 优化CSS选择符
CSS选择符对性能的影响源于浏览器匹配选择符和文档元素时所消耗的时间，前端攻城狮们可以通过编写更高效的选择符来控制匹配耗时，实现高效率选择符首先要理解选择符是如何匹配的。1 CSS匹配规则：最右边优先 看下面这条规则： #toc > li { font-weight:bold; }对于我们大多数有从左到右阅读习惯的人，可能自...
2018-07-27 10:29:24
625
原创 认识JavaScript的作用域
当执行JavaScript代码时，JavaScript引擎会创建一个执行上下文（Execution Context）。执行上下文（作用域）设定了代码执行时所处的环境。JavaScript引擎会在页面加载后创建一个全局的执行上下文，然后每执行一个函数时都会创建一个对应的执行上下文，最终建立一个执行上下文的堆栈，当前起作用的执行上下文在堆栈的最顶部。 每个执行上下...
2018-07-25 11:00:37
194
原创 编写高效JavaScript
当今的Web应用程序都是由大量的JavaScript代码驱动。每次用户在界面上操作时，都要执行成千上万行的Js代码。因此，关注性能，不仅要关注页面的加载时间，也要关注在页面上操作时的响应速度。要实现快速而友好的用户界面，最好的办法就是编写的JavaScript代码能在浏览器中高效的运行。 在编写代码的过程中，如果多注意一下自己的代码质量，就可以得到更流畅的用户体验。身...
2018-07-25 09:38:47
610
原创 js函数柯里化
什么是函数柯里化？ 在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。这个技术由 Christopher Strachey 以逻辑学家 Haskell Curry 命名的，尽管它是 Moses Schnfinkel 和 Gottlob Frege 发明的。 ...
2018-07-05 17:55:02
1180
原创 函数节流和函数防抖
写在前面 在前端开发中，我们知道对于DOM的频繁操作是非常消耗资源的，尤其是对于浏览器的onresize，onscroll事件进行响应去操作DOM元素的时候，有时候会看到浏览器卡顿，用户体验非常不好。但是我们又要监听浏览器的onresize，onscroll事件，这时候函数节流（throttle）和函数防抖（debounce）就发挥作用了。函数节流原理 对于连续触发的事件，...
2018-06-14 17:23:09
1095
原创 斐波那契数列的几种js实现
斐波那契指的是这样一个数列：1、1、2、3、5、8、13、21、34......在数学上，斐波纳契数列以如下被以递归的方法定义：F(1)=1，F(2)=1, F(n)=F(n-1)+F(n-2)（n>=2，n∈N*）;随着数列项数的增加，前一项与后一项之比越来越逼近黄金分割的数值0.6180339887..…问题来了，怎样用代码实现一个斐波那契数列呢？下面是一些方法的总结；方...
2018-05-31 18:03:49
23976
2
精通CSS：高级Web标准解决方案（第2版）中文扫描
2018-10-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人