强大免费AI编程助手Codeium助你源码分析、生成正则表达式、单元测试、登陆框…

一、Codeium是什么？

Codeium能够经过AI协助开发者生成代码，现在已支撑Visual Studio、JetBrains等多个常见IDE以及多个浏览器，且对个人用户免费运用。

下面将经过生成日期正则表达式以及单元测验用例、用Vue3和Element Plus生成一个登陆组件的事例，看看它对咱们日常开发能提供的协助。

Codeium支撑多种编程言语： Python、Javascript、TypeScript、Java、Go、C/C++ 等）

支撑的Editor如下图所示：

支撑的预览如下图所示：

二、如安在Visual Studio Code运用

1、Install Codeium Extension

2、Authorize（授权）

3、登录Codeium账户

登录成功之后：

三、装备Authentication Token

1、复制token

2、Open the Command Palette

3、Paste your Token

4、授权成功状况

四、如何使用

1、代码生成

比如生成一个日期正则表达式，演示作用如下：

2、单元测验用例

代码如下：

test('YYYY-MM-DD格局的日期应该匹配正则表达式', () => {
  const date = '2022-03-15';
  expect(regex.test(date)).toBe(true);
});
test('YYYY/MM/DD格局的日期不应该匹配正则表达式', () => {
  const date = '2022/03/15';
  expect(regex.test(date)).toBe(false);
});
test('YYYY年MM月DD日格局的日期不应该匹配正则表达式', () => {
  const date = '2022年03月15日';
  expect(regex.test(date)).toBe(false);
});
test('YY-MM-DD格局的日期不应该匹配正则表达式', () => {
  const date = '22-03-15';
  expect(regex.test(date)).toBe(false);
});

这里咱们界说了一个名为regex的变量来存储正则表达式。随后，咱们运用Jest测验框架编写了四个测验用例：

1. 查看一个契合YYYY-MM-DD格局的日期是否能够成功匹配正则表达式。
2. 查看一个运用YYYY/MM/DD格局的日期是否不能匹配正则表达式。
3. 查看一个运用YYYY年MM月DD日格局的日期是否不能匹配正则表达式。
4. 查看一个运用YY-MM-DD格局的日期是否不能匹配正则表达式。

这些测验用例将经过调用test函数来执行，并运用expect和toBe函数来断语测验结果。

3、用Vue3和Element Plus生成一个登陆组件

生成的代码如下：

<template>
  <div class="login-container">
    <el-card class="login-card">
      <h2 class="login-title">用户登录</h2>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px" class="login-form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model.trim="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="暗码" prop="password">
          <el-input type="password" v-model.trim="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="submitting" @click="handleSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { defineComponent } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton, ElCard } from 'element-plus';
export default defineComponent({
  name: 'LoginPage',
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
    ElCard,
  },
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入暗码', trigger: 'blur' },
        ],
      },
      submitting: false,
    };
  },
  methods: {
    async handleSubmit() {
      try {
        await this.$refs.loginForm.validate();
        this.submitting = true;
        // 在这里发送登录恳求，恳求成功后跳转到方针页面
      } catch (error) {
        console.error(error);
      } finally {
        this.submitting = false;
      }
    },
  },
});
</script>
<style>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.login-card {
  width: 400px;
}
.login-title {
  text-align: center;
  margin-bottom: 20px;
}
.login-form {
  width: 100%;
}
</style>

代码阐明： 在这个示例中，咱们运用了Element Plus组件库中的ElForm、ElFormItem、ElInput、ElButton和ElCard组件来完成一个简单的登录页面。页面中包括一个带有用户名和暗码输入框的表单，以及一个登录按钮。当用户点击登录按钮时，表单将被验证。如果表单验证经过，将发送登录恳求，恳求成功后跳转到方针页面。在代码中，咱们运用了Vue 3的defineComponent函数来界说组件，并将组件的数据、办法和模板都封装在了组件内部。

4、主动补全与提示

5、Vue3源码剖析

function createGetter(isReadonly = false, shallow = false) {
  // 闭包回来 get 拦截器办法
  return function get(target: Target, key: string | symbol, receiver: object) {
    if (key === ReactiveFlags.IS_REACTIVE) {
      return !isReadonly
    } else if (key === ReactiveFlags.IS_READONLY) {
      return isReadonly
    } else if (key === ReactiveFlags.IS_SHALLOW) {
      return shallow
    } else if (
      key === ReactiveFlags.RAW &&
      receiver ===
        (isReadonly
          ? shallow
            ? shallowReadonlyMap
            : readonlyMap
          : shallow
          ? shallowReactiveMap
          : reactiveMap
        ).get(target)
    ) {
      return target
    }
    const targetIsArray = isArray(target)
    console.log('----get1', target, key)
    if (!isReadonly) {
      if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
        console.log('----get2', target, key)
        console.log('----arrayInstrumentations', arrayInstrumentations)
        const res = Reflect.get(arrayInstrumentations, key, receiver)
        console.log('----res', res)
        return res
      }
      if (key === 'hasOwnProperty') {
        return hasOwnProperty
      }
    }
    const res = Reflect.get(target, key, receiver)
    if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
      return res
    }
    if (!isReadonly) {
      track(target, TrackOpTypes.GET, key)
    }
    if (shallow) {
      return res
    }
    if (isRef(res)) {
      // ref unwrapping - skip unwrap for Array + integer key.
      return targetIsArray && isIntegerKey(key) ? res : res.value
    }
    if (isObject(res)) {
      // Convert returned value into a proxy as well. we do the isObject check
      // here to avoid invalid value warning. Also need to lazy access readonly
      // and reactive here to avoid circular dependency.
      return isReadonly ? readonly(res) : reactive(res)
    }
    return res
  }
}
const set = /*#__PURE__*/ createSetter()
const shallowSet = /*#__PURE__*/ createSetter(true)
function createSetter(shallow = false) {
  return function set(
    target: object,
    key: string | symbol,
    value: unknown,
    receiver: object
  ): boolean {
    let oldValue = (target as any)[key]
    if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
      return false
    }
    if (!shallow) {
      if (!isShallow(value) && !isReadonly(value)) {
        oldValue = toRaw(oldValue)
        value = toRaw(value)
      }
      if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
        oldValue.value = value
        return true
      }
    } else {
      // in shallow mode, objects are set as-is regardless of reactive or not
    }
    console.log('----set', target, key, value)
    const hadKey =
      isArray(target) && isIntegerKey(key)
        ? Number(key) < target.length
        : hasOwn(target, key)
    const result = Reflect.set(target, key, value, receiver)
    // don't trigger if target is something up in the prototype chain of original
    if (target === toRaw(receiver)) {
      if (!hadKey) {
        trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) {
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    return result
  }
}

帮我剖析的结果：

这段代码是 Vue3 的响应式系统中的一部分，首要完成了 get 和 set 操作的拦截器办法。在 get 办法中，首要判别了 key 是否为一些特殊的内部符号，如果是，则回来相应的值。接着判别是否为数组，而且是否有对应的数组操作办法，如果有，则回来该操作办法。然后再判别 key 是否为“hasOwnProperty”，如果是，则回来全局方针中的 hasOwnProperty 办法。最终，如果没有上述情况，则调用 Reflect.get 办法获取方针方针的特点值，并将该特点值回来。

在 set 办法中，首要判别 oldValue 是否为只读的 ref 方针，如果是，则判别 value 是否为 ref 方针，如果不是，则回来 false。接着判别是否为浅层形式，如果不是，则将 value 和 oldValue 都转换为原始值。然后再判别是否为数组，而且 oldValue 是否为 ref 方针，而且 value 不是 ref 方针，如果是，则将 oldValue 的值设置为 value。如果是浅层形式，则直接将 value 设置为方针方针的特点值。接着调用 Reflect.set 办法设置方针方针的特点值，并根据方针方针和设置的特点值是否发生变化，触发相应的 trigger 事情。最终，将 Reflect.set 办法的回来值回来。

五、总结

Codeium能够为咱们生成一些代码，把咱们从重复、无聊的代码解放出来，咱们能够在日常开发中创造性的去运用它，一定会对它爱不释手的。