帮酷LOGO
  • 显示原文与译文双语对照的内容
Your first choice for hybrid mobile applications

  • 源代码名称:erste
  • 源代码网址:http://www.github.com/dashersw/erste
  • erste源代码文档
  • erste源代码下载
  • Git URL:
    git://www.github.com/dashersw/erste.git
  • Git Clone代码到本地:
    git clone http://www.github.com/dashersw/erste
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/dashersw/erste
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • Erste

    npm versionGitHub license

    用于构建高性能混合移动应用程序的视图库

    erste.js 是一个带有态度的零炒作视图库。 它是为了在移动设备上实现最大的性能。

    特性

    • 轻量,10kb 个缩小&压缩
    • 无相关性
    • 没有魔法作为声明性的,也没有更多
    • 使用优秀的老 DOM api,HTML5 &来构建现代应用没有陷阱
    • 简洁,结构化和可以访问的API

    概述

    // 1. Import erste,import {Component} from'erste';// 2. Create your application,classAppextendsComponent {
     constructor() {
     super();
     this.counter=0;
     }
     // 3. Arrange your view,template() {
     return` <div> <h1>${this.counter}</h1> <button class="increment">Increment</button> <button class="decrement">Decrement</button> </div>`;
     }
     // 4. Create your methods,increment() { this.$('h1').innerText=++this.counter; }
     decrement() { this.$('h1').innerText=--this.counter; }
     // 5. Bind your events.getevents() {
     return {
     'tap': {
     '.increment':this.increment,
     '.decrement':this.decrement }
     }
     }
    }// 6. Make your application run.newApp().render(document.body);

    table-内容

    动机

    构建应用程序应该简单简单。 现在使用的大多数框架都难以实现,它们对边际收益做出了错误的妥协。 一个超级声明性框架,它的大小为,由于它的模糊和不熟悉的api,。上的第二个引导时间。 这是熟悉的?

    我们作为应用程序开发人员不需要优秀的特性,只是在纸上或者在on谈话中。 我们需要一个 easy-to-use,合理的API 。 所使用框架的认知负荷最好是 0. 当你想区分'<'和'&'时,祝你好运。

    erste.js 是应用程序开发的一种郑重方法。 它为你提供了开始的插件,并且不尝试从你的应用程序中偷偷。 它让你专注于你自己的源代码,并且摆脱了。

    安装

    直接下载

    使用 Bower

    bower install --save erste

    使用 npm

    npm install --save erste

    使用闭包编译器构建

    erste.js 在Google闭包编译器中非常出色。 软件实际上是用闭包编译器构建的,所以如果你使用了闭包编译器,你也可以使用 goog.require 或者 import 将源代码的源代码设置为最小的占用量和最大的性能,并使用你的源代码。

    示例应用程序

    首页:Cordova,Cordova,popular,popular,popular,Cordova,showcases,showcases,showcases,showcases,showcases,showcases,showcases,showcases,showcases,showcases,showcases 。 你可以学习如何构建和管理复杂视图层次结构,处理用户事件并使用包含的选项卡栏,导航栏,侧边栏,拉组件和无限滚动组件。 存储库还包含一个 Gulpfile.js,它包含了使用ES6构建应用程序的常见任务,并通过 Babel 。

    构建你的第一个应用程序

    GUI应用程序是用组件架构构建的。 这不是最新趋势,而是架构在 40年前定义的方式。 所以在 erste.js, 中有一个简单且简单的构建 block - Component 类。 应用程序中看到和触摸的所有东西都是 erste.js, 中的组件,但是它也提供一些特殊的构造,。 这些是 View 类,它是显示全视图的主类,用于填充屏幕和它的他组件的生命周期。

    root-视图

    每个应用程序都以 root 视图开头。 它是你在 <body> 标签中放置的第一件事,一个包括所有应用程序的视图。

    通过在 erste.js 中扩展 View 类来编写 root 视图;

    root-view.js:

    import {View} from'erste';classRootViewextendsView {
     template() {
     return` <root-view> <h1>Hello world!</h1> </root-view>`;
     }
    }

    在这里你需要重写的唯一东西是 template 方法。 注意,模板只是 erste.js. 中的标记,它们没有解析为声明性语法,因此 <root-view> 只是一个标记。 由于我们面向现代的HTML5-compatible浏览器,你实际上可以使用定制标记来区分标记。 否则,你只需使用普通 <div> 。 实际上,任何元素都可以做为模板,而 block 元素作为 root 视图有意义。

    你现在应该将这个视图插入到 DOM 。 有两种方法可以做到这一点,最简单

    index.js:

    importRootViewfrom'./root-view';document.body.innerHTML=newRootView();

    这只是将组件的模板插入到 body 。 更涉及的替代方法是手动呈现视图的DOM元素;

    index.js:

    import RootView from './root-view';
    new RootView().render();

    注意,在不提供参数时,render方法将这里视图直接呈现到 document.body 。 或者,你可能希望将所需的宿主元素作为呈现方法的第一个参数传递给 new RootView().render(document.body);

    我们将进一步讨论这两种方法的含义。

    DOM事件

    在 erste.js. 中处理DOM事件完全自动化,我们承认大多数 Bug 和问题都是由于处理DOM事件( 尤其是忘记删除那些导致内存泄露的) 而导致的。 此外,手动DOM监听器会妨碍应用程序的性能。 因此,erste.js 提供了完整的事件管理系统,可以以一种声明性的方式为你解决所有这些问题。

    erste.js 还内置了内置手势识别器,提供了诸如 taplongTapswipe 等触摸事件。

    让我们在 root 视图中的按钮上监听tap事件,并做一些没有意义的事情;

    root-view.js:

    import {View} from'erste';classRootViewextendsView {
     template() {
     return` <root-view> <h1>Hello world!</h1> <button>Tap me!</button> </root-view>`;
     }
     onTapButton() {
     this.$('h1').innerText='Thanks for the tap!';
     }
     getevents() {
     return {
     'tap': {
     'button':this.onTapButton }
     }
     }
    }

    这里你会注意到的第一件事是 events 属性的声明。 它是一个对象,它的键是事件类型和值,是另一个带有对应于CSS选择器和对应于事件处理程序。

    第二,手动DOM更新。 erste.js 不提供任何数据绑定功能。 数据绑定,无论你采用什么技术,总是一个糟糕的执行者。 由于 erste.js的目标是构建应用程序最显著的方式,因这里我们决定使用声明性DOM更新并进行手动更新。

    然而,这带来了有效性问题,因为jQuery代码处理不好的问题仍然在某些记忆中新鲜。 手动管理DOM确实有些恶意的方式,而且我们希望你能够坚持最佳实践,而不会损害方便。 因此,我们提供了两个 helper 方法,$$$ 。 你可能已经猜到了,这些是围绕 querySelectorquerySelectorAll DOM api的简单包装器。 这些调用也是作用域,这意味着 this.$('button') 实际上转换为 this.el.querySelector('button'),其中 this.el 是组件的DOM元素。 这是一种非常高效和直接的引用DOM元素的方法。

    :DOM事件管理如何工作

    erste.js 提供了一个声明性的方法来管理DOM事件,通过大量利用事件委派。 在 erste.js, 中,每个DOM事件类型都有一个全局事件处理程序。 当事件发生时,它的全局处理程序接收它并检查是否在组件中定义了适当的处理。 如果找到这样的组件,则将事件转发到指定的处理程序。 尽管事件管理被委托给 body 上的全局处理器,但是事件传播仍然可以正常工作,因为。 这让你可以使用常规的web开发中习惯的事件处理方法,其中父组件可以侦听子组件上发生的事件。

    创建其他组件

    erste.js 不影响你的生命周期管理。 创建它的他视图和组件是严格必要的,这意味着你可以以手动实例化视图,并且需要。 我们认为,移动应用优化的一个关键步骤是手动管理实例化和处理大量组件。

    让我们把简单的按钮和标签变成独立的组件。

    button-with-label.js:

    import {Component} from'erste';classButtonWithLabelextendsComponent {
     template() {
     return` <button-with-label> <h1>Hello world!</h1> <button>Tap me!</button> </button-with-label>`;
     }
     onTapButton() {
     this.$('h1').innerText='Thanks for the tap!';
     }
     getevents() {
     return {
     'tap': {
     'button':this.onTapButton }
     }
     }
    }

    我们基本上把所有的逻辑转移到可重用的组件中。 这里要注意的一点是,template 方法应该返回一个单独的HTML元素。 因此,我们将 <h1><button> 包装在 <button-with-label> 中。

    然后 root 视图就变得简单了

    root-view.js:

    import {View} from'erste';importButtonWithLabelfrom'./button-with-label';classRootViewextendsView {
     constructor() {
     super();
     this.buttonWithLabel=newButtonWithLabel();
     }
     template() {
     return` <root-view>${this.buttonWithLabel} </root-view>`;
     }
    }

    下面是声明性 erste.js的方式;视图和组件可以包含其他组件,只要在模板文本中包含它们。

    基于组件的组件生命周期管理

    在本例中,我们选择在 RootView的构造函数中实例化子组件。 虽然这是一个非常常见的场景,由于某些原因,我们可能希望推迟子组件的初始化。

    选项 1: 声明性

    我们可以在 template 方法中创建组件,以便仅在视图被渲染时创建。 这不是可以维护的,但在某些情况下可能是公平的权衡。 那么 RootView 中的template 方法可以如下所示:

    root-view.js:

    /*.. . previous code.. . */template() {
     this.buttonWithLabel=newButtonWithLabel();
     return` <root-view>${this.buttonWithLabel} </root-view>`;
     }
    选项 2: 使用 erste.js API命令

    子组件在实例化时可能要求它的父组件处于DOM中。 在这些情况下,当父级呈现到DOM后,强制将子级追加到父级中。 在这种情况下,RootView 看起来像:

    root-view.js:

    import {View} from'erste';importButtonWithLabelfrom'./button-with-label';classRootViewextendsView {
     onAfterRender() {
     this.buttonWithLabel=newButtonWithLabel();
     this.buttonWithLabel.render(this.el);
     }
     template() {
     return`<root-view></root-view>`;
     }
    }

    当然,你也可以在 RootView 构造函数中实例化 ButtonWithLabel,并在 onAfterRender 中呈现它。

    选项 3: 使用 DOM API命令

    如果你不喜欢记住自定义 render 方法,那么你也可以使用本机 appendChild DOM API 。

    在这种情况下,RootView 看起来像:

    root-view.js:

    import {View} from'erste';importButtonWithLabelfrom'./button-with-label';classRootViewextendsView {
     onAfterRender() {
     this.buttonWithLabel=newButtonWithLabel();
     this.el.appendChild(this.buttonWithLabel.el);
     }
     template() {
     return`<root-view></root-view>`;
     }
    }

    注意,这里需要访问 ButtonWithLabel 组件的el 属性,这给了我们DOM元素。 同时,当你第一次访问 el 时,会出现一个隐式。 由于 el 可以能是空的,因这里 erste.js 假设每当你想引用 el 时,你实际上想要使组件呈现出来。 如果组件之前没有呈现,为了方便起见,erste.js 首先将它呈现到DOM元素中,然后再返回给你。

    创建主视图和细节视图,或者引入 ViewManager

    移动应用程序广泛使用了主/细节视图方案,它是 erste.js的第一个民民。

    ViewManager 是一个类,用于编排详细的视图和管理视图层次结构,以便完全回到以前的视图。

    修改 root 视图使它的成为显示项列表的主视图,并引入详细视图。 为了便于内部视图层次结构,我们必须使用 ViewManager 类。 让我们从调整 index.js 开始;

    index.js:

    import {ViewManager} from'erste';importRootViewfrom'./root-view';var vm =newViewManager();var rootView =newRootView();rootView.vm= vm;vm.setCurrentView(rootView);

    setCurrentView 方法将视图呈现到 vm的root 元素中,这是默认的body,在本例中是。 然后我们也将 vm 放到 RootView 上,因为稍后它将使用这个视图管理器来显示细节视图。

    让我们先构建我们的细节视图。

    detail-view.js:

    import {View} from'erste';classDetailViewextendsView {
     constructor(item) {
     super();
     this.item= item;
     }
     template() {
     return` <detail-view> <p>${this.item}</p> </detail-view>`;
     }
    }

    它只接收构造函数中的一个项并在模板中打印它。

    下面是一个示例视图实现,以及如何利用我们的新细节视图;

    root-view.js:

    import {View} from'erste';importDetailViewfrom'./detail-view';classRootViewextendsView {
     constructor() {
     super();
     this.items= [1, 2, 3];
     }
     onItemTap(e) {
     var targetIndex =e.targetEl.getAttribute('data-index');
     var item =this.items[targetIndex];
     var detailView =newDetailView(item);
     this.vm.pull(detailView);
     }
     template_item(item, index) {
     return`<div data-index=${index}>${item}</div>`;
     }
     template() {
     return` <root-view>${this.items.map(this.template_item).join('')} </root-view>`;
     }
     getevents() {
     return {
     'tap': {
     'div':this.onItemTap }
     };
     }
    }

    这里最有趣的一点是我们如何获取关于tapped项的信息以及如何创建细节视图。 尽管可能有各种实现,但是我们选择将每个项的索引嵌入到它的模板中。 然后在tap事件处理程序中,获取这个索引属性并使用相应的项实例化一个 DetailView 。 最后一件事是告诉视图管理器把这个新的细节视图放在屏幕上。

    恭喜现在你有了一个示例母版/细节视图应用程序 ! 阅读更高级的用例 !

    返回主视图

    在最简单的场景中,细节视图是 final 视图,在导航到详图视图之后,主视图将被释放。 这也可以防止默认内存泄漏。 如果希望保留以前视图的历史,则 pull 方法接受第二个可选参数 opt_canGoBack,该参数为 boolean 类型。 在 true 中传递时,视图管理器将在它的历史记录中保存第一个视图,而不释放它。

    随后,你可以以随时调用 vm.push(),并且视图管理器将返回到主视图,处理详细信息视图。

    后退手势

    erste.js 还具有来自iOS的滑动手势,用于查看导航。 你可以从屏幕左边缘拖动到右边,它会显示下面的主视图。

    默认情况下不启用这里手势识别,你需要为细节视图显式启用它。 修改 DetailView 构造函数并将 supportsBackGesture 设置为 true

    detail-view.js:

    /*.. . previous code.. . */constructor(item) {
     super();
     this.item= item;
     this.supportsBackGesture=true;
     }

    现在,你将能够使用swipe导航回原始视图 !

    结论

    在应用程序开发方面,erste.js 提供了更多的服务。 你可以以查看各种组件。如导航栏。tab栏和更多内容,了解如何使用高级功能。 请确保在 erste.js-demo 尝试演示,以查看所有的操作。

    许可证

    MIT许可证

    版权所有( c ) 2017 Armagan Amcalar

    若要在取得该软件副本时免费授予任何人,如有下列条件的软件,请免费授予该软件的副本,并与相关的文档文件("软件") 进行许可,包括不受限制的权利,包括以下条件:

    上述版权声明和本许可声明须包括在所有的副本或实质性部分的软件。

    软件是"是",没有任何保证,表示或者隐含,包括但不限于销售,适合特定用途和 NONINFRINGEMENT 。 作者或者版权持有人在合同。侵权或者它的他与软件或者它的他用户交易的行为。




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语