自定义指令/渲染

在实际项目开发中，模板引擎默认提供的渲染逻辑肯定不会完全符合项目的设计需求，BUZ提供两种自定义功能，开发人员可以根据自身项目需求 自定义各种渲染方法。

两种扩展方式都要依赖于core/compile/order.js（路径请根据自身脚本所在位置调整，建议在app.js中注入全局指令/渲染）

1

import CompileOrder from 'core/compile/order.js';

自定义渲染（常用）

自定义渲染时比较常用的扩展，例如对时间格式化、读取字典数据、格式化金额等等操作， 如果没有自定义渲染的话，我们只能在页面中写重复的转换方法或者在每个视图组件中创建 相同的转换方法。有了自定义渲染我们既可以创建公共的渲染方法了。

使用方式：

1

2

3

4

5

import CompileOrder from 'core/compile/order.js';

CompileOrder.addHelp("reverse",function(value =""){

    return value.split('').reverse().join('');

});

1

{{reverse("BUZ帮助文档")}}

多参数：

1

2

3

4

5

6

7

8

9

10

11

import CompileOrder from 'core/compile/order.js';

CompileOrder.addHelp("sum",function(...param){

    let result=0;

    param.forEach(function(i){

        result+=i;

    });

    return result;

});

1

{{sum(1,3,4,5,6,7)}}

addHelp方法提供两个参数，第一个参数为name值（必填）；第二个为执行方法(可带参数)

详细内容请详看模板语法中的计算属性

自定义指令

自定义指令一般适用于Attributes扩展，规则为b-指令名称，请看下面这个例子：

1

2

3

4

5

6

7

8

import CompileOrder from 'core/compile/order.js';

CompileOrder.addOrder({

    name: "focus",

    exec: function (target, value) {

        target.node.focus();

    }

})

1

<input b-focus="" type="text">

通过上面的写法，我们就可以实现默认焦点功能，当然默认焦点可以使用autofocus属性，这个例子仅供学习参考。 注意：指令名称尽量避免与公共指令重名，除非你想替换掉它。

接下来我们来看一下addOrder具体的参数介绍：

参数 作用 类型 默认值 备注
name 指令名称 String   必填。指令名称尽量避免与公共指令重名，除非你想替换掉它。
exec 执行方法 Funtion   必填。在下面章节会详细介绍参数及参数属性。
isSkipChildren 是否跳过子集 Boolean false 当Element渲染到该指令时，若该节点有子集，并且该属性为true时， 则跳过该节点的子集渲染，统一交给指令统一处理。例如：for 指令在循环时会跳过子集，交由for内部指令渲染子集。该属性为高级属性，一般用不到。
weight 权重 Int 0 该属性属于高级属性，一般用于对指令执行顺序调整时会使用到该属性。 目前for权重200，if/else if/else权重100， 请谨慎操作。
breforeExec 执行exec之前触发 Funtion   只会执行一次，可在该方法中设置前后节点等操作。
runExpress 自定义表达式解析 Funtion 默认执行tryRun方法 若指令解析后复杂度高，需要二次转换时，可通过该方法进行相应处理后再尝试运行。 默认执行tryRun方法
tryRun 自定义运行方法 Funtion 默认使用Expression解析 该方法返回实际值，用于exec第二个参数。 该属性为高级属性，不建议重写。
addWatchers 添加响应式监听 Funtion   内部方法，禁止重写，若该指令在实际编译时会创建出其他监听， 则可以通过该方法进行收集，并在节点销毁时手动对其清除，已防止内存泄漏；例如 for指令，在解析子集时会不断生成监听。
clearWatchers 清除响应式监听 Funtion   内部方法，禁止重写，例如for指令，若数组/对象发生改变时， 会移除原节点，并重新解析新的节点，这时我们可以在清除源节点时手动清除 废用的监听。

addWatchers/clearWatchers一般适用于高级指令的编写，建议合理使用该方法来管理动态生成 的响应式监听，当然你也不用担心，当视图组件卸载时会将该视图在展示期间所产生的所有监听全部移除。该方法 一般适用于动态编译子集或者对内存消耗极度关心优化时使用。

一般情况下，大部分扩展指令只需要设置name和exec即可。

exec （核心方法）

1

2

3

4

5

6

CompileOrder.addOrder({

    name: "...",

    exec: function (target, value, oldValue) {

        //...

    }

})

exec是指令的执行入口，必须进行设置。参考上面例子中的参数， value/oldValue就不多说了，一个是新值，一个是旧值。接下来我们详细介绍下target参数

在指令进行执行时实际会产生两个属性操作把柄，分别是token、option。

此节内容比较长，请耐心看完。

token

指令相关信息

参数名 作用 类型 备注
node Node节点 NODE  
$node Node节点 BET Selector 详见Api-BET
exp 指令值 String 可以理解为待处理的表达式
cause 是通过谁来触发的/触发依据 String  
order 解析后的指令名 String  
param 指令参数 Array 对于多文本混合的指令会解析出多个参数。
removeAttr 移除解析后的特性 Function 内部执行，禁用

option

当前Compile参数

参数名 作用 类型 备注
data 响应式数据 Object  
refNode Node节点 NODE 当前触发Compile的容器（可理解为当前视图根节点）
view 当前视图组件 View 参考Api/视图组件

总结

看完这两个属性后，我们接下来看下target的生成代码：

1

2

3

4

5

6

7

8

Object.assign({

    //保留token/option把柄作为后期oder存放依据

    $token: token,

    $option: option,

    isFirst: isFirst,

    scope: scope

}, token, option)

通过上面的语法，大家可以看出这一个对象的合并操作，他把token、option合并到了target中 接下来我们看下它本身自带的这些属性。

之所以进行合并操作是为了更方便的进行操作，大部分指令一般不会去操作原始token和option。

参数名 作用 类型 备注
$token 即token Object 由于合并后无法操作token，保留$token，可以在token中存储临时值。
$option 即option Object 同上
isFirst 是否是首次执行 Boolean 详见下面注意事项
scope 当前指令触发时实际的模型数据 Boolean 注意：该变量与option中的data不同，对于需要带入值的指令， 例如for指令在运行时会带入(value,key,index)等值，都会临时 存放到scope并向下个节点传递，不会污染传入的响应式数据。

exec一般在两种情况下触发执行：1.节点解析时默认执行一次；2.值发生改变时触发。 可通过isFrist区分是否是首次执行。

breforeExec

token Object 指令相关信息，参考上文介绍

option Object 当前Compile参数，参考上文介绍

scope Object 当前指令触发时实际的模型数据，参考上文介绍

runExpress

token Object 指令相关信息，参考上文介绍

option Object 当前Compile参数，参考上文介绍

scope Object 当前指令触发时实际的模型数据，参考上文介绍

tryRun

exp String 当前指令内容/表达式

scope Object 当前指令触发时实际的模型数据，参考上文介绍

option Object 当前Compile参数，参考上文介绍

clearWatchers

token Object 指令相关信息，参考上文介绍

addWatchers

token Object 指令相关信息，参考上文介绍

watchers Array 监听数组

https://github.com/ZhangChuanHui/BUZ

BUZ-自定义指令/渲染相关推荐

  1. 2.0 vue内置指令与自定义指令

    一.概述 模板在解析之前指令是存在的,但是解析完成以后就不存在了. 1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHT ...

  2. AngularJS：如何使用自定义指令来取代ng-repeat

    引言 本文主要介绍了另一种即具有与ng-repeat 一样处理大量数据的绑定的功能,又具有超高的性能. 对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的 ...

  3. Angular 基于自定义指令的内容投影 content projection 问题的单步调试

    问题描述 本文涉及到的代码位置:https://github.com/wangzixi-diablo/ngDynamic 我有一个能接受内容投影的 Angular Component: 具体投影内容, ...

  4. SAP Spartacus自定义指令cxOutlet的工作原理

    cxOutlet合集 SAP Spartacus自定义指令cxOutlet的工作原理 SAP Spartacus table cell如何通过cxOutlet在运行时动态注入组件 SAP Sparta ...

  5. Vue自定义指令原来这么简单

    本篇学习目标 能够了解组件进阶知识 能够掌握自定义指令创建和使用 能够完成tabbar案例的开发 1. 组件进阶 1.0 组件进阶 - 动态组件 目标: 多个组件使用同一个挂载点,并动态切换,这就是动 ...

  6. vue笔记（二）Vue-class与style、事件、计算属性、数据监听、指令+自定义指令、过滤器

    vue官网 一 .class.style操作 二.事件 三.计算属性 四.数据监听.观测 五.指令+自定义指令 六.过滤器 一 .class.style操作 官网 1. class使用: (1)v-b ...

  7. vue.js 四（指令和自定义指令）

    官方的指令说明已经很简单了,这里再写一遍,也是自己加深一下印象 v-text 就是写入单纯的文本,可以忽略这个指令直接双花括号代替 <span v-text="msg"> ...

  8. vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画

    自定义指令: vue中通过directive方法自定义指令,如:自定义一个v-focus指令: <script>Vue.directive('focus', {//通过directive( ...

  9. Angularjs进阶笔记（2）—自定义指令中的数据绑定

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

最新文章

  1. 网页中PNG透明背景图片的完美应用
  2. gMIS吉密斯更新：Pivot透视+图示，List+观察模式
  3. setsockopt
  4. Android新控件RecyclerView浅析及上拉和下拉刷新
  5. 基本概念学习（8000）---兼容机
  6. python获取文件读写权限_Python 查看文件的读写权限方法
  7. Asp.net报表制作 OpenFlashChart免费图表组件
  8. exls导入数据库 php_PHP 利用 PHPexcel 导入数据库
  9. 理解和使用SQL Server中的并行
  10. .tcl文件_TCL电视自己安装的软件，有声音但没有画面？详细解决步骤奉上
  11. 给Ubuntu安装MacOS主题
  12. day24-XSS过滤及单实例
  13. 拯救者Y7000（2018）装黑苹果及90%驱动
  14. 毁掉一个年轻最好的办法，就是向他鼓吹财务自由
  15. 初学Shader关于旗帜飘扬的一个简单shader的实现
  16. c语言的实验题答案,大一C语言上机实验试题及答案
  17. STM8L学习笔记-GPIO端口操作（一）
  18. 数据结构——行车路线规划（大路小路）
  19. sailfish:不需要比对的转录本定量软件
  20. 微信链接跳转浏览器实现微信中直接下载棋牌游戏类APP功能

热门文章

  1. HeidiSQL工具导出导入MySQL数据
  2. vue-photo-preview踩坑，el-table中一张错误图片导致全部图片无法放大，并且与懒加载v-lazy不兼容
  3. hwd分别是长宽高_长宽高的英文缩写分别是什么？
  4. 死锁的四个必要条件以及处理策略
  5. 【BOOST C++ 15 泛型编程】（2）Boost.EnableIf
  6. Dynamips基础教程系列---与本地网卡桥接
  7. 六招帮你推广网店知名度
  8. 基于Detectron2和LSTM的人体动作识别
  9. [理论]领域驱动设计 DDD 是啥,cqrs是啥
  10. android 串口一直打开_Android串口使用总结