Chrome 插件网络相关接口的应用
In 未分类 on 2015年05月08日 by view: 1,255
0
  • chrome.webRequest.XXX 用于网络流量的统计监控、修改请求和响应
  • chrome.proxy.XXX 用于代理的管理

抓包的时候偶尔会遇到返回的 json 串在 prevew 窗口不能显示成对象的形式，如下：

理想的：

这种情况是响应头 content-type 不正确造成的，可以使用 chrome.webRequest.onHeadersReceived.addListener() 修改响应头

相应的可以用 chrome.webRequest.onBeforeSendHeaders.addListener() 修改请求头

两个接口可以修改几乎所有的头，包括 cookie 相关的，因此可以实现一个 cookie 的管理

自定义请求/响应头的插件：

https://github.com/feix760/chrome_custom-headers

某个 tab cookie 独立的插件 (可以让浏览器登录多个账号)：

https://github.com/feix760/Chrome_CookieSeparator

chrome.proxy.XXX 可以实现 SwitchySharp 的功能

chrome.webRequest.XXX 不能做到修改响应数据、host 映射等。虽然从安全的角度思考这是异想天开，但有自由访问文件系统的接口（需要用户 2 次确认这种权限），如果能做到真想把 fiddler 的功能集成到 chrome 里去

继续阅读

尝试利用捕获来做上报
In 未分类 on 2015年05月08日 by view: 557
0

标准浏览器的事件模型是先捕获再冒泡，由于考虑到兼容问题，事件绑定一般都是基于冒泡来做的，那么什么情况下可以考虑利用捕获来做事件绑定呢？

最近在做的课程查找页上报需求的时候，有两个问题要解决：

  1. 清理之前做的上报
  2. 重新添加新的上报

如果在原来的基础上直接改当然可以，但是将上报和业务代码耦合显然不是理想的解决方案，由于内嵌的 webview 是 chromium， 不用考虑兼容问题，于是尝试利用捕获来处理。

  1. 大多数的上报都是点击上报
  2. 捕获先于冒泡，不用考虑 stopPropagation 的影响

所以可以在最外层，基于捕获来绑定事件：

以上，所有要上报的点都可以在 switch 里完成，同时可以避免和业务逻辑的耦合。

此外，对于页面资源的加载监控等也可以使用捕获来做。

继续阅读

DNS，node 以及反向代理的一些知识和应用
In 未分类 on 2015年05月07日 by view: 1,439
0

概念

域名系统（英文：Domain Name System，缩写：DNS）是因特网的一项服务。它作为将域名和 IP 地址相互映射的一个分布式数据库，能够使人更方便的访问互联网。DNS 使用 TCP 和 UDP 端口 53。当前，对于每一级域名长度的限制是 63 个字符，域名总长度则不能超过 253 个字符。
正向解析：从域名到 ip 的转换
反向解析：从 ip 到域名的转换

  • 根域
    就是一个"."， 就是我们的网址，比如 www.example.com，实际是"www.example.com.", 最后是有一个点的。当然一般是被我们忽略了的。
    全球共有 504 个根域服务器，分为 13 组。
  • 域的划分
    一种是按性质划分，如 org.,edu. 等，另一中是按国家划分, 如 cn.,jp. 等
    每个域都有自己的域名服务器，也叫做权威服务器。
    如 example.com 就是顶级域名，而 www.example.com 就表示 example.com 域下面的一个 www 主机。当然也有网站直接将顶级域名映射到 www 这个主机上的，这样就可以直接通过顶级域名来访问主机。

解析步骤

1、在浏览器中输入 www.example.com 域名，操作系统会先检查自己本地的 hosts 文件是否有这个网址映射关系，如果有，就先调用这个 IP 地址映射，完成域名解析。
2、如果 hosts 里没有这个域名的映射，则查找本地 DNS 解析器缓存，是否有这个网址映射关系，如果有，直接返回，完成域名解析。
3、如果 hosts 与本地 DNS 解析器缓存都没有相应的网址映射关系，首先会找 TCP/ip 参数中设置的首选 DNS 服务器，在此我们叫它本地 DNS 服务器，此服务器收到查询时，如果要查询的域名，包含在本地配置区域资源中，则返回解析结果给客户机，完成域名解析，此解析具有权威性。
4、如果要查询的域名，不由本地 DNS 服务器区域解析，但该服务器已缓存了此网址映射关系，则调用这个 IP 地址映射，完成域名解析，此解析不具有权威性。
5、如果本地 DNS 服务器本地区域文件与缓存解析都失效，则根据本地 DNS 服务器的设置（是否设置转发器）进行查询，如果未用转发模式，本地 DNS 就把请求发至 13 组根 DNS，根 DNS 服务器收到请求后会判断这个域名 (.com) 是谁来授权管理，并会返回一个负责该顶级域名服务器的一个 IP。本地 DNS 服务器收到 IP 信息后，将会联系负责.com 域的这台服务器。这台负责.com 域的服务器收到请求后，如果自己无法解析，它就会找一个管理.com 域的下一级 DNS 服务器地址 (example.com) 给本地 DNS 服务器。当本地 DNS 服务器收到这个地址后，就会找 example.com 域服务器，重复上面的动作，进行查询，直至找到 www.example.com 主机。
6、如果用的是转发模式，此 DNS 服务器就会把请求转发至上一级 DNS 服务器，由上一级服务器进行解析，上一级服务器如果不能解析，或找根 DNS 或把转请求转至上上级，以此循环。不管是本地 DNS 服务器用是是转发，还是根提示，最后都是把结果返回给本地 DNS 服务器，由此 DNS 服务器再返回给客户机。

node 框架

npm 上有一个 dns 的框架，可以做域名解析

  • 安装

  • 正向解析

  • 反向解析

更多 API，这里

实战

一个反向代理的小实践

实现一个本地的服务，对于普通文件则直接取本地文件，对于请求则转发到服务器上，可配置希望转发的具体 ip。
代码会上传到 github 上。

继续阅读

sublime 的 colorscheme
In 未分类 on 2015年05月07日 by view: 922
0

想让 markdown 高亮，找了点插件，比如

https://github.com/jonschlinkert/sublime-markdown-extended

可以让代码块高亮。但没有达到我想要的效果，我想让 markdown 的每个部分高亮，比如 # 标题 高亮。

然后找到了

sublime-monokai-extended

这个达到了我的效果，但是将整个的 color scheme 都改了，自然不行。

现在的问题是——

在当前的 color scheme 高亮 markdown

继续寻找，然后找了这个

markdown.xml

按照上面说的，将代码复制到我的 Obsidian.tmTheme ，成功了。在现有 color scheme 上高亮了 markdown 。

但是头疼的是，我不喜欢他的 标题 颜色，想改。看了代码，摘录一段：

一头雾水，完全不知道 how does it working ，也就无从改起。

没有解决不了的问题，找了半天，这篇博客

Tips For Creating Sublime Text Color Schemes

解决了我的问题。其中的 tip1 尤其好——

Sublime text color schemes work by defining colors for scopes. A syntax definition matches the different parts of the file’s text (e.g. functions, classes, keywords, etc.) and maps them to a named scope. Then the color scheme specifies what colors to use for what scopes.
The hard part comes when you see a particular piece of syntax you want to style a specific way, but you do not know what scope it is. I did a lot of guess work until I discovered the ScopeHunter plugin.
The ScopeHunter plugin allows you to select some text and it tells you what scope it matches. This removes the guess work and allows you to quickly color the pieces you want to.

sublime text 的 color scheme 是通过 scopes 来定义 color 的，我们可以安装插件 ScopeHunter 来查看光标出的 scopes ，从而可以自定义颜色。

至此，已经可以修改 markdown 到我想要的状态了。但是我又想，能不能把 markdown.md 的背景也改了，
甚至模仿 github 的样式。

少说多做，幸福一生。

马上把上面的代码加入 color scheme，有效果，嗯，现在比较大的问题是 lineHighlight（鼠标所在行高亮）比较突兀。

是个问题，并且 lineHighlight 没有 scope ，蛋疼了。

解决方式是调整全局 lineHighlight 的值，使其用透明度达到效果。

Perfect!

参考：

http://stackoverflow.com/questions/10636410/modifying-sublime-text-2-for-js

附上我的 color scheme Obsidian.tmTheme ：

继续阅读

TAT.dnt 强大的 observejs
In 未分类 on 2015年05月07日 by view: 2,399
6

写在前面

各大 MVVM 框架的双向绑定太难以观察，很难直观地从业务代码里知道发生了什么，我不是双向绑定的反对者，只是认为双向绑定不应该糅合进底层框架，而应该出现在业务代码中，或者是业务和框架之间的代码上，由开发者实现，由开发者决定观察什么，决定响应什么。
以及 Object.observe 的支持度不够好（http://caniuse.com/#search=observe），再者 Object.observe 的功能太弱（如对象内数组的变化无法监听）。
所以就有了 observejs。

继续阅读

测试工具 mocha 用法小结
In 未分类 on 2015年05月06日 by view: 1,880
0

这篇是前段时间总结给自己备忘的，要用到的工具实在太多，没法一一记住。

个人感觉，作为一个测试的工具，只要会用就好了。

所以这里稍微做了一些修改，简单介绍一下常用的写法和命令，其次将之前的一些示例改成 javascript 版本，方便没有 coffee 基础的同学浏览。

介绍

mocha 是一个拥有丰富功能的 javascript 测试框架，可以用于 nodejs 和浏览器。支持同步/异步测试用例，有多种报告形式。

官网介绍了很多的特性，个人感觉实用的就几点：

一个是 nodejs 和浏览器都可以用，不用再记那么多奇怪的 api 和写法了。

其次是编写同步/异步测试用例非常简单。

安装

成功安装后就可以使用 mocha 命令了。

使用

运行./test/目录所有 js

指定 js 文件

监听文件变化

指定 coffee 编译

for coffescript 1.6

for coffeescript 1.7+

浏览器的使用

指定一个目录，初始化一个用于浏览器的测试目录。执行后会在该目录生成 index.html、mocha.js、mocha.css 和一个空白的 test.js，可以直接在 test.js 中添加测试用例。

当然，也可以不敲命令直接复制引用 mocha.js 到 html。

编写用例

常用的断言库都可以运行的很好。以下列出几个：

  • should.js BDD style shown throughout these docs.
  • chai expect() assert() and should style assertions
  • expect.js expect() style assertions
  • better-assert c-style self.documenting assert()

个人一般用 nodejs 自带的 assert（方便不用安装）和 should.js（功能强大很好用）

同步代码

异步代码

写法和同步代码类似，只是在 it()的第二个参数的函数参数中传入一个 done 函数，用于控制异步函数的结束。

其中，done()函数也可以接受一个 error 作为参数，所以上面其实可以简化为：

hooks

mocha 支持多种体位的 hook，用法做一些或者干掉一些东东。如下：

  • before() 开始前 1 次
  • after() 结束后做 1 次
  • beforeEach() 开始前每次都做
  • afterEach() 每次结束后都做

所有的 hooks 都可以接收 done()参数用于异步结束。甚至可以不使用 done 参数，而是直接返回一个 promise 对象，例如：

不过建议还是加上 done 参数，看起来清晰，习惯统一。

BDD 和 TDD

现在一般都用 BDD。

BDD interface 提供了 describe(),context(),it(),before(),after(),beforeEach(),afterEach()。

context() 和 describe() 没区别。

TDD interface 提供了 suite(),test(),suiteSetup(),suiteTeardown(),setup(),teardown()

其他常用

-b 参数 只显示第一个异常

一般测试用例多的时候非常有用，不然某个接口变化全屏报错就悲剧了

-t 参数 指定单个测试用例的超时时间

默认单个测试用例超时时间为 2000ms。

命令行中添加为全局的设置，也可以在测试用例内部调用 timeout()方法单独控制。

ok，介绍到此就结束了，最后附上其他命令速查

其他命令行

  • -h,—help
  • -V,—version
  • -A,—async-only 强制为异步模式，即所有测试必须包含一个 done() 回调。
  • -c,—colors
  • -C,—no-colors
  • -G,—growl
  • -O,—reporter-options
  • -R,—reporter
  • -S,—sort
  • -b,—bail
  • -d,—debug
  • -g,—grep
  • -f,—fgrep
  • -gc,—expose-gc
  • -i,—invert
  • -r,—require
  • -s,—slow
  • -t,—timeout 设置超时，默认为 2000ms，如果是长时间运算需要设置。
  • -u,—ui
  • -w,—watch 监视文件变化
  • —check-leaks
  • —compilers :,… 使用指定模块编译文件，经常会用到编译 coffee
  • —debug-brak
  • —globals
  • —inline-diffs
  • —interfaces
  • —no-deprecation
  • —no-exit
  • —no-timeouts
  • —opts
  • —prof
  • —recursive
  • —reporters
  • —throw-deprecation
  • —trace
  • —trace-deprecation
  • —watch-extensions ,…
  • —delay

继续阅读

React 直出实现与原理
In 未分类 on 2015年05月04日 by view: 2,426
1

前一篇文章我们介绍了虚拟 DOM 的实现与原理，这篇文章我们来讲讲 React 的直出。
比起 MVVM，React 比较容易实现直出，那么 React 的直出是如何实现，有什么值得我们学习的呢？

为什么 MVVM 不能做直出？

对于 MVVM，HTML 片段即为配置，而直出后的 HTML 无法还原配置，所以问题不是 MVVM 能否直出，而是在于直出后的片段能否还原原来的配置。下面是一个简单的例子：

上面这段 HTML 配置和数据在一起，直出后会变成：

这时候当我们失去了 name 的值改变的时候会导致页面渲染这个细节。当然，如果为了实现 MVVM 直出我们可能有另外的方法来解决，例如直出结果变成这样：

这时候我们是可以把丢失的信息找回来的，当然结构可能和我们想象的有些差别。当然还有其他问题，例如直出 HTML 不一定能反向还原数据，由于篇幅问题，这里不展开讨论。

React 如何直出？

2

如图：

  • React 的虚拟 DOM 的生成是可以在任何支持 Javascript 的环境生成的，所以可以在 NodeJS 或 Iojs 环境生成
  • 虚拟 DOM 可以直接转成 String
  • 然后插入到 html 文件中输出给浏览器便可

具体例子可以参考，https://github.com/DavidWells/isomorphic-react-example/，下面是其渲染路由的写法：

OK，我们现在知道如何利用 React 实现直出，以及如何前后端代码复用。

但还有下面几个问题有待解决：

  • 如何渲染文字节点，每个虚拟 DOM 节点是需要对应实际的节点，但无法通过 html 文件生成相邻的 Text Node，例如下面例子应当如何渲染：

  • 如何避免直出的页面被 React 重新渲染一遍？或者直出的页面和前端的数据是不对应的怎么办？

相邻的 Text Node，想多了相邻的 span 而已

1

通过一个简单的例子，我们可以发现，实际上 React 根本没用 Text Node，而是使用 span 来代替 Text Node，这样就可以实现虚拟 DOM 和直出 DOM 的一一映射关系。

重复渲染？没门

刚刚的例子，如果我们通过 React.renderToString 拿到<Test /> 可以发现是：

我们可以发现一个有趣的属性 data-react-checksum，这是啥？实际上这是上面这段 HTML 片段的 adler32 算法值。实际上调用 React.render(<MyComponent />, container); 时候做了下面一些事情：

  • 看看 container 是否为空，不为空则认为有可能是直出了结果。
  • 接下来第一个元素是否有 data-react-checksum 属性，如果有则通过 React.renderToString 拿到前端的，通过 adler32 算法得到的值和 data-react-checksum 对比，如果一致则表示，无需渲染，否则重新渲染，下面是 adler32 算法实现：

  • 如果需要重新渲染，先通过下面简单的差异算法找到差异在哪里，打印出错误：

下面是首屏渲染时的主要逻辑，可以发现 React 对首屏实际上也是通过 innerHTML 来渲染的：

最后

尝试一下下面的代码，想想 React 为啥认为这是错误的？

继续阅读

TAT.tennylv 网页性能之 HTML,CSS,JavaScript
In 未分类 on 2015年05月04日 by view: 10,325
27

前言

html css javascript 可以算是前端必须掌握的东西了，但是我们的浏览器是怎样解析这些东西的呢 我们如何处理 html css javascript 这些东西来让我们的网页更加合理，在我这里做了一些实验，总结起来给大家看看。

继续阅读

TAT.svenzeng 新书《JavaScript 设计模式与开发实践》即将出版
In 未分类 on 2015年04月30日 by view: 6,005
18

HI

经过 2 年准备，7 个月写作，8 个月修改，《JavaScript 设计模式与开发实践》即将出版（5 月 20 号左右）。

预售地址将于 51 假期过后放出，感兴趣的同学可以关注。：）

封面

 

继续阅读

TAT.heyli koa + socket.io 制作简易聊天室
In 未分类 on 2015年04月29日 by view: 10,144
1

前言

 

上期，本菜在 《前端抢后端饭碗 — Node.js + Socket.io 制作简易聊天室》一文中谈到如何用 node.js 中的 express 框架。如要阅读此文，请先阅读前文。

 

虽然时至今日, express 框架依然是时下 node.js 网页开发的主流，但后起之秀 koa 大有赶超之势。他融合了 ES6 的一些新特性，列如 generator, promise 等。利用这些新特性能很好地解决传统 javascript 中的多层回调噩梦。

 

我们 AlloyTeam 旗下iPresst会在 5 月底 6 月初的版本中发布用 koa 重构的版本，敬请期待!

 

继续阅读

上页 1 ...27 28 29 30 31 32 33 34 35 36 ...55 下页