Jeff的博客

本文通过CSS实现可悬停的轮播图效果，不需要js进行复杂的位置计算。为小伙伴们提供一种轮播图的实现思路。

web开发过程中为了更好的实现元素自适应效果，往往需要监听DIV的尺寸变化。而DIV元素不像window对象，是没有resize事件的，我们无法直接监听DIV的resize事件。因此在需要对DIV元素进行监听时，需要采用一些特定方法完成size的监听。...

SVG滤镜实现水波效果

git地理位置信息系统最近调研了一下gis系统的开发方式，发现bigmap这个插件相对来说还是挺好用的。这是官网的介绍：IGEMAP集合了谷歌地图、百度地图、高德地图、OpenStreet等50多种国内外优质的地图资源，主要包括卫星地图、电子地图、地形图等。同时我们也提供了全球矢量地图数据下载、设计。还包括海图、地质图、2.5D地图、地表覆盖以及人口、景观、植被等各种专题地图。资源确实很丰富，样例也挺不错，缺陷就是开发文档写的相当不友好。。。这次调研的需求还是很简单的，显示行政区域，显示迁移特显

JavaScript的迅速演变给Js开发者带来了更多的便利，同时也遇到了问题。对于Js开发者来说，我们非常想要使用这些新特性，但同时又被担心旧版浏览器不支持新版本特性，比如IE浏览器。是否要等到所有浏览器都支持新版本特性之后才开始在代码中使用这些新的API和语法呢，所有负责语言发展的人士都希望，新的特性和模式一旦在标准中稳定下来，并且浏览器能够实现他们之后，就能够在开发者的代码中得到应用。怎么...

最近在开发vue项目，其中一些组件采用自研的方式开发，在这里对于一些通用性较强的组件进行一些总结，本文记录一下vue-menu菜单组件的开发过程和npm包发布过程。一、组件的开发1、需求分析组件需要的功能：（1）点击或者鼠标hover某一元素后弹出下拉菜单；（2）下拉菜单项具备点击功能；（3）下拉项可以置灰，点击无效；（4）可以为下拉菜单添加自定义的类；2、创建项目...

近期在进行vue的学习，自研的vue项目需要一个tree组件。由于在学习阶段，不想‘拿来主义’，拿别人写好的组件使用，对于处于学习阶段的开发者来说不是一件好事，虽然拿别人开发好的东西过来用可以快速进行业务开发，但阻绝了学习者锻炼自身开发技能的机会。‘拿来主义’的学习方式，与其说是学习一门语言，不如说是学习一种成熟组件的使用方式。自己动手写一写还是非常有利于自身水平提升的。于是，开始动手自己写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...

要实现前端换肤，大部分程序猿的思路无外乎下面两种：1.通过全局class名称，切换全局类名称实现换肤；2.通过js更改link标签的href进行加载不同的css文件。但是，方法1的方案比较繁琐，全局class控制样式会提高全局样式优先级，如果换肤样式很多，代码会非常啰嗦，不利于维护；方法2通过js更改href时，会重新下载href指向的css文件，多个文件会有延迟，导致样式有个过度状态...

最近在写一个动画效果时，在动画中利用calc去计算元素的移动距离，在火狐和谷歌chrome下运动正常，效果很简单：示例代码如下：<div id='moveDiv'> </div> <style> body{ background-color:black; } #moveDiv{ width:30px; heig...

Webpack是现在主流的功能强大的模块化打包工具，在使用Webpack时，如果不注意性能优化，有非常大的可能会产生性能问题，性能问题主要分为开发时打包构建速度慢、开发调试时的重复性工作、以及输出文件质量不高等，因此性能优化也主要从这些方面来分析。本文主要是根据自己的理解对《深入浅出Webpack》这本书进行总结，涵盖了大部分的优化方法，可以作为Webpack性能优化时的参考和检查清单。基于Web...

    最近在项目中又用到了元素的垂直居中，在这里整理总结一下可以实现元素垂直居中的几种方法。    方法1:    利用line-height实现单行元素的垂直居中。                                                                     实现方法：将行内文本的line-height设置为父级元素的高度：&...

函数的惰性载入，在Js中很常见的一种编码现象。由于各大浏览器的差异，我们在实现一项功能的时候需要考虑不同浏览器之间的兼容性问题，因此需要进行浏览器嗅探。最常用的嗅探方法就是通过if else的方式判断当前环境是否支持某一对象。例如，使用原生js创建XHR对象：function createXHR(){ if(typeof XMLHttpRequest != 'undefine...

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...

什么是函数柯里化？        在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。这个技术由 Christopher Strachey 以逻辑学家 Haskell Curry 命名的，尽管它是 Moses Schnfinkel 和 Gottlob Frege 发明的。       ...

         当执行JavaScript代码时，JavaScript引擎会创建一个执行上下文（Execution Context）。执行上下文（作用域）设定了代码执行时所处的环境。JavaScript引擎会在页面加载后创建一个全局的执行上下文，然后每执行一个函数时都会创建一个对应的执行上下文，最终建立一个执行上下文的堆栈，当前起作用的执行上下文在堆栈的最顶部。         每个执行上下...

当今的Web应用程序都是由大量的JavaScript代码驱动。每次用户在界面上操作时，都要执行成千上万行的Js代码。因此，关注性能，不仅要关注页面的加载时间，也要关注在页面上操作时的响应速度。要实现快速而友好的用户界面，最好的办法就是编写的JavaScript代码能在浏览器中高效的运行。 在编写代码的过程中，如果多注意一下自己的代码质量，就可以得到更流畅的用户体验。身...

CSS选择符对性能的影响源于浏览器匹配选择符和文档元素时所消耗的时间，前端攻城狮们可以通过编写更高效的选择符来控制匹配耗时，实现高效率选择符首先要理解选择符是如何匹配的。1 CSS匹配规则：最右边优先 看下面这条规则： #toc > li { font-weight:bold; }对于我们大多数有从左到右阅读习惯的人，可能自...

在JavaScript中，只要创建一个新函数，系统都会为该函数自动创建一个prototype属性，这个属性是一个指针，指向函数的原型对象。看下面的代码：创建了一个空函数Person，打印Person后，可以看到有个prototype属性，它指向一个对象：这个对象就是传说中的原型对象，其中的constructor（构造函数）属性也是默认添加的，这个属性包含一个指向pr...

h5出现之前，要进行Web音频的展示，往往需要在浏览器加载flash等插件，h5中新增的<audio>标签允许用户进行一些基本的音频流操作，但是对于一些复杂的音频处理应用，其功能远远不能满足需求，而h5中提供的Audio API就派上了用场。H5的Web Audio API很强大，我们可以利用它去创建各种音频，甚至可以创建一段完整的音乐。在进行一些网站建设时，我们前端攻城狮可以摆脱网上...

斐波那契指的是这样一个数列：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..…问题来了，怎样用代码实现一个斐波那契数列呢？下面是一些方法的总结；方...

在JS中，构造函数其实就是一个使用new操作符调用的函数，和普通函数的区别是函数名的首字母大写（不是强制规定）。当使用new调用时，构造函数内用到的this对象会指向新创建的对象实例：function Person(name,age,job){ this.name = name; this.age = age; this.job = job;}var perso...

写在前面 在前端开发中，我们知道对于DOM的频繁操作是非常消耗资源的，尤其是对于浏览器的onresize，onscroll事件进行响应去操作DOM元素的时候，有时候会看到浏览器卡顿，用户体验非常不好。但是我们又要监听浏览器的onresize，onscroll事件，这时候函数节流（throttle）和函数防抖（debounce）就发挥作用了。函数节流原理 对于连续触发的事件，...