子匠_Zijor | 前端开发 / 程序媛 / 潜心学艺。

分类:JavaScript

JS工具库封装:Video转换成Canvas

在PC端,IE9+浏览器对原生视频的支持还是很不错的,然而一到了移动端就会各种兼容性的坑爹问题。

在移动端,各大浏览器厂商对视频会植入许多他们自定义的交互方式(如默认全屏播放、视频不能初始化播放、窗口置顶等等),更坑爹的是这些被植入的交互还无法去掉。移动端的视频行内自动播放看起来确实很棘手。…

+ 阅读更多

JS工具函数封装:使用隐藏iframe实现跨域表单提交

关于iframe的原理,之前写的一篇文章里面有提及到。使用隐藏iframe进行表单跨域提交的方法封装。这里就不再赘余了,有兴趣的点击链接查看。但是这篇文章封装的JS工具库有些不够通用,所有特地重构了一遍代码,方便以后的直接使用。…

+ 阅读更多

使用隐藏iframe进行表单跨域提交的方法封装

事起缘由:

最近被表单跨域POST提交挤爆了头,特别是要上传大文件时,JSONP就不管用了,FormData的ajax提交虽能提交大文件可惜还是存在跨域报错,各种折磨,坑死姐姐了!…

+ 阅读更多

[小gist] 用正则提取固定字符之间的字符串

在JS的正则零宽断言匹配中,只支持前瞻匹配,不支持后瞻。这就尴尬了,因为在业务当中,我们大多时候是知道了要目标数据的前后缀字符串,但是并不想连同前后缀一起获取。…

+ 阅读更多

【实战】HTML5摄像头拍照组件的封装

摄像头调用主要使用了navigator.getUserMedia()函数。为了将摄像头的画像实时展现,可以将录像数据流导入到video或者canvas中。在展示的时候,建议使用video作为视频流容易,因为canvas绘画视频帧时存在一定的卡顿。…

+ 阅读更多

获取DOM元素的兼容函数库封装(兼容至IE6)

缘由:虽然jQuery的DOM操作兼容性的封装简直堪称完美,而且IE8+浏览器也能使用强大的document.querySelector,然而。。。

然而却还有一些网页并不引用jQuery,而且还希望能兼容至IE6,真是太尴尬了。。。…

+ 阅读更多

【实战】数字线性变化的动画实现(原生JS || jQuery)

在一些数据展示的专题页里,有时候希望数字能动态从某一个数变化到另一个数,以此来吸引用户眼球,突出数据。

于是有了下文。

在这里,我用了两种方式:一种是原生的JavaScript,另一种是jQuery插件。…

+ 阅读更多

【实战】捣鼓一只自定义的video组件(目前只能在Mobile中使用)

这是一只只能在Mobile下使用的Video自定义组件。

为什么只能在Mobile下使用?。。。因为我将鼠标事件都换成了Touch事件。。。等我有空了再添加兼容手势库吧。…

+ 阅读更多

【实战】用原生JavaScript封装一个hash路由组件

事起缘由:最近做了不少的活动页面,其中一些页面需要用到单页面的技术做切换。因为常用,所以考虑封装。

虽然市面上有不少路由库,但是如果为了这么简单的一个小功能就去引入一个庞大的库,显然是不优雅的。最优雅的方式是亲手撸一个~(•‾̑⌣‾̑•)~…

+ 阅读更多

【实战】封装一个audio音频组件

备注:因为懒得去重复些一堆的事件兼容性函数,先用jQuery库快速捣鼓一个audio音频组件。等以后有空了,再干掉jQuery库的依赖,用纯JavaScript重构一下。…

+ 阅读更多

原生JS:无刷新表单的兼容性封装(IE6+)

在做form表单提交的时候,都会遇到一个非常尴尬的事情:就是浏览器默认的submit功能竟然会刷新当前页面,并跳转至action链接

这(“▔□▔) Σ<(=~д~=!)>…

+ 阅读更多

AngularJS依赖注入原理分析

正在施工 ing,先占个坑,慢慢填。。。。。…

+ 阅读更多

【实战】AngularJS实现拖拽组件

正在施工 ing,先占个坑,慢慢填。。。。。…

+ 阅读更多

JavaScript中对象的深拷贝

在JavaScript中,对对象进行拷贝的场景比较常见。但是简单的复制语句只能对对象进行浅拷贝,即复制的是一份引用,而不是它所引用的对象。而更多的时候,我们希望对对象进行深拷贝,避免原始对象被无意修改。…

+ 阅读更多

JavaScript中的函数节流

一. 背景

在一些场景下,函数有可能会被频繁地调用,而这些函数本身占用的内存或计算较大时,就可能造成大的性能问题。譬如以下场景:

  • window.onresize事件。window.onresize事件在浏览器窗口大小改变时被触发,而且浏览器每改变1px,该事件就被触发一次,触发的频率非常的高。如果在window.onresize事件中涉及到一些DOM节点相关的操作时,而DOM操作往往是非常耗内存的,这时浏览器有可能出现卡顿甚至崩溃的情况。
+ 阅读更多

学习笔记:JavaScript 函数柯里化

一. 函数柯里化的定义

函数柯里化,Function currying,又称部分求值,指的是逐步传参,逐步求解的过程。

二. 函数柯里化的实现

一个Curry函数首先会接受一些参数,接受参数之后,该函数并不会立即求值,而是继续返回另一个函数,刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候,之前传入的所有参数都会被一次性用于求值。…

+ 阅读更多

设计模式笔记(五):JavaScript中的装饰者模式

一. 装饰者模式的定义

装饰者模式的定义:动态地给一个对象添加额外的职责,而不会影响从这个类派生的其他对象。

二. 装饰者模式的实现

装饰者模式能够在不改变对象自身的基础上,在程序运行期间给对象动态添加职责。…

+ 阅读更多

设计模式笔记(四):JavaScript中的中介者模式

一. 中介者模式的定义

中介者模式的定义:用一个中介对象来封装一系列的对象交互。中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互。

+ 阅读更多

设计模式笔记(三):JavaScript中的代理模式

一. 代理模式的定义

代理模式的定义:为其他对象提供一种代理,以控制对着这个对象的访问。

在代理模式中,一个对象充当另一个对象的接口。

这种模式看起来像是额外的开销,但是出于性能因素的考虑却是非常有用的。代理充当了本体对象的守护对象,并且试图使本体对象做尽可能少的工作。…

+ 阅读更多

设计模式笔记(二):JavaScript中的策略模式

一. 策略模式的定义

策略模式的定义:定义了算法家族,分别封装起来,让它们之间可以相互替换。

策略模式的目的是想将算法的使用与实现分离开来。

二.

+ 阅读更多

设计模式笔记(一):JavaScript中的单例模式

单例模式是一种常见的模式,如果希望系统中一个类只有一个实例,那么单例模式是最好的解决方案。

一. 单例模式的定义

单例模式的定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点。

+ 阅读更多

canvas转base64/jpeg时,透明区域变成黑色背景的解决方案

问题:png图片转jpeg时,透明区域被填充成黑色

在用canvas将png图片转jpeg时,发现透明区域被填充成黑色。

代码如下:

<p>Canvas:</p>
<canvas id="canvas"
+ 阅读更多

JavaScript:获取url的querystring参数

一. 获取url的querystring参数

获取url的querystring参数的两种方法如下:

1.1 方法一:正则匹配

//获取url中的参数
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)",
+ 阅读更多

理解Function.prototype.bind()方法

一. bind的语法

bind 是 ES5 中新增的一个方法,可以改变函数内部的this指向。

1.1 定义

bind()的定义如下:

The bind() method creates a new function that, when called, has its this keyword set to the

+ 阅读更多

原生JavaScript实现复制/粘贴

在IE7及其以下版本浏览器中,由于不具备直接访问剪贴板的能力,开发者只能借助于flash插件来实现这一功能。

而现在不部分现在浏览器支持剪贴板功能,Mac和iOS上的Safari除外。但是不同浏览器的支持程度不尽相同,而且一些功能并不完整或存在缺陷,需要考虑的兼容性问题较多。用户必须通过点击鼠标或按键的方式来主动触发,脚本并不能随时操纵剪贴板。…

+ 阅读更多

JavaScript cookie 的工具函数封装

一. 语法

1.1 获取当前页面的所有cookie:

var allCookies = document.cookie;

allCookies 是一个字符串,其中包含了以分号分隔的cookie列表字符串 (即 key=value 键值对)。

1.2 写一个新cookie:

+ 阅读更多

canvas在高倍屏下变模糊的处理办法

一. 事起缘由

最近在用Canvas做社区网站的技能雷达图,如下图所示。

一倍屏下的显示情况:

image_1au479vu344r18fqg3b74a4859.png-7.2kB

二倍屏下的显示情况:

mohu.png-12.3kB

正当我很开心的准备发布出去时,用Mac Book…

+ 阅读更多

学习笔记:Notification API

Notification API 是浏览器的通知接口,用于在用户的桌面上显示通知信息,桌面电脑和手机都适用。具体的实现形式由浏览器自行部署,对于手机来说,一般显示在顶部的通知栏。…

+ 阅读更多

Web RTC学习笔记

备注:初学,整理一下资料~~

WebRTC,网页实时通信,Web Real-Time Communication的缩写,是一个支持网页浏览器进行实时语音通话或视频聊天的技术,是谷歌2010年以6820万美元收购Global…

+ 阅读更多

学习笔记:JavaScript中的继承

许多OOP语言都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。由于函数没有签名,在ECMAScript中无法实现接口继承。ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的。…

+ 阅读更多