0.0.22 • Published 1 year ago

@yakj/active v0.0.22

Weekly downloads
-
License
MPL
Repository
-
Last release
1 year ago

易安鸟编码规范

1.文件名

业务逻辑使用大驼峰,如:Index.vue、Check.ts,根目录下或基础文件全小写,如:package.json

2.变量名

变量、属性使用大驼峰,函数使用_连接、方法使用小驼峰,如:

const Check = ref({
  //这里是变量
  Name: "", //这里是属性
  setData: () => {}, //这里是方法
});

function get_check() {} //这里是函数,也推荐使用小驼峰

当然了,一些通俗变量使用小驼峰,如:

import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

import { useStore } from "../store";
const store = useStore();

函数、方法中,局部变量使用小驼峰,如:

async function upload() {
  let file = await UploadApi.select_upload("file", "image/*");
}

3.编码方面的一些细节问题

1.变量命名具有语义:

/**
 * 示例中代码中,回调函数会使用到大量的v,k,d,i,rs等
 */
let Lists: number[] = []; //List是列表,通常列表是以数组的形式存在,因此命名时是复数,即Lists
Lists.forEach((v, k) => {}); //v是value的意思,k是key的意思
for (let i of Lists) {
} //i是index的意思
for (let d in Lists) {
} //d是data的意思
function get_data() {
  //get_data英译获取数据的意思
  let rs: { [index: string]: any } = {}; //rs是result的意思
}

2.调用接口时,必须使用 try{}catch(error){}包裹

3.关于字符串拼接:

/**
 * 字符串拼接推荐使用字符串模板(`${变量}`)
 */
let ContactNumber = 10;
let ContactCSS = `${ContactNumber}px`;

/**
 * 存在多次使用的字符串建议使用变量将其存储
 */
const URL = "https://127.0.0.1:8080/api/yan/";
let SignLogo = `${URL}2023-02-01/signlogoactived.svg`;
let Logo = `${URL}2023-02-01/sigenlogo.svg`;

4.vite @2.9.0

    /**
    *我司项目皆由vite构建,模板为vue-ts,请注意node版本
     */
    yarn create vite 项目名称 --template vue-ts

vite 祥见:https://cn.vitejs.dev/guide/

有时,我们更新了第三方库,重载了 IDE 窗口,重新启动 vue 服务,但是页面也没有报错,就是无法达到预期效果。

这时请你注意看一下 node_modules 下面是否含有.vite 文件夹,如果有请先删除它,再重复前面的操作。

5.pinia @2.0.13

可以理解为 Vuex,祥见:https://pinia.web3doc.top/introduction.html

    yarn add pinia@2.0.13

因公司库@yakj/sdk/sdk/store 中使用了 pinia,在调用该库中的方法时,pinia 可能并未挂载,因此需要将@yakj/sdk/sdk/store 二次封装:

1.初始化 pinia:pinia.ts

import { createPinia } from "pinia";
const Pinia = createPinia();
export default pinia;

2.封装@yakj/sdk/sdk/store:yan.ts

    import sdk from '@yakj/sdk/sdk/store'
    import pinia from './pinia'
    export default fuction get_yan_store(){
        return sdk(pinia)
    }

3.在入口文件中挂载 pinia:mian.ts

import pinia from "./store/pinia";
const app = createApp(App).use(pinia);

由上可见,我们并未按照通俗做法,在入口文件(main.ts)中直接导入 pinia(即 import {createPinia} from 'pinia')并挂载。

6.demo 的编写

当我们前端页面业务逻辑已经完成,需要调用接口测试时,或许后端只是把接口文档准备好了,调用接口后并不会返回真实数据,或者调用接口后数据并不理想,此时需要我们根据接口文档自己准备测试数据。 比如接口文档如下:'接口文档demo' 我们应该先在项目中创建一个 api 文件夹,并且文件夹中含有一个放置 demo 的文件,比如 User.ts

    export class User{
        UID:number
        Name:string
        Sex:number
        Avatar:string
    }
    export const UserList:User[]=[
        {
            UID:0,
            Name:'古力娜扎',
            Sex:0,
            Avatar:'https://npm.tansuyun.cn/@yakj/y407@0.0.21/dist/img/hoverbtn.02c89e24.svg'
        },
         {
            UID:1,
            Name:'迪丽热巴',
            Sex:0,
            Avatar:'https://npm.tansuyun.cn/@yakj/y407@0.0.21/dist/img/hoverbtn.02c89e24.svg'
        },
         {
            UID:100,
            Name:'刘德华',
            Sex:1,
            Avatar:'https://npm.tansuyun.cn/@yakj/y407@0.0.21/dist/img/hoverbtn.02c89e24.svg'
        },
         {
            UID:101,
            Name:'张学友',
            Sex:1,
            Avatar:'https://npm.tansuyun.cn/@yakj/y407@0.0.21/dist/img/hoverbtn.02c89e24.svg'
        },
    ]

而后在要使用到 demo 的页面引入并使用,如 User.vue

import UserList from "../api/User";
const Users = ref([]);
onMounted(() => {
  Users.value = UserList;
});

7.推荐使用组合式 Api(composition Api)以及组合式函数(Composables)

为了可维护性、可阅读性,需要整个团队统一编码风格(Ⅰ.option Api,Ⅱ.compositon Api,Ⅲ.compositon Api + Composables);

option Api 参考:https://git.tansuyun.com/yakj/yan/answermodule

composition Api 参考:https://git.tansuyun.com/yakj/yan/check master 主分支

composition Api+Composables 参考:https://git.tansuyun.com/yakj/yan/check test 主分支

组合式函数需要已掌握组合式 Api;

组合式 Api、组合式函数祥见:https://cn.vuejs.org/guide/reusability/composables.html

了解掌握组合式函数:https://juejin.cn/post/7083401842733875208

4.关于组件、第三方包、库

1.签名组件:基于第三方库 vue-signatrue-pad 封装的 Sign 组件

    /**
     * 在需要签字的页面,放入Sign组件。
     * 1.v-model绑定一个boolean,控制组件的显示和隐藏;
     * 2.传入一个Name属性,显示当前调用组件的人名;
     * 3.绑定一个sunccess函数,接收签字成功后,签字图片的URL,URL通常以函数参数的形式存在;
     * 4.绑定一个cancel函数,逻辑处理为用户取消签字后的逻辑。
     */
    <Sign v-model='ShowSign' :Name='UserName' @success='success' @cancel='cancel'></Sign>
    const ShowSign=ref(false)   //控制签字组件的显示隐藏
    const Name=ref('')  //签字人,通常在父组件使用UID获取到用户对象,拿到Name
    function success(URL:string){ console.log(URL) }    //签名提交成功后,返回签名图片的URL
    function cancel(){} //签名取消的逻辑处理

vue-signatrue-pad 祥见:https://github.com/neighborhood999/vue-signature-pad

2.公司自有的开源包@ctsy

2.1@ctsy/api-sdk

安装 yarn add @ctsy/api-sdk

内容及使用方法:

Demo.ts

import { ApiController, ControllerApi } from "@ctsy/api-sdk"; //ApiController完整的控制器,ControllerApi不完整的控制器
class Demo extends ApiController {
  host = "127.0.0.1:8080"; //设置主机
  async getData() {
    let rs = await this._get(); //ApiController的_get方法使用
    return rs; //一定记得return
  }
  async setData(ID: number) {
    //ApiController的_post方法使用
    return await this._post("set", { ID }); //一定记得return
  }
}
const DemoApi = new Demo("name", "prefix");
export default DemoApi;

Demo.vue

/**
 * 使用我司标准接口时
 */
import { SearchResult, SearchWhere } from "@ctsy/api-sdk"; //SearchResult查询条件,SearchWhere查询结果
import UploadApi from "@ctsy/api-sdk/dist/modules/Upload"; //文件接口
import UserApi from "@ctsy/api-sdk/dist/modules/User"; //用户接口
import DemoApi from "../api/Demo";
const SearchResult = ref(new SearchResult());
const SearchWhere = ref(new SearchWhere());

async function upload() {
  let file = await UploadApi.select_upload("", "image/*"); //UploadApi 文件接口的使用
}

onMounted(async () => {
  let rs = await DemoApi.getData();
});

2.2@ctsy/common

安装 yarn add @ctsy/common

内容及使用方法:

/**
 * 常用日期处理方法format_date,DateFMT
 * 常用数组格式处理方法array_key_set => 将数组对象转换成字典
 * 常用延时方法delay_cb
 */
import { format_date, DateFMT, array_key_set, delay_cb } from "@ctsy/common";

let Now = format_date(new Date(), DateFMT.YMD);

onMounted(async () => {
  let rs = await getData(); //rs=[{DID:0,UID:100},{DID:1,UID:10},{DID:2,UID:1}]
  let lists = array_key_set(rs.L, "DID"); //list={0:{DID:0,UID:100},1:{DID:1,UID:10},{DID:2,UID:1}}
});

前端库还有@ctsy/hook、@ctsy/sdk,@ctsy 更多详情内容,请查看:https://www.npmjs.com/search?q=%40ctsy

3.其他库

1.移动端使用 vantUI 风格 @3.4.3

调用接口时,配合 vant 库的 Toast 使用,如:

import { Toast } from "vant";
async function save_data() {
  Toast.loading("加载中...");
  try {
    let rs = await save(ID, Data);
    Toast.success("保存成功");
  } catch (error) {
    Toast.fail(`${error}`);
  } finally {
    Toast.clear();
  }
}

vant3 版本,请查看https://vant-contrib.gitee.io/vant/v3/#/zh-CN/home

vant4 版本,请查看https://vant-contrib.gitee.io/vant/#/zh-CN/home

2.PC 端使用 elementUI 风格

element 教程,请查看https://element-plus.gitee.io/zh-CN/guide/design.html

3.lodash

常用 cloneDeep 方法做深拷贝:

import { cloneDeep } from "lodash";

const Obj = {};
const CloneObj = cloneDeep(Obj);

lodash 教程,请查看https://www.lodashjs.com/

5.关于 git

使用教程,请查看:https://www.liaoxuefeng.com/wiki/896043488029600

1.将项目从远程仓库克隆到本地仓库

    git clone https://github.com/SkyCui2022/-2023-.git

2.将本地仓库绑定到远程仓库

    git remote add origin https://github.com/SkyCui2022/-2023-.git

3.全局绑定用户

    git config --global user.email "cuixiujingyun@163.com"
    git config --global user.name "cuixiujingyun@163.com"

4.创建并切换分支(建议使用分支,-c 表示创建,切换分支时不带-c)

    git switch -c dev

5.将文件添加至缓存区(*表示所有文件)

    git add README.md
    git add *

6.添加文件信息

    git commit -m '文件信息'

7.合并分支代码(此操作通常由主分支 master 上进行)

    git merge demo

8.从远程仓库拉取代码(后面加“origin 分支名”可以拉取指定分支的代码)

    git pull

9.推送代码到远程仓库

    git push

说明:“符号”+“提交内容”

示例:“+添加检查表”

1.“+”表示新增或添加;

2.“-”表示删除;

3.“#”表示修复或更改;

4.“^”表示优化或升级;

5.“=”表示格式化或无功能变化。

6.关于 icon

除了使用 vantUI、element-ui 自带的 icon,建议使用阿里巴巴 iconfont,祥见:https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.3

1.登录并创建项目;

2.查找需要的图标并添加入库;

3.将库中图标添加至项目;

4.使用 Font-Class,并生成代码;

5.复制链接,引入 html 中

此项目名实际为检查表模块(check),因一时疏忽,命名时将英文名写成 chick。

0.0.20

1 year ago

0.0.21

1 year ago

0.0.10

1 year ago

0.0.22

1 year ago

0.0.11

1 year ago

0.0.12

1 year ago

0.0.13

1 year ago

0.0.14

1 year ago

0.0.15

1 year ago

0.0.9

1 year ago

0.0.16

1 year ago

0.0.8

1 year ago

0.0.17

1 year ago

0.0.18

1 year ago

0.0.19

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago