在前端开发中，制作高质量的 UI 组件是一个不可回避的任务。日历组件是网站或应用中常见的一种组件，因此在本文中将介绍如何使用 Web Components 和 Polymer 技术制作全局日历 UI 组件。Web Components 是一组由 W3C 定义和规范化的浏览器 API，并且 Polymer 是使用 Web Components 技术的高性能JavaScript 库。
前置知识
了解 HTML、CSS 和 JavaScript 开发经验是本文的前置知识。
了解 Web Components
Web Components 是一组由 W3C 定义和规范化的浏览器 API，并且允许开发者创建自定义的 HTML 元素。这些新元素随后可以被浏览器和其他开发者使用。 Web Components 由三种核心技术组成：
- Custom Elements - 允许开发者定义自己的 HTML 元素。
- Shadow DOM - 允许开发者将样式和元素封装在组件内部。
- HTML Templates - 允许开发者定义其标记的内容（HTML，CSS），这些内容仅仅在运行时被解析。
这些技术的结合允许开发者创建可重用和自定义组件。
什么是 Polymer
Polymer 是一个用于使用 Web Components 技术的 JavaScript 库。 Polymer 可以让开发者更加易于定义和扩展可复用的组件。
Polymer 提供了许多有用的 JavaScript 类和工具，使得开发者可以更加轻松地创建、测试、调试和部署自定义 Web Components。
开始制作全局日历 UI 组件
要制作全局日历 UI 组件，我们将使用一个自定义元素和 Polymer。
创建自定义元素
首先，在 HTML 文件中创建一个名为 global-calendar 的自定义元素。
-- -------------------- ---- -------
--------- -----
------
------
------------- -------- -----------------
-------
------
-----------------------------------
-------
-------使用 Polymer
然后，我们需要引入 Polymer 库。
-- -------------------- ---- -------
--------- -----
------
------
------------- -------- -----------------
------- -------------------------------------------------------------------
------- ------------- ----------------------------------------------------------------------------------------------------------------------
-------
------
-----------------------------------
-------
-------这将使我们能够使用 Polymer 元素。
定义 Polymer 元素
接下来，我们要创建一个继承自 PolymerElement 的自定义元素。
-- -------------------- ---- -------
----- -------------- ------- -------------- -
------ --- ---------- -
------ -----
-------
-- --- ----- ---- --
--------
---- ---- ---- ---- ---
--
-
------ --- ------------ -
------ -
-- ---------- ----
--
-
------------- -
--------
-
-此时我们已经定义了一个名为 GlobalCalendar 的 Polymer 元素，并且该元素没有任何功能。接下来需要添加功能和样式。这需要将我们的 HTML 样式和属性添加到模板中。
-- -------------------- ---- -------
------ --- ---------- -
------ -----
-------
----- -
-------- ------
-
-------- -
-------- -----
---------------- --------------
------------ -------
-
-------- ---- -
---------- -----
-
------ ----- -
------ --------
---------- -----
------- --------
-
------------ ----------- -
------ --------
-
------------- -
-------- -------------
---------------- ---------
------- --
-------- --
-
------------- ---
------------- -- -
----------- -------
--------------- -------
-------- ----
------- --- ----- -----
---------- -----
-
------------- -- -
----------------- --------
---------- -----
------------ -------
------ ------
-
------------- -- -
----------------- -----
-
------------- -------- -
----------------- --------
-
------------- ----------- -
----------------- --------
------ ------
-
------------- --------- -
----------------- --------
-
--------
---- ----------------
----- ------------------------
----- ---------------------
----- --------------------
----- ------------------------
------
------ ---------------------
-------
----
------------
------------
------------
------------
------------
------------
------------
-----
--------
---------------
--------
--
-这个样式和结构基本封装了日历组件样式和结构。
事件处理
我们将添加几个事件处理程序来更新日历。在我们的构造函数中，我们将添加事件监听器和定义 updateCalendar 函数。
-- -------------------- ---- -------
------------- -
--------
---------------- - --- -------
-
------------------- -
--------------------------
----------------------
---------------------------------------------------------------- -------------------------------
---------------------------------------------------------------- ---------------------------
-
---------------- -
----- ----- - ----------------------------
----- ---- - -------------------------------
----- ----------- - ----------------------------------------
----- ---------- - ---------------------------------------
----- ----- - ---------------------------------------
----------------------- - -------------------
---------------------- - -----
-- ------
----- --------------- - --- ---------- ------ ---
----- -------------- - --- ---------- ----- - -- ---
----- ----------- - -------------------------
----- -------------- - -------------------------
----- ---- - ------------------------- - ------------ - ---
--- -------- - --
--- --------- - ---------------
--- ---- - ---
--- ---- - - -- - - ----- ---- -
---- -- -------
--- ---- - - -- - - -- ---- -
--- --------- - ---
--- -------- - ---
-- -- --- - -- - - --------------- -
---- -- ------------
---------
- ---- -- --------- - ------------ -
---- -- ------------
---------
- ---- -- --------- --- -------------------- -- ---- --- ------------------------ -- ----- --- ---------------------- -
--------- - --------
-
-- ---------- --- ------- -- --------- - - --- -- -
--------- - -----------
-
---- -- ---- -------------------- ---------------------- --------------------- --------------------------------------
-----------
------------
-
---- -- --------
-
--------------- - -----
-- ----
----- ---- - ----------------------------------------------- -----
--- ---- - - -- - - ------------ ---- -
--------------------------------- --------------- -
----- ----------- - --------------------------------------
----- ------------- - ----------------------------------------
----- ------------ - ---------------------------------------
----- ------------ - --- ------------------ -------------- -------------
------------------------------
--------------
-
-基本日期选择器
最后，我们将添加一些基本的日期选择器功能，允许我们选择一个特定的日期。
-- -------------------- ---- -------
--------------- -
----------------------------------------------------- - ---
----------------------
-
----------- -
----------------------------------------------------- - ---
----------------------
-
---------------- -
------------- - -----
----------------- - -------------------
------------------ - ----------------
---------------- - ---------------
-- -- ------ --
---------------------- --------------------- -
-------- -----
--------- -----
------- - ---- -
----
-- --------
----- --------------- - ----------------------------------------------------------------------------------------------------------------------------------------
----- ---------------- - ----------------------------------------------
--- ---- - - -- - - ------------------------ ---- -
-------------------------------------------------
-
------------------------------------------
-- ------
----- ---------- - ---------------------------------------
----- ------------ - --- ----------------------- ------------------- ------------------
---------------------- - -------------------------
-现在，我们已经创建了一个具有基本功能日期选择器组件，并使用 Polymer 将其包装在自定义元素中。
完整代码如下：
-- -------------------- ---- -------
------ - --------------- ---- - ---- --------------------------------------
----- -------------- ------- -------------- -
------ --- ---------- -
------ -----
-------
----- -
-------- ------
-
-------- -
-------- -----
---------------- --------------
------------ -------
-
-------- ---- -
---------- -----
-
------ ----- -
------ --------
---------- -----
------- --------
-
------------ ----------- -
------ --------
-
------------- -
-------- -------------
---------------- ---------
------- --
-------- --
-
------------- ---
------------- -- -
----------- -------
--------------- -------
-------- ----
------- --- ----- -----
---------- -----
-
------------- -- -
----------------- --------
---------- -----
------------ -------
------ ------
-
------------- -- -
----------------- -----
-
------------- -------- -
----------------- --------
-
------------- ----------- -
----------------- --------
------ ------
-
------------- --------- -
----------------- --------
-
--------
---- ----------------
----- ------------------------
----- ---------------------
----- --------------------
----- ------------------------
------
------ ---------------------
-------
----
------------
------------
------------
------------
------------
------------
------------
-----
--------
---------------
--------
--
-
------ --- ------------ -
------ -
------------ -
----- -------
------ -- -- --- -------
--
------ -
----- -------
--------- ------------------
--
--------- -
----- -------
------- -----
--
------------ -
----- -------
------ --
--
-------------- -
----- -------
------ --
--
------------- -
----- -------
------ --
--
------- -
----- ------
------ ----------- ----------- -------- -------- ------ ------- ------- --------- ------------ ---------- ----------- ------------
--
--
-
------------- -
--------
-
------------------- -
--------------------------
----------------------
---------------------------------------------------------------- -------------------------------
---------------------------------------------------------------- ---------------------------
-
--------------- -
------ --- -------
-
---------------- -
----- ----- - ----------------------------
----- ---- - -------------------------------
----- ----------- - ----------------------------------------
----- ---------- - ---------------------------------------
----- ----- - ---------------------------------------
----------------------- - -------------------
---------------------- - -----
-- ------
----- --------------- - --- ---------- ------ ---
----- -------------- - --- ---------- ----- - -- ---
----- ----------- - -------------------------
----- -------------- - -------------------------
----- ---- - ------------------------- - ------------ - ---
--- -------- - --
--- --------- - ---------------
--- ---- - ---
--- ---- - - -- - - ----- ---- -
---- -- -------
--- ---- - - -- - - -- ---- -
--- --------- - ---
--- -------- - ---
-- -- --- - -- - - --------------- -
---- -- ------------
---------
- ---- -- --------- - ------------ -
---- -- ------------
---------
- ---- -- --------- --- -------------------- -- ---- --- ------------------------ -- ----- --- ---------------------- -
--------- - --------
-
-- ---------- --- ------- -- --------- - - --- -- -
--------- - -----------
-
---- -- ---- -------------------- ---------------------- --------------------- --------------------------------------
-----------
------------
-
---- -- --------
-
--------------- - -----
-- ----
----- ---- - ----------------------------------------------- -----
--- ---- - - -- - - ------------ ---- -
--------------------------------- --------------- -
----- ----------- - --------------------------------------
----- ------------- - ----------------------------------------
----- ------------ - ---------------------------------------
----- ------------ - --- ------------------ -------------- -------------
------------------------------
--------------
-
-
--------------- -
----------------------------------------------------- - ---
----------------------
-
----------- -
----------------------------------------------------- - ---
----------------------
-
---------------- -
------------- - -----
----------------- - -------------------
------------------ - ----------------
---------------- - ---------------
-- -- ------ --
---------------------- --------------------- -
-------- -----
--------- -----
------- - ---- -
----
-- --------
----- --------------- - ----------------------------------------------------------------------------------------------------------------------------------------
----- ---------------- - ----------------------------------------------
--- ---- - - -- - - ------------------------ ---- -
-------------------------------------------------
-
------------------------------------------
-- ------
----- ---------- - ---------------------------------------
----- ------------ - --- ----------------------- ------------------- ------------------
---------------------- - -------------------------
-
-
---------------------------------------- ----------------结论
本文介绍了如何使用 Polymer 和 Web Components 技术创建基本的日期选择器组件，并演示了如何将组件封装在一个自定义元素中。这样的组件非常有用，因为它们可以降低代码的耦合性，并使代码更容易维护、更具可读性。使用 Web Components 和 Polymer 技术，能够创建多种高性能的 UI 组件，并且还可以与其他框架和库整合，为 Web 开发者提供更多创造性空间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6774b4e86d66e0f9aaef8258