发表于 | 分类于 |

JavaScript引擎是能够将JavaScript代码处理并执行的运行环境，不要把它跟浏览器内核搞混了！内核（如Webkit、Trident、Gecko等）主要是将页面转变成可视化的图像结果，即渲染出来，所以通常也被称为渲染引擎。

渲染引擎和JavaScript引擎是浏览器处理网页过程的两个核心部分，它们是相互合作的关系。

一般来说，渲染引擎根据JavaScript提供的桥接接口提供给JavaScript访问DOM的能力，很多HTML5也是通过桥接接口实现的。

桥接接口复杂而不高效往往是一个性能瓶颈，所以才说DOM的频繁使用会导致性能问题。

常见的JavaScript引擎

排名不分先后。

v8

Google开源的使用C++编写的引擎，有其他语言（如Java）的封装，BSD协议，自体还有其他协议。

阅读全文 »

发表于 | 分类于 |

引擎暂时只是v8, JavaScriptCore、SpiderMonkey、Chakra、Carakan等等这些回头再看看做做对比啥的吧……

其他语言是以C/C++为例。

测试环境为Mac，并列出浏览器 or 环境的版本

  • Chrome: 56.0.2924.87 (64-bit)
  • Firefox: 51.0.1 (64 位)
  • Safari: 10.0.3 (12602.4.8)
  • Node.js: v7.7.2

持续更新中… 只是个持续更新的笔记而已，只是希望能说明白罢了！！

前言

C的访问机制，基本是编译确定了位置，偏移信息共享，使用时直接使用偏移量，所以非常高效。而js则不然，它在执行阶段才能确定结构，而且还能够增减对象的属性，在查找值时需要匹配属性名才能找到正确的值，这是很浪费时间的。

不过引擎们做了很多努力，已经在逐步接近其他语言的性能了，例如隐藏类。

这里说到的东西目的主要是为了避免让引擎的优化被浪费，甚至是倒退。

其实呢，对于WebGL这类的貌似更有用一些，对于一般开发倒是意义不大。

阅读全文 »

发表于 | 分类于 |

这是必要而又自然的，首先我们要保证自己的基础库的回归测试的自动化（或者少修改），其次在选择开源库的时候，有着测试100%pass的库总会让别人多一点信心不是么？！

一个笔记而已，不必写过多的原因及背景。

简而言之：我想写 es6 语法的基础库，又要确保相应的测试神马的能够正常的 cover 住，而且需要在依赖其他的 es6 语法库的时候能够让测试正常运行，做了一点工作，所以记下笔记以便后续直接用。

库选择

测试库mocha

很正常的选择。

官网
Github

断言库chai

说实话我也没想那么多，mocha官网用了就直接用了而已，其实本身并不在意是chai还是jasmine……

阅读全文 »

发表于 | 分类于 |

近来又遇到了很恶心的事儿，那就是想要升级babel为6的时候，遇到了新老AMD模块并存的问题。

是的，又遇到了，尽管在babel7都WIP了，升级个6还是恶心的够呛，扫了一圈之后发现，圈里貌似还是没人去解决这个问题……

先列出引到的链接：

我开发的小插件： babel-plugin-transform-es2015-modules-existed-amd

问题症结

主要是新老模块并存导致的。

阅读全文 »

发表于 | 分类于 |

个人还是很喜欢这种机制，也想搞一个这般的 Workflow 辅助类出来，不过不想用 Generator，所以折腾了一小下……

不得不说的 yield *

yield*最大的作用，就是将Generator嵌在另一个Generator的内部执行。

1
2
3
4
5
6
7
8
function *a() {
    console.log(1);
    b();
    console.log(3);
}
function *b() {
    console.log(2);
}

执行结果是13，是的，2不会被输出，但是如果换成：

1
yield *b();

就等同于：

1
2
3
4
5
function *a() {
    console.log(1);
    console.log(2);
    console.log(3);
}

输出就是123就好了。

而这也是koa2的中间件核心实现机制，笑话一下自己最开始搞出来的遍历行为，傻在next上了，囧~~

阅读全文 »

发表于 | 分类于 |

Iterator

Iterator为不同的数据结构提供统一的访问机制，只要它部署Iterator接口，就可以完成遍历操作。

它的流程其实是跟链表的遍历很相似的：创建一个指针对象，指向当前数据结构的起始位置，然后不断的next()，每次返回的是一个对象数据，包含value和done两个字段供访问。

for...of循环实际上会去自动找Iterator接口。

ES6规定，默认的Iterator接口部署在数据结构的Symbol.iterator这个key上，一个数据结构只要具有Symbol.iterator方法，就可以认为是“可遍历的”。

再次提醒，千万注意：Symbol.iterator里面的i是小写！！！

为啥要用Iterator

跟其他语言一样，提供一种方法顺序访问一个聚合对象中各个元素，而又不需暴露该对象的内部表示。

原生支持Iterator的类型

原生的表述数据集的类型：Array、Object、Map、Set。

而实际上原生支持Iterator的数据结构是：Array、Map、Set。

Object默认不支持，其实非要手写支持的话，还不如直接用Map。

字符串也支持，因为它类似于Array

手动支持Iterator

Symbol.iterator是一个函数，返回的是一个遍历器，执行next()，不断的返回包含value和done两个字段的对象数据。

阅读全文 »

发表于 | 分类于 |

权当一个笔记，再写写或许更明白点

原本搞了个模拟的，就使用元素来模拟绘图，例如直线……

不过确实是很麻烦…… 不过再去扫了扫 Issues，果然发现有人问过，且 facebook 也有相应的方案：

绘图可使用：ReactART，位置：Libraries/ART/ReactNativeART.js

1
2
3
4
5
6
7
8
9
10
11
12
var ReactART = {
    LinearGradient: LinearGradient,
    RadialGradient: RadialGradient,
    Pattern: Pattern,
    Transform: Transform,
    Path: Path,
    Surface: Surface,
    Group: Group,
    ClippingRectangle: ClippingRectangle,
    Shape: Shape,
    Text: Text,
};

例子可暂时扫扫 https://github.com/reactjs/react-page/blob/art/

继续记笔记：

依赖

使用这个之前，安装 art 库：

1
npm i art --save

并且需要在项目中添加依赖：

  1. 右键点击项目 -> ‘Add Files to ProjectName -> 选择 node_modules/react-native/React/Libraries/ART/ART.xcodeproj’
  2. 将 libART.a 添加到 Linked Frameworks and Libraries
阅读全文 »

发表于 | 分类于 |

权当一个笔记，再写写或许更明白点

本不想这么快就写这个的，不过用到了，顺便记录一下。

变形（2D 或 3D 转换）

支持的东西在变化，请查看 /Libraries/StyleSheet/TransformPropTypes.js 确定当前支持的属性。

查看现有官方文档中 View 的 style 支持，会发现这么几个： rotation scaleX scaleY transformMatrix translateX translateY。

但是很不幸滴，如果去看 TransformPropTypes.js 就会发现，这几个已经被标成了：DEPRECATED。

甭这么用了，就算现在能用也是一样。

不过官方还给了这么一段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
transform: ReactPropTypes.arrayOf(
    ReactPropTypes.oneOfType([
        ReactPropTypes.shape({perspective: ReactPropTypes.number}),
        ReactPropTypes.shape({rotate: ReactPropTypes.string}),
        ReactPropTypes.shape({rotateX: ReactPropTypes.string}),
        ReactPropTypes.shape({rotateY: ReactPropTypes.string}),
        ReactPropTypes.shape({rotateZ: ReactPropTypes.string}),
        ReactPropTypes.shape({scale: ReactPropTypes.number}),
        ReactPropTypes.shape({scaleX: ReactPropTypes.number}),
        ReactPropTypes.shape({scaleY: ReactPropTypes.number}),
        ReactPropTypes.shape({translateX: ReactPropTypes.number}),
        ReactPropTypes.shape({translateY: ReactPropTypes.number})
    ])
  )

所以实际上已经整体将变形、动画相关的切到了 transform 上。

来看一个简单的例子，看了再对比上面那段，就知道怎么用了：

阅读全文 »

发表于 | 分类于 |

权当一个笔记，再写写或许更明白点

习惯了前端世界的交互模式之后（其实就是 DOM 事件），在这个入门的过程中感觉 React Native 的交互处理就是个不适应。

如果要做 React Native 的交互，首先至少要知道这样几个东西：

不过干读这几个文档的话，基本就是一头雾水……

还是一点一点来看罢：

普通行为

TouchableHighlight、TouchableOpacity、TouchableWithoutFeedback 这几个很好弄，官方贴心的直接封装了最基础的 Touch 行为，在任何需要点击的 View 外面直接包上这样的标签就行了。

TouchableHighlight 在点击时表现为高亮
TouchableOpacity 在点击时表现为透明
TouchableWithoutFeedback 在点击时无反馈

这几个效果都是封装好了的，无需开发者操心。

Sample Code

阅读全文 »