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

分类:JavaScript

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

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

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

+ 阅读更多

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

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

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

+ 阅读更多

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

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

+ 阅读更多

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

+ 阅读更多