作者：中子星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（不是很全面，中文，推荐）

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