Angularjs进阶笔记(2)

Stella981
• 阅读 664

有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么使用,本篇希望聊聊到底怎么用这个话题。

一. 自定义指令

自定义指令,是Angularjs用来实现组件化的方式,相比于ReactVue的组件化方式,它真的很复杂,自定义指令太重了,它暴露了太多可供定制的参数,以至于普通的开发者完全不知道要用它来做什么而将其束之高阁,毕竟一般的业务逻辑通过controller和service就已经可以完成了。

自定义指令在Angularjs项目中主要有两大用途:

  • 1.封装指定组件的DOM操作

    Angularjs期望的开发方式是将DOM的操作尽可能封装在自定义指令中,这样对于局部变量的操作会更容易加入到Angular自己的生命周期中。

  • 2.组件化

    Angularjs靠自定义指令实现组件化。诸如你在ReactVue中看到的类似于*,_这样的自定义标签,或是父级子级传值所使用的_prop*,又或者是标记组件自身状态的_state_,在Angularjs中全部都是通过自定义指令来实现的。

二. 数据绑定的形式

自定义指令在定义后,需要在html文件中编写,最常用的方式是将其书写为**标签属性。**当使用自定义指令时,常常需要将一个变量的值从controller传递至directive中,此时需要在scope属性中进行变量绑定设置,Angularjs提供了3种不同的绑定方式(实际上也可以直接传递True),如下所示:

scope: {
   infiniteScroll: '=', // 将infiniteScroll同父级controller中的指定对象双向绑定
   onSend: '&', // 从父级获取一个变量的引用,常用作方法调用
   fromName: '@' // 从父级获取值后便只在本地作用域生效
}

关于三种绑定方式使用的方法,网上可以搜到非常多的文章,本篇不再赘述,今天我们只来详细看一下这几种方式的使用场景和区别。

2.1 @绑定

**@绑定可以转移常量赋值的位置,常用于为自定义封装组件暴露一个可设定常量参数的接口。**这种绑定方式的意义,在于从自定义指令外部(一般是从html页面上绑定一个常量或控制器中的变量)获取一个局部变量的值。

实际场景:

例如我们封装了一个分页组件,其中指令局部作用域中的displayPaginationNums属性用于决定分页组件的页码栏显示多少个按钮,然后把剩余的按钮收起来并添加...按钮,这是一个很常见的需求。

  • 不使用@绑定

    不使用@绑定,完全可以做到,只需要在link函数里,初始化为其赋值即可。

    link:function(scope, elements, attrs){ scope.displayPaginationNums = 5;//用于决定分页导航栏最多可显示几个数字 },

使用这样的方式,就可以,但我们默认了一个前提,那就是所有调用这个组件的人,都会浏览这个组件的源代码。这其实是很不方便的,换位思考一下,你使用Angularjs的时候,会先去源码里找一下对应的方法开头都定义了哪些变量,哪些可以修改吗?当然不会。

这个属性在不同的项目中都会需要赋值,但需要动态去修改的场景其实并不多,所以我们需要将接口暴露至更高的开发层级,供调用者直接赋值。

  • 使用@绑定

    当使用@绑定后,我们实际上是面向调用者暴露了去设定重要参数的接口,使用起来更加方便。下面的写法让开发者使用这个组件时,可以在代码编写时方便地传入自己想要设定的值:

    //指令定义时 scope:{ displayPaginationNums:'@' },

面向对象程序设计原则中有一个重要的原则,叫做开放封闭原则,它的意思是说,你在程序设计中所书写的代码,应该对扩展开放,对修改封闭。简单地说就是你所编写的代码成型以后,在后续的使用和功能扩展的时候,尽可能不需要再去改动代码,而只需要通过_编写与扩展相关的代码_即可。

此处就是从封闭转为开放的一个示例,虽然看起来很细小,但可以很明确地表达这个原则。

2.2 &绑定

**&绑定用于传递父级函数的引用,用来调用父级控制器中定义的方法。**如果只是以业务逻辑为模块进行封装,这种绑定方式可以帮我们避免一部分代码重复,如果是为通用框架编写纯组件,则可以为调用者提供自定义函数的接口。

实际场景:

比如我们在制作一个表格和分页组件时,表格每一页只显示10条数据,分页是后台来完成的,那么每一次点击分页组件上的页码按钮时,我们都需要向后台发送ajax请求来获取新一页的数据。那么这个发送ajax请求的方法你会写在哪里呢?

不使用&绑定

  • 将方法写在controller中

    优势:这样做的好处是如果以后我们需要增加一个输入框来实现精确跳转到哪一页时,可以直接在模板中使用ng-change="sendAjax( )"来绑定这个方法,方便复用,扩展,甚至修改功能。

    劣势:但这样做的话,如果想在自定义指令中就无法直接调用这个方法,常见的处理策略是在自定义指令中使用scope.$emit( )将一个自定义事件发送至父级controller,在父级controller中使用$scope.$on( )来监听这个自定义事件,并在回调中执行$scope.sendAjax( )这个方法。

  • 将方法写在指令的link函数中

    优势:可以将一些不需要用户感知的函数封装起来,例如数据发送前的校验,或是响应数据的结构重组等,提高业务逻辑相关的代码在controller中的比重,减小controller的体积。

    劣势:当其他组件想要使用这个方法时会很困难,Angularjs并没有提供一种跨directive调用方法的机制。

    实际上在开发过程中,不熟悉&绑定的开发者在使用自定义指令时,几乎都会选择将方法写在controller中并通过消息机制来触发这个函数(也就是上文中第一个方法),他们希望指令所封装的组件是纯粹的,换句话说,它是可复用且与业务逻辑剥离的。

使用&绑定

  • 对于业务逻辑开发而言

    简洁且容易使用,组件可直接调用controller中的业务逻辑代码,避免了当自定义事件过多时造成的controller中充满了事件监听的回调方法的问题,使用方法如下:

    //主模板中
    <div change-page="sendAjax"></div>
    
    
    //指令定义中
    ...
    template:'<div ng-click="changePage()"></div>'
    scope:{
        changePage: '&'
    },
    ...
    
  • 对于模块封装而言

    从上面的示例就可以看出,自定义指令中实际执行的changePage( )方法,是用户在使用这个组件时编写在controller之中的**sendAjax( )**这个方法,当我们需要封装一个供其他开发者调用的组件时(往往是在编写一个组件库),这种结构是在angular中最自然的实现方式。

当你希望给一个自定义指令暴露越来越多个性化定制接口时,它很可能变得臃肿,甚至一无是处。

&绑定意义,在于将业务逻辑从组件中剥离出来,但过多的可定制性又会给开发者带来额外的问题,你会发现,仅仅是简单地使用一个下拉框或是勾选框之类的简单组件时,就需要传入一大堆自定属性,而这本该是在交互设计标准中确定好并编写在项目中的指定位置的。自定义指令的可定制性越高,html模板的体积就会越大,controller中的代码量也会随之增大,带来的直接问题就是:开发很方便,维护很痛苦。

2.3 =绑定

=绑定是3中绑定形式中最常用的一种,常用于将用于渲染的数组或对象传入自定义指令中。这样做可以将业务逻辑分块,使得代码结构更具有层次性,降低维护难度。

实际场景:

一个表格组件,需要通过ajax请求从后台获取100条用于展示的数据,这些数据_可能需要排序,过滤,分页_等操作,首先应该明确的是,即时这些代码全部写在controller中,程序也是可以运行的,只是当你在其他场合需要复用时,就需要复制粘贴很多代码。那么该如何来设计这样一个功能并提取公用组件呢?排序过滤分页都是表格组件的通用动作,也就是说与数据对象本身的结构并没有太大关系,对于一个通用型表格控件来说,我们唯一必须要传入的只有一项——数据源,且它是有可能会随着用户操作而发生变化的。

推荐的技术方案为:

  • service : 封装$http操作,信息提示,及容错处理
  • controller : 调用service暴露的方法从后台获取数据,并赋值给指定变量
  • directive : 双向数据绑定controller中的变量以获取驱动表格渲染的数据,将排序,过滤,分页的具体实现封装在指令内部。

这样的结构,使宏观业务逻辑前后台信息交互组件通用功能分别在不同的模块中实现,可以极大提高定位问题的速度。

=绑定的双向数据绑定在使用中是存在一些方法问题的,详情请参考《Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定》

三. 自定义指令的实用意义

  • =绑定—— 常用于传递从后台获取的用于驱动纯组件的源数据。

  • @绑定—— 为自定义指令中传递可配置的常量参数提供设置接口。

  • &绑定—— 为自定义指令中传递自定义方法提供接口。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Easter79 Easter79
3年前
swap空间的增减方法
(1)增大swap空间去激活swap交换区:swapoff v /dev/vg00/lvswap扩展交换lv:lvextend L 10G /dev/vg00/lvswap重新生成swap交换区:mkswap /dev/vg00/lvswap激活新生成的交换区:swapon v /dev/vg00/lvswap
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Stella981 Stella981
3年前
AngularJS 指令实践
指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令,以及介绍如何在实际项目中使用。在这篇文章的最后,我会指导你如何使用Angular指令来创建一个简单的记事本应用。概述一个指令用来引入新的HTML语法。指令是DO
Wesley13 Wesley13
3年前
ES6 新增的数组的方法
给定一个数组letlist\//wu:武力zhi:智力{id:1,name:'张飞',wu:97,zhi:10},{id:2,name:'诸葛亮',wu:55,zhi:99},{id:3,name:'赵云',wu:97,zhi:66},{id:4,na
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
11个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这