xxx-ui-688 v0.0.12

wui组件库

项目搭建

• 建立webpack.config.js来配置webpack
• 通过awesome-typescript-loader来解析ts文件
• 建立webpack.config.dev.js和webpack.config.prod.js来配置不同环境下的webpack配置

yarn安装依赖时的依赖环境设置：

Icon组件

• 通过interface来校验组件传入的参数
• require.context方法来导入所有的svg文件
• 使Icon组件支持所有的svg原生属性：
  1. interface extends React.SVGAttributes<SVGElement>: 接口继承所有的svg原生属性
  2. {...restProps}来进行所有属性扩展： 注意这里的{}只是表示里边的内容是js语法，而并不是表示对象
  3. 定义classes函数来拼接传入的类名，实现className多类名书写

Icon组件测试

• importAllSvg文件中使用try catch,因为文件中的代码在测试环境执行会报错(编写可测试的代码)
• jest测试时，如果有非js文件，需要通过moduleNameMapper来进行配置对应得文件来进行mock,对应代码参考test/__mocks__目录下的文件
• 生成测试快照，可以通过肉眼来观察生成的DOM结构是否符合要求，对于简单组件来说比较好用

Dialog组件

• scopeClass的封装思路
• close中的Icon为什么会受到line-height的影响
• 有些文件为什么要加_
• 在出现模态框后并进行上下滑动，划出后会出现白色区域

React Class书写方式

• constructor的写法复习
• 绑定事件时this指向修改：
  1. 在jsx中绑定时： this.onClick.bind(this)
  2. 提前在constructor中进行绑定： this.onClick = this.onClick.bind(this)
  3. 通过箭头函数定义函数：

     onClick = () => {console.log(this)}
     // 相当于如下代码
     constructor() {
        super()
        this.onClick = () => console.log(this)
     }

• React class写法中的计算属性: 存值函数(getter)和取值函数(setter)

   get name() {
      return `${firstName}${lastName}`
   }

• dispalyName属性的用法：

  // 添加一个显示的名字，方便在调试工具中查看
  static displayName = 'xxx'

问题记录

scss代码的书写以及层级问题：

.wui-input {
  position: relative;
  &-prefix {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .wui-input-prefix {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

最终编译效果：

.wui-input {
  position: relative;
}
.wui-input-prefix {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.wui-input .wui-input-prefix {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

如果要使用&来进行省略代码的话，一定要注意编译后的嵌套结构和层级问题。

处理css层级问题需要点击浏览器对应的样式源码位置，查看最终的编译效果更容易理解

CSS通用兄弟选择器

兄弟选择符，位置无需紧邻，只需同级，A~B选择A元素之后所有同层级B元素

要注意只能选择之后的兄弟元素，而不是任意位置

代码示例：

<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a span.</span>

p ~ span {
  color: red;
}

只有最后一个span标签的字体颜色会变红。

git相关知识

git push

git push命令的语法：

git push <远程主机名> <本地分支名>:<远程分支名>

• 分支推送顺序的写法： <来源地>:<目的地>
• 如果省略远程分支名，则将本地分支推送至与之存在追踪关系的远程分支，如果该分支不存在，则会被新建

# 将本地的master分支推送到origin主机的master分支，如果origin主机的master分支不存在，则会被新建
# git push <远程主机名:origin> <来源地:master>:<目的地:master>
git push origin master

• 如果省略本地分支名，则表示删除指定的远程分支

# 删除origin主机的master分支
git push origin :master
# 等同于
git push origin --delete master

• 使用-u选项指定一个默认主机

# 将本地的master分支推送到origin主机的master分支，同时指定origin为默认主机
git push -u origin master

• 如果当前分支只有一个追踪分支，那么主机名也可以省略

# 推送当前分支到默认主机
git push

• 强制推送，会导致远程主机上更新的版本被覆盖

git push --force origin
# 简写
git push -f origin

• 推送标签(tag)到远程仓库

git push origin --tags

综合以上知识点，下面这段代码的含义如下：

强制将本地master分支推送到git@github.com:wangkaiwd/wui.git的gh-pages分支。