作者：中子星000

让我们在JavaScript的大海中遨游吧！（本次航行没有包含自定义控件全部内容，只讲了不可见控件，和方法积木的定义以及控件实体）

启航之前

一 目标

遨游大海，必然要有一艘可靠的船，一个坚定的目标和一位可靠的船长，

  • 一艘可靠的船：即你接下来要做的自定义控件
  • 一个坚定的目标：即你的自定义控件的功能
  • 一位可靠的船长：即你

需求推动发展，那我们必须得先制定一个目标，才能打造一艘优秀的船。这次航行我们有这几个目标，

  • 好好的宣传这次航行，把公告的标题（假设为英文）转换成大写。即把字符串中英文字母全转换成大写
  • 把一位粗心船员写的大小写混乱的句子转换成小写（假设必须要这么做）。即把字符串中英文字母全转换成小写
  • 另一位船员想找找目标中第一个“船员”在哪？。即搜索字符串中第一个子字符串的下标

好了，目标指定完了，开始造船吧！

二 造船

造船肯定不能两手空空，还得有材料，

  • 一些造船的基本知识，即一些编程的基本知识
  • 一个好用的车间，即代码编辑器

1 船的框架

造东西可以先造出框架，再填充内容，那我们这次造船也这样

首先必须得创建一个文件叫做字符串工具.js（后缀名不会改的百度搜索后缀名怎么改）

一艘船，当然得有属于他的基本信息，描述清楚他有什么功能，不然别人怎么知道这是什么呢，往文件里放入这个框架吧

  1. const types = { // 这就是你的船了，包含了你的船的信息，即一个自定义控件类型
  2.     type: 'STRING_TOOLS_WIDGET', // 当作是船的型号，最好使用全英文大写，下划线连接
  3.     title: '字符串工具', // 当作是船的名字
  4.     icon: 'https://creation.codemao.cn/716/appcraft/IMAGE_bZbAOhRcTa_1643095470593.svg', // 一艘船得有一个好看的图标作为标识，一般用.svg的图片
  5.     isInvisibleWidget: true, // （实在想不到什么比喻了）用于决定这个控件是否不可见，这个教程只教不可见控件，想要了解可见控件参考其他教程
  6.     isGlobalWidget: true, // （实在想不到什么比喻了）用于决定这个控件是否全局
  7.     properties: [], // 你的船会有一些独特的属性在这里定义，控件的属性列表，本教程中未使用，但也得写上
  8.     methods: [ // 你的船能做什么就看它了，控件的方法列表
  9.         { // 每一个方法都由类似这样的一段大括号里面的内容定义
  10.             key: 'toUpperCase', // 这个方法的名字，会在下面用到
  11.             valueType: 'string', // 我们进行完转换后返回转换后的字符串
  12.             params: [ // 进行一些操作，经常是给方法一些参数的
  13.                 {
  14.                     key: 'text', // 参数名，要和下面对应
  15.                     label: '把', // 更好的衔接积木，增加可读性
  16.                     labelAfter: '转换成大写', // 更好的衔接积木，增加可读性
  17.                     valueType: 'string', // 我们要输入一个字符串进行转换大写
  18.                     defaultValue: 'Hello world!', // 积木里默认的值
  19.                 },
  20.             ],
  21.             tooltip: '字符串中英文字母全转换成大写', // 向使用这个控件的人描述这个方法是做什么的，怎么用的
  22.         },
  23.         {
  24.             key: 'toLowerCase', // 这个方法的名字，会在下面用到
  25.             valueType: 'string',
  26.             params: [
  27.                 {
  28.                     key: 'text',
  29.                     label: '把',
  30.                     labelAfter: '转换成小写', // 更好的衔接积木，增加可读性
  31.                     valueType: 'string',
  32.                     defaultValue: 'Hello world!',
  33.                 },
  34.             ],
  35.             tooltip: '字符串中英文字母全转换成小写', // 向使用这个控件的人描述这个方法是做什么的，怎么用的
  36.         },
  37.         {
  38.             key: 'indexOf', // 这个方法的名字，会在下面用到
  39.             valueType: 'number', // 这里返回一个下标，当然是数字类型了
  40.             params: [
  41.                 {
  42.                     key: 'text',
  43.                     label: '在',
  44.                     labelAfter: '中搜索第一个', // 更好的衔接积木，增加可读性
  45.                     valueType: 'string',
  46.                     defaultValue: 'Hello world!',
  47.                 },
  48.                 {
  49.                     key: 'searchText', // 参数名，要和下面对应
  50.                     valueType: 'string',
  51.                     defaultValue: 'o',
  52.                 },
  53.             ],
  54.             tooltip: '搜索字符串中第一个子字符串的下标', // 向使用这个控件的人描述这个方法是做什么的，怎么用的
  55.         },
  56.     ],
  57.     events: [], // 你的船不是一帆风顺的，总是会发生一些事情，控件的事件列表，本教程中未使用，但也得写上
  58. }

2 船的内容

光有框架肯定不行，你得向框架里填充内容，就像这样

  1. class Widget extends InvisibleWidget { // 现在，把你船的框架填上代码吧！
  2.     constructor(props) { // 这个是构造函数，必须要有的
  3.         super(props); // 调用超类的构造函数，必须要有的
  4.     }
  6.     toUpperCase = (text) => { // 定义上面对应的方法，这里的参数要和上面对应
  7.         // 这里调用了JavaScript字符串对象的原生方法
  8.         return text.toUpperCase(); // 这里返回的内容数据类型要和上面对应
  9.     }
  11.     toLowerCase = (text) => { // 定义上面对应的方法，这里的参数要和上面对应
  12.         return text.toLowerCase(); // 这里返回的内容数据类型要和上面对应
  13.     }
  15.     indexOf = (text, searchText) => { // 定义上面对应的方法，这里的参数要和上面对应
  16.         return text.indexOf(searchText); // 这里返回的内容数据类型要和上面对应
  17.     }
  18. }

3 下海

你的船不下海当然没法走，所以，你需要下面的代码

  1. exports.types = types;
  2. exports.widget = Widget;

启航

源文件：字符串工具.js

1 一帆风顺

在CoCo中导入你的控件并使用吧！

2 雷雨天气

写自定义控件总是会出现错误，那又该怎么办呢？

你可以到CoCo交流群（QQ：861247613）中提问

也可以自行百度（估计很难查到）

或者根据自定义控件文档慢慢排查

未来的航程

分享你的控件

在CoCo交流群（QQ：861247613）中分享你的控件吧！

向官方投稿你的控件

继续学习JavaScript

以下网址会帮到你：

https://www.javascript.com/learn（仅Javascript，英文）

https://developer.mozilla.org/zh-CN/docs/learn/JavaScript（非常全面，有中文，推荐）

https://www.runoob.com/js/js-tutorial.html（不是很全面，中文，推荐）

（有啥遗漏或不详细以后再补充吧）