代码片段支持用户在iVX中零代码制造“轮子”。在iVX 5.0中，不再支持创建小模块，统一使用代码片段。代码片段的主要功能有：
1、应用逻辑的重用：代码片段可将前后端逻辑进行简单的封装、上传、共享、重用；
2、应用功能模块的解耦：代码片段内部是一个封闭逻辑空间，封装之后，仅代码片段根可以与外部组件有交互。通过这种内外隔离的方法，可以将一个复杂的应用进行有效模块化分割，便于维护与更新；
3、前端功能实时预览: 前端代码片段，支持在舞台上实时预览效果, 包括事件、属性绑定、for循环列表等，无需预览整个应用，就可以在舞台上进行完全所见即所得的实时开发； 文档中心 组件总览 自制组件 通过iVX编辑器编写组件 【5.0】代码片段 代码片段的工作原理
代码片段的工作原理
代码片段的工作原理，是将一系列对象树中的对象，封装成一个组件，如下图所示：
代码片段封装之后，会形成一个独立的组件空间，这个空间内外的交互是完全隔离的。 比如上图中，在封装前，内部对象1绑定了外部对象2的值，同时，外部对象1设置了内部对象2的属性。在封装后，内外对象就无法直接进行交互了，因为封装后所有内部对象会被装在一个“组件壳”里，在这个壳内外的对象无法相互“看到”，即外部对象只能“看到”代码片段的“组件壳”，内部对象也只能向外看到这个壳。
因此，所有的交互，都需要通过这个组件壳， 即外部对象通过设置组件壳的属性（这个属性进一步被内部对象绑定），来影响内部对象，内部对象通过组件壳的事件，来影响外部对象。 对于外部对象来说，整个代码片段，就是一个普通的iVX组件，无需关心内部结构。即当一个代码片段开发完成-需要被使用时，可以无需展开内部逻辑，直接当成一个普通的iVX组件来使用。
创建代码片段
封装前端代码片段
在应用内可单选或多选几个对象，右键选择“封装为代码片段”，就可以将已选对象以及它们子对象封装为一个代码片段。比如，我们将一个制作完成的多选列表，封装为代码片段：
封装之后，对象树中会形成一个新的代码片段结构，主要包含三个部分：
1、代码片段根，即整个代码片段的根容器。当我们将一组对象封装为代码片段后，这一组对象就成为了一个独立的iVX组件，而代码片段根，就是这个组件的操作入口。 代码片段根上，具备组件的属性、方法（动作）和事件，所有代码片段与外部对象的交互，都需要通过代码片段根来进行。 代码片段内部的对象，无法直接和外部对象进行交互，即内部对象无法直接设置、引用外部对象，反之依然。
2、外部接口容器，包含属性、动作、事件、API四个容器， 主要用来定义代码片段对外的接口，我们将在后续的章节中进行逐个功能说明；
3、原有对象结构，即我们在封装时多选的对象。 注意，在以上例子中，我们选择了三个变量组件和一个UI组件（DIV组件以及它的子组件），因此，封装后对象树中的UI结构不会发生变化。 但如果我们选择了多个UI组件，且这几个UI组件在对象树中并非相邻，那么封装之后，会强行将UI组件装在一起，可能导致页面上的UI布局变化。
封装时的内外交互处理
由于代码片段封装之后，所有内外交互都只能通过根组件来实现， 因此，封装前如果对象中存在内外交互，将导致代码片段封装失败。 有部分交互，系统在封装时，会自动转换为合法交互（即通过代码片段根的属性、动作和事件来中转），另一部分交互，由于涉及到对象树结构改动，系统的自动处理可能导致非预期的效果， 因此会提示报错，需要先手动处理完毕后再进行封装：| 交互方向 | 交互方法 | 处理方式 | 详情 |
|---|---|---|---|
| 外部-》内部 | 外部对象引用内部变量值（比如绑定，或在事件面板中引用了内部变量） | 自动处理 | 将内部变量移入属性接口容器，成为代码片段的一个属性。注意，代码片段的属性是单向的，即外部可以设置代码片段属性，进而影响内部对象，但内部对象无法更新属性，因此如果存在内部对象对该变量的反向赋值，移入属性容器将失败。 |
| 外部对象绑定了内部对象的属性 | 报错 | 需要先解绑，后续通过事件来获取参数。 | |
| 外部对象，设置了内部对象的属性 | 自动处理 | 将内部对象属性，转为代码片段根的属性。内部对象的对应属性，绑定代码片段的根属性。 | |
| 外部对象，调用了内部动作组 | 自动处理 | 将动作组移入动作接口容器下，成为代码片段根的动作 | |
| 外部对象，调用了内部对象的动作 | 报错 | 需要将组件的调用转为动作组的调用后，再进行封装 | |
| 内部-》外部 | 内部对象，绑定了外部的变量 | 自动处理 | 如果这个外部变量没有被其他外部交互，则会被自动纳入代码片段的范围。如果该变量被外部引用，则会被移入属性接口容器，成为代码片段的属性。 |
| 内部对象，绑定了外部对象的属性 | 报错 | 不建议内外对象有属性绑定，建议拆分为变量绑定，或将外部对象也一起多选纳入代码片段范围内； | |
| 内部对象，调用了外部对象的方法或调用了外部动作组 | 报错 | 需要手动将调用转为代码片段的事件，或将外部对象一同纳入代码片段后再封装； | |
| 内部对象调用了后台服务 | 自动处理 | 将服务的调用，转为API的调用，API绑定后台服务； |
代码片段的实时预览
前端代码片段封装之后，可以点击舞台的代码预览按钮，进入代码片段实时预览模式：
在实时预览模式下，代码片段中的数据绑定，for，事件，等可以直接在舞台上生效。如果代码片段中通过API 绑定了服务，那么服务的调用也可以试试生效。 比如，在上文例子中制作的代码多选模块，进入实时预览之后，就可以直接在舞台上看到效果：
在实时预览模式下，如果对代码片段中的内容进行了修改，比如修改了某个内部对象的属性，修改可以实时在舞台上生效。 但注意，每次修改代码片段的内容，都会导致组件重新刷新，我们之前在代码片段中做的操作就会恢复到初始状态。 比如，我们在这个多选的代码片段中，勾选了一些选项，组件重新渲染后，选项的选中状态会恢复到初始状态。
实时预览注意事项：
1、实时预览模式下，代码片段中的所有逻辑都会在编辑器环境中执行，因此，当代码片段内部逻辑出现问题，比如出现死循环或其他引用报错，可能导致编辑器白屏或卡死。此时，可以重新加载编辑器。重新加载之后，实时预览模式是默认关闭的。
2、代码片段的实时预览对浏览器性能会有额外的消耗，如果页面中的代码片段内容很多，实时预览时发现编辑器响应缓慢，可以关掉实时预览，将代码片段颗粒度调小之后，再开启。
代码片段的内外交互
代码片段在封装之后，内部形成一个独立的子空间， 内外对象无法直接交互，但可以通过代码片段根作为中转，进行间接交互。
| 方向 | 交互方法 | 交互场景 |
|---|---|---|
| 外部->内部 | 属性 | 外部对象可以设置代码片段根的属性，进一步影响内部对象的行为。和所有iVX组件一样，属性可以编辑器里设置一个初始化的值，或者绑定一个外部的变量。 |
| 动作 | 外部对象可以调用代码片段根的动作（方法）来让代码片段执行某个动作。这个动作，可以在内部定义，用来操作内部的对象，从而，将外部对内部的对象的直接操作，转换为对代码片段根的操作。 | |
| 内部->外部 | 事件 | 内部对象，可以触发一个内部的自定义事件，进而触发代码片段根的一个事件。事件可以传参，通过事件，可以将内部对象的事件和数据状态，传给外部。 |
| API | 内部对象无法直接调用后台服务，但可以通过API组件进行中转。前端API组件，可以选择绑定一个后台服务，从而让代码片段内部对象，可以触发一个后台服务的调用。 |
上表中的中转相关逻辑，在代码片段中，都是通过外部接口容器来实现。当创建一个代码片段时，会自动创建以下几个外部接口容器，分别用于属性、动作、事件和API 的定义：
详细的定义方法将在后续章节中分别介绍。
代码片段的属性
前端代码片段的属性，用于在属性面板上控制代码片段行为，或在外部像代码片段中传递数据。 比如，我们可以制作一个语言属性，统一控制代码片段内部文本的语言，或制作一个选项列表属性，控制一个菜单代码片段的选项。
制作代码片段的属性，需要首先在属性接口容器中添加变量。 所有在属性接口容器下添加的变量，都会自动成为代码片段根的属性：
代码片段内部的对象，可以绑定属性接口容器下的变量，从而绑定代码片段的根属性。 比如，我们将内部的一个文本，绑定了商品和价格两个公共变量：
此时，只要设置代码片段的属性，就可以更改内部文本的内容了：
属性使用注意事项：
1、代码片段的属性设置是单向的，即数据的流向只能是代码片段属性->属性变量->内部对象，而不能反向， 即修改代码片段属性，可以影响到内部对象，但内部对象，不能设置属性变量的值。 如果需要将内部的数据传给外部，则需要使用事件接口容器；
2、属性变量中定义的值，是代码片段对应属性的默认值， 比如，商品属性值为空时，代码片段会使用商品变量里定义的值， 但如果商品属性值不为空，那么就会使用商品属性的值：
3、代码片段的属性，和其他所有组件的属性一样，可以绑定其他变量或对象，也可以在外部通过设置属性方法来对其进行修改。 但如果两次设置的属性值相同，则设置动作不会执行（这个行为针对所有iVX的web组件都是一样的）。 比如，内部有一个输入框，绑定了一个属性变量1。此时，在外部第一次设置变量1属性为“hello”时，输入框的内容会变成“hello”， 但此时，如果用户在输入框中输入了内容，比如又输入了“123”，我们再次设置属性为“hello”，此时输入框的内容不会变回“hello”， 因为此时代码片段的变量1属性依旧是hello，内部的输入框绑定属性，是单向绑定，并不会影响这个属性。 因此，如果我们需要重复将属性设置为同一个值，可以使用一个动作接口容器下定义的动作组。
前端代码片段的动作
代码片段的动作，在动作接口容器下定义。所有动作接口容器下的动作组，就会自动成为一个代码片段的动作。 比如，我们在动作接口容器下，添加一个叫“闪烁”的动作组， 那么代码片段根下，就会出现“闪烁”这个方法：
在“闪烁”这个动作组中，我们让内部的一个动效进行播放：
这样，我们就用外部一个按钮，调用代码片段的“闪烁”动作，让文本进行闪烁了。
动作使用的注意事项：
1、动作接口容器下的动作组，只能访问到代码片段内部的对象，无法直接操作外部对象。 如需操作外部对象，则需要在事件接口容器中定义事件；
2、动作接口容器下的动作组，可以在外部作为代码片段的方法来调用，也可以在内部直接作为普通的动作组调用；
3、在外部调用代码片段根的动作的逻辑，由于属于代码片段外部的逻辑，因此不会在实时预览模式下在舞台上生效，除非外部逻辑又被封装在了一个外层的代码片段中。
代码片段的事件
代码片段的事件，用于在内部操作外部对象，或者把内部的数据传递到外部。 比如，当内部一个按钮被点击，内部一个API收到了返回结果，内部一个选项被选中， 我们都可以通过代码片段的事件，将内部被触发的事件以及相关的数据（比如API收到的返回数据）传递给外部。
传递的方法是首先在代码片段事件接口容器中，添加一个自定义事件组件：
比如，我们添加一个自定义事件组件，并命名为“数值改变”。 此时，代码片段根，就会出现一个“数值改变“的事件：
然后，我们在内部调用这个自定义事件组件，让其触发，可以理解为，向它发送了一个消息：
在上图中，我们在一个内部变量数据改变时，让“数值改变”这个自定义事件触发，并将最新的值传给它。 这样我们就可以在代码片段根上监听到内部变量数据改变的事件，并拿到最新的值。 比如，当我们在外部监听到内部数据改变时，将最新数据赋值给一个文本：
在上面的例子中，自定义事件传递的数据，是通过自定义事件组件的属性面板预先进行定义的：
参数可以定义多个，定义之后，在内部触发自定义事件时，可向其传参， 最终作为代码片段根事件触发时的参数，在外部被获取到。
自定义事件使用注意事项
1、自定义事件的触发时机，可完全由内部逻辑，不一定仅仅是一个简单的事件传递。 比如，可以为内部事件添加条件，当一个按钮被点击，且输入框的值大于0时，才会触发对应的事件；
2、代码片段根上定义的事件逻辑，由于是代码片段外部逻辑， 并不会在实时预览模式下生效，除非代码片段外部又封装了外层代码片段。
上传与下载云端代码片段
将代码片段上传至云端
在应用中制作完代码片段之后，可以将其上传至云端：
上传时，可指定一个分类，并添加版本说明。每次上传，系统会自动添加版本号，无需额外指定。
上传至云端之后，可以在组件栏的自定义标签下，找到刚刚上传的代码片段:
更新代码片段
当代码片段上传完成后，它就会和云端的定义进行绑定，其属性面板也会发生变化：
如上图所示，已经上传过的代码片段，不再有“上传代码片段”选项，而是改成了“更新代码片段”和“另存代码片段两个选项”。 其中，更新代码片段可将当前修改过的代码片段定义，更新至云端。 另存，则是新建一个云端代码片段。注意，另存之后，当前应用中的代码片段依然是绑定第一次上传的代码片段，即每次更新还是更新的第一次上传的那个。
添加云端的代码片段与修改版本
在组件栏->自定义->代码片段下，可查看到当前账号或企业下的所有代码片段， 点击其中一个，就可以将其添加至当前项目。 针对前端代码片段，添加之后，会新建一个页面，将代码片段添加至新页面中； 针对后台代码片段，会直接添加至后台根下。
当云端的代码片段版本更新后，我们可以通过应用内代码片段的版本管理功能，对代码片段进行同步：
如果当前应用中，同一个云端代码片段，被添加了多次，则可以选择“更新所有片段”，将多个代码片段同时更新。 更新之后，之前在代码片段根上设置的属性、动作和事件不会受影响，除非新的定义中修改了这些接口， 比如，新的版本中去除了之前的一个动作的定义，那么之前在外部调用的代码片段方法也会失效。
代码片段使用文档
代码片段添加
选中左侧模块组件栏，在其分类下可以选择需要使用的代码片段，
点击添加后即可添加到右侧的对象树中
数据视图结构
选中前端的代码片段，点击左侧属性的数据视图结构，可以看到此时没有绑定数据源，
数据源可以选择为后台的数据表，也可点击【创建DB并绑定】
绑定新的数据源
如果你需要绑定自己的数据表，那么你需要在后台先添加一个数据表。
然后在前台代码片段的数据视图结构中，数据源选择为后台的产品列表数据表
然后，我们可以点击删除按钮，删除这些无关字段
并且可以在管理的下拉菜单中，添加我们所需要的字段
添加完成后如下图所示
创建DB并绑定
点击【创建DB并绑定】后，会在后台创建一个新的数据表， 该数据表与当前数据视图结构中的字段名完全一致，并会与该新表进行数据源绑定
反向更新db结构
用户可以在前端代码片段的数据视图结构中，直接添加或删除字段， 点击【反向更新db结构】后，会直接修改后台对应数据表的结构。 例如，新添加一个图片字段，类型选择为资源，然后点击反【向更新db结构】，此时会提示更新的内容
在后台的数据表中可以看到，成功的新增了图片字段
字段设置
1、管理
可以选择和取消选择数据源中的字段
2、删除
点击后可以便捷的取消选择数据源的某一字段
3、数据源字段设置
点击后可以选择绑定数据源的某一字段
4、添加字段
点击后可以添加新的字段
5.额外信息
代码片段在制作时，在后台的数据库视图中,添加设置的额外信息字段名称。 例如，图中额外信息有sort（是否参与排序），show（是否可展示）以及with（每列宽度）的字段，你可以在这里填写每个字段的值
填写完成后如下图所示
如果你还需要其他的额外信息字段，你可以展开代码片段，在后台的数据库视图中进行添加。 在前台代码片段数据视图结构的字段设置中，仅支持修改额外信息字段列下的内容，无法新增或删除额外信息的字段
代码片段三要素
在片段代码中，同样也具备组件的三要素，属性、动作和事件。
属性
代码片段暴露出的属性，是在代码片段制作过程中，添加的在属性的对象容器下的变量。 例如，该代码片段可以设置是否显示查看、编辑和删除的按钮，可以设置列表的宽度和高度，还可以设置初始每页条数。
动作
代码片段暴露出的动作，是在代码片段制作过程中，添加在动作的对象容器下的动作组。 例如，该代码片段具有获取数据列表的动作。
事件
代码片段抛出的事件，是在代码片段制作过程中，添加在事件的对象容器下的自定义事件。 例如，该代码片段具有查看详情和编辑的触发事件，并且可以获取到其返回的时间参数。
若有收获，就点个赞吧
0 人点赞
