V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
LimboRunner
V2EX  ›  前端开发

Polymer 真难懂啊

  •  
  •   LimboRunner · 2016-04-29 15:50:17 +08:00 · 2609 次点击
    这是一个创建于 2890 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    是我学习的姿势不对吗?

    9 条回复    2016-04-29 17:34:29 +08:00
    w88975
        1
    w88975  
       2016-04-29 16:02:07 +08:00   ❤️ 1
    准确的来说,Polymer 是一个 JS Framework 并不是一个 UI KIT,跟 React,angular 是同一类的.

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

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

    :)
    learnshare
        2
    learnshare  
       2016-04-29 16:04:45 +08:00
    Polymer 讲究的是完全组件化,每个组件都是独立的,不能用常规的方式来看待。
    w88975
        3
    w88975  
       2016-04-29 16:08:44 +08:00
    学习的话,直接看 Polymer 官网文档就行,之前有个朋友翻译了 Polymer 的文档,国内镜像现在挂掉了.

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

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

    https://github.com/fireball-packages/ui-kit/
    LimboRunner
        4
    LimboRunner  
    OP
       2016-04-29 16:28:06 +08:00
    @w88975 但是像 Paper Elements 里的元素应该是自带 MD 样式的吧?

    比如我引入了 paper-menu.html 然后在代码中粘贴上 menu 的代码,结果没有任何样式。
    acthtml
        5
    acthtml  
       2016-04-29 16:32:24 +08:00
    理解 web component 就好办多了
    - html import
    - shadow css
    - template
    - custom element

    这东西思想是好的,但是兼容性太差。
    acthtml
        6
    acthtml  
       2016-04-29 16:33:51 +08:00
    w88975
        7
    w88975  
       2016-04-29 16:41:16 +08:00
    @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
        8
    LimboRunner  
    OP
       2016-04-29 17:26:56 +08:00
    @w88975 组件都是 bower 安装的,应该不存在依赖的问题,刚才试了一下 cards 是没问题的。

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

    感觉使用了 Polymer 的网页源码基本不可读了
    w88975
        9
    w88975  
       2016-04-29 17:34:29 +08:00
    @LimboRunner 所以我们都没有用 Polymer 提供的组件,顶多用他的 iron 组件,自己开发比较好,还有就是 paper-xxx 这类的组件依赖很多,对新手一点都不友好,入门的话还是推荐自己上手写组件,跟着官网的教程一步一步来,其实写一两个复杂一点的组件也就懂了 Polymer 的用法,入门后就一点不难了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3662 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 10:43 · PVG 18:43 · LAX 03:43 · JFK 06:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.