记录一下日常躺平的学习
本文最后更新于 458 天前,其中的信息可能已经有所发展或是发生改变。

躺平已经很久了,由于不知哪里来的压力,脑子一天天也不知道在想什么。面对社交还有工作的松懈感觉越来越躺平了,对于人工智能的进步感到焦虑居安思危!

现在前端岗位的明显出现减少,自己也没有进步,对比之下,一个月前的自己和一个月之后的自己到底强在哪里呢?现在明显有了更自由的时间,但却时时会感到精神上的疲惫,心态上的得过且过。没有出现转机,更多的只有普通人的焦虑和无力,四月已经过半了,快来到了五一假期,明明期待着的假期朋友出去玩,这个感觉有点似曾相识,我回到两年前的状态了一个无力寂寞对生活没有期望的状态!我不知道我未来会如何,我的能力有限自己的想法也不多,认识也有限对于前端来说我觉得自己已经发展到局限了!

可能我并不适合做这个行业吧,我觉得自己很需要钱,花的钱也很多,挣到的钱一半花出去了,很可笑吧!虽然自己想过做一些私活但没有方向和人脉的我觉得这个事情是行不通的,我改变不了什么,这样的想法也是我最可悲的地方。我没有能完全诉说的余地,对于事业,爱情,友情的失败!更多的只有自己,我不图能和我同甘公苦的的,只是没有一点能被理解,在这样的生活根本没有时间去思考太多!

我无能为力!

记录几个方法

  // 封装时间
  function formatTimestamp(timestamp) {
    if (!timestamp) {
      return
    }
    const date = new Date(timestamp);
    const year = date.getFullYear().toString().slice(-2);
    const month = (date.getMonth() + 1).toString();
    const formattedDate = `${year}-${month}`;
    return formattedDate;
  }
 //这是一个将时间戳转换自己的格式的方法
   Distance: obj.Distance.toFixed(1)
 //保留一位小数
    function wang(x) {
        if (x === 0) {
            return "--"
        }
        return x >= 10000 ? Math.floor(x / 10000) + 'w' : x;
    }
    function roundToTwo(num) {
        if (num === 0) {
            return "--"
        }
        // @ts-ignore 
        return +(Math.round(num + "e+2") + "e-2");
    }
//结构改变一下传入参数
  const { pageSize, current, ...otherParams } = params;
  if (
    otherParams.DataStatusStr === '1' ||
    otherParams.DataStatusStr === '2' ||
    otherParams.DataStatusStr === '3' ||
    otherParams.DataStatusStr === '0'
  ) {
    Object.assign(otherParams, { DataStatus: Number(otherParams.DataStatusStr) });
  }
  if (otherParams.DataSourceStr === '1' || otherParams.DataSourceStr === '0') {
    Object.assign(otherParams, { Datasource: otherParams.DataSourceStr });
  }
  if (otherParams.CreateTime) {
    const [startDate, endDate] = otherParams.CreateTime;

//转换为从12点开始,默认是早上八点
    const startInPeriod = new Date(startDate).setHours(0, 0, 0, 0);
    const endInPeriod = new Date(endDate).setHours(23, 59, 59, 999);
    Object.assign(otherParams, { StartInPeriod: startInPeriod, EndInPeriod: endInPeriod });

//删掉本来的参数
    delete otherParams.CreateTime;
  } 
//解构返回
   ...Array.from({ length: 5 }, (_, i) => ({
      title: `字段${i + 3}`,
      dataIndex: `Column${i + 3}`,
      hideInSearch: true,
      width: 100,
    })),
//转换时间戳
    OpenDate: Date.parse(data.OpenDate)
  const { pageSize, current, DateRange, ...otherParams } = params;

  const filterClounm = Object.keys(options || {})[0];

  if (Array.isArray(DateRange) && DateRange.length === 2) {
    const [startTime, endTime] = DateRange;
    otherParams.StartTime = moment(startTime).startOf('date').valueOf();
    otherParams.EndTime = moment(endTime).endOf('date').valueOf();

    delete otherParams.DateRange;
  }

