简介可以自动完成UI的AngularJS工具angular-smarty


Posted in Javascript onJune 23, 2015

简介可以自动完成UI的AngularJS工具angular-smarty

我们最近为我们的论坛增加了一个自动完成功能(称为Smarty),在要求专业人员简介的主页上。这是一个超有用的功能,因为它有助于我们将用户导航到他们真正想去的地方。它很有意思,也是用AngularJS构建的!

我们希望Smarty能够:

  1.     通过用户的给定输入 (一个前缀),通过一个HTTP请求后自动提供建议
  2.     显示一个建议的下拉列表
  3.     当用户输入时更新
  4.     足够快,能够跟得上用户的输入
  5.     导航直观且能够关闭
  6.     可重用

以往没有AngularJS的经验,这个项目是我使用这个框架的入门项目。它真的成为了一次宝贵的学习经验,而且我发现这个框架许多方面相互借鉴地很好且能很好地符合我上面列出的要求。当然,还有一些问题尚在学习过程中!

AngularJS的乐趣所在

我最喜欢Angular的一点是它是如何分解成具有明确目的的概念的。Smarty广泛使用了其中的两个概念——Directives 和 Services。Directive和DOM绑定在了一起,用来管理和元素之间的交互;而Service通过依赖注入的方式为Controller和Directive提供了独立的可以重用的逻辑。

Angular提供了很多内建的Directive和Service,我们在这个项目中使用到了其中的多个。

    为了显示建议(见要求2),我们使用了ngIf 和 ngRepeat 指令来有条件的显示和填充建议下来列表。

    为了实现当用户输入的时候更新建议内容(见要求3),我们使用了ngModel 指令将$scope上前缀变量上输入元素的请求和Scope上的$watch方法双向绑定起来,用来监听前缀的变化。

    我们需要考虑的一件事是这个自动完成功能的更新速度可能跟不上用户的输入速度(见要求4)。因为每当前缀的值发生变化时,Smarty都要发送一个HTTP请求(通过内建的$http Service)。我们决定用 $http 的可选配置参数($http.get(requestUrl, {cache: true}))来缓存结果。这是提升性能的一个很简单的方法。

我们还写了自定义的Directive和Service来满足我们的特定需求:

    smartySuggestor Service:smartySuggestor 提供了一个getSmartySuggestions()函数,用来接受用户生成的前缀作为它的参数,并通过http请求访问我们后端的suggestor服务来得到自动完成的建议。(见要求1)。

    smartyInput Directive: 我们所面临的一个挑战是,定义出一个用户和下拉列表之间的所有可能的交互,并且写测试用例,以确保在开发期间和开发之后,这些功能都是完好的。我们使用一个Directive(smartyInput)来包含用户和下拉列表之间所有可能发生的交互(见要求6),同时,我们使用内建的ng-mouseover 和 ng-click 指令(Directive)来定义下拉列表和鼠标事件之间的交互。

正如我前边所提到的,我们所面临的一个挑战是我们要确保我们没有破坏掉所有用户和下拉列表之间可能发生的交互方式。为了追踪这些用户交互,并确保我们没有在开发的过程中破坏掉它,我们使用了Jasmine测试框架。Jasmine结合这angular-mocks一块儿使用,可以方便我们为smarty写包含描述的测试用例,像我们可以为下拉列表写“点击外部应该会消失”("should disappear on outside click"),可以为请求表单的输入写“按回车时应该填充上合适的值” (“should, on enter, fill with the appropriate value”)。

学习总结

尽管简洁实用的AngularJS框架现在对我来讲,是可以轻松读懂的,但是确实要花些时间来学习。隔离作用域绑定指令符和promise是我学习过程中特别棘手的两项专题。当我研究隔离作用域时,我发现自己十分希望能看到更多的关于人们如何在他们的项目中使用不同绑定的例子,所以下面我为每种绑定类型给出一个例子。
=:本地和父作用域之间的双向数据绑定

控制器:
 

$scope.selected = -1;

HTML:
 

<input type="text" smarty-input index="selected">

SmartyInput指令符:
 

scope: {index: "=", ...}

SmartyInput双向绑定指令符将位于控制器作用域的selected绑定到指令作用域的index索引上面,这样可以使得在index索引(建议列表中当前选定的索引)中的变化结果与指令(例如用户按向上/向下箭头)的相互作用会传播到控制器。

&: 本地与父作用域之间的单向数据绑定

控制器:
 

$scope.setSelected = function(newValue) {...};

HTML:
 

<input type="text" smarty-input select="setSelected(x)">

SmartyInput指令符:
 

scope: {select: "&", ... }...scope.select({"x": parseInt(scope.index) + 1});

SmartyInput指令符将控制器作用域中的setSelected()函数绑定到指令作用域中的select()函数上,这样可以使指令符在不改变setSelected()函数的情况下使用它。
@:将计算表达式绑定到本地作用域

控制器:
 

$scope.prefix = ""

HTML:
 

<div smarty-suggestions prefix="{{prefix}}">

SmartySuggestions指令符:
 

scope: {prefix: "@", ...}

通过SmartySuggestions指令符,可在建议菜单中显示prefix的值,所以此处使用计算表达式{{prefix}}。这种绑定方式在多项复杂表达式中更常用,比如:next-index=“{{selected + 1}}”。

Promises

promise是用于执行异步任务的技术。一个promise具有一个名为then()的方法,该方法在promise执行时会作为被执行的的回调函数的一个参数。当异步任务完成,promise会将一段消息传给那个回调函数。当用户输入的prefix前缀中检测到更改,则promise就会出现在Smarty的代码中,然后我们会用$http执行一个GET请求,用来更新显示给用户建议的列表。

这个过程看起来是这样的:

当$scope.$watch在$scope.prefix(请注意,此处绑定到用户UI输入界面)的值中注册了一个更改,此时会调用getSmartySuggesction()。
 

var promise = smartySuggestor.getSmartySuggestions($scope.prefix);promise.then(function(data) {
  $scope.suggestions = data;});

在getSmartySuggesctions()中,$http.get会返回一个参与服务器响应的promise。
 

function getSmartySuggestions(prefix) {
  requestParams["query"] = escape(prefix.toLowerCase());
  var promise = $http.get(requestUrl(),
    {
      params: requestParams,
      cache: true
    }
  ).then(function(response) {
    return response.data.slice(0, 5).map(function(item) {
      return item.Name;
    });
  });
  return promise;}

服务器响应看起来是这样的:

[{"ID":13,"Name":"Portrait Photography"},{"ID":24,"Name":"Commercial Photography"},{"ID":21,"Name":"Pet Photography"},{"ID":16,"Name":"Event Photography"},{"ID":26,"Name":"Headshot Photography"}]

接下来,我们会调用存在于promise中的then()方法,在解析服务器响应回调中进行传递。then()方法返回一个新的promise,它处理了解析过的响应,并存储到通过getSmartySuggestions()返回的promise中。

解析过的响应看起来是这样的:[“Portrait Photography”, “Commercial Photography”, “Pet Photography”, “Event Photography”, “Headshot Photography”]。

最终,回到$scope.$watch,我们调用promise中的then()方法,为变量suggestions分配这些解析过的响应。
 

var promise = smartySuggestor.getSmartySuggestions($scope.prefix);
promise.then(function(data) {
  $scope.suggestions = data;
});

 

Javascript 相关文章推荐
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
JQuery for与each性能比较分析
May 14 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
webpack打包多页面的方法
Nov 30 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
javascript中传统事件与现代事件
Jun 23 #Javascript
浅谈jquery中delegate()与live()
Jun 22 #Javascript
jquery 中ajax执行的优先级
Jun 22 #Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 #Javascript
jquery中toggle函数交替使用问题
Jun 22 #Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 #Javascript
js闭包所用的场合以及优缺点分析
Jun 22 #Javascript
You might like
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
php调用C代码的实现方法
2014/03/11 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
JS实现按钮颜色切换效果
2020/09/05 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
Python 字典dict使用介绍
2014/11/30 Python
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
python numpy数组中的复制知识解析
2020/02/03 Python
Django models filter筛选条件详解
2020/03/16 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
python打包多类型文件的操作方法
2020/09/21 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
总经理岗位职责
2013/11/09 职场文书
思想汇报格式
2014/01/05 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL