子匠_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中的策略模式

一. 策略模式的定义

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

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

二.

+ 阅读更多