Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

初探 Polymer 1.0 之 behaviors

  在实际开发过程中我们经常会遇到多个模块存在通用行为的情况。如果模块可以继承那当然是解决的最佳方案。但模块本来就是解耦后的产物,再加入继承就会变得很奇怪。但我们可以将其作为「行为」的部分抽取出来,这样既符合分层架构理念又不破坏模块的独立性。
  下面的例子中,我们定义了一个叫做 Dog 的行为,然后再定义 Polymer 对象时通过 behaviors 属性引入。这样定义出来的对象就拥有了 Dog 这个行为上定义的 bark 方法: <script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<style>div { font-size: 100px; cursor: pointer; }</style>

<script>
  var Dog = {
    bark: function() {
      alert('汪~');
    }
  };

  Polymer({
    is: 'demo-test',
    extends: 'div',
    listeners: {
      click: 'clickHandler'
    },
    clickHandler: function() {
      this.bark();
    },
    behaviors: [ Dog ]
  });
</script>

<div is="demo-test">&#x1F436;</div>
  behaviors 实际上就是一个原生 JavaScript 对象,上面定义了创建 Polymer 对象时一些属性的默认值。
  Polymer 本身也有自带的 behaviors,Polymer.Templatizer 就是典型。它用于解析模板并渲染模板,类似于 Angular 的 $compile。下面的例子就是使用内置的 Polymer.Templatizer 来渲染一个模板 <script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<script>
  Polymer({
    is: 'demo-test',
    extends: 'template',
    ready: function() {
      this.templatize(this);
      var root = this.stamp({
        text: '次碳酸钴',
        style: 'color:red;'
      }).root;
      this.parentNode.insertBefore(root, this);
    },
    behaviors: [ Polymer.Templatizer ]
  });
</script>

<body>
<template is="demo-test">
  <h1 style$="[[style]]">[[text]]</h1>
</template>
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^