Polymer 真难懂啊

[LimboRunner]

有人在用 Google Polymer 吗？光是搞明白 UI 效果就让我焦头烂额了，比如 bootstrap 有 container ，有网格系统，这些东西在 polymer 里好像并不存在，所以要给元素留白什么的都要自己写样式吗？

而且从官网元素库复制过来的元素常常不能正常显示，即使 import 了相关的组件。 Polymer 还会进行许多幕后的操作，导致你写到 html 里的代码跟浏览器里的代码差异巨大，让我一头雾水。

是我学习的姿势不对吗？

[w88975]

准确的来说,Polymer 是一个 JS Framework 并不是一个 UI KIT,跟 React,angular 是同一类的.

至于你说的官网组件直接拿来用,不能正常显示,我猜你是用了一些 base 组件之类的(我是这样叫的),这些组件有些不提供 UI,只提供接口,有些提供组件也 DOM Render,但是样式还是需要自己写. 这些 base 组件是用来二次开发的,也就是说比如你需要开发一个只能输入数字的 input 框,你可以找一个已经完善了很多基本操作的 input 的 base 组件(比如 提供了设置只能输入 Number 类型,绑定了 change 事件等),你不需要在 base 组件上面进行修改,你只需要自己新建一个组件,然后 import 进来,有一个 component 继承的思想.

Polymer 的核心是组件化,shadow dom,上手是有点难度,但是一旦搞明白,你基本很喜欢这种前端的开发模式(如果你不考虑兼容性的话,话说现在浏览器的兼容也不太差了).

:)

[learnshare]

Polymer 讲究的是完全组件化，每个组件都是独立的，不能用常规的方式来看待。

[w88975]

学习的话,直接看 Polymer 官网文档就行,之前有个朋友翻译了 Polymer 的文档,国内镜像现在挂掉了.

我之前参与的一个大型游戏引擎编辑器,整个 UI 就是用 Polymer 编写的,开源在 Github 上,可以作为学习的参考.

https://github.com/cocos-creator/editor-framework

https://github.com/fireball-packages/ui-kit/

[LimboRunner]

@w88975 但是像 Paper Elements 里的元素应该是自带 MD 样式的吧？

比如我引入了 paper-menu.html 然后在代码中粘贴上 menu 的代码，结果没有任何样式。

[acthtml]

理解 web component 就好办多了
- html import
- shadow css
- template
- custom element

这东西思想是好的，但是兼容性太差。

[acthtml]

http://dai-hua.com/2015/07/21/polymer-start.html

[w88975]

@LimboRunner 光引入 paper-menu.html 是不行的,还需要看 paper-menu.html 依赖了哪些组件,一般都是 iron-xxx 开头的,这些组件没有找到的话,的确是没有样式的.

我看了下,paper-menu 引了这么多依赖:

iron-collapse.html
paper-submenu.html
demo-pages.html
paper-item.html
iron-collapse.html
paper-submenu.html

[LimboRunner]

@w88975 组件都是 bower 安装的，应该不存在依赖的问题，刚才试了一下 cards 是没问题的。

现在我觉得更像是 paper-menu 自己的问题。

感觉使用了 Polymer 的网页源码基本不可读了

[w88975]

@LimboRunner 所以我们都没有用 Polymer 提供的组件,顶多用他的 iron 组件,自己开发比较好,还有就是 paper-xxx 这类的组件依赖很多,对新手一点都不友好,入门的话还是推荐自己上手写组件,跟着官网的教程一步一步来,其实写一两个复杂一点的组件也就懂了 Polymer 的用法,入门后就一点不难了