2017年06月_hsany330

转载 javascript检查插件是否已经在IE和firefox上安装

一、IE检查插件是否安装，通过创建ActiveXObject来实现，提示“ActiveX控件和本页其他部分的交互...”警告这个也说明安装过插件了，但是点击否不会继续new ActiveXObject后的语句－收缩HTML代码　　运行代码　　[如果运行无效果，请自行将源代码保存为html文件运行]script>try{// var varTest = new Ac

2017-06-29 10:34:33 1910

转载 Vue单元测试case写法

书接上文，karma+webpack搭建vue单元测试环境介绍了vue单元测试环境搭建及查看源文件的测试覆盖覆盖率。今天来说一下vue单元测试思路和case的写法。测试框架使用jasmine，语法参考。代码地址：https://github.com/MarxJiao/vue-karma-test/tree/spec-demo测试关注点对于vue组件，单元测试测试主要

2017-06-23 17:01:51 4016

转载 karma+webpack搭建vue单元测试环境

最近做了一次关于vue组件自动化测试的分享，现在将vue组件单元测试环境搭建过程整理一下。这次搭建的测试环境和开发环境隔离，所以理论上适用所有使用vue的开发环境。准备这篇文章的重点在于搭建测试环境，所以我随便写了个webpack的vue开发环境。代码地址：https://github.com/MarxJiao/vue-karma-test目录结构如下目

2017-06-23 15:26:28 2100

转载 vue2 过渡效果总结

最近我整理了一下vue2的一些过渡效果。来总结到这里。 vue 为我们封装了transition 组件，可以给任何元素添加enter 和leave 条件渲染 : v-if 条件展示：v-show 动态组件组件根节点一、单元素过渡一般需要过渡的元素要放在组件中，过渡有四个状态 ①. enter 元素进入时第一帧的状态 ②. enter-activ

2017-06-23 14:22:16 940

转载 Vue单元测试起步

最近在搭建一个项目的前端开发环境，准备趁此把一些没用过的东西尝试下，比如：单元测试。使用 vue-cli 可以直接生成一个包含 unit 、 e2e 测试的开发环境，不过还是需要去了解其中的组织结构、配置和模块的使用等。准备没有一点相关经验，先把 vue-cli 生成后的 test/unit 目录拿到自己的项目中。test 目录结构:- test- u

2017-06-23 14:09:29 11609

转载 @keyframes详解与实例

转载： https://segmentfault.com/a/1190000004460780#articleHeader5css3动画属性详解：关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)。一、transform属性：旋转rotate（中心为原点）扭曲、倾斜skew（ske

2017-06-22 17:51:23 5331

转载实用的 CSS — 贝塞尔曲线(cubic-bezier)

前言在了解 cubic-bezier 之前，你需要对 CSS3 中的动画效果有所认识，它是 animation-timing-function 和 transition-timing-function 中一个重要的内容。本体简介cubic-bezier 又称三次贝塞尔，主要是为 animation 生成速度曲线的函数，规定是 cubic-bezier(, , ,

2017-06-22 17:39:10 5159

转载使用 FLIP 来提高 Web 动画的性能

CSS 动画已经存在很多年了，使用恰当可以很好地提高网站的用户体验，也正是由于其容易使用，就很可能出现性能低下的动画，从而降低了整个页面的运行效率。回想一下：你曾经是否使用过 CSS 来改变元素的宽度、高度或绝对位置？如果回答是肯定的，就意味着你触发了性能低下的重排或重绘计算，在某些情况下甚至可能导致页面闪烁。什么样的情况会导致页面闪烁呢？现代浏览器根据设备的刷新率来刷新页面中的内

2017-06-22 16:09:31 848

转载为 Koa 框架封装 webpack-dev-middleware 中间件

这篇文章能带给你什么我见到有很多朋友在 SegmentFault 上面问一些不太好回答的问题，“JavaScript／Node 学好了能做什么？”，“前端架构师每天都做些什么？”等等。这些问题并非不能回答，但是第一、问题本身太过泛泛，很难回答的既针对又具体；第二、面对这样的问题一时也想不出从何处着手来回答。我自己觉得如果能配合一个实例来说明一下会比泛泛而谈更有价值，所以这篇文章等待了好久，

2017-06-20 18:10:49 2537

转载 Node.js文件操作详解

Node有一组数据流API，可以像处理网络流那样处理文件，用起来很方便，但是它只允许顺序处理文件，不能随机读写文件。因此，需要使用一些更底层的文件系统操作。本章覆盖了文件处理的基础知识，包括如何打开文件，读取文件某一部分，写数据，以及关闭文件。Node的很多文件API几乎是UNIX（POSIX）中对应文件API 的翻版，比如使用文件描述符的方式，就像UNIX里一样，文件描述符在No

2017-06-20 17:32:53 427

转载 “插件(application/x-vlc-plugin)不受支持”NPAPI和PPAPI的问题

最近做一个前端的项目，项目需要引用VLC浏览器插件，javascript在IE、Firefox等浏览器上都没有问题，唯独在Chrome(谷歌)浏览器中插件不能被会支持。　　不断更换Chrome版本后发现了问题。只有41版本以前才支持VLC插件。后来查阅资料发现，这是NPAPI和PPAPI的问题。　　简单的说，NPAPI（Netscape Plugin API）插件接口最早是

2017-06-19 15:19:25 15038

转载利用vlc插件将IP摄像头嵌入网页和网页播放RTSP流

转载：http://blog.csdn.net/Jeanphorn/article/details/46778391备注：经过验证原文中有些方法已经过时，而且细节有错误，已经改正如下1. 描述　最近有一个项目需要将IP摄像机的画面嵌入到web网页中，考虑到减少开发成本，使用vlc插件播放摄像头提供的RTSP流。在videolan wiki的官网详细介绍了关于vlc web pl

2017-06-19 10:09:56 3425

转载关于favicon.ico的两三事

随便打开一个网页：比如 http://www.baidu.com/可以看到在浏览器的标签头上面显示了一个图标，这个图标是：，也就是我们常说的favicon.ico. 由于这篇文章主要讨论favicon.ico,以及各个浏览器对其的不同处理，所以还是新建web项目如下： home.html 代码如下：DOCTYPE

2017-06-14 16:46:27 1006

转载 IE报vuex requires a Promise polyfill in this browser问题解决

因为使用了 ES6 中用来传递异步消息的的Promise，而IE低版本的浏览器不支持。解决方法第一步：安装 babel-polyfill 。 babel-polyfill可以模拟ES6使用的环境，可以使用ES6的所有新方法npm install --save babel-polyfill第二步：在 Webpack/Browserify/Node中使用在w

2017-06-14 10:17:25 3058

转载为什么我要用 Node.js? 案例逐一介绍

介绍JavaScript 高涨的人气带来了很多变化，以至于如今使用其进行网络开发的形式也变得截然不同了。就如同在浏览器中一样，现在我们也可以在服务器上运行 JavaScript ，从前端跨越到后端，这样巨大的反差让人难以想象，因为仅仅在几年前 Javascript 还如同 Flash 或者 Java applet 那样嵌入网页在沙箱环境中运行。在深入Node.js之前，你可能需要阅

2017-06-09 18:06:44 423

转载 D3，最受欢迎的前端数据可视化库

第一个浏览器只能渲染静态页面，所谓交互性仅限于单击链接。1996年，Netscape在浏览器中内置了JavaScript解释器，从而让浏览器在加载页面时，能够解释执行这门脚本语言编写的代码。这个举措并没有它后来引发的巨变那么惊心动魄，但却让浏览器从被动的显示，进入了交互在线处理动态画面的新时代。这一历史性转变成就了我们今天的页面内交互的Web。如果没有JavaScript，就不会有D3，而

2017-06-09 17:34:37 4160

转载如何评论浏览器最新的 WebAssembly 字节码技术？

这个注定是一个长回答，像我这种不喜欢写字的人，看到这种问题，一般都会在回答和不回答之间纠结一个星期。下面要讲的，其实是一个悲伤的故事。Javascript ，也叫Ecma script, 是这家伙用了 10 天时间赶出来的。

2017-06-09 16:00:07 868

转载 React 和 D3 构建的图表库 Recharts

Recharts 是一个用 React 和 D3构建的重新定义的图表库。这个库能帮助你在 React 应用中轻易绘制图表，Recharts 的主要特点：简单地使用 React 组件进行部署支持原生 SVG，轻量级应用一些 D3 子模块示例：Recharts 的所有组件都十分有条理地分离。lineCharts 由 x 轴, tooltip, grid,

2017-06-09 14:41:28 3052

转载 Source Maps介绍

结合并压缩你的JavaScript和CSS文件能够让你的网站更加优秀。但是，当你需要调试这些压缩文件中的代码就会变成一个噩梦。不要害怕，我们可以通过Source Maps解决这个问题。Source Maps能够提供将压缩文件恢复到源文件原始位置的映射代码的方式。这意味着你可以在优化压缩代码后轻松的进行调试。在Chrome和Firefox的开发工具既附带内置的Source Maps的支持。

2017-06-08 15:23:00 6154

转载 path.resolve(_dirname,filename)__dirname变量

在任何模块文件内部，可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径。在应用程序根目录下新建app.js文件，其中代码如下所示。var testModule1=require('./test/testModule.js');在应用程序根目录下新建一个test子目录，在该目录下新建一个testModule.js文件，其中代码如下所示。console.log

2017-06-08 11:21:42 5142

转载 JavaScript 中函数节流和函数去抖的讲解(简单易懂推荐阅读)

我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响，尤其是在做一些效果实现方面，或者逻辑中需要进行后端请求，更是会导致卡顿，效果失效等结果，所以在处理类似的情况时，可以考虑使用函数节流和函数去抖来解决，至于具体使用哪一种方式，根据实际情况分析定夺,先来讲解一些这两者的概念函数节流：在频繁触发的情况下，需要执行的逻辑只有执行完之后，才能继续执行下一次函数防抖：在频繁触发的情况下，只有...

2017-06-02 15:05:13 416

转载【vue+axios】一个项目学会前端实现登录拦截

一个项目学会前端实现登录拦截一个项目学会vue全家桶+axios实现登录、拦截、登出功能，以及利用axios的http拦截器拦截请求和响应。前言该项目是利用了Github 提供的personal token作为登录token，通过token访问你的Repository List。通过这个项目学习如何实现一个前端项目中所需要的登录及拦截、登出、token失效的拦截及对

2017-06-01 12:02:19 1894

hsany330的专栏