Web前端 - 轩枫阁 – 前端开发

JS实用技巧手记（八）

本系列文章旨在记录一些实用的javascript技巧，既可以作为一个知识的积累，又可以作为闲暇时打发时间写写代码的记录。同时也方便日后翻阅~

1. 实现base64解码

function base64_decode(data){

var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,ac = 0,dec = "",tmp_arr = [];

if (!data) { return data; }

data += '';

do {

h1 = b64.indexOf(data.charAt(i++));

h2 = b64.indexOf(data.charAt(i++));

h3 = b64.indexOf(data.charAt(i++));

h4 = b64.indexOf(data.charAt(i++));

bits = h1 << 18 | h2 << 12 | h3 << 6 | h4;

o1 = bits >> 16 & 0xff;

o2 = bits >> 8 & 0xff;

o3 = bits & 0xff;

if (h3 == 64) {

tmp_arr[ac++] = String.fromCharCode(o1);

} else if (h4 == 64) {

tmp_arr[ac++] = String.fromCharCode(o1, o2);

} else {

tmp_arr[ac++] = String.fromCharCode(o1, o2, o3);

}

} while (i < data.length);

dec = tmp_arr.join('');

dec = utf8_decode(dec);

return dec;

}

掌握一个 MVC 框架，最关键的一节就是掌握如何在各个 View 之间通信。之前用 Angular 时，觉得基于事件的通信方式 ($on, $emit, $boardcast) 或者基于 service 的方式都非常好用。转战 Backbone 之后，由于对 Backbone 的事件机制理解不够且使用非常灵活，一直没找到一个好的通信方式。直到看见这篇文章，作者通过一个简单的例子，层层深入，把 Backbone View 之间通信的三种方式讲的清晰明了。译文如下（已拿到授权）：

我正在开发的这个网页主要有两部分，分别是 document 和 sidebar。

Backbone Application

如上图所示，我设立了三个视图 (view) :

ApplicationView – 作为最外层视图来包含下级视图
DocumentView – 展示正在编辑或浏览的内容
SidebarView – 展示一些和 document 相关的信息查看全文

2016/12 18 周日

表单格式化插件jquery.serializeJSON

前言

前端在处理含有大量数据提交的表单时，除了使用Form直接提交刷新页面之外，经常碰到的需求是收集表单信息成数据对象，Ajax提交。

而在处理复杂的表单时，需要一个一个区手动判断处理字段值，显得非常麻烦。接下来介绍的插件将解决这个问题。

关于serializeJSON

使用jquery.serializeJSON，可以在基于jQuery或者Zepto的页面中，调用 .serializeJSON() 方法来序列化form表单的数据成JS对象。

使用

下载：https://github.com/marioizquierdo/jquery.serializeJSON

只需要在jQuery或者Zepto时候引入即可查看全文

2016/12 17 周六

Subresource Integrity 介绍

GitHub 宣布启用 SRI 策略，用来减少由「托管在 CDN 的资源被篡改」而引入的 XSS 等风险。很多小伙伴对此表示关注。那么 SRI 究竟是什么，如何使用 SRI，它的适用场景和局限性是什么？本文逐一解答。

SRI 是什么？

SRI 是 Subresource Integrity 的缩写，一般按照字面意义翻译为：子资源完整性（草案），它也是由 Web 应用安全工作组（Web Application Security Working Group）发布。草案地址见这里。

Web 性能优化中很重要的一点是让请求提前结束，让可缓存的资源走 CDN 是最通用的做法。CDN 服务提供商通过分布在各地的节点，让用户从最近的节点加载内容，大幅提升速度。但是 CDN 的安全性一直是一个风险点：对于网站主来说，让请求从第三方服务器经过，由第三方响应，安全方面肯定不如自己服务器可控。

我们知道 CSP（Content Security Policy）的外链白名单机制可以在现代浏览器下减小 XSS 风险。但针对 CDN 内容被篡改而导致的 XSS，CSP 并不能防范，因为网站所使用的 CDN 域名，肯定在 CSP 白名单之中。这时候，SRI 就应运而生了。它通过对资源进行摘要签名机制，来保证外链资源的完整性（不被篡改）。

目前支持 SRI 的浏览器有 Chrome 45+ 和 FireFox 43+。IE Edge 表示考虑中，将其列入了需求池，接受用户投票。CanIUse 网站目前尚未提供 SRI 支持度数据，但是已经有人提了 Issue，后续应该会加上。查看全文

2016/12 12 周一