Web 开发 | AlloyTeam

RosinVSJSConsole

In 未分类 on 2015年04月29日 by TAT.helondeng view: 732

0

Rosin 是一个 Fiddler 插件，协助开发者进行移动端页面开发调试。

特性

可配置的页面匹配规则
拦截 console
日志内容的存储，展示，过滤
脚本运行错误捕获

原理

首先在 fiddler 里面配置了匹配规则
访问的页面进过 fiddler 之后，匹配规则会生效，如命中，则在返回的内容中注入脚本。
脚本重写了 console 的各种方式（也监听了 onerror 事件）
将 console 打出的各种消息 push 到消息队列
队列达到阈值或者间隔的时间到，就将消息通过 xhr 发送到 http://__rosin__.qq.com
rosin 插件在 fiddler 中捕获上面的请求（并且隐藏了，所以看不到这个请求），将请求的 body 部分显示到面板上面
将 log 存储到本地 D:Program Files (x86)Fiddler2ScriptsRosinLog

1

2

3

4

5

6

7

8

9

10

11

12

add: function() {

Array.prototype.push.apply(this._queueArr, arguments);

// 定时发送消息

clock.start();

//队列达到阈值就触发上传

if (this._queueArr.length >= THRESHOLD) {

this._post(this._queueArr.splice(0, this._queueArr.length));

return;

}

Log 格式：

log

JSConsole

JSConsole 是一个 JS 命令行调试工具。

如何使用

在 http://jsconsole.com/中输入:listen 创建一个 session（主要是生成一个 GUID）
在页面中引入脚本

1 2	<script src="http://jsconsole.com/remote.js?FAE031CD-74A0-46D3-AE36-757BAB262BEA"></script>

原理

引入的 remote.js 脚本创建一个隐藏的 iframe，Url 指向了 http://jsconsole.com/remote.html，并且把上面的 GUID 带上
重写 console 中的方法，这里的问题是：如何把消息 push 到 jsconsole.com？
页面调用 console 等方法时，实际通过 postMessage 是向 iframe 发送了一条消息。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

log: function () {

var argsObj = stringify(arguments.length == 1 ?

arguments[0] : [].slice.call(arguments, 0));

ar response = [];

[].forEach.call(arguments, function (args) {

response.push(stringify(args, true));

});

var msg = JSON.stringify({ response: response,

cmd: 'remote console.log', type: msgType });

if (remoteWindow) {

remoteWindow.postMessage(msg, origin);

} else {

queue.push(msg);

}

msgType = '';

}

iframe 中内嵌的页面收到消息后，通过 EventSource 向 server 发送信息内容（类似于 socket）
日志显示在 jsconsole.com 上面

详解 NodeJs 的 VM 模块

In 未分类 on 2015年04月29日 by TAT.dorsywang view: 11,990

3

什么是 VM？

VM 模块是 NodeJS 里面的核心模块，支撑了 require 方法和 NodeJS 的运行机制，我们有些时候可能也要用到 VM 模板来做一些特殊的事情。
通过 VM，JS 可以被编译后立即执行或者编译保存下来稍后执行（JavaScript code can be compiled and run immediately or compiled, saved, and run later.）
VM 模块包含了三个常用的方法，用于创建独立运行的沙箱体制，如下三个方法

为 React 扩展 jsReady

In 未分类 on 2015年04月29日 by TAT.dnt view: 2,057

2

写在前面

因为用 React 就会需要写jsx。
React 会将 jsx 编译成 js。然后 append 到 head 当中。从 fiddler 的请求和 JSXTransformer 源码来看，当在页面使用下面的 html 时候：

1	<script type="text/jsx" src="js/react_test.js"></script>

会发送两次请求 react_test.js 文件，一次是 JSXTransformer 发送的，一次是浏览器识别 script 标签自动发送的。
上面的 react_test.js 里面全是jsx语法，和 javascript 有点像，如：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

var Timer = React.createClass({

getInitialState: function() {

return {secondsElapsed: 0};

},

tick: function() {

this.setState({secondsElapsed: this.state.secondsElapsed + 1});

},

componentDidMount: function() {

this.interval = setInterval(this.tick, 1000);

},

componentWillUnmount: function() {

clearInterval(this.interval);

},

render: function() {

return (

<div>Seconds Elapsed: {this.state.secondsElapsed}</div>

);

}

});

:before,:after 伪元素妙用

In 未分类 on 2015年04月29日 by TAT.lqlongli view: 9,864

1

这两个伪元素分别表示元素内容的【前】【后】，利用这两个伪元素可以在元素内容的前后添加内容，其实这没有什么前后的概念，如果应用了 absolute 的特性之后，你可以把这些伪元素放在任何位置，有了这两个伪元素，就代表每个元素都有两个助手可供使用，灵活运用它们的话将会得到很多有趣的实现，简化许多实现。

伪元素特性（目前已经遇到的）

它不存在于文档中，所以 js 无法操作它

它属于主元素本身，有些伪类仅仅是代表元素内容的一部分，譬如:first-letter 代表第一个字母；因此当伪元素被点击的时候触发的是主元素的 click 事件

块级元素才能有:before, :after，譬如 img 就不能设置，亦即某些元素是没有:before, :after 的，只要知道一般的块级元素都可以用就行了

注：css3 中，为了与伪类区分，伪元素前应该使用两个冒号，即:hover 伪类，::before 伪元素。当然为了向下兼容，用一个冒号也是可以的，不过建议尽量使用规范的写法。

各种图标

利用这两个伪类，可以实现需要简单的图标，例如搜索的放大镜，叉叉，箭头等等

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

//视频播放图标

.course[data-type="2"] {

.course__cover {

&:before, &:after {

content: '';

display: block;

position: absolute;

left: 5px;

bottom: 5px;

}

&:after { //实现圈圈

width: 20px;

height: 20px;

border: 2px solid white;

background: rgba(0, 0, 0, .6);

border-radius: 12px;

background-clip: padding-box;

}

&:before { //实现三角形

height: 0;

width: 0;

border-left: 8px solid white;

border-top: 5px solid transparent;

border-bottom: 5px solid transparent;

margin-left: 9px;

margin-bottom: 7px;

z-index: 5;

}

上述图标的效果如下图：

扩大可点区域

在 mobile，特别是小屏手机，可点区域一般需要大一点，这样对用户友好一点。
当主元素实在没办法扩大自身的时候，可以利用:before, :after 来实现可点区域的扩大，还记得伪元素的特性之一，伪元素属于主元素，点伪元素就是点击主元素。

1

2

3

4

5

6

7

8

9

10

11

12

//利用这个样式可以把可点区域扩大为40px宽，高度原理一样

&:before {

content: "";

display: block;

position: absolute;

width: 40px；

left: 50%;

margin-left: -20px;

top: 0;

height: 50px; //随便

}

实现效果如下图：

这个算是个综合例子，应用了多种技巧。这是一个收藏按钮，两种状态：已收藏和未收藏，正好符合 checkbox，因此应用了 checkbox，修改了样式给了一个底图。然后下面的文字是:after，利用了动态 label 的技巧（详见 1.4），然后:before 应用了扩大可点区域技巧，使得 40*50 的区域内点击都有效。

实现 label

对于一些静态的文字，说明性的文字，譬如最常见的上图下字单元，完全可以用:after 实现那个文字。
还记得 form 家族的 label 标签吗？它的特性是 label 和 input 的联动，点击 label 元素就等同于点击 input，这个效果和伪元素的特性是一模一样的，用:before 完全可以替代 label。

唯有一点是 label 独有的，就是 label 元素和 input 元素的位置相距较远，这种联动是伪元素无法实现的，毕竟伪元素还是要围绕主元素存在的，远距离 absolute 将会引发灾难的。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

.empty__bg {

display: inline-block;

width: 95px;

height: 92px;

background: url(../../img/bg_empty_center@2x.png) no-repeat;

background-size: 95px 92px;

position: relative;

margin-bottom: 16px; //注意这里需要留好位置放置after元素（它是absolute进去的）

&:after {

content: "暂无学习计划";

display: block;

font-size: 14px;

line-height: 24px;

text-align: center;

width: 100%;

color: #909090;

position: absolute;

top: 100%;

left: 0;

}

实现效果如下图：

实现动态信息

如果你认为伪元素只能实现静态 label，那就把 CSS3 想得简单了。
:before, :after 的 content 属性的值除了是静态字符串之外，还有其他的一些特殊值，其中一个是 attr(…)，这个特性的作用是用主元素的某个属性的值作为 content 的值，当这个属性的值改变的时候，伪元素的值也会跟着改变，利用这个特性就可以实现动态信息了。

可以有两种动态方案：

用 js 动态修改主元素的属性值，这个很直观

修改伪元素 content 关联的属性

下面看一个例子：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

//html:

//<a class="datepicker__link z-today" href="javascript:void(0)" data-monthstr="04月" data-weekstr="周三" data-k="2015422">22</a>

//<li class="datepicker__item"><a class="datepicker__link" href="javascript:void(0)" data-monthstr="04月" data-weekstr="周四" data-k="2015423">23</a></li>

//<a class="datepicker__link z-active" href="javascript:void(0)" data-monthstr="04月" data-weekstr="周五" data-k="2015424">24</a>

//core css

.datepicker__link {

&:before {

content: attr(data-monthStr);

}

&.z-active {

&:before {

content: attr(data-weekStr);

}

实现的效果如下图：

这里用到第二种动态方案，日期列表里面，日期上面默认显示月份信息，但是选中态需要显示星期信息。
预先把每个单元用到的月份信息和星期信息放到主元素的 data 属性上面（缓存的思想），选中的时候一般都是要添加一个选中态样式，这时，除了基本的凸显性样式外，同时切换伪元素关联的 data 属性即可轻松地解决这个问题，而不用通过 js 去找到 label 元素，然后修改 text。

小结

伪元素帮助我们选择那些有特殊意义，但是却无法具体定位的 “东西”，它们对这些 “东西” 不做任何限制，它们只是代表这些特殊意义，譬如:first-letter，不限制首字母是哪一个字母，只是代表了首字母元素。

通过伪元素，可以让 CSS 更好的处理一些有特殊意义的元素，这些元素一般很难定位，甚至有些是代表状态的元素，譬如:target。

结合伪元素的特点，利用它们的灵活性，可以为我们提供更多的特性，下面总结一下目前想到的伪元素的优缺点：

优点/用途

减少 dom 节点数
让 css 帮助解决一部分 js 问题，让问题变得简单

缺点

不利于 SEO
代码读起来 “可能” 会有疑惑

AlloyRenderingEngine 继承

In 未分类 on 2015年04月28日 by TAT.dnt view: 1,675

2

写在前面

不读文章，只对代码感兴趣可以直接跳转到这里 https://github.com/AlloyTeam/AlloyGameEngine
然后 star 一下，多谢支持:)。

前几天发了篇向 ES6 靠齐的 Class.js，当初 jr 为什么不把父类的实例暴露给子类，其原因还是为了延续原型继承的习惯，子类重写就会覆盖掉父类的方法，父类的方法就会丢，如下面的代码，就堆栈溢出了：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

var Parent = function () {

}

Parent.prototype.a = function () {

}

var Child = function () {

}

Child.prototype = new Parent();

Child.prototype.a = function () {

this.a();

}

var child = new Child();

child.a();

而 jr 的 Class.js 可以让你通过 this._super 访问父类同类方法，修复了原型继承同名无法访问父类的弱点，当然也可以 hack 一下，先赋给变量或者某个属性。如：

更优秀的模块管理工具–webpack

In 未分类 on 2015年04月27日 by TAT.ouvenzhang view: 1,388

1

2015-04-27

跳转进入
 http://fromwiz.com/share/s/2V9-cs1em4io2riZS41ZV1oI3-WuEK0kTkfL2eu-YC1Tud9g

复制粘贴的高级玩法

In 未分类 on 2015年04月26日 by TAT.老教授 view: 13,044

5

想做一个好用的在线编辑器，不管是地图编辑器、PPT 创作平台还是通过拖拽快速创建活动页面的编辑器等等，必然要给用户提供各种快捷的操作方法。如非常常用的复制粘贴功能。

举个例子，在 iPresst 创作平台，我们的作品在好几页都要用到同一张图片，总不能每次都点击上传一次图片吧？右键复制粘贴或者直接按快捷键无疑是最符合用户预期的操作方式，然而我们编辑器用到的元素一般比较特别，而且我们复制粘贴的时候经常要做一些特殊处理，此时我们就需要覆盖浏览器给我们提供的复制粘贴功能了。

HLS 视频点播&直播初探

In 未分类 on 2015年04月26日 by TAT.donaldyang view: 3,988

0

前端可选的视频直播协议大致只有两种：

RTMP（Real Time Messaging Protocol）

HLS（HTTP Live Streaming）
其中 RTMP 是 Adobe 开发的协议，无法在 iPhone 中兼容，故目前兼容最好的就是 HLS 协议了。

HTTP Live Streaming（HLS）是苹果公司实现的基于 HTTP 的流媒体传输协议，可实现流媒体的直播和点播。原理上是将视频流分片成一系列 HTTP 下载文件。所以，HLS 比 RTMP 有较高的延迟。

前端播放 HLS

Native 支持
1. Android 3.0+
2. iOS 3.0+
flash 支持
1. Flowplayer（GPL ×）
2. GrindPlayer（MIT）
3. video-js-swf（Apache License 2.0）
4. MediaElement.js（MIT）
5. clappr（BSD IE10+ ×）

最后，由于 MediaElement 已经纳入 WordPress 的核心视音频库，以及其良好的兼容性（见下图），所以最后选择使用 MediaElement.js 来实现。

MediaElement.js兼容性

切片准备

可使用 m3u8downloader 下载一个 HLS 源，或者使用 node-m3u 生成 m3u8 索引和 MPEG-TS 切片，下面是我们准备切片：

https://github.com/miniflycn/HLS-demo/tree/master/m3u8

注意看切片索引文件：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

#EXTM3U

#EXT-X-TARGETDURATION:11

#EXT-X-VERSION:3

#EXT-X-MEDIA-SEQUENCE:0

#EXT-X-PLAYLIST-TYPE:VOD

#EXTINF:10.133333,

fileSequence0.ts

#EXTINF:10.000666,

fileSequence1.ts

#EXTINF:10.667334,

fileSequence2.ts

#EXTINF:9.686001,

fileSequence3.ts

#EXTINF:9.768665,

fileSequence4.ts

#EXTINF:10.000000,

fileSequence5.ts

#EXT-X-ENDLIST

其中 #EXT-X-ENDLIST 为切片终止标记，如果没有该标记，浏览器会在文件读取完后再请求索引文件，如果有更新则继续下载新文件，以此达到直播效果。

前端代码

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

<!DOCTYPE html>

<html>

<head>

<title>player</title>

<style>

/** 隐藏控制条 **/

.mejs-controls {

display: none !important;

}

</style>

</head>

<body>

</video>

var player = new MediaElementPlayer('#player1', {

// 禁止点击暂停

clickToPlayPause: false,

success: function (media, ele, player) {

// 初始化后立刻播放

player.play();

}

});

</script>

</body>

</html>

效果

例子源码

https://github.com/miniflycn/HLS-demo

使用 Generator 解决回调地狱

In 未分类 on 2015年04月23日 by TAT.云中飞扬 view: 11,471

10

（图片来源于互联网）

回调地狱

相信每一个 JS 程序员都曾被或者正在被回调地狱所折磨，特别是写过 Nodejs 代码的程序员。

1

2

3

4

5

6

7

8

9

asyncFun1(function(err, a) {

// do something with a in function 1

asyncFun2(function(err, b) {

// do something with b in function 2

asyncFun3(function(err, c) {

// do something with c in function 3

});

AlloyRenderingEngine 之 Shape

In 未分类 on 2015年04月23日 by TAT.dnt view: 1,418

0

写在前面

不读文章，只对代码感兴趣可以直接跳转到这里 https://github.com/AlloyTeam/AlloyGameEngine
然后 star 一下，多谢支持:)。

游戏或者应用中，不是所有的地方都是贴图，Shape 也有很常见的应用场景，如游戏中显示 HP 的血条。大量的 Shape 可以组成矢量图。矢量图的好处是放大不失真，也就是不会变模糊；而位图放大失真，失真的程度要看其平台插值算法的牛 B 程度，但放大效果越好的算法，速度越慢，所以大部分平台会在速度和效果上取个折中。

绘制 Shape 根绘制位图本质不一样，绘制位图可以充分利用 GPU 渲染（当然也可以不用），绘制 Shape 必须经过 CPU 先进行数学计算和图形学相关算法（比如你可以尝试不使用 api，而使用点去绘制贝塞尔曲线、圆形、线条等，你做的所有数学工作，就是计算机做的工作），然后再进行渲染。所以很显然，绘制大量的 Shape 会造成帧率下降。