IE浏览器动画中使用calc计算方法不生效的坑

最近在写一个动画效果时,在动画中利用calc去计算元素的移动距离,在火狐和谷歌chrome下运动正常,效果很简单: 示例代码如下: <div id='moveDiv'> </div> <style&gt...

2019-05-24 15:16:16

阅读数 108

评论数 0

无延迟css换肤方案

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

2019-04-04 15:53:33

阅读数 112

评论数 0

vue可视化组件

vue开发的可视化组件,包含柱状图组件,圆形进度条组件: 使用方式: NPM下载安装vue-charts-jf npm install vue-charts-jf --save import vueChart from 'vue-charts-jf' Vue.use(vueC...

2019-03-20 16:30:19

阅读数 397

评论数 0

Vue编写的树形tree组件

近期在进行vue的学习,自研的vue项目需要一个tree组件。由于在学习阶段,不想‘拿来主义’,拿别人写好的组件使用,对于处于学习阶段的开发者来说不是一件好事,虽然拿别人开发好的东西过来用可以快速进行业务开发,但阻绝了学习者锻炼自身开发技能的机会。‘拿来主义’的学习方式,与其说是学习一门语言,不如...

2019-02-21 10:50:46

阅读数 178

评论数 0

vue-menu菜单 从开发到npm包发布

最近在开发vue项目,其中一些组件采用自研的方式开发,在这里对于一些通用性较强的组件进行一些总结,本文记录一下vue-menu菜单组件的开发过程和npm包发布过程。 一、组件的开发 1、需求分析 组件需要的功能: (1)点击或者鼠标hover某一元素后弹出下拉菜单; (2)下拉菜单项具备...

2019-01-07 17:46:25

阅读数 635

评论数 0

vue实现easyui-layout的伸缩拖拽功能

最近在做一个vue项目,需要一个类似于easyui-layout的伸缩功能,要求可伸缩并且可拖拽,由于vue也提供了过度和动画的特性,决定利用vue提供的过渡特性自己动手写一个实现。 Vue官网对于transition组件的解释:Vue 提供了 transition 的封装组件,在下列情形中...

2018-12-17 14:10:52

阅读数 942

评论数 0

解决vue路由跳转未匹配路径时出现空白页的问题

在进行vue项目开发时,常用vue-router进行路由的导航,这种方式可以很好的进行路由和组件的匹配,但是当用户手动更改为未进行匹配的url时,系统找不到响应的组件进行页面渲染,就会出现空白页面。这种用户体验并不好,下面总结解决该问题的方法。 1.导航守卫 可以使用 router.befor...

2018-11-19 09:01:11

阅读数 3265

评论数 0

几种CSS实现元素垂直居中的方式

    最近在项目中又用到了元素的垂直居中,在这里整理总结一下可以实现元素垂直居中的几种方法。     方法1:     利用line-height实现单行元素的垂直居中。                                                           ...

2018-11-01 14:18:54

阅读数 182

评论数 0

JS惰性载入函数

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

2018-10-25 09:54:50

阅读数 165

评论数 0

JS中的几种循环和跳出方式

JS中的循环是大家很常用的,这里总结一下几种常用循环的跳出方式。 1.for循环 var arr = ['q','w','e','r','t']; for(var i=0, len = arr.length ; i< len ; i++){ console.log(ar...

2018-09-27 11:34:03

阅读数 4155

评论数 0

JavaScript中的构造函数的作用域安全

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

2018-08-31 11:28:36

阅读数 139

评论数 0

深入浅出 JavaScript 关键词 -- this

原文地址:Mastering JavaScript this Keyword – Detailed Guide 原文作者:Jay 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:老教授 校对者:allen、dz 要说 JavaScript ...

2018-08-21 10:16:18

阅读数 52

评论数 0

H5的Audio API音频

h5出现之前,要进行Web音频的展示,往往需要在浏览器加载flash等插件,h5中新增的<audio>标签允许用户进行一些基本的音频流操作,但是对于一些复杂的音频处理应用,其功能远远不能满足需求,而h5中提供的Audio API就派上了用场。H5的Web Audio A...

2018-08-20 16:49:34

阅读数 1234

评论数 0

理解JavaScript的原型对象

在JavaScript中,只要创建一个新函数,系统都会为该函数自动创建一个prototype属性,这个属性是一个指针,指向函数的原型对象。看下面的代码: 创建了一个空函数Person,打印Person后,可以看到有个prototype属性,它指向一个对象: 这个对象就是传说中的原型对象...

2018-08-06 10:44:39

阅读数 64

评论数 0

优化CSS选择符

CSS选择符对性能的影响源于浏览器匹配选择符和文档元素时所消耗的时间,前端攻城狮们可以通过编写更高效的选择符来控制匹配耗时,实现高效率选择符首先要理解选择符是如何匹配的。 1 CSS匹配规则:最右边优先 看下面这条规则: #toc > LI { font-we...

2018-07-27 10:29:24

阅读数 265

评论数 0

认识JavaScript的作用域

         当执行JavaScript代码时,JavaScript引擎会创建一个执行上下文(Execution Context)。执行上下文(作用域)设定了代码执行时所处的环境。JavaScript引擎会在页面加载后创建一个全局的执行上下文,然后每执行一个函数时都会创建一个对应的执行上下文,...

2018-07-25 11:00:37

阅读数 112

评论数 0

编写高效JavaScript

当今的Web应用程序都是由大量的JavaScript代码驱动。每次用户在界面上操作时,都要执行成千上万行的Js代码。因此,关注性能,不仅要关注页面的加载时间,也要关注在页面上操作时的响应速度。要实现快速而友好的用户界面,最好的办法就是编写的JavaScript代码能在浏览器中高效的运行。 在编...

2018-07-25 09:38:47

阅读数 258

评论数 0

js函数柯里化

什么是函数柯里化?        在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。这个技术由 Christopher Strachey 以逻辑学家 Haskell Curry 命名...

2018-07-05 17:55:02

阅读数 433

评论数 0

函数节流和函数防抖

写在前面 在前端开发中,我们知道对于DOM的频繁操作是非常消耗资源的,尤其是对于浏览器的onresize,onscroll事件进行响应去操作DOM元素的时候,有时候会看到浏览器卡顿,用户体验非常不好。但是我们又要监听浏览器的onresize,onscroll事件,这时候函数节流(throttl...

2018-06-14 17:23:09

阅读数 772

评论数 0

斐波那契数列的几种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....

2018-05-31 18:03:49

阅读数 4474

评论数 0

提示
确定要删除当前文章?
取消 删除