JavaScript on Time Friend

博客 Logo 动画是怎么做的

Thu, 14 Aug 2025 17:00:00 +0000

网站左上角那个小方框, 是视频.

默认灰度, hover 才亮起来, 颜色每次还不一样, 播放速度也会先快后缓. 像被惊醒了一下.

为什么做这个

之前 logo 是张静态 PNG. 总觉得缺了点呼吸感. 正好手头有一段素材, 就把 logo 从静态图换成了视频.

mp4 没有 Alpha 通道

剪映导出时明明去掉了背景, 但 mp4 不支持透明通道, 透明部分被压成了黑色.

桌面端用 mix-blend-mode: screen 解决 — 黑色变完全透明, 只保留亮色部分:

@media (hover: hover) and (pointer: fine) {
 #header #logo { mix-blend-mode: screen; }
}

限定 (hover: hover) 是因为移动端浏览器对 <video> 的 blend mode 支持普遍不好.

移动端改用 <canvas> 做逐像素抠图: video 隐藏继续播放, canvas 每帧取画面, RGB 都低于 30 的像素 alpha 置 0:

function render() {
 canvasCtx.drawImage(videoEl, 0, 0, w, h);
 var src = canvasCtx.getImageData(0, 0, w, h).data;
 var id = canvasCtx.createImageData(w, h);
 for (var i = 0; i < src.length; i += 4) {
 id.data[i] = src[i];
 id.data[i+1] = src[i+1];
 id.data[i+2] = src[i+2];
 id.data[i+3] = (src[i] < 30 && src[i+1] < 30 && src[i+2] < 30) ? 0 : 255;
 }
 canvasCtx.putImageData(id, 0, 0);
 requestAnimationFrame(render);
}

这个性能取决于视频分辨率, logo 尺寸很小, 所以开销可以接受.

首页打字效果是如何实现的

Tue, 12 Aug 2025 11:50:00 +0000

打开首页会看到一行文字在逐字打字, 过几秒又换一句. 这个效果不复杂, 但很多人问怎么做的.

这篇说一下实现方式.

整体原理

首页加载时, 从一个 JSON 文件里随机选一句台词, 用 Typed.js 这个库模拟打字效果.

首页加载
 ↓
main.js 检测到当前是首页
 ↓
根据语言 (中文/英文) 确定取哪个字段
 ↓
从 /data/quotes.json 随机取一条
 ↓
传给 Typed.js, 开始打字动画

数据来源: quotes.json

台词存在 static/data/quotes.json 里.

[
 {
 "en": "Hope is a good thing, maybe the best of things, and no good thing ever dies.",
 "zh": "希望是美好的，也许是世间最美好的事物，而美好的事物永不消逝。",
 "author": "The Shawshank Redemption"
 },
 {
 "en": "Get busy living or get busy dying.",
 "zh": "忙着活，或忙着死。",
 "author": "The Shawshank Redemption"
 }
]

每条数据包含三个字段:

Canvas 处理跨域图片终极方案

Thu, 10 Jan 2019 16:14:25 +0000

浏览器因为安全问题,是不允许Canvas使用 getImageData``toDataURL 处理跨域获取的图片的.

传统解决方法

1.服务器需要配置Access-Control-Allow-Origin

相信这一行代码,大家见过太多,我就赘述了

header("Access-Control-Allow-Origin: 你的域名");

2.设置crossOrigin属性

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var img = new Image();
img.crossOrigin = 'anonymous'; //就是这行代码
img.onload = function () {
 context.drawImage(this, 0, 0);
 context.getImageData(0, 0, this.width, this.height);
};
img.src = 'https://avatars3.xxxx.com/u/496048';

到这里,你的跨域问题已经基本解决. 但是因为一些客观因素后端工程师拒绝帮你设置跨域头,那你该怎么办?

终极解决方案

大致思路是使用ajax获取到图片,然后使用 FileReader转成base64;再使用canvas处理base64格式的图片就好了.

获取图片的base64

function getBase64(imgUrl) {
 return new Promise(((resolve, reject) => {
 window.URL = window.URL || window.webkitURL;
 // 声明一个XMLHttpRequest
 const xhr = new XMLHttpRequest();
 // 获取图片
 xhr.open('get', imgUrl, true);
 xhr.responseType = 'blob';
 xhr.send();
 xhr.onload = function () {
 if (this.status === 200) {
 // 得到一个blob对象
 const blob = this.response;
 const oFileReader = new FileReader();
 oFileReader.onloadend = function (e) {
 const base64 = e.target.result;
 //拿到base64 传出结果
 resolve(base64);
 };
 oFileReader.onerror = function (e) {
 reject();
 };
 oFileReader.readAsDataURL(blob);
 }
 };
 }));
}

Canvas 操作图片

const base64 = await getBase64(imgSrc);
const img = new Image();
img.src = base64;

// canvas 处理
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
img.onload = () => {
 context.drawImage(this, 0, 0);
 context.getImageData(0, 0, this.width, this.height);
};

今天就到这里

幕后英雄Abstract syntax tree抽象语法树

Thu, 03 Jan 2019 17:33:33 +0000

抽象语法树 AST

在计算机科学中，抽象语法树，或简称语法树，是源代码语法结构的一种抽象表示.

这里介绍一个网站 https://astexplorer.net ,可以让你清晰的看到一段js,css以及其他语言被转换成语法树的样子.

在我们的浏览器中,也会对我们的js代码解析成抽象语法书然后再进一步的分析以及下一步的操作.

语法树就前端而言,被利用在各种地方,代码语法的检查，代码风格的检查，代码的格式化，代码的高亮，代码错误提示，代码自动补全,比如:

eslint
JSHint
babel
webpack
rollup
UglifyJS2

等等等等… 根本数不过来.

举个例子

一段代码被解析成语法树后的样子目前业界对抽象语法树是有规范的, 感兴趣的朋友可以查看这个网址: SpiderMonkey

let str ='我是字符串';

to AST

{
 "type": "Program",
 "start": 0,
 "end": 17,
 "body": [
 {
 "type": "VariableDeclaration",
 "start": 0,
 "end": 17,
 "declarations": [
 {
 "type": "VariableDeclarator",
 "start": 4,
 "end": 16,
 "id": {
 "type": "Identifier",
 "start": 4,
 "end": 7,
 "name": "str"
 },
 "init": {
 "type": "Literal",
 "start": 9,
 "end": 16,
 "value": "我是字符串",
 "raw": "'我是字符串'"
 }
 }
 ],
 "kind": "let"
 }
 ],
 "sourceType": "module"
}

Node.js解析抽象语法树的工具

常用js解析工具

esprima
traceur
acorn
shift

使用esprima举个例子

# node环境
> var esprima = require('esprima');
> var program = 'const answer = 42';

> esprima.tokenize(program);
[ { type: 'Keyword', value: 'const' },
 { type: 'Identifier', value: 'answer' },
 { type: 'Punctuator', value: '=' },
 { type: 'Numeric', value: '42' } ]
 
> esprima.parseScript(program);
{ type: 'Program',
 body:
 [ { type: 'VariableDeclaration',
 declarations: [Object],
 kind: 'const' } ],
 sourceType: 'script' }

从前端角度来看声明式编程与命令式编程

Mon, 26 Nov 2018 11:46:35 +0000

引入概念

声明式编程：告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。
命令式编程：命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现。

怎么去解释以上两句话呢?

我们带着这两个概念,用我们最熟悉的技术来解释两种编程范式

声明式编程（Declarative Programming）

告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。

...more code
</head>

<body>
 <div id="box">声明式编程</div>
</body>
</html>

#box {
 width: 100px;
 height: 100px;
 color: #fff;
 background: #000;
}

命令式编程 (Imperative Programming）

命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现。

var oDIv = document.createElement("div");
var text = document.createTextNode("命令式编程");
oDIv.appendChild(text);
oDIv.id = "box";
oDIv.style.width = 100 + "px";
oDIv.style.height = 100 + "px";
oDIv.style.color = "#FFF";
oDIv.style.background = "#000";
document.body.appendChild(oDIv);

总结

以上两个例子,得到的结果是一模一样的.

在我看来,声明式的背后是代码实现的高度抽象,声明式会让工作得到简化.

跨域还可以这样玩,使用CSS3特性做跨域

Tue, 20 Jun 2017 16:14:25 +0000

CSST (CSS Text Transformation)

通过CSS3的content获取内容。

利用js动态创建一个link插入到文档中, 请求css文件.
利用 computedStyle = window.getComputedStyle 获取指定元素的style 对象
利用 computedStyle .content 获取内容

服务端可以返回的 css 文件内容：

 @keyframes anima {
 from {}
 to {
 opacity: 0;
 }
 }
 @-webkit-keyframes anima {
 from {}
 to {
 opacity: 0;
 }
 }
 #CSST {
 content: "${text}";
 animation: anima 2s;
 -webkit-animation: anima 2s;
 }

${text}就是我们要填充的数据

监听函数 animationstart/webkitAnimationStart 来判断css是否加载完成

给#CSST元素设置动画

js逻辑：

function handle () {

 var computedStyle = getComputedStyle(span, false);

 var content = computedStyle.content;

 console.log('content: %s', content);

 var match = content.match(/[\w+=\/]+/);

 // base64解码
 if (match) {
 try {
 content = decodeURIComponent(escape(atob(match[0])));
 } catch (ex) {
 fn(ex);
 return;
 }
 }

 return content
}


var CSST = document.getElementById('CSST');

//监听事件
CSST.addEventListener('animationstart', handler, false);

CSST.addEventListener('webkitAnimationStart', handler, false);

元素动画启动,就可以获取到 content 里的内容了

Object.defineProperty与Proxy的共同之处

Thu, 01 Jun 2017 11:33:33 +0000

在看vue文档的时候发现一个有意思的地方. 就是关于Object.defineProperty的利用与Proxy有相似之处.非常有意思.

文档是这样说的:

把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

Object.defineProperty

语法：

Object.defineProperty(obj, prop, descriptor)

obj：必需。目标对象
prop：必需。需定义或修改的属性的名字
descriptor：必需。目标属性所拥有的特性

返回值:

传入函数的对象。即第一个参数obj

getter/setter 存取器描述

当使用存取器描述属性的特性的时候，允许设置以下特性属性：

var obj = {};
Object.defineProperty(obj,"newKey",{
 get:function (){} | undefined,
 set:function (value){} | undefined
});

当设置或获取对象的某个属性的值的时候，可以提供getter/setter方法。

var obj = {};
var initValue = 'hello';
Object.defineProperty(obj,"newKey",{
 get:function (){
 //当获取值的时候触发的函数
 return initValue; 
 },
 set:function (value){
 //当设置值的时候触发的函数,设置的新值通过参数value拿到
 initValue = value;
 }
});
//获取值
console.log( obj.newKey ); //hello

//设置值
obj.newKey = 'change value';

console.log( obj.newKey ); //change value

是不是很神奇?

但是看到这里,突然想到之前文章里提到过的ES6里新增的Proxy.

举个例子:

var obj={
 a:1
}
var proxyObj = new Proxy(obj,{ //proxyObj会继承obj
 set:function(){
 alert("我被修改了")
 },
 get:function(){
 alert("我被获取了")
 }
 });

 //修改属性
 proxyObj.a=2; //属性被修改后,之前设置的handler会被触发
 console.log(obj.a) // 2

今天就到这里,祝儿童节快乐.

POST请求要比GET安全吗

Mon, 16 Jan 2017 11:46:35 +0000

从学习发送请求的第一天,老师就告诉我们. POST请求,要比GET请求要安全.

为什么?

在利用from发送请求的时代.get请求会夹带信息在地址栏里,而post不会.post会把信息放在body里面.

因为参数放在地址栏里的get请求,会让别人看得见.一些信息难免会暴露.

所以得出,post要比get更加安全.

后来公司新来了一名后台小哥,他说post要比get更安全,于是没有经过任何人同意,把所有的新增接口都设计成了post.当我联调的时候,看着这一连串的post请求,一脸懵逼.开发这么久,我从来不觉得这会有安全问题的存在.

公司前端都是AngularJs的SPA应用. 所以每次发送请求的方式都是Ajax.并不存在get请求的参数会暴露在地址栏的情况.

如果所有的接口,全部变成了post,那我们的代码会变成什么样子呢?

//查找数据
$http.post("xxx.xxx.xxx")

//增加数据
$http.post("xxx.xxx.xxx")

//修改数据
$http.post("xxx.xxx.xxx")

//删除数据
$http.post("xxx.xxx.xxx")

所有的请求都是post,根本没有任何语义,一塌糊涂,非常不利于查看.

大家都知道,请求方式都好几种.

GET
POST
HEAD
PUT
DELETE
OPTIONS
TRACE
CONNECT

对于增删改查都有相应的方式,那我们的代码:

//查找数据
$http.get("xxx.xxx.xxx")

//增加数据
$http.post("xxx.xxx.xxx")

//修改数据
$http.put("xxx.xxx.xxx")

//删除数据
$http.delete("xxx.xxx.xxx")

小结:

在SPA应用里,POST并没有跟GET上有所谓安全性的差异.我们应该使用更加适合的请求方式,来发送以及请求数据.

关于我在工作中项目调试的方法

Wed, 04 Jan 2017 11:46:35 +0000

移动端调试

想要在pc上调试移动端页面,需要做下面几个步骤

PC

1.下载微信web开发者工具;

2.打开微信开发者工具,选择移动调试

3.选择一个请求,把cookie复制出来

4.在电脑chrome打开开发者工具,切换到console输入以下代码 (用于鉴权)

 document.cookie="你刚刚复制的cookie"

5.如果是微信页面,需要用chrome模拟微信浏览器的 user-agent,教程如下:

模拟UA实现访问只能在微信上打开的网页

如果觉得麻烦,可以直接使用微信开发者工具自带的浏览器打开微信页面,里面的user agent,默认是为心里的

做完以上步骤,你就可以正常在电脑上打开移动页面,或者微信网页了

微信开发者模式

如果你的微信帐号被添加到了公众号web开发者名列. 你可以在微信web开发者工具直接输入最原始的链接地址,便可以在电脑上调试了.(因为后台需要跳转好几次,来拿到cookie.最终微信复制出来的地址,是拿不到数据的)

该方法,要把代码部署到服务器上,才可以调试.目前项目的自动化做得还算方便.只要 grunt $build,代码就会自动部署到服务器.

如果想在本地开发环境,直接调试.只要拿到cookie,就可以解决所有问题.

微信web开发者工具的调试器与chrome一致,所以复制出cookie也是很方便的了.接下来,参照以上PC的调试方法.

mac

如果你用mac 并且有iphone,可以使用以下方法

使用safari对webview进行调试

注:无视教程第三步,也不需要xcode.只要是webview 都可以直接调试

我也写一个Canvas惊悚的粒子效果

Sun, 04 Sep 2016 11:46:35 +0000

预览: Canvas简单粒子效果预览

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Canvas简单粒子效果预览</title>
 <style>
 html,
 body {
 margin: 0;
 padding: 0;
 height: 100%;
 overflow: hidden;
 }
 </style>
</head>
<body>
 <canvas id="dotCanvas"></canvas>
 <script>
 (function () {
 //创建canvas对象
 var domConvas = document.getElementById("dotCanvas");
 var oCanvas = domConvas.getContext("2d");

 var winWidth = document.documentElement.clientWidth;
 var winHeight = document.documentElement.clientHeight;

 //设置宽高
 domConvas.width = winWidth;
 domConvas.height = winHeight;

 //初始化点,并且随机给出每一个点的位置与速度
 var dots = [];
 for (var i = 0; i < 300; i++) {
 dots.push({
 x: Math.random() * winWidth >> 0,
 y: Math.random() * winHeight >> 0,
 xm: (amen() ? 1 : 2.5) * (amen() ? -1 : 1),
 ym: (amen() ? 1 : 2.5) * (amen() ? -1 : 1),
 max: 6000
 })
 }

 //随机函数
 function amen() {
 return !!(Math.random() * 10 >> 0) % 2
 }

 dotMove();

 //开始运动
 function dotMove() {
 //清空canvas,便于重绘
 oCanvas.clearRect(0, 0, winWidth, winHeight)

 //给出点新的位置,开始移动
 dots.forEach(function (dot, index) {
 dot.x = dot.x + dot.xm;
 dot.y = dot.y + dot.ym;

 //粒子超出屏幕处理
 if (dot.x < 0 || dot.x > winWidth) {
 dot.xm = dot.xm * -1
 }

 if (dot.y < 0 || dot.y > winHeight) {
 dot.ym = dot.ym * -1
 }

 //重绘画布
 oCanvas.fillRect(dot.x, dot.y, 2, 2);


 //根据距离画线
 for (var i = 0; i < dots.length; i++) {
 var dot2 = dots[i];
 if (dot2 == dot) continue;

 var gou = dot.y - dot2.y;
 var gu = dot.x - dot2.x;

 //勾股定理
 var xian = gou * gou + gu * gu;
 
 if (xian < dot2.max) {
 //如果符合条件 开始画线
 oCanvas.beginPath();
 oCanvas.strokeStyle = 'rgba(0,0,0,1)';
 oCanvas.lineWidth=1;
 oCanvas.moveTo(dot.x, dot.y); //画线的起点
 oCanvas.lineTo(dot2.x,dot2.y) //画线的终点
 oCanvas.stroke()
 }
 }
 })

 //每秒60帧刷新
 requestAnimationFrame(dotMove)
 }

 })()
 </script>
</body>

</html>

JavaScript的运算符优先级

Thu, 25 Aug 2016 11:33:33 +0000

JavaScript 运算符

下表列出了 JavaScript 运算符，并按优先级顺序从高到低排列。具有相同优先级的运算符按从左至右的顺序计算

运算符	说明
.[ ] ( )	字段访问、数组索引、函数调用和表达式分组
++ – - ~ ! delete new typeof void	一元运算符、返回数据类型、对象创建、未定义的值

/ %|相乘、相除、求余数

- +|相加、相减、字符串串联 « » »>|移位 < <= > >= instanceof|小于、小于或等于、大于、大于或等于、是否为特定类的实例 == != === !==|相等、不相等、全等，不全等 & |按位“与” ^|按位“异或” | | 按位“或” && |逻辑“与” || | 逻辑“或” ?: |条件运算 = OP=|赋值、赋值运算（如 += 和 &=） , |多个计算

关于HTML5 History API

Mon, 06 Jun 2016 23:52:35 +0000

关于HTML5 History API

html5加强了history, 在spa页面里面,有两种方法可以修改了网址页面不用刷新,

修改页面的hash值,
利用html5加强后了的pushState

先说所有浏览器都可以使用hash hash 就是我们以前所说的锚点我们对他并不陌生, 我们可以通过

location.hash="212345"

就可以设置网址的hash值,下面是表现形式:

www.xxx.com#212345

在html里利用a标签也是可以修改hash的

<a href="#123456"></a>

当我们修改hash的时候,我们会触发一个事件:

window.onhashchange = function(){
 //do something
}

hash暂且说到这里,下面我们说 pushState

pushState 是history下面的方法

所以我们调用的时候是:

history.pushState()

pushState系列一共有两个方法,一个事件

history.pushState(state, title, url);
history.replaceState(state, title, url);

window.onpopstate

pushState

pushState一共有三个参数,

state: 可以放任意你想放的数据，它将附加到新url上，作为该页面信息的一个补充。

title: 顾名思义，就是document.title。不过这个参数目前并无作用，浏览器目前会选择忽略它。

url: 新url，也就是你要显示在地址栏上的url。

pushState 运行之后,可以记录history

replaceState

也三个参数,作用跟上面是一样的

唯一的不同点是不会记录history

window.onpopstate

history.pushState()不会触发这个事件 history.replaceState()也不会触发这个事件,

当页面前进回退的时候会触发这个事件

事件可以拿到PopStateEvent对象,可以获取到很多关于state的信息

JavaScript的奇淫技巧

Wed, 25 May 2016 11:33:33 +0000

类型转换

数组转字符串

var arr = [1,2,3,4,5,6];
var str = arr+''; //1,2,3,4,5,6

字符串转数字

var str = '999';
var num = str * 1; //999

var str = '999';
var num = str - 0; //999

字符串转数字

var str = '999';
var num = str * 1; // 999

向下取整

var num = ~~1.23232656; // 1

var num = 563.933333 >> 0; // 563

boolean 转换

var bool = !!null; // false
var bool = !!'null'; // true

var bool = !!undefined; // false
var bool = !!'undefined'; // true

var bool = !!0; // false
var bool = !!'0'; // true

var bool=!!''; // true
var bool=!![]; // true
var bool=!!{}; // true

var bool=!!new Boolean('false'); // true
var bool=!!new Boolean('true'); // true

判断对象下面是否有此属性

直接判断

var obj = {a:123};
if(obj.a){ //obj.b ==>123
console.log('运行了') //可以运行
}

if(obj.b){ //obj.b ==>undefined
console.log('运行了') //没有运行
}

var obj2 = {a:false};
if(obj2.a){ //obj.b ==>false
console.log('运行了') //没有运行
}
// 不严谨,如果值为0,undefined,false,null... 也会判断为false

in 操作符

var obj = {a:123};
if('a' in obj){ // 'a' in obj ==>true
console.log('运行了') //可以运行
}

if('b' in obj){// 'a' in obj ==>false
console.log('运行了') //没有运行
}

利用hasOwnProperty

var obj = {a:123};
if(obj.hasOwnProperty('a')){ //==>true
console.log('运行了') //可以运行
}

if(obj.hasOwnProperty('b')){ //==>false
console.log('运行了') //没有运行
}

还有好多好多,得慢慢写

浏览器常用的本地储存方式

Fri, 29 Apr 2016 17:33:33 +0000

日常开发中,难免会遇到一些要求浏览器储存一些数据的需求.目前常用的储存方法有:

cookie设计之初,本身不是用来储存数据.而是区别http请求. 所以每一次http请求,都会带上cookie.如果cookie储存的量实在过大,肯定会造成http的性能问题.

// 设置cookie(储存数据)
function setcookie(name,value,expired,path,domain){
	var now=new Date();
	if(name==null){
		throw "Cookie Name Must not be Null";
		}else if (value==null){
		throw "Cookie Value Must not be Null";
		}else if(expired==null){
		expired=0;
	}
	if(path==null){
		path="/";
	}
	if(domain==null){
		domain=window.location.host;
	}
	now.setTime(now.getTime()+expired*1000);
document.cookie=name+"="+escape(value)+";expires="+now.toGMTString()+";path="+path+";domain="+domain;
}

// 读取cookie(读取数据)
function getcookie(name){
	var allcookie=document.cookie;
	thiscookie=allcookie.match(name+"=[^\\s]*");
	mycookie=thiscookie[0].split("=");
	a=mycookie[1].substring(0,mycookie[1].length-1);
	return unescape(a);
}

localStorage

相对cookie的读取操作,localStorage会简单非常多. 另外localStorage每一次更新,都会触发一次onstorage事件

localStorage.xxx="time-friend.com";
localStorage['xxx']="time-friend.com";
localStorage.setItem("xxx","time-friend.com");
//获取
localStorage.xxx;
localStorage['xxx'];
localStorage.getItem("xxx");
//删除
localStorage.removeItem("xxx");
//清空locaStorage
localStorage.clear();

//onstorage事件
window.addEventListener("storage", function(){
// 做一些你想做的事情
}, false);

Flash ShareObject

这种方式能能解决上面提到的cookie存储的两个弊端，而且能够跨浏览器，应该说是目前最好的本地存储方案。不过，需要在页面中插入一个Flash. 缺点：需要安装Flash插件。

JavaScript on Time Friend

博客 Logo 动画是怎么做的

为什么做这个

mp4 没有 Alpha 通道

首页打字效果是如何实现的

整体原理

数据来源: quotes.json

Canvas 处理跨域图片终极方案

传统解决方法

1.服务器需要配置Access-Control-Allow-Origin

2.设置crossOrigin属性

获取图片的base64

Canvas 操作图片

幕后英雄Abstract syntax tree抽象语法树

抽象语法树 AST

举个例子

Node.js解析抽象语法树的工具

常用js解析工具

使用esprima举个例子

从前端角度来看声明式编程与命令式编程

引入概念

声明式编程 （Declarative Programming）

命令式编程 (Imperative Programming）

总结

跨域还可以这样玩,使用CSS3特性做跨域

CSST (CSS Text Transformation)

Object.defineProperty与Proxy的共同之处

Object.defineProperty

getter/setter 存取器描述

POST请求要比GET安全吗

为什么?

小结:

关于我在工作中项目调试的方法

移动端调试

PC

微信开发者模式

mac

我也写一个Canvas惊悚的粒子效果

JavaScript的运算符优先级

JavaScript 运算符

关于HTML5 History API

pushState

replaceState

window.onpopstate

JavaScript的奇淫技巧

类型转换

数组转字符串

字符串转数字

字符串转数字

向下取整

boolean 转换

判断对象下面是否有此属性

直接判断

in 操作符

利用hasOwnProperty

浏览器常用的本地储存方式

cookie

localStorage

Flash ShareObject

声明式编程（Declarative Programming）