365bet亚洲版登录-bet官网365入口

365bet亚洲版登录拥有超过百间客房,bet官网365入口的文化历经几十年的传承和积淀形成的核心内容获得业界广泛的认可,365bet亚洲版登录是目前信誉最高的娱乐场所,同国内外几百家网上内容供应商建立了合作关系。

Components构建单页面应用

用Web Components构建单页面应用

2015/01/19 · JavaScript · Web Components

本文由 伯乐在线 - 周进林 翻译,Mxt 校稿。未经许可,禁绝转发!
葡萄牙语出处:www.polymer-project.org。接待加入翻译组。

您是何许运用Polymer创设多少个单页应用的?那些难题大家在Polymer团队里早已问过不菲遍了。大家的答案(长久以来地卡塔尔是“使用组件(component卡塔尔!”。可是,使用新技能去解决现成的题材屡次不会立马取得料定的遵循。怎么着把一群模块化组件组合到七个巨型的实用的应用中去?

在本教程,小编将会给您出示怎么着去构建八个功效生机勃勃体化的单页应用:

图片 1

  • 全盘使用Polymer的宗旨要素构建
  • 动用响应式设计
  • 使用数据绑定本性过渡视图
  • 利用UPAJEROL路由和深层链接脾气
  • 可访谈键盘
  • 按需动态载入内容(可选卡塔尔国

 打开演示

选择架构

规划布局是开始四个品种的主要职分之风流洒脱。作为着力因素集合的一局地,Polymer通过多少个布局成分 来支撑应用程序的构架(<core-header-panel>, <core-drawer-panel>, <core-toolbar>卡塔尔国。那一个构件自身就很好用,不过为了更加快地开端项目,大家准备注重于<core-scaffold>。有了它你能够因而建构多少个基本的因素就能够做出二个响应式的运动端布局。

<core-scaffold>的子成分能够是点名特定的成分或选取一定的标签(或双方一同使用卡塔 尔(阿拉伯语:قطر‎。譬喻,使用<nav>成分创造应用抽屉菜单。你能够在随便的因素里使用navigation属性(e.g <core-header-panel navigation>卡塔 尔(阿拉伯语:قطر‎。工具栏通过工具属性标记。它的富有别的子成分都定义在非常重要内容区域里。

例子

XHTML

<body unresolved fullbleed> <core-scaffold id="scaffold"> <nav>Left drawer</nav> <core-toolbar tool>Application</core-toolbar> <div>Main content</div> </core-scaffold> </body>

1
2
3
4
5
6
7
<body unresolved fullbleed>
  <core-scaffold id="scaffold">
    <nav>Left drawer</nav>
    <core-toolbar tool>Application</core-toolbar>
    <div>Main content</div>
  </core-scaffold>
</body>

让大家豆蔻梢头道来深入这么些内容的每一片段

抽屉菜单

你放在导航成分里的符号都定义在滑走的应用抽屉菜单里。为了咱们的对象 ,笔者百折不回运用标题(<core-toolbar>)和导航链接 (<core-menu>):

XHTML

<nav> <core-toolbar><span>Single Page Polymer</span></core-toolbar> <core-menu selected="0"> <paper-item noink> <core-icon icon="label-outline"></core-icon> <a href="#one">Single</a> </paper-item> <paper-item noink> <core-icon icon="label-outline"></core-icon> <a href="#two">page</a> </paper-item> ... </core-menu> </nav>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<nav>
  <core-toolbar><span>Single Page Polymer</span></core-toolbar>
  <core-menu selected="0">
    <paper-item noink>
      <core-icon icon="label-outline"></core-icon>
      <a href="#one">Single</a>
    </paper-item>
    <paper-item noink>
      <core-icon icon="label-outline"></core-icon>
      <a href="#two">page</a>
    </paper-item>
    ...
  </core-menu>
</nav>

注意,将来<core-menu selected=”0″>被硬编码为选用第二个条约。咱们今后会把它改为动态的。

工具栏

工具栏横跨了页面最上部并包括了效果与利益开关Logo。满足这种效果与利益的一揽子成分是<core-toolbar>:

XHTML

<!-- flex makes the bar span across the top of the main content area --> <core-toolbar tool flex> <!-- flex spaces this element and jusifies the icons to the right-side --> <div flex>Application</div> <core-icon-button icon="refresh"></core-icon-button> <core-icon-button icon="add"></core-icon-button> </core-toolbar>

1
2
3
4
5
6
7
<!-- flex makes the bar span across the top of the main content area -->
<core-toolbar tool flex>
  <!-- flex spaces this element and jusifies the icons to the right-side -->
  <div flex>Application</div>
  <core-icon-button icon="refresh"></core-icon-button>
  <core-icon-button icon="add"></core-icon-button>
</core-toolbar>

根本内容

最后生龙活虎某个是为您的剧情而留的。它可以是其余的成分。<div>是四个很好的拈轻怕重:

XHTML

<div layout horizontal center-center fit> <!-- fill with pages --> </div>

1
2
3
<div layout horizontal center-center fit>
  <!-- fill with pages -->
</div>

fit属性表示主要区域的剧情会分布父成分的宽带和中度,layout horizontal center-center属性表示使用弹性框(flexbox卡塔尔来使内容居中和垂直居中。

创建“视图”

多视图(可能多页面卡塔尔国能够选择<core-pages>恐怕<core-animated-pages>来创制。在壹遍只显示一个子成分时,多少个成分都很有用。而利用<core-animated-pages>的益处是,它提供了越来越多的默许和灵活的页面过渡。

上边包车型客车亲自过问(demo卡塔 尔(阿拉伯语:قطر‎使用了<core-animated-pages>成分的slide-from-right过渡效果。首先,导入成分定义和slide-from-right过渡效果。

XHTML

<link rel="import" href="components/core-animated-pages/core-animated-pages.html"> <link rel="import" href="components/core-animated-pages/transitions/slide-from-right.html">

1
2
<link rel="import" href="components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="components/core-animated-pages/transitions/slide-from-right.html">

接下来插入你的剧情:

XHTML

<div layout horizontal center-center fit> <core-animated-pages selected="0" transitions="slide-from-right"> <section layout vertical center-center> <div>Single</div> </section> <section layout vertical center-center> <div>page</div> </section> ... </core-animated-pages> </div>

1
2
3
4
5
6
7
8
9
10
11
<div layout horizontal center-center fit>
  <core-animated-pages  selected="0" transitions="slide-from-right">
    <section layout vertical center-center>
      <div>Single</div>
    </section>
    <section layout vertical center-center>
      <div>page</div>
    </section>
    ...
  </core-animated-pages>
</div>

专心,以往<core-animated-pagesselected=”0″>那行代码是硬编码去筛选第朝气蓬勃页。不过大家之后会把它写成动态的。

今昔您应该负有了壹此中央的行使,但是此地有风华正茂对小的标题亟需注意。多亏损Polymer每一个成分提供的布局属性和暗许样式,你能够不写任何的CSS代码就能够完成一个响应式应用。当然,从material design调色板里拿到一些灵感,设置不到10 CSS规则就足以让那个理应变得更加雅观。

展示:没设置CSS     展示:设置CSS

使用数据绑定

咱俩富有了一个施用,但那不值得风流倜傥提。这离D奇骏Y还远着。近似的暗号在那再一次现身:

XHTML

<nav> <core-menu selected="0"> <paper-item noink> <core-icon icon="label-outline"></core-icon> <a href="#one">Single</a> </paper-item> <paper-item noink> <core-icon icon="label-outline"></core-icon> <a href="#two">page</a> </paper-item> <paper-item noink> <core-icon icon="label-outline"></core-icon> <a href="#three">app</a> </paper-item> ... </core-menu> </nav>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<nav>
  <core-menu selected="0">
    <paper-item noink>
      <core-icon icon="label-outline"></core-icon>
      <a href="#one">Single</a>
    </paper-item>
    <paper-item noink>
      <core-icon icon="label-outline"></core-icon>
      <a href="#two">page</a>
    </paper-item>
    <paper-item noink>
      <core-icon icon="label-outline"></core-icon>
      <a href="#three">app</a>
    </paper-item>
    ...
  </core-menu>
</nav>

那无差距于不是动态的。当客商筛选三个菜单条款时,页面不会更新。幸运的是,这个主题素材都能够运用Polymer的多少绑定性情轻便化解。

自动绑定模板(template卡塔 尔(阿拉伯语:قطر‎

为了利用<polymer-element>外的绑定数据,包装叁个Yo应用?利用内部的自动绑定<template>成分:

XHTML

<body unresolved fullbleed> <template is="auto-binding"> <core-scaffold id="scaffold"> ... </core-scaffold> </template> </body>

1
2
3
4
5
6
7
<body unresolved fullbleed>
  <template is="auto-binding">
    <core-scaffold id="scaffold">
      ...
    </core-scaffold>
  </template>
</body>

提醒,<template>自动绑定成分允许我们在关键页面里选拔{{}},表达式和on-*来声称事件微处理器。

应用数据模型( data model卡塔尔简化标识

运用数据模型来发生标志能够大大方方减小你写标识的数码。在大家的案例里,全数的美食指南条目款项和页面都能够利用大器晚成对<template repeat>成分来表现。

XHTML

<core-menu valueattr="hash" selected="{{route}}"> <template repeat="{{page in pages}}"> <paper-item hash="{{page.hash}}" noink> <core-icon icon="label-outline"></core-icon> <a href="#{{page.hash}}">{{page.name}}</a> </paper-item> </template> </core-menu> <core-animated-pages valueattr="hash" selected="{{route}}" transitions="slide-from-right"> <template repeat="{{page in pages}}"> <section hash="{{page.hash}}" layout vertical center-center> <div>{{page.name}}</div> </section> </template> </core-animated-pages>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<core-menu valueattr="hash" selected="{{route}}">
  <template repeat="{{page in pages}}">
    <paper-item hash="{{page.hash}}" noink>
      <core-icon icon="label-outline"></core-icon>
      <a href="#{{page.hash}}">{{page.name}}</a>
    </paper-item>
  </template>
</core-menu>
 
<core-animated-pages valueattr="hash" selected="{{route}}"
                     transitions="slide-from-right">
  <template repeat="{{page in pages}}">
    <section hash="{{page.hash}}" layout vertical center-center>
      <div>{{page.name}}</div>
    </section>
  </template>
</core-animated-pages>

地点的符号由上边包车型客车数据模型来驱动:

XHTML

<script> var template = document.querySelector('template[is="auto-binding"]'); template.pages = [ {name: 'Single', hash: 'one'}, {name: 'page', hash: 'two'}, {name: 'app', hash: 'three'}, ... ]; </script>

1
2
3
4
5
6
7
8
9
<script>
  var template = document.querySelector('template[is="auto-binding"]');
  template.pages = [
    {name: 'Single', hash: 'one'},
    {name: 'page', hash: 'two'},
    {name: 'app', hash: 'three'},
    ...
  ];
</script>

留意,<core-animated-pages>和<core-menu>通过绑定它们的selected属性来涉及在黄金时代道。现在,当客商点击叁个导航条款时,页面会做出相应的改正。valueattr=”hash”设置告诉多个因素在种种条目款项里应用hash属性作为选项的值。

XHTML

<!-- data-bind the menu selection with the page selection --> <core-menu valueattr="hash" selected="{{route}}"> ... <core-animated-pages valueattr="hash" selected="{{route}}">

1
2
3
4
<!-- data-bind the menu selection with the page selection -->
<core-menu valueattr="hash" selected="{{route}}">
...
<core-animated-pages valueattr="hash" selected="{{route}}">

展示

U凯雷德L路由(U奔驰M级L routing卡塔尔国和深层链接

<flatiron-director>是三个包装了flatiron director JS library(一个JS库)的web组件。改变它的route属性把U悍马H2L#号(U奇骏L hash卡塔尔国更新到平等的值。

当大家想在页面加载时保持上次的视图时,数据绑定再度派上用处。把路由(director.js里的director卡塔 尔(英语:State of Qatar)、菜单和页面成分连接起来并使它们一同。当一个立异时,别的的同后生可畏跟着更新。

XHTML

<flatiron-director route="{{route}}" autoHash> ... <core-menu selected="{{route}}"> ... <core-animated-pages selected="{{route}}">

1
2
3
4
5
<flatiron-director route="{{route}}" autoHash>
...
<core-menu selected="{{route}}">
...
<core-animated-pages selected="{{route}}">

深层链接-当模板准备好时,初叶化路由。

XHTML

template.addEventListener('template-bound', function(e) { // Use URL hash for initial route. Otherwise, use the first page. this.route = this.route || DEFAULT_ROUTE; };

1
2
3
4
template.addEventListener('template-bound', function(e) {
// Use URL hash for initial route. Otherwise, use the first page.
this.route = this.route || DEFAULT_ROUTE;
};

其余路由库

假设你抵触<flatiron-director>,能够施行<app-router>或者<more-routing>。它们都是足以兑现更头昏眼花功用的路由(通配符,HTML5历史API,动态内容卡塔尔。小编个人更赏识<flatiron-director>,因为它归纳易用何况能够和<core-animated-pages>很好地协作使用

例子: <more-routing>

XHTML

<more-route-switch> <template when-route="user"> <header>User {{params.userId}}</header> <template if="{{ route('user-bio').active }}"> All the details about {{params.userId}}. </template> </template> <template when-route="/about"> It's a routing demo! <a _href="{{ urlFor('user-bio', {userId: 1}) }}">Read about user 1</a>. </template> <template else> The index. </template> </more-route-switch>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<more-route-switch>
  <template when-route="user">
    <header>User {{params.userId}}</header>
    <template if="{{ route('user-bio').active }}">
      All the details about {{params.userId}}.
    </template>
  </template>
  <template when-route="/about">
    It's a routing demo!
    <a _href="{{ urlFor('user-bio', {userId: 1}) }}">Read about user 1</a>.
  </template>
  <template else>
    The index.
  </template>
</more-route-switch>

例子: <app-router>

XHTML

<app-route path="/home" import="/pages/home-page.html"></app-route> <app-route path="/customer/*" import="/pages/customer-page.html"></app-route> <app-route path="/order/:id" import="/pages/order-page.html"></app-route> <app-route path="*" import="/pages/not-found-page.html"></app-route>

1
2
3
4
<app-route path="/home" import="/pages/home-page.html"></app-route>
<app-route path="/customer/*" import="/pages/customer-page.html"></app-route>
<app-route path="/order/:id" import="/pages/order-page.html"></app-route>
<app-route path="*" import="/pages/not-found-page.html"></app-route>

键盘导航

键盘扶助的显要不止是为着便利的访谈,它同样会使SPA客户刚到更高兴。

<core-a11y-keys>是叁个规格浏览器键盘事件的停放组件。它能够在您的选用里增添键盘支持。这里有二个事例:

XHTML

<core-a11y-keys target="{{parentElement}}" keys="up down left right space space+shift" on-keys-pressed="{{keyHandler}}"></core-a11y-keys>

1
2
3
<core-a11y-keys target="{{parentElement}}"
keys="up down left right space space+shift"
on-keys-pressed="{{keyHandler}}"></core-a11y-keys>

注意

事件的target属性数据绑定到大家的自动绑定模块的parentElement属性。在这里个案例里,它是<body>成分。

key属性满含叁个以空格分隔成分的列表,列表中包涵了要监听键位。当这几个整合的内部四个被按下,<core-a11y-keys>触发多个keys-pressed事件并调用你的回调函数。

keys-pressed事件的计算机使用<core-animated-pages>的selectNext/selectPrevious API去步向下风度翩翩页恐怕重回上大器晚成页:

JavaScript

template.keyHandler = function(e, detail, sender) { var pages = document.querySelector('#pages'); switch (detail.key) { case 'left': case 'up': pages.selectPrevious(); break; case 'right': case 'down': pages.selectNext(); break; case 'space': detail.shift ? pages.selectPrevious() : pages.selectNext(); break; } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
template.keyHandler = function(e, detail, sender) {
  var pages = document.querySelector('#pages');
 
  switch (detail.key) {
    case 'left':
    case 'up':
      pages.selectPrevious();
      break;
    case 'right':
    case 'down':
      pages.selectNext();
      break;
    case 'space':
      detail.shift ? pages.selectPrevious() : pages.selectNext();
      break;
  }
};

按需加载内容

固然你想客商在你的运用里导航时动态加载内容要如何做?只需一些退换,大家就可以支撑动态加载页面。

第后生可畏,更新数据模型,使它包罗内容的UGL450L:

JavaScript

template.pages = [ {name: 'Intro', hash: 'one', url: '/tutorial/intro.html'}, {name: 'Step 1', hash: 'two', url: '/tutorial/step-1.html'}, ... ];

1
2
3
4
5
template.pages = [
{name: 'Intro', hash: 'one', url: '/tutorial/intro.html'},
{name: 'Step 1', hash: 'two', url: '/tutorial/step-1.html'},
...
];

下一场改成菜单链接指向page.url并非#:

XHTML

<paper-item hash="{{page.hash}}" noink> <a href="{{page.url}}">{{page.name}}</a> </paper-item>

1
2
3
<paper-item hash="{{page.hash}}" noink>
<a href="{{page.url}}">{{page.name}}</a>
</paper-item>

终极,使用大家的<core-ajax>好朋友来博取内容:

XHTML

<core-ajax id="ajax" auto url="{{selectedPage.page.url}}" handleAs="document" on-core-response="{{onResponse}}"> </core-ajax>

1
2
3
<core-ajax id="ajax" auto url="{{selectedPage.page.url}}"
handleAs="document" on-core-response="{{onResponse}}">
</core-ajax>

你能够把<core-ajax>看作是多个情节调控器。它的url属性数据绑定到selectedPage.page.url。那象征,无论怎么样时候四个新的菜谱条目款项被选中,XH中华V(XMLHttpRequest的缩写,译者注)就能够去赢得相应的页面。当core-response触发时,onResponse就能够把文书档案再次回到的风华正茂有些插入预先保留的器皿里。

JavaScript

template.onResponse = function(e, detail, sender) { var article = detail.response.querySelector('scroll-area article'); var pages = document.querySelector('#pages'); this.injectBoundHTML(article.innerHTML, pages.selectedItem.firstElementChild); };

1
2
3
4
5
6
7
template.onResponse = function(e, detail, sender) {
  var article = detail.response.querySelector('scroll-area article');
 
  var pages = document.querySelector('#pages');
  this.injectBoundHTML(article.innerHTML,
                       pages.selectedItem.firstElementChild);
};

AJAX实例演示

润饰和甘休

此处有一点点小本事和秘诀你能够用来修改你的行使。

当叁个美食指南条约被选用后,关闭应用的抽屉菜单(drawer卡塔 尔(阿拉伯语:قطر‎:

JavaScript

<core-menu ... on-core-select="{{menuItemSelected}}">

1
<core-menu ... on-core-select="{{menuItemSelected}}">

JavaScript

template.menuItemSelected = function(e, detail, sender) { if (detail.isSelected) { scaffold.closeDrawer(); } };

1
2
3
4
5
template.menuItemSelected = function(e, detail, sender) {
  if (detail.isSelected) {
    scaffold.closeDrawer();
  }
};

为导航选择条约设置区别的图标:

XHTML

<paper-item noink> <ore-icon icon="label{{route != page.hash ? '-outline' : ''}}"></core-icon> <core-animated-pages ... on-tap="{{cyclePages}}">

1
2
3
<paper-item noink>
  &lt;ore-icon icon="label{{route != page.hash ? '-outline' : ''}}">&lt;/core-icon>
<core-animated-pages ... on-tap="{{cyclePages}}">

JavaScript

template.cyclePages = function(e, detail, sender) { // If click was on a link, navigate and don't cycle page. if (e.path[0].localName == 'a') { return; } e.shiftKey ? sender.selectPrevious(true) : sender.selectNext(true); };

1
2
3
4
5
6
7
8
template.cyclePages = function(e, detail, sender) {
  // If click was on a link, navigate and don't cycle page.
  if (e.path[0].localName == 'a') {
    return;
  }
  e.shiftKey ? sender.selectPrevious(true) :
               sender.selectNext(true);
};

结束语

现行反革命,你应当明白使用Polymer和web组件营造的单页应用的为主构架了。那可能和营造守旧的施用有所分歧,但总的看,组件让事情变得轻松多了。当你重用(大旨卡塔 尔(阿拉伯语:قطر‎组件和接纳Polymer的数目绑定天性时,你能够写更加少的CSS/JS。可以写越来越少的代码的以为真好!

赞 收藏 评论

至于小编:周进林

图片 2

茫茫大海中的生机勃勃枚程序猿,为了提升为二个男神人类而努力着。关注java、python、linux、vim等(知乎博客园:@酒肉和尚--进林卡塔尔 个人主页 · 作者的篇章 · 20 ·  

图片 3

本文由365bet亚洲版登录发布于 Web前端,转载请注明出处:Components构建单页面应用

您可能还会对下面的文章感兴趣: