AlloyTeam

全屏滚动效果 H5FullscreenPage.js
In 未分类 on 2015年04月21日 by TAT.tennylv view: 23,121
26

前提：

介于现在很多活动都使用了类似全屏滚动效果尤其在微信里面我自己开发了一个快速构建此类项目的控件与市面上大部分控件不同的是此控件还支持元素的动画效果并提供多种元素效果基于 zepto.js

功能清单:

1 快速实现页面全屏滚动效果。并提供多种翻页效果，兼容大部分 ios 和 android 系统。

2 支持在页面中添加多种动画元素效果来实现淡入，滑入等效果。

3 支持配置音乐功能。

4 支持摇一摇接口功能。

继续阅读

React 初探
In 未分类 on 2015年04月20日 by TAT.felix view: 19,316
22

React 简单介绍

先说 React 与 React Native

他们是真的亲戚，可不像 Java 和 Javascript 一样。

其实第一次看到 React 的语法我是拒绝的，因为这么丑的写法，你不能让我写我就写。

但当我发现 React Native 横空出世后，它学习一次到处运行的理念非常诱人。React Native 可以写出原生体验的 iOS/Android 应用？那不就多了一门装逼技能？所以我们调研小组试了一下，感觉 "Duang" 一下，很爽很舒服。写 React Native 需要两门基础技能：React 语法和 iOS 基础知识。

很爽很舒服，索性就研究一下，算是入门。了解之后发现，React 真是有另一番天地，值得学习。

接下来总结以下我对 React 的理解，分享给大家。

继续阅读

向 ES6 靠齐的 Class.js

In 未分类 on 2015年04月19日 by TAT.dnt view: 5,068

写在前面

在 2008 年的时候，John Resig 写了一 Class.js，使用的方式如下：

var Person = Class.extend({

init: function(isDancing){

this.dancing = isDancing;

dance: function(){

return this.dancing;

}

});

var Ninja = Person.extend({

init: function(){

this._super( false );

dance: function(){

// Call the inherited version of dance()

return this._super();

swingSword: function(){

return true;

}

});

init为构造函数，通过this._super()访问父类同名方法。

这种看上去很酷很方便的继承方式，居然有一个致命的缺陷。那就是：

谈前端工程师的职业规划
In 未分类 on 2015年04月17日 by TAT.iAzrael view: 30,491
20

在敲下这个标题的时候，心里好虚。话说我一直不太喜欢发表这些看上去很假大空的文字，每个人的职业规划都是独有的，不具有太大的可复制性，把自己的经历放出去，容易误人子弟。只是最近很多师弟们（别问我为什么都是师弟，我想静静…… 也不要问我静静是谁！）问起这个，也就根据自己的经历发表一下对前端工程师的看法吧，“ 我说的都是错的”，仅供参考。另：本篇是纯文字，密集恐惧症换成勿入！

从我接收第一份前端需求开始，到现在也有五个年头了。自己也从一个愣头青变成一个快到而立之年的大叔，时间真的是哗啦哗啦的快。这五年里，其实可以分成三部分：1~2, 3~4, 5。

继续阅读

AlloyRenderingEngine 入门
In 未分类 on 2015年04月17日 by TAT.dnt view: 4,986
4

写在前面

AlloyRenderingEngine 是一款非常快速的渲染引擎，目前该项目已经合并至 https://github.com/AlloyTeam/AlloyGameEngine/ ,

属于 AlloyGameEngine 下的一个子项目，负责渲染。

因为游戏===复杂的 App，所有 AlloyGameEngine 不仅可以做游戏，也可以制作 App，比如： http://kmdjs.github.io/ppt-editor/

用 AlloyGameEngine 制作 App，如大炮轰蚊子。

继续阅读

自适应设计与响应式网页设计
In 未分类 on 2015年04月14日 by TAT.sheran view: 33,226
6

目前非常流行自适应设计与响应式设计，而且经常让人混淆，自适应设计不应与自适应布局混为一谈，它们是完全不一样的概念。

在这先说明下这两者的异同：

自从移动终端飞速发展以来，各种各样的机型突飞猛进，很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个 mobile 版本，或者 iPhone/iPad 版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个 portal（入口），会大大增加架构设计的复杂度。

于是，很早就有人设想，能不能" 一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？

2010 年，Ethan Marcotte 提出了" 自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

继续阅读

AngularJS : this 与 $scope

In 未分类 on 2015年04月09日 by TAT.simplehuang view: 7,270

最近在 Angular 项目中遇到关于 controller 内使用 $scope&this 暴露数据的问题，下面来分析一下：

“controller as” 是 Angular 在 1.2 版本后新增的语法，我将从引用方式，作用范围，对象对比三个方面做两者的比较：

引用方式：

1) $scope 只需要在注入中声明，后面就可以直接在附加数据对象：

controller:

function ACtrl($scope) {

$scope.test = "一个例子"; //在$scope对象中加入test

}

html:

</div>

2) this 则采用了 controller as(需要版本为 ng 1.2+) 写法：

前沿技术解密——VirtualDOM

In 未分类 on 2015年04月07日 by TAT.donaldyang view: 1,862

作为 React 的核心技术之一 Virtual DOM，一直披着神秘的面纱。

实际上，Virtual DOM 包含：

Javascript DOM 模型树（VTree），类似文档节点树（DOM）

DOM 模型树转节点树方法（VTree -> DOM）

两个 DOM 模型树的差异算法（diff(VTree, VTree) -> PatchObject）

根据差异操作节点方法（patch(DOMNode, PatchObject) -> DOMNode）

接下来我们分别探讨这几个部分：

VTree

VTree 模型非常简单，基本结构如下：

{

// tag的名字

tagName: 'p',

// 节点包含属性

properties: {

style: {

color: '#fff'

}

// 子节点

children: [],

// 该节点的唯一表示，后面会讲有啥用

key: 1

}

所以我们很容易写一个方法来创建这种树状结构，例如 React 是这么创建的：

// 创建一个div

react.createElement('div', null, [

// 子节点img

react.createElement('img', { src: "avatar.png", class: "profile" }),

// 子节点h3

react.createElement('h3', null, [[user.firstName, user.lastName].join(' ')])

]);

VTree -> DOM

这方法也不太难，我们实现一个简单的：

function create(vds, parent) {

// 首先看看是不是数组，如果不是数组统一成数组

!Array.isArray(vds) && (vds = [vds]);

// 如果没有父元素则创建个fragment来当父元素

parent = parent || document.createDocumentFragment();

var node;

// 遍历所有VNode

vds.forEach(function (vd) {

// 如果VNode是文字节点

if (isText(vd)) {

// 创建文字节点

node = document.createTextNode(vd.text);

// 否则是元素

} else {

// 创建元素

node = document.createElement(vd.tag);

}

// 将元素塞入父容器

parent.appendChild(node);

// 看看有没有子VNode，有孩子则处理孩子VNode

vd.children && vd.children.length &&

create(vd.children, node);

// 看看有没有属性，有则处理属性

vd.properties &&

setProps({ style: {} }, vd.properties, node);

});

return parent;

}

diff(VTree, VTree) -> PatchObject

差异算法是 Virtual DOM 的核心，实际上该差异算法是个取巧算法（当然你不能指望用 O(n^3) 的复杂度来解决两个树的差异问题吧），不过能解决 Web 的大部分问题。

那么 React 是如何取巧的呢？

分层对比

如图，React 仅仅对同一层的节点尝试匹配，因为实际上，Web 中不太可能把一个 Component 在不同层中移动。

基于 key 来匹配

还记得之前在 VTree 中的属性有一个叫 key 的东东么？这个是一个 VNode 的唯一识别，用于对两个不同的 VTree 中的 VNode 做匹配的。

这也很好理解，因为我们经常会在 Web 遇到拥有唯一识别的 Component（例如课程卡片、用户卡片等等）的不同排列问题。

基于自定义元素做优化

React 提供自定义元素，所以匹配更加简单。

patch(DOMNode, PatchObject) -> DOMNode

由于 diff 操作已经找出两个 VTree 不同的地方，只要根据计算出来的结果，我们就可以对 DOM 的进行差异渲染。

扩展阅读

具体可参考下面两份代码实现：

@Matt-Esch 实现的：virtual-dom
我们自己做的简版实现，用于 Mobile 页面渲染的：qvd

Ques 核心思想——CSSNamespace

In 未分类 on 2015年04月06日 by TAT.donaldyang view: 693

Facebook’s challenges are applicable to any very complex websites with many developers. Or any situation where CSS is bundled into multiple files and loaded asynchronously, and often loaded lazily.
——@vjeux
将 Facebook 换成 Tencent 同样适用。

同行们是怎么解决的？

Shadow DOM Style

Shadow DOM 的样式是完全隔离的，这就意味着即使你在主文档中有一个针对全部 <h3> 标签的样式选择器，这个样式也不会不经你的允许便影响到 shadow DOM 的元素。

举个例子：

举个栗子

<body>

<style>

button {

font-size: 18px;

font-family: '华文行楷';

}

</style>

<button>我是一个普通的按钮</button>

var host = document.querySelector('div');

var root = host.createShadowRoot();

root.innerHTML = '<style>button { font-size: 24px; color: blue; } </style>' +

'<button>我是一个影子按钮</button>'

</script>

</body>

Nacespace

这就很好地为 Web Component 建立了 CSS Namespace 机制。

Facebook: CSS in JS

http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html

比较变态的想法，干脆直接不要用 classname，直接用 style，然后利用 js 来写每个元素的 style……

例如，如果要写一个类似 button:hover 的样式，需要写成这样子：

var Button = React.createClass({

styles: {

container: {

fontSize: '13px',

backgroundColor: 'rgb(233, 234, 237)',

border: '1px solid #cdced0',

borderRadius: 2,

boxShadow: '0 1px 1px rgba(0, 0, 0, 0.05)',

padding: '0 8px',

margin: 2,

lineHeight: '23px'

depressed: {

backgroundColor: '#4e69a2',

borderColor: '#1A356E',

color: '#FFF'

propTypes: {

isDepressed: React.PropTypes.bool,

style: React.PropTypes.object,

render: function() {

return (

<button style={m(

this.styles.container,

// 如果压下按钮，mixin压下的style

this.props.isDepressed && this.styles.depressed,

this.props.style

)}>{this.props.children}</button>

);

}

});

几乎等同于脱离了 css，直接利用 javascript 来实现样式依赖、继承、混入、变量等问题……当然如果我们去看看 React-native 和 css-layout，就可以发现，如果想通过 React 打通客户端开发，style 几乎成了必选方案。

我们的方案

我们期望用类似 Web Component 的方式去写 Component 的样式，但在低端浏览器根本就不支持 Shadow DOM，所以，我们基于 BEM 来搭建了一种 CSS Namespace 的方案。

我们的 Component 由下面 3 个文件组成：

main.html 结构
main.js 逻辑
main.css 样式

可参考：https://github.com/miniflycn/Ques/tree/master/src/components/qtree

可以发现我们的 css 是这么写的：

.$__title {

margin: 0 auto;

font-size: 14px;

cursor: default;

padding-left: 10px;

-webkit-user-select: none;

}

/** 太长忽略 **/

这里面有长得很奇怪的.$__前缀，该前缀是我们的占位符，构建系统会自动将其替换成 Component 名，例如，该 Component 为 qtree，所以生成结果是：

.qtree__title {

margin: 0 auto;

font-size: 14px;

cursor: default;

padding-left: 10px;

-webkit-user-select: none;

}

/** 太长忽略 **/

同样道理，在 main.html 和 main.js 中的对应选择器，在构建中也会自动替换成 Component 名。

这有什么好处呢？

基于路径的 Namespace，路径没有冲突，那么在该项目中 Namespace 也不会冲突
Component 可以任意改名，或复制重构，不会产生任何影响，便于 Component 的重构和扩展
Component 相对隔离，不会对外部产生影响
Component 非绝对隔离，外部可以对其产生一定影响

如何在移动 web 上上传文件..
In 未分类 on 2015年04月02日 by TAT.horde view: 6,441
3

xmlhttprequest2.0 可以支持文件上传. 这东东很方便, 但是在实际使用中碰到了一些问题. 这里记录下.

继续阅读

上页 1 ...31 32 33 34 35 36 37 38 39 40 ...61 下页

AlloyTeam

React 简单介绍

先说 React 与 React Native

写在前面

写在前面

在这先说明下这两者的异同：

VTree

VTree -> DOM

diff(VTree, VTree) -> PatchObject

patch(DOMNode, PatchObject) -> DOMNode

扩展阅读

同行们是怎么解决的？

我们的方案