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

分类:JavaScript

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

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

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

目前主流有两种方法处理移动端的视频播放问题:

一种是改设计和说服需求方,…

+ 阅读更多

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

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

github地址:https://github.com/dengzhirong/fakeAjax

工具库代码重构后如下:

/* 
 * 使用隐藏的iframe发送表单提交
 * Author:
+ 阅读更多

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

事起缘由:

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

奈何后台不会为此专门设置CORS,早有耳闻复杂的iframe可以实现无刷新表单提交,只是就不想去碰。闻说ajaxForm也有无刷新表单提交的功效,于是前往尝…

+ 阅读更多

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

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

为了模拟后瞻,我想,要不就用笨方法,先将前后缀字符串一同提取,然后再讲前后缀字符串一同replace为空字符串。于是就有了下面这个简单的方法,但确实很实用:

// 提取固定字符之间的字符串
function getInnerString(source,
+ 阅读更多

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

摄像头调用主要使用了navigator.getUserMedia()函数。为了将摄像头的画像实时展现,可以将录像数据流导入到video或者canvas中。在展示的时候,建议使用video作为视频流容易,因为canvas绘画视频帧时存在一定的卡顿。
在像素数据分析和将画像转成图片,则应将视频流导到canvas中,使用canvas API中进行数据提取。

在这里,我使用了一个隐藏…

+ 阅读更多

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

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

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

所以封装获取DOM元素的方法库,备不时之需,权当练手。

直接上代码:

var domUtil = {
    // 获取DOM元素
    get: function(query) {
        var _this = this;
+ 阅读更多

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

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

于是有了下文。

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

数字线性变化的原理很简单,就是让数字增量变化,并循环动画。

原生JS版

首先获取DOM元素。为了兼容到IE6,兼容性方法如下:

var domUtil = {
    // 获取DOM元素
    get: function(query)
+ 阅读更多

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

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

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

Talk is cheak, show you the code. 直接上代码:

JS组件代码:

/**
 * video插件Mobile版(只兼容mobile)
 * @params: options对象,属性如下:
 *     ele   {String/jQuery DOM/Javascript
+ 阅读更多

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

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

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

还好几十行代码就能搞得掂。

组件代码:

/**
 * 路由配置组件
 * 方法:
        @method set(_hash, callback)  # 配置路由信息,
+ 阅读更多

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

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

这个组件包含进度条拖拽,支持自定制audio的样式。体验如下:

直接上代码:

组件代码:

/*
* 音频组件
* options参
+ 阅读更多

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

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

这(“▔□▔) Σ<(=~д~=!)> (~▽~”) (~_~|||) – … …

一般来说,这个action链接都是处理表单并返回一些文本信息的Controller函数,以空白…

+ 阅读更多

AngularJS依赖注入原理分析

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

+ 阅读更多

【实战】AngularJS实现拖拽组件

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

+ 阅读更多

JavaScript中的函数节流

一. 背景

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

  • window.onresize事件。window.onresize事件在浏览器窗口大小改变时被触发,而且浏览器每改变1px,该事件就被触发一次,触发
+ 阅读更多

学习笔记:JavaScript 函数柯里化

一. 函数柯里化的定义

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

二. 函数柯里化的实现

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

如下:

var add = (function() {
    var numArr
+ 阅读更多

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

一. 装饰者模式的定义

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

二. 装饰者模式的实现

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

在JavaScript的实际实现中,可以将本体对象放到装饰者对象中,这些对象以一条链的方式进…

+ 阅读更多

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

一. 中介者模式的定义

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

中介者模式的作用是接触对象与对象之间的紧耦合关系。

二. 中介者模式的实现

在中介者模式中,独立的对象(colleague)之间并不直接通信,而是通过中介者对象。当其…

+ 阅读更多

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

一. 代理模式的定义

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

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

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

二. 代理模式的适用场景

代理模式的适用场景有:

  • 延迟一个大对象的实例化
  • 访问远程对象
  • 访问控制
  • … …

三. 代理模式的实现

+ 阅读更多

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

一. 策略模式的定义

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

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

二. 策略模式的实现

究其本质,策略模式使用委托去解耦使用它们的算法类。

基于策略模式的程序至少由两部分组成:

  • 第一部分是一组 策略类。策略类封装了具体的算法,并负责具体的计算过程。
  • 第二部分是 环境类 Context。Context接受客户请求,并将请求委托给某一个策略类。

例如:…

+ 阅读更多

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

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

一. 单例模式的定义

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

二. 单例模式的实现原理

用一个变量来标志当前是否已经为某个类创建过对象。如果是,则在下一次获取该类的实例时,直接返回之前创建的对象。

三. 单例模式的优点

单例模式的优点有:

  • 内存中只有一个对象,节省内存空间;
  • 避免频繁
+ 阅读更多

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

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

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

代码如下:

<p>Canvas:</p>
<canvas id="canvas" style="border: 1px solid #ccc;"></canvas>
<br>
<p>Base64转码后的图片:</p>
+ 阅读更多

JavaScript:获取url的querystring参数

一. 获取url的querystring参数

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

1.1 方法一:正则匹配

//获取url中的参数
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", i); // 匹配目标参数
    var result = window.location.search.substr(1).match(reg);
+ 阅读更多

理解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 provided value, with a given sequence of arguments preceding any provided when

+ 阅读更多

原生JavaScript实现复制/粘贴

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

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

下面总结一下剪贴板的JavaScript语法。

一. 剪

+ 阅读更多

JavaScript cookie 的工具函数封装

一. 语法

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

var allCookies = document.cookie;

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

1.2 写一个新cookie:

document.cookie = updatedCookie;

updatedCookie是一个键值对形式的字符串。只能用这个…

+ 阅读更多

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

一. 事起缘由

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

一倍屏下的显示情况:

image_1au479vu344r18fqg3b74a4859.png-7.2kB

二倍屏下的显示情况:

mohu.png-12.3kB

正当我很开心的准备发布出去时,用Mac Book 开发的同事跟我说,这简直是糊得不要不要的呀~( ╯□╰ )~。。纳尼可是我的华硕显示十分完美呀,这就十分尴尬了。

猜想是Canvas毕竟类似于位图,在Retina屏下如果不做多倍屏显示处理的话,图片应该会模糊。Google了一翻,果然如此。

二. 问题分析

+ 阅读更多

学习笔记:Notification API

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

如果网页代码调用这个API,浏览器会询问用户是否接受。只有在用户同意的情况下,通知信息才会显示。

一. 检查浏览器是否支持 Notification API:

if (window.Notification) {
    // 支持
} else {
    // 不
+ 阅读更多

Web RTC学习笔记

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

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

WebRTC提供了实时音视频的核心技术,包括音视频的采集、编…

+ 阅读更多

学习笔记:JavaScript中的继承

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

实现对象集成集中方法如下:

一. 原型链继承

使用原型链集成的基本思想,是利用原型让一个引用类型集成另一个引用类型的属性和方法。

本质就是重写原…

+ 阅读更多

学习笔记:JavaScript对象创建模式

在JavaScript中创建对象是很容易的,可以使用对象字面量或者构造函数。常用的创建对象的模式有以下几种:

一. 工厂模式

工厂模式抽象了具体对象的过程,用函数来封装以特ing接口创建对象的细节。

如下:

function createAnimal(name, age) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.sayName = function() {
        alert(this.name);
+ 阅读更多