上面是基本的js方法

插件框架

对数据类型进行一些快速的操作:Lodash 简介 | Lodash 中文文档 | Lodash 中文网 (lodashjs.com)

实现千分位、补零、序数词缩写等: Numeral.js (numeraljs.com)

支持任意精度数学运算的库:bignumber.js API (mikemcl.github.io)

适用于需要转换阿拉伯数字中文数字的场景:nzh – npm (npmjs.com)

React开发库:

介绍 – ahooks 3.0

ProComponents (ant.design)

Mantine

UmiJS – 插件化的企业级前端应用框架

全栈Next.js – React 应用开发框架 | Next.js中文网 (nextjs.cn)

全栈tRPC – Move Fast and Break Nothing. End-to-end typesafe APIs made easy. | tRPC

GGEditor – 基于 G6 和 React 的可视化图编辑器

Ant Design – 一套企业级 UI 设计语言和 React 组件库

Bizcharts – 基于商业场景下的数据可视化解决方案 (taobao.com)

ZUSTAND 中文文档 | ZUSTAND (awesomedevin.github.io)

日期处理类库:Moment.js 中文网 (momentjs.cn)

生成唯一id: uuid – npm (npmjs.com)

React使用 classnames 让你的代码更优雅: classnames – npm (npmjs.com)

模拟数据: Mock.js (mockjs.com)

excel数据导入: xlsx – npm (npmjs.com)

解决主流浏览器的跨域数据访问的问题: jsonp – npm (npmjs.com)

老项目js工具库:jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

图表:首页 – ECharts图表集,ECharts demo集,echarts gallery社区,Make A Pie,分享你的可视化作品isqqw.com

位置:DataV.GeoAtlas地理小工具系列 (aliyun.com)

前端3D:Three.js中文网 (webgl3d.cn)

cookie:js-cookie – npm (npmjs.com)

vue-i18n:介绍 | Vue I18n (kazupon.github.io)

HTML5视频播放器:指南 | DPlayer (diygod.dev)

富文本编辑器:前言 · Quill官方中文文档 · 看云 (kancloud.cn)

网络请求:Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js (axios-http.cn)

vue生态:

一个 Vue 3 UI 框架 | Element Plus (element-plus.org)

Element:Element – 网站快速成型工具

开始使用 | Slidev

Nuxt中文站 – 易懂的Web框架 Nuxt3文档

介绍 | vue-element-admin (panjiachen.github.io)

若依框架:RuoYi: 🎉 基于SpringBoot的权限管理系统 易读易懂、界面简洁美观。 核心技术采用Spring、MyBatis、Shiro没有任何其它重度依赖。直接运行即可用 (gitee.com)

 JavaScript 运行时:

bun内置 JavaScript、TypeScript、JSX .mjs等各种转译器:Bun — A fast all-in-one JavaScript runtime

但 Bun 不仅仅是一个运行时。它还包括:

  • 包管理器(像 Yarn、NPM、PNPM);
  • 构建工具(像 Webpack、ESBuild、Parcel);
  • 测试工具

Node就不解释了:Node.js (nodejs.org)

测试工具

代码质量规范

Airbnb JavaScript 代码规范:BingKui/javascript-zh: Airbnb 出品,目前非常流行的 JavaScript 代码规范(中文版)。其内对各种 js 范式的写法进行了详细的规定与说明,按照此规范写出的代码将会更加合理。 (github.com)

打包工具

用户体验

  • 设计系统
  • 骨架屏

1.多端框架开发:

Taro | 多端统一开发解决方案 (jd.com)

uni-app官网 (dcloud.net.cn)

2.移动应用

3.桌面应用

低代码

  • 腾讯云低码
  • 阿里宜搭

CSS 预编译

SASS,PostCSS,Stylus,LESS

学不动了,俺先躺下了。

上一篇
下一篇