技术分享

xiaomudeng
262 阅读4分钟

一、css

1. :global() 类名不会被编译成乱码

index.module.less文件

:global(.color) {
  color: red;
}

index.js文件

import './index.module.less';

<div className="color">红色</div>

html

<div class="color">红色</div>

作用：

  • 实现同一组件，在不同场景或者不同组件内，展示不一样的样式，且可统一实现

    • 单用这种方法，样式自由性不足

QQ截图20211010160307.png

拓展：

  • 组件props改变样式，传入className或style设置样式

  • 传入某个属性判断是否需要样式

index.module.less文件

.btnSize {
  width: 50px;
  height: 100px !important;
}

.needColor {
  color: red;
}

Btn.js文件 定义组件

import styles from './index.module.less';

export const Btn = props => {
  const { name, needColor, style, text } = props;
  return (
    <button
      className={`${name} ${needColor ? styles.needColor || ''}`}
      {...style}>
        {text}
    </button>;
  );
};

index.js文件 使用组件

import { Btn } from './Btn.js';
import styles from './index.module.less';

const style = {
  style: { width: '100px', height: '50px' }
};

<Btn
  text="100px 按钮"
  name={styles.btnSize}
  needColor
  style={style}
/>

style是行内样式，会覆盖styles文件中使用的冲突的样式，!important 除外

二、styled-components --- css依赖包

index.js文件下

const Div = styled.div`
  width: 100px;
  height: 100px;
`

const Btn = styled.button`
  width: 10px;
  height: 10px;
`
<Div>
  <Btn>按钮</Btn>
</Div>

html

<div class="??????">
  <button class="??????">按钮</button>
</div>

优点：

  • 没有定义类名的烦恼

  • 生成全局唯一的类名

  • 容易找到组件对应的样式

  • 不会有没用到的样式代码

缺点：

  • 生成的className是随机的，不方便debug

    • babel-plugin-styled-components --- 依赖包

    • 可以解决这个问题，如上述组件

html

<div class="Div-???">
  <button class="Btn-???">按钮</button>
</div>

  • 没有语法高亮和提示

    • 在css文件中写好复制过去

    • Styled Components & Styled JSX --- 插件

  • 在js文件中写样式导致文件过大

文章地址

三、Tailwind CSS

1. 官网地址

2. Tailwind CSS 是一个工具集 CSS 框架

<div class="bg-gray-100 rounded-xl p-8">Hello World</div>

3. 不需要编写样式，直接使用类名

  • 部分类名
背景 (bg-gray-200, bg-gradient-to-bl)

弹性布局 (flex-1, flex-row)

网格布局 (grid-cols-1, col-span-4)

内边距 (p-0, p-1)

尺寸 (w-1, h-1)

4. 多个样式的写法

<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
  <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0" src="/img/erin-lindford.jpg" alt="Woman's Face">
  <div class="text-center space-y-2 sm:text-left">
    <div class="space-y-0.5">
      <p class="text-lg text-black font-semibold">
        Erin Lindford
      </p>
      <p class="text-gray-500 font-medium">
        Product Engineer
      </p>
    </div>
    <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
  </div>
</div>

个人感受

  • 不用自己写样式

  • 不会有重复的样式代码

  • 庞大的样式类名

  • 类名太多，维护不便

文章地址

四、js语法

1. ?. 可选链操作符，用于判断左侧对象是否为null或者undefined，如果是，则直接返回undefined

// 错误的写法
const firstName = message.body.user.firstName || 'default';

// 正确的写法
const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';

// 使用 ?. 运算符
const firstName = message?.body?.user?.firstName || 'default';

image.png

MDN地址：?.

2. ??空值合并运算符，为变量指定默认值；它的行为类似||，但是只有运算符左侧的值为null或undefined时，才会返回右侧的值；特殊值false，0正常显示

// 常见写法
const text = res.data.string || 'Hello, world！';

// ?? 写法
const text = res.data.string ?? 'Hello, world！';

image.png

MDN地址：??

3. ?.和??配合使用

const text = res.data?.string ?? 'Hello, world！';

上面代码中，如果res.data是null或undefined，或者res.data.string是null或undefined，就会返回默认值Hello, world！。也就是说，这一行代码包括了两级属性的判断。

4. ??和&&，||配合使用，需要加上()表明优先级，否则会报错

// 报错
const a = lhs && middle ?? rhs
const b = lhs ?? middle && rhs
const c = lhs || middle ?? rhs
const d = lhs ?? middle || rhs

// 正确
const a = (lhs && middle) ?? rhs;
const b = lhs && (middle ?? rhs);

const c = (lhs ?? middle) && rhs;
const d = lhs ?? (middle && rhs);

const e = (lhs || middle) ?? rhs;
const f = lhs || (middle ?? rhs);

const g = (lhs ?? middle) || rhs;
const h = lhs ?? (middle || rhs);

5. ||=，&&=和??=逻辑赋值运算符，为变量或属性设置默认值

// 或赋值运算符
x ||= y
// 等同于
x || (x = y)

// 与赋值运算符
x &&= y
// 等同于
x && (x = y)

// 逻辑空赋值
x ??= y
// 等同于
x ?? (x = y)

// 老的写法
user.id = user.id || 1;

// 新的写法
user.id ||= 1;

image.png

MDN地址：||=，&&=，??=

文章地址

五、项目回顾

开发阶段

1. 业务需求，业务流程不清楚

  • 开发之前可以让产品和开发人员简单的沟通一下，过一下业务流程

2. 前端对接口数据的处理

  • 前端处理接口数据，依赖后台返回的值，一旦后台返回值出错，前端如果拿不到值就会报错，严重的就是页面空白，这样前端就要加判断，判断后台是否返回了值

3. 节流（throttle）和防抖（debounced）

  • lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库

image.png

  • 主要出现在搜索、提交场景

4. dva中的全局唯一变量

  • 项目中的table页，基本使用了dva，如果一个合同类型下，打开多个收付表单table页，最后打开的table页数据，会把前面打开的table页数据覆盖，因为dva中的变量是全局的，目前比较笨的解决方法，就是把状态存在state里面

5. 全局UI

  • 涉及范围广，使用多的组件，尽量不去改动它的原状态

测试阶段

1. 工作台-缺陷任务

  • 希望测试同事可以在缺陷详情页，说明是哪个数据出现了缺陷，方便开发重现缺陷，定位原因

发版阶段

1. 时间把控

  • 提前处理好问题，空出时间处理突发情况

  • 这次对发版时间没有把控好，处理问题时，粗心大意了，导致提交的代码有问题

六、个人建议

1. 代码规范

  • 可以复用的变量，尽量写在公共文件里；

  • eslint

2. 改进

  • 后续新增的组件和复用变量，可以统一写在一个文件夹或者文件中

  • 接口数据中的字段，可以标明对应的中文字段，毕竟不是所有字段都是中英直译的，有缩写的字段

avatar
文章
阅读
粉丝