js 获取图片尺寸

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// HTML5提供了一个新属性naturalWidth/naturalHeight可以直接获取图片的原始宽高。
// 这两个属性在Firefox/Chrome/Safari/Opera及IE9里已经实现。改造下获取图片尺寸的方法。
// 注意IE6/7/8的处理,创建了一个新的img,仅设置其src,这时需要让图片完全载入后才可以获取其宽高。
// 因此这里是异步的,可以传一个回调,回调里把原始的宽高作为参数传入。
function getImgNaturalDimensions(img, callback) {
var nWidth, nHeight;
if (img.naturalWidth) { // 现代浏览器
nWidth = img.naturalWidth
nHeight = img.naturalHeight
}
else { // IE6/7/8
var imgae = new Image()
image.src = img.src
image.onload = function() {
callback(image.width, image.height)
}
}
return [nWidth, nHeight]
}

短小强悍的 Javascript 异步调用库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var queue = function(funcs, scope) {
(function next(){
if(funcs.length > 0){
funcs.shift().apply(scope, [next].concat(Array.prototype.slice.call(arguments, 0)));
}
})();
}
// Example
var obj = { value: null };
queue([
function(callback){
var me = this;
setTimeout(function(){
me.value = 10;
callback(20);
});
},
function(callback, add){
console.log(this.value + add);
callback();
},
function(){
console.log(obj.value);
}
], obj);
// console: 30
// console: 10

meta 标签知识汇总

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html> <!-- HTML5 doctype 不区分大小写 -->
<html lang="zh-cmn-Hans-CN"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 优先使用IE最新版本和 Chrome -->
<meta name="renderer" content="webkit|ie-comp|ie-stand"> <!-- 360 浏览器内核控制 -->
<!--
content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。
若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核,增加标签:<meta name="renderer" content="ie-stand">
-->
<!-- width=device-width 会导致 iPhone 5 添加到主屏后以 WebAPP 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
<meta name ="viewport" content ="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏时的标题 -->
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebAPP 全屏模式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 状态条颜色 -->
<meta name="format-detection" content="telephone=no" /> <!-- 屏蔽数字自动识别为电话号码 -->
<!-- favicon 图标 -->
<link type="image/x-icon" rel="icon" href="http://static.example.com/favicon.ico"/>
<link type="image/x-icon" rel="shortcut icon" href="http://static.example.com/favicon.ico"/>
<link type="image/x-icon" rel="bookmark" href="http://static.example.com/favicon.ico"/>
<!-- iOS 图标 begin -->
<!--默认 57x57 像素-->
<link rel="apple-touch-icon-precomposed" href="http://wanke.etao.com/assets/img/icon/57/apple-touch-icon-57x57-precomposed.png" />
<!--iPad 1 72x72 像素-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://wanke.etao.com/assets/img/icon/72/apple-touch-icon-72x72-precomposed.png" />
<!--iPhone 4 114x114 像素-->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://wanke.etao.com/assets/img/icon/114/apple-touch-icon-114x114-precomposed.png" />
<!-- iOS 图标 end -->
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
<!-- SEO 优化 -->
<meta name="description" content="" /> <!-- 页面描述 -->
<meta name="keywords" content=""/> <!-- 页面关键词 -->
<title>页面标题</title>
<!-- iOS 应用启动界面设置 begin -->
<!-- iPad Landscape – 1024 x 748 -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
<!-- iPad Portrait – 768 x 1004 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />
<!-- iPhone/iPod Touch Portrait – 320 x 480 (standard resolution) -->
<link rel="apple-touch-startup-image" href="img/splash-screen-320x480.png" />
<!-- iPhone/iPod Touch Portrait – 640 x 960 pixels (high-resolution) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
<!-- iOS 应用启动界面设置 end -->
</head>
<body>
</body>
</html>

ubb 标签正则匹配

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function ubbTrans(s){
if(s.indexOf("://") > 0){
// url
s = s.replace(/(^|[^\"\'\]])(http|ftp|mms|rstp|news|https)\:\/\/([^\s\033\[\]\"\']+) /gi, "$1[url]$2://$3[/url]");
// img
s = s.replace(/\[url\](http\:\/\/\S+\.)(gif|jpg|jpeg|png)\[\/url\]/gi, "[img]$1$2[/img]");
}
//ubb: 匹配[UBB]...[/UBB]形式
if(s.match(/\[(\w+)([^\[\]\s]*)\].*\[\/\1\]/)){
s = s.replace(/\[url\](.+?)\[\/url\]/gi,"<a href=$1 target=_blank>$1</a>");
s = s.replace(/\[img\](.+?\.(?:gif|jpg|jpeg|png))\[\/img\]/gi, "<img src='$1' alt='$1'>");
s = s.replace(/\[flash\](.+?\.swf)\[\/flash\]/gi, "<embed src='$1' quality=high wmode=transparent type='application/x-shockwave-flash' width=400 height=300></embed><br> FLASH: <a href='$1' target=_blank>$1</a><br>");
s = s.replace(/\[wma\](.+?\.(?:wma|mp3))\[\/wma\]/gi, "<embed src='$1' height=40 AutoStart=0></embed><br> WMA: <a href='$1' target=_blank>$1</a><br>");
s = s.replace(/\[color=([#0-9a-zA-Z]{1,10})\](.+?)\[\/color\]/gi, "<font color='$1'>$2</font>");
s = s.replace(/\[b\](.+?)\[\/b\]/gi, "<b>$1</b>");
s = s.replace(/\[i\](.+?)\[\/i\]/gi, "<i>$1</i>");
}
return s;
}

setInterval 计时误差解决方案

在 js 中如果打算使用 setInterval 进行倒数,计时等功能,往往是不准确的,因为 setInterval 的回调函数并不是到时后立即执行,而是等系统计算资源空闲下来后才会执行。而下一次触发时间则是在 setInterval 回调函数执行完毕之后才开始计时,所以如果 setInterval 内执行的计算过于耗时,或者有其他耗时任务在执行,setInterval 的计时会越来越不准,延迟很厉害。

Backbone 0.9.2 源码分析

Backbone.js 为复杂 WEB 应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数的丰富API;视图可以声明事件处理函数,并通过 RESRful JSON 接口连接到应用程序。

JavaScript 实现简单的双向数据绑定(译)

双向数据绑定指的就是,绑定对象属性的改变到用户界面的变化的能力,反之亦然。换种说法,如果我们有一个 user 对象和一个 name 属性,一旦我们赋了一个新值给 user.name,在 UI 上就会显示新的姓名了。同样地,如果 UI 包含了一个输入用户姓名的输入框,输入一个新值就应该会使 user 对象的 name 属性做出相应的改变。

很多热门的 JS 框架客户端如 Ember.js,Angular.js 或者 KnockoutJS,都在最新特性上刊登了双向数据绑定。这并不意味着从零实现它很难,也不是说需要这些功能的时候,采用这些框架是唯一的选择。下面的想法实际上很基础,可以被认为是3步走计划:

(翻译)使用200行代码创建属于你自己的精简版angular

第一次翻译外文,就拿这篇作为第一次练习。加上一些自己的理解并且做了些删减。

正文开始:

我的实践经验证明有两种好方法来学习一项新技术

  • 自己重新实现这个项目

  • 分析那些你所知道的技术概念是如何运用在这个项目里的

在一些情况下第一种方式很难做到。比如,如果你为了理解 kernel(linux内核)的工作原理而去重新实现一次它会很困难很慢。往往更有效的是你去实现一个轻量的版本,去除掉那些你没兴趣的技术细节,只关注核心功能。

第二种方法一般是很有效的,特别是当你具有一些相似的技术经验的时候。最好的证明就是我写的 angularjs-in-patterns,对于有经验的工程师来说这是个对 angular 框架非常好的介绍。

javascript实现数据双向绑定的三种方式

前端数据的双向绑定方法

前端的视图层和数据层有时需要实现双向绑定(two-way-binding),例如 mvvm 框架,数据驱动视图,视图状态机等,研究了几个目前主流的数据双向绑定框架,总结了下。目前实现数据双向绑定主要有以下三种。

1、手动绑定

比较老的实现方式,有点像观察者编程模式,主要思路是通过在数据对象上定义 get 和 set 方法(当然还有其它方法),调用时手动调用 get 或 set 数据,改变数据后出发 UI 层的渲染操作;以视图驱动数据变化的场景主要应用于 input、select、textarea 等元素,当 UI 层变化时,通过监听 dom 的 change,keypress,keyup 等事件来出发事件改变数据层的数据。整个过程均通过函数调用完成。