精华 使用web components创建单页应用
发布于 4个月前 作者 leogiese 2746 次浏览 来自 分享

原文 http://forjs.org/book/lkaK8WuNme/section/gJxDnDq4K8g 使用web components创建单页应用 ============================

推荐:《精通Node.js开发》 《Angular.js视频详解》

可加作者QQ 1405491181 交流Node.js & HTML5 相关技术

demo的最终效果

这个demo将采用以下的技术,来开发单页应用程序:

  • 使用Polymer的 core elements 组件
  • 响应式设计
  • 使用data-binging数据绑定
  • 使用路由和深层链接
  • 键盘访问
  • 动态加载内容

创建基本框架

<body unresolved fullbleed>
<core-scaffold id="scaffold">
    <nav>右侧导航</nav>
    <core-toolbar>工具栏</core-toolbar>
    <div>主内容区</div>
</core-scaffold>
</body>

效果

  • unresolved 可以预防闪烁
  • fullbleed 填充整个页面

core-scaffold

core-scaffold 基本

  • core-scaffold 组件,内部有 菜单 / 工具栏 / 内容区域
  • 用属性 navigation / tool / fit 也可以定义

core-scaffold 属性

  • 自适应的最小尺寸 responsiveWidth = “600px”
  • mode = “seamed” 设置默认滚动模式

core-scaffold 事件

  • scroll 事件,是由于主内容区滚动,event.detail.target 返回主内容区 dom 对象。

core-scaffold 方法

  • openDrader() / togglePanel() 没发现什么区别,都是在合并状态下打开 drawer
  • closeDrader() 关闭 drader

core-toolbar

core-toolbar 是水平式元素,可用于标签、导航、搜索和各种按钮操作。

  • 他有个默认高度
  • 通过 class="tall" 设置 x3 倍高度
  • medium-tall 设置 x2 高度
<core-toolbar class="tall">
    <!--<core-icon-button icon="menu"></core-icon-button>-->
    <div class="indent">Middle Title</div>
    <div class="middle indent">Middle Title</div>
    <div class="bottom indent">Bottom Title</div>
</core-toolbar>

如果 toolbar class="tall" 可以设置3行元素,而 medium-tall 可以设置两行。

OK, 研究了core-toolbar 我们继续开发左侧的 Navigation 。

开发左侧 Navigation

<nav>
    <core-toolbar><span> Forjs.org </span></core-toolbar>
    <core-menu selected="0">
        <paper-item icon="label-outline" label="《精通Node.js开发》">
            <a href="#nodejs"></a>
        </paper-item>
        <paper-item icon="label-outline" label="《Angular.js视频详解》">
            <a href="#angular"></a>
        </paper-item>
    </core-menu>
</nav>

先秀一下效果

下面要对 core-menu 元素进行分析

core-menu

core-menu 选择样式看起来像菜单

可以在它内部添加 core-item ,加入 core-selected

core-item.core-selected {
    color : red;
}
  • selectedItem 属性表示当前选中的值
  • selected 属性表示选那个item
  • core-select 事件,当选时fire。

core-item

<core-item icon="settings" label="Settings"></core-item>

属性

  • src 一个icon图片 url
  • icon
  • label

可以这样

<core-item icon="settings" label="Settings">
    <a href="#"></a>
</core-item>

peper-item

它和 core-item 差不多

  • iconSrc 等同于 core-item#icon

开发顶端工具栏

<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>
  • flex 的mean 是填充余下的部分

主内容区

<div layout horizontal center-center fit></div>
  • layout 属性 表示要进行布局
  • horizontal 横向布局
  • center-center 横向和垂直都居中
  • fit 表示填充剩余区域

加入动态页面组件

<div layout center-center horizontal fit>
    <core-animated-pages  selected="0" transitions="slide-from-right">
        <section layout vertical center-center>
            <div>《精通Node.js开发》</div>
        </section>
        <section layout vertical center-center>
            <div>《Angular.js视频详解》</div>
        </section>
    </core-animated-pages>
</div>

并设置样式

core-animated-pages{
    width:85%;
    height: 85%;
    background-color: white;
}

core-selector 组件

core-animated-pages 继承自 core-selector 所以,要先研究core-selector。

该组件是用来表示可选择的component。

<core-selector selected="0">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</core-selector>

core-selector 是没有样式的,需要手工写。

core-selector 属性

  • selected=null 可以用索引,也可以用valueattr + label 方式来定位。
<core-selector valueattr="label" selected="foo">
  <div label="foo"></div>
  <div label="bar"></div>
  <div label="zot"></div>
</core-selector>
  • multi="false"
  • valueattr="name"
  • selectedClass="core-selected"
  • selectedProperty="" ,选者后设置的item元素的属性值 例如:selectedProperty="checked"
    <input type="radio" name="color" checked="checked" value="red">
  • selectedAttribute="active" 属性值
  • selectedItem 被选择的dom对象
  • selectedModel 这个属性没弄明白 doto
  • selectedIndex
  • excludedLocalNames 设置不包括的元素
<core-selector excludedLocalNames="h3 hr">
  <h3>Header</h3>
  <core-item>Item1</core-item>
  <core-item>Item2</core-item>
  <hr>
  <core-item>Item3</core-item>
  <core-item>Item4</core-item>
</core-selector>
  • target 默认是容器
  • itemsSelector
<core-selector target="{{$.myForm}}" itemsSelector="input[type=radio]"></core-selector>
<form id="myForm">
  <label><input type="radio" name="color" value="red"> Red</label> <br>
  <label><input type="radio" name="color" value="green"> Green</label> <br>
  <label><input type="radio" name="color" value="blue"> Blue</label> <br>
  <p>color = {{color}}</p>
</form>
  • activateEvent="tap"
<core-selector id="test" itemsSelector="input[type=radio]"
               selected="green" valueattr="value" selectedProperty="checked"
               activateEvent="change"></core-selector>
<form id="myForm">
    <label><input type="radio" name="color" value="red"> Red</label> <br>
    <label><input type="radio" name="color" value="green"> Green</label> <br>
    <label><input type="radio" name="color" value="blue"> Blue</label> <br>
</form>
  • notap=false 设置true 将关闭 activateEvent 功能

  • items 返回全部 的 sub dom

core-selector 事件

  • core-select 当有item状态改变了,就触发,所以它有可能,选一下,激发2个 core-select ,一个是被选,一个是取消选。 detail.isSelected( boolean ) detail.item( Object )

  • core-activate 当item被选了 触发 detail.item( Object )

core-selector 方法

  • selectPrevious 选上一个,只有单选可用。return true 表示到达第一个了
  • selectNext

core-animated-pages 组件

用于显示多个子页面其中之一,并在切换之间提供过度效果,这些效果可以使用core核心的,也可以自己开发实现。

注意下面两种写法:

// 这是不工作的,因为容器是不参与工作的。
<core-animated-pages transitions="cross-fade">
  <section cross-fade></section>
  <section cross-fade></section>
</core-animated-pages>

// 这才正确
<core-animated-pages transitions="cross-fade">
  <section>
    <div cross-fade></div>
  </section>
  <section>
    <div cross-fade></div>
  </section>
</core-animated-pages>

core-animated-pages 属性

  • transitions = ‘’ 转换方式

  • lastSelected 选择的最后一页dom 对象

core-animated-pages 事件

  • core-animated-pages-transition-prepare 页面转换之前被触发
  • core-animated-pages-transition-end

数据绑定

<body unresolved fullbleed>
  <template is="auto-binding">

  </template>
</body>

这里的 is="auto-binding" 是快速创建一个 polymer 元素,元素本身就是 这个 template dom。

导航

<nav>
    <core-toolbar><span> Forjs.org </span></core-toolbar>
    <core-menu selected="{{route}}">
        <template repeat="{{page in pages}}">
            <paper-item icon="label-outline"  label="{{page.label}}">
                <a href="#"></a>
            </paper-item>
        </template>
    </core-menu>
</nav>

内容区

 <core-animated-pages selected="{{route}}" valueattr="label" transitions="slide-from-right">
    <template repeat="{{page in pages}}">
        <section layout vertical center-center label="page.label">
            <div>
                {{page.label}}
            </div>
        </section>
    </template>
</core-animated-pages>

route代码

<script>
    window.addEventListener("polymer-ready", function () {
        var templ = document.querySelector("template[is='auto-binding']");
        templ.pages = [
            {label:"《精通Node.js开发》"},
            {label:"《Angular.js视频详解》"}
        ]
    })
</script>

效果

36 回复

Angular学徒哭晕在厕所。为什么Polymer 的components介绍 推荐的是《Angular.js视频详解》

@ChopperLee2011 不要哭,angular和polymer 是可以配合的,你深入后会发现这是两个层面的,缺一不可。

@ChopperLee2011 angular.js 和 polymer 之间是配合关系。

@leogiese 没学过polymer这么future的东西,但是我觉得components和Angular的customer directive是功能相近的东西,而且个人觉得Angular是很霸道的框架,应该不喜欢和其他小伙伴不合吧,连老大哥jQuery都不放眼里的说。----个人想法

@ChopperLee2011 polymer 和 angular 都是 google一个团队开发的,开发这两个框架的目的是 web components 扩展html元素,angular为应用层。不是喜不喜欢的事儿,而是压根是一个团队的两个项目,是相互配合的。呵呵,没法不喜欢,双胞胎。

@ChopperLee2011 jquery 不行了,包括 jquery ui 最终都会慢慢没落

jquery 和 angular那个难啊?

@ChopperLee2011 语言总是不断改进的。

@think2011 这好像不是语言改动吧?

@node007 哦, 就是想起来有个大牛说过,他学了很多种语言,总结就是语言总是不断改进的。 angular的方式也算是改进jquery,不管怎么样,多选择可能是好事也可能是坏事。

@think2011 这个意思啊! 那你认为angular 比 jquery强在哪里呢?

因为 angular 是扩展了html,而jquery只是操作 dom

@node007 坑不少,确实从易到难,虽然用了1年多了。

  1. 能够分离view,也就是说,你写的东西不用理view,移植复用特别方便。
  2. 调用简单,很多操作可以封装成directive,新手的话,只要一段html代码就能够使用了。
  3. 双向绑定,类似1,移植方便,而且更改model,界面也就跟着变了,相比jquery,强太多了。
  4. 这可能是缺点,很庞大,当然相对也完善。

就想到这么多了,除了很多显而易见的好处外,后期学习难度挺大。

如果让我选择的话,我很愿意选择angular,如果让我再选一次的话,我会努力巩固javascript基础,然后选择angualr。

嗯说的不错 +1

@think2011 不错啊,看来你很精通哦,那学习angular需要啥基础不啊?

@ChopperLee2011 为啥不放在眼里啊?

主要是对angular原理有所理解才行。

能介绍一下 angular 原理不啊?

angular 课题很大,简单的来说就是对html的扩展

查看了一下赶脚挺难的。。。

其实不难的,多做demo

关键是 demo 都不会做,呵呵呵

你可以看一下我的视频课程

看了2个,剩下都收费?

你可以从基本概念入手学习

看过英文的,可惜没看懂,呵呵

英文很重要!

请问楼主,reactjs怎么样啊?

reactjs 很棒的

reactjs,看了一下,到底和 webcomponents有啥关系啊?

webcomponent是标准,reactjs是虚拟dom

reactjs看了,很不错

嗯,两者各有用处

回到顶部