前端组件化Polymer入门教程(4)——自定义元素

时间：2023-01-19 06:39:04

除了上一篇说到的创建自定义元素方法以外，还可以通过原生JS来创建，当你需要动态的创建元素时可以通过这种方式。

template.html

<link rel="import" href="../polymer-1.7.0/polymer.html">

<script>

	MyElement = Polymer({

      is: 'my-element',

      created: function() {

        this.textContent = 'My element!';

      }

    });

    var el1 = document.createElement('my-element');

    var el2 = new MyElement();

    document.getElementById('box').appendChild(el2);

</script>

index.html

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<!-- 这是一个基础版的兼容库 -->

	<script src="webcomponents-lite.min.js"></script>

	<!-- 将rel修改为import可以引入另外一个HTML，它将会被执行 -->

    <link rel="import" href="./template/template.html">

</head>

<body>

	<div id="box"></div>

</body>

</html>

前端组件化Polymer入门教程(4)——自定义元素

created: function() {

``this.textContent = 'My element!';

}

当创建这个元素的时候，created会被执行，关于更多这方面的信息我们会在生命周期篇详细说明。

var el1 = document.createElement('my-element');

var el2 = new MyElement();

var el3 = new MyElement();

document.getElementById('box').appendChild(el2);

document.getElementById('box').appendChild(el3);

用new创建MyElement实例,createElement只是创建并不会被添加

前端组件化Polymer入门教程(4)——自定义元素

如果在实例化的时候你想传递参数可以通过添加一个factoryImpl方法。
<script>

	MyElement = Polymer({

      is: 'my-element',

      factoryImpl: function(foo, bar) {

      	this.textContent = 'Hello num is ' + foo + ' you ' +  bar;

      }

    });

	var e = document.createElement('my-element');

    var el = new MyElement(42, 'octopus');

    document.getElementById('box').appendChild(el);

</script>

前端组件化Polymer入门教程(4)——自定义元素

当MyElement被实例化的时候factoryImpl会接受这些参数，并且执行。另外如果你想自定义方法，可以这样。

<script>

	MyElement = Polymer({

      is: 'my-element',

      factoryImpl: function(foo, bar) {

      	this.textContent = 'Hello num is ' + foo + ' you ' +  bar;

      	foo===42&&this.msg();

      },

      msg:function(){

      	alert('你好！');

      }

    });

	var e = document.createElement('my-element');

    var el = new MyElement(42, 'octopus');

    document.getElementById('box').appendChild(el);

</script>

前端组件化Polymer入门教程(4)——自定义元素

默认情况下msg是不会执行的，需要我们手动调用。

扩展原生HTML元素

template.html

<script>

	Polymer({

      is: 'my-input',

      extends: 'input',

      created: function() {

        this.style.border = '1px solid red';

      }

    });

</script>

extends需要扩展的元素，created被创建的时候，通过js的createElement创建或者HTML添加都会执行这个方法。

index.html

<input is="my-input">

<input type="text">

在需要被扩展的元素上添加一个is属性。

前端组件化Polymer入门教程(4)——自定义元素

以上是直接通过HTML的方式添加的，如果需要通过js来操作可以通过下面的方法。

template.html

<script>

	MyInput = Polymer({

      is: 'my-input',

      extends: 'input',

      created: function() {

        this.style.border = '1px solid red';

      }

    });

	var el1 = document.createElement('input','my-input');

	document.body.appendChild(el1);

</script>

前端组件化Polymer入门教程(4)——自定义元素

注意：目前只支持扩展input或button，其他元素或许以后会支持。

如果你想在页面加载完毕以后再执行可以这样写。

template.html

<link rel="import" href="../polymer-1.7.0/polymer.html">

<dom-module id="main-document-element">

  <template>

    <p>

      Hi! I'm a Polymer element that was defined in the

      main document!

    </p>

  </template>

</dom-module>

index.html



<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<!-- 这是一个基础版的兼容库 -->

	<script src="webcomponents-lite.min.js"></script>

	<!-- 将rel修改为import可以引入另外一个HTML，它将会被执行 -->

    <link rel="import" href="./template/template.html">

</head>

<body>

	<main-document-element></main-document-element>

	<script>

	    HTMLImports.whenReady(function () {

	      console.log(1);

	      Polymer({

	        is: 'main-document-element'

	      });

	    });

	    console.log(0);

  </script>

</body>

</html>

当文档中的所有输入都已完成加载时才会调用HTMLImports.whenReady函数。

整篇文章下来，发现创建元素时没有用new有时也可以，目前这个问题还得研究一下，后面再更新。

恭喜你看完了。

相关文章