一、Polymer

Polymer 是 Google 在 2013 年的 Google I/O 大会上提出了一个新的 UI 框架。Polymer 的实现使用了 WebComponent 标准，并且 Polymer 可保证针对包含各种平台的 Web Component 规范本地实现的浏览器、库和组件的使用效果完全相同。

1.1 Polymer 框架：

Polymer 框架可以分为三个层次：

• 基础层 (platform.js)：是基本构建块。大多数情况下，基础层都是本地浏览器的 API。
• 核心层 (polymer.js)：实现基础层的辅助器。
• 元素层：建立在核心层之上的 UI 组件或非 UI 组件。

1.2 基础层

基础层包括以下技术：

• DOM Mutation Oberservers 和 Object.observe()：用于观察 DOM 元素的变更，是纯 JavaScript 对象。
• 指针事件：处理鼠标和触摸操作，支持所有的平台。
• 阴影 DOM：封装元素内的结构和样式，适合自定义元素。
• 自定义元素：可以自定义 HTML5 的元素。自定义元素的名字必须包含一个破折号，这是一种简单的命名空间标识，以区别于标准元素。
• HTML 导入：包自定义元素。这些包可能包含 HTML、CSS 和 JavaScript。
• 模型驱动的视图 (MDV)：把数据直接绑定到 HTML。
• Web 动画：一套统一的 Web 动画 API。
  阴影 DOM、自定义元素和 HTML 元素 Web Components，是网络组件模型。Web Components 是 Polymer 框架的最重要的基础。
  platform.js 目前浏览器还没有提供，它仅有 31KB 大小。

1.3 核心层和元素层，即组件 UI 和组件逻辑

其架构是面向组件的，它由 HTML5 元素组成，元素甚至可以用户界面，比如动画是元素，它没有 UI，而是代替点。同时响应式设计内建了许多 Widget，这意味着它们能自适应多种给定的平台，如手机、平板、桌面等。

二、Polymer 的一个例子

1. 先看下面 polymer 的一个例子代码

2. Polymer 使用 HTML imports 技术来加载组件。

HTML imports 提供了依赖管理, 确保自定义元素及其所有的依赖项都在使用之前被加载进来。

3. 要增加一个工具条 (toolbar), 可以在 body 标签内添加下面的代码:

元素是一个简单的容器, 例如包含一个 header 和一些内容。默认情况下, header 保持在屏幕的顶部, 但也可以设置为随内容滚动。core-toolbar 元素作为容器, 可以存放 选项卡 (tab) 的, 菜单按钮以及其他控件。
给迪例子较为简单，目前由于以下兼容性 Polymer 用的还不是很多，但是通过 Polymer 组件化的思想，也可以给我们一些组件未来化的方向。

三、Polymer 的 vm 特性

3.1、数据的双向绑定

Polymer 支持双向的数据绑定。数据绑定通过扩展 HTML 和 DOM API 来支持应用的 UI (DOM) 及其底层数据 (数据模型) 之前的有效分离。更新数据模型会反映在 DOM 上，而 DOM 上的用户输入会立即赋值到数据模型上。
对于 Polymer elements 来说，数据模型始终就是 element 本身。比如想想这个简单的 element：

这里 owner 属性里的 name-tag 就相当于 mvvm 中 vuejs 的 derectives，angular 中的 controller，如果你更新了 owner 属性

你就会看到： 这是一个 shabi 的 name-tag element。

3.2 template 惰性元素

这点实现原理就比较简单，使用了 template 包含一段 html 片段，那这段 html 片段开始是隐藏的，将会在渲染完成后再插入到页面中，个人分析，这样做的一个主要原因就是防止 mvvm 中 html 未初始化时的模板代码到正式生成 html 页面过程中闪的过程，使用 angular 或 avalon 的话一般会遇到这样的问题

例如这里 template 里面的内容开始是隐藏的，将会在 mv 扫面节点完成后插入到 dom 树里，避免页面闪的发生。其中模板里面的变量使用的类 mustache 语法，和 Avalon 极其类似。

3.3 数据绑定与事件处理

这部分下次来讲，这次主要讲 polymer，这部分也可以参考我之前 qvm 的看下 mvvm 中事件绑定和代理的实现。qvm gitHub 地址

四、前端组件化的发展方向

当然 polymer 只是前端组件化未来的一种方向，这种思想也即将带来一系列前端新的技术方向出现，例如可能
####1. Web Component 规范化定义
基于标准化的组件定义方式，我们便可以像 W3C 等标准组织一样来定义组件标准，成为 html 规范的一部分，不用依赖其它组件，成为未来 web 开发基础规范来实现，支持 vm 监听功能等。例如 polymer 这种方案的发展就借鉴了 webcomponent 和 mvvm 的融合思想。

2. react 生态

react 的组件化生态思想和 webComponent 也及其相似，当然 react 做了更多的事情，除了 web Component，react 想做的其实可以称为 platform component。

3. angular 2.0 和 EmberJS 等现有成熟方案的改进

angular2.0 已明确提出将支持 Node 绑定、模板集成、元素自定义和支持网络组件的无缝集成；ember 的发展情况依然，今后也不排除 jQuery 等框架的进化重生，以全新的面目出现。

4. 开发者的其它小众解决方案

在企业中，针对企业特殊性的业务，企业前端开发者也可以根据 webComponent 的思想自己实现更加灵活可用的组件拼装解决方案。相比之下，这个方向的探索研究甚至会更加受欢迎，因为只有开发者才关注关注自己的组件怎么管理。例如目前 qiqi 项目所用的方案就比较符合这个方向。

Vue.js 是一个基于 MVVM 模型的 web 库。通过双向数据绑定连接 View 和 Model 层。实际的 DOM 操作被封装成 Directives 和 Filters。

基本定义

每个 Vue 对象的实例是一个 ViewModel。创建方式：

其中 vue.$el 用于管理 View 层上的 DOM 。而 vue.$data 用于管理 Model 层的数据，可以通过 vue.$data.property 访问 Model 层数据，也可以直接 vue.property 访问。

Hello World 入门

从上面的例子可以看出：

• 模版替换使用的是 {{ variable }}
• Directives 格式是 v-xxx ，如上 v-repeat 。
• Filtrs 格式是 {{ variable | filter }} ，如上 uppercase

事件

在 DOM 节点上通过 v-on 绑定处理函数（可以是表达式）。函数的第一个参数是 DOM Event 对象，该对象附带 targetVM 指向 DOM 对应的 ViewModel。

自定义指令

内置的指令不够用怎么办？想自定义数据变化对 DOM 的影响怎么破？
Vue.js 允许自定义全局指令，格式：

同时，在指令函数中，提供了一些 this 上下文的公开属性（这里列举了几个常用的）：

• el : 访问绑定的 DOM 元素，提供 View 层访问。
• vm : 访问指令对应的上下文，ViewModel 对象，this.vm.$el = this.el
• expression : 指令绑定的表达式，不包括参数和 filter
• args : 参数

举个栗子。

自定义过滤器

Vue.js 允许使用全局函数 Vue.filter() 定义过滤器，将 Model 数据输出到 View 层之前进行数据转化。

双向过滤器允许 View 层数据（input 元素）变回写到 Model 层之前，进行转化，定义方式如下：

举个栗子：

总结

Vue.js 提供的核心是 MVVM 中的 VM，确保视图和数据的一致性。同时，借鉴了 Angular 中的 Directive 和 Filter 的概念，但是却简化了 API。

在说容易按比例缩放前，我们先说下图片按比例缩放。

对于图片，默认只设置图片的一个宽或高，那么另一个值就会按照图片真实比例缩放，如

图片因为本身存在宽高比，所以设置一个值，另一个值自动也就根据真实的比例对应上，但是如果是视频呢？

一般在响应式中，我们会要求视频的宽高比为 16：9 或 4：3，这么一来就比较头大了。当用户改变浏览器宽度的时候（改变高度不考虑），视频的宽度变了，那么高度也得根据我们要求的 16：9 或 4：3 改变。

这里老外提供了一个很巧的方案：Creating Intrinsic Ratios for Video

核心思想为：提供一个容器，设置容器的高度为 0，再设置 padding-bottom 为 56.25%（因为 padding 的百分比是按照容器宽度计算的，所以由 padding 来撑开容器高度，而不是 height，保证了容器的宽高比例），最后设置视频绝对定位，其宽高为容器的 100%

根据上述思想，我们再将其扩展下，应用到其他地方，如：

这是一个移动端页面的一部分，要求全屏里面正好三张图片，左右图片宽度是相等的，第一个图片和第三个图片下面要对齐，图片之间的间距为 10px。鉴于移动端的屏幕大小不等，所以使用定宽不合适。

详细请参考容器等比缩放 demo

前面文章讲了 FIS 的源码实现细节，这篇文章偏实战一些，给出 FIS 跟 require.js 结合的简单例子。

FIS 编译流程

如果已熟悉了 FIS 的编译设计，可以跳过这一节，直接进入下一小结。FIS 的编译主要有三步：

命令解析–> 资源编译–> 资源部署

1. 资源编译：FIS 将文件资源抽象成 File 实例，该实例上有文件资源类型、id、内容、部署路径等的属性。对于文件的编译，实际上都是对 File 实例进行操作，比如修改资源的部署路径等（内存里操作）。
2. 资源部署：根据 File 实例的属性，进行实际的部署动作（磁盘写操作）。

FIS 的这套编译体系，使得基于 FIS 的扩展相对比较容易。在扩展的同时，还可以确保编译的高性能。针对资源编译环节的扩展，除非是设计不合理，不然一般情况下不会导致性能的急剧降低。

getting started

啰嗦的讲了一大通，下面来点半干货。喜欢 require.js，但又喜欢用 CMD 编写模块的朋友有福了，下面会简单介绍如何整合 require.js 与 FIS。

demo 已经放在 github，下载请猛戳。

首先看下项目结构。modules 目录里的是模块化的资源，lib 目录里的是非模块化资源。其中：

1. index.html 依赖 require.js 来实现模块化管理
2. index.js 模块依赖 util.js 模块
3. index.js、util.js 均采用 CMD 规范

也就是说，本例子主要实现的，就是 CMD 到 AMD 的转换。

资源概览

首先，我们看下 index.html，引用了 require.min.js，并加载了 modules/index 模块，跟着执行回调，没了。

接下来，我们看下 index.js。也很简单，加载依赖的模块 modules/util，接着暴露出本身模块，其实就是调用 Utill 模块的方法 deubg。

再看看 uti.js，不赘述。

如果换成熟悉的 AMD，index.js 应该是这样子的。那么思路就很清晰了。对 CMD 模块进行 define 包裹，同时将模块的依赖添加进去。

作为一枚贴近前端实践的集成解决方案，FIS 早已看穿一切。下面进入实战编码环节。

实战：修改 fis-conf.js

首先，打开 fis-conf.js，加入如下配置。配置大致意思是：

1. 在 postprocessor 环节，针对 js 文件，调用 fis-postprocessor-jswrapper 进行处理。
2. postprocessor 插件的配置看 settings.postprocessor，type 为 AMD，表示对模块进行 AMD 包裹。

接着，添加 roadmap.path 配置。直接看注释，如果对配置不熟悉，可参考官方文档。

写在后面

本文简单介绍 CMD 到 AMD 的转换，距离实战还有很多事情要做，比如 require.js 的配置支持，打包部署等，这里也就抛个思路，感兴趣的童鞋可以进一步扩展。