### 项目背景
有多个不同框架搭建的前端项目，例如vue、react，现两个项目之间有共性，但又不想同时维护两套代码，例如实现一个组件可以共用
### 实现方案
使用@originjs/vite-plugin-federation插件
@originjs/vite-plugin-federation 是一个基于 Vite 的 模块联邦（Module Federation） 插件，它允许你在多个独立的 Vite 构建项目之间共享代码和依赖，实现微前端架构或跨应用的组件共享。
### 实现步骤
1. 在react项目中正常开发组件，使用ref抛出回调函数
2. 在vite.config文件中导出组件
```js
// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "react_app", // 应用名称（唯一标识）
      filename: "remoteEntry.js", // 远程入口文件
      exposes: {
        // 导出的组件
        "./ReactButton": "./src/components/Button.jsx",
      },
      shared: ["react", "react-dom"], // 共享依赖
    }),
  ],
  build: {
    target: "esnext", // 需要支持动态 import
  },
});
```
3. vue项目中引入组件
```js
// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    vue(),
    federation({
      name: "vue_app",
      remotes: {
        // 引用远程 React 项目
        react_app: "http://localhost:5001/assets/remoteEntry.js",
      },
      shared: ["vue"], // 共享依赖
    }),
  ],
  build: {
    target: "esnext",
  },
});
```
4. 在vue中使用react
```js
<template>
  <div>
    <h1>Vue App</h1>
    <Suspense>
      <template #default>
        <ReactButton />
      </template>
      <template #fallback>
        Loading React Button...
      </template>
    </Suspense>
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue";

export default {
  components: {
    // 动态加载远程 React 组件
    ReactButton: defineAsyncComponent(() =>
      import("react_app/ReactButton").then((mod) => mod.default)
    ),
  },
};
</script>
```

使用模块联邦插件实现微前端架构或跨应用的组件共享

跨应用的组件共享

### react antd
#### 基础组件不涉及数据都是从外层属性带过来，业务组件数据针对层级嵌套比较多的组件，数据传输可以利用数据流而不是通过属性传递；针对数据获取如果不需要重新渲染的组件，数据获取可以通过ref获取
#### 拖拽排序组件
```js
// 基于react-beautiful-dnd插件
/**
 * 拖拽排序列表组件
 * @param dropId 拖拽id，用于区分不同列表
 * @param list 列表数据
 * @param children 列表子数据ReactNode，自定义样式
 * @param changeHandle 拖拽回调函数
 * @param showDragIcon 是否展示拖拽图标
 * @returns sort list
 */

// index.tsx
import React, { useEffect, useState } from "react"
import { DragDropContext, Draggable } from "react-beautiful-dnd"
// react18存在兼容性问题，所以需要StrictModeDroppable
import { StrictModeDroppable } from "./StrictModeDroppable"
import Item from "./Item"
import "./index.less"

interface DragSortListProps {
  dropId?: string  // 设置拖拽区域唯一id
  list: any[] // 包含唯一id，用于区分每个item，作为key
  children: any  // 每个可拖拽的子元素，自定义样式
  changeHandle?: (list: any[]) => void // 拖拽后callback
  showDragIcon?: boolean // 是否显示拖拽图标
}

const DragSortList = ({
  dropId,
  list,
  children,
  changeHandle,
  showDragIcon,
}: DragSortListProps) => {
  const [data, setData] = useState(list)

  // 拖拽后执行函数
  const dragEnded = (param: any) => {
    const { source, destination } = param
    const _arr = [...data]
    const _item = _arr.splice(source.index, 1)[0]
    _arr.splice(destination.index, 0, _item)
    setData(_arr)
    changeHandle && changeHandle(_arr)
  }

  useEffect(() => {
    setData(list)
  }, [list])
  return (
    <div className='drag-sort-list'>
      <DragDropContext onDragEnd={dragEnded}>
        <StrictModeDroppable droppableId={dropId || "wrapper"}>
          {(provided, snapshot) => (
	    <ul ref={provided.innerRef} {...provided.droppableProps} className="list-box">
              {data && data.map((item, index) => {
                return (
                  <Draggable draggableId={`${item.id}`} index={index} key={item.id}>
                    {(_provided, _snapshot) => (
                      <Item
                        ref={_provided.innerRef}
                        showDragIcon={showDragIcon}
                        dragHandleProps={_provided.dragHandleProps}
                        {..._provided.draggableProps}
                        snapshot={_snapshot}
                        {...item}
                        dataItem={item}
                        itemContent={children}></Item>
                    )}
                  </Draggable>
                )
              })}
              {provided.placeholder}
            </ul>
          )}
        </StrictModeDroppable>
      </DragDropContext>
    </div>
  )
}

export default DragSortList

// StrictModeDroppable.tsx
import { useEffect, useState } from "react";
import { Droppable, DroppableProps } from "react-beautiful-dnd";

export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
  const [enabled, setEnabled] = useState(false);

  useEffect(() => {
    const animation = requestAnimationFrame(() => setEnabled(true));

    return () => {
      cancelAnimationFrame(animation);
      setEnabled(false);
    };
  }, []);

  if (!enabled) {
    return null;
  }

  return <Droppable {...props}>{children}</Droppable>;
};

// Item.tsx
import React, { forwardRef, ReactNode } from "react"
import { DragOutlined } from "@ant-design/icons"

interface IProps {
  dataItem: any
  itemContent: (data: any, dragHandleProps?: any) => ReactNode
  dragHandleProps: any
  snapshot: any
  showDragIcon?: boolean
}

const Item = forwardRef(
  (
    { dataItem, itemContent, dragHandleProps, snapshot, showDragIcon = true, ...props }: IProps,
    ref: any,
  ) => {
    return (
      <li ref={ref} {...props || {}} className={"item-box " + (snapshot?.isDragging ? "hovering" : "")}>
        <div className='item'>
          <span {...dragHandleProps} className='drag-icon'>
            {showDragIcon && <DragOutlined />}
          </span>
          {itemContent(dataItem, dragHandleProps)}
        </div>
      </li>
    )
  },
)

export default Item

// 使用组件
import { useEffect, useState } from "react"
import { Input } from "antd"
import { DeleteOutlined, PlusCircleOutlined } from "@ant-design/icons"
import "./index.less"
import { useDebounceFn } from "ahooks"
import DragSortList from "@/components/ui/DragSortList"
import ObjectID from "bson-objectid"

interface IProps {
  defaultValue?: string[] // 初始值
  changeCb?: (list: any[]) => void // 值发生变化时回调
}

const PersonalizedTags = ({ defaultValue, changeCb }: IProps) => {
  const [tags, setTags] = useState<any>([])

  const Item = (data: any) => {
    const { tag, id } = data

    return (
      <div className='tag-item' key={tag}>
        <Input
          placeholder='请输入标签'
          defaultValue={tag}
          data-id={id}
          onChange={changeValueHandle.run}
          onBlur={changeValue}
          allowClear
        />
        <DeleteOutlined onClick={() => removeHandle(id)} />
      </div>
    )
  }

  const addHandle = () => {
    const newTags = [...tags, { id: ObjectID(Date.now()).id, tag: "" }]
    setTags([...newTags])
    changeCb && changeCb([...newTags])
  }

  const removeHandle = (id: any) => {
    const newTags = tags.filter((item: any) => item.id !== id)
    setTags(newTags)
    changeCb && changeCb(newTags)
  }

  const changeValue = () => {
    changeCb && changeCb([...tags])
  }

  const changeValueHandle = useDebounceFn(
    (e: any) => {
      const {
        dataset: { id },
      } = e.currentTarget
      const curVal = e.target.value
      const curTag = tags.find((item: any) => item.id === id)
      curTag["tag"] = curVal
    },
    { wait: 500 },
  )

  const changeDragCheckedList = (checkedList: any) => {
    setTags(checkedList)
    changeCb && changeCb(checkedList)
  }

  useEffect(() => {
    setTags(
      defaultValue?.map((item: any) => ({
        id: ObjectID(Date.now()).id,
        tag: item,
      })) || [],
    )
  }, [defaultValue])
  return (
    <div className='personalized-tags'>
      <DragSortList
        dropId='personalizedTags-wrapper'
        list={tags}
        showDragIcon={true}
        changeHandle={changeDragCheckedList}>
        {Item}
      </DragSortList>

      <div className='add-btn' onClick={addHandle}>
        <PlusCircleOutlined />
        添加
      </div>
    </div>
  )
}

export default PersonalizedTags
```
#### 手写穿梭框
```js
// 支持左侧滚动刷新，右侧拖拽排序
/**
 * 穿梭框组件
 * @param leftData 左边数据
 * @param rightData 右边数据
 * @param showMore 加载更多数据
 * @param goLeftHandle 移动到左边回调函数
 * @param goRightHandle 移动到又边回调函数
 * @param getDragCheckedList 获取右边拖拽后列表的回调函数
 * @returns
 */
import { LeftOutlined, RightOutlined } from "@ant-design/icons"
import Item from "./item"
import "./index.less"
import { useState } from "react"

interface IProps {
  leftData: any[]
  rightData: any[]
  showMore?: () => any
  goLeftHandle: (checkedList: string[]) => void
  goRightHandle: (checkedList: string[]) => void
  getDragCheckedList?: (list: any[]) => void
}

const Transfer = ({ leftData, rightData, showMore, goLeftHandle, goRightHandle, getDragCheckedList }: IProps) => {
  const [leftCheckedList, setLeftCheckedList] = useState<string[]>([])
  const [rightCheckedList, setRightCheckedList] = useState<string[]>([])

  // 移动到左边
  const goLeft = () => {
    goLeftHandle(rightCheckedList)
  }

  // 移动到右边
  const goRight = () => {
    goRightHandle(leftCheckedList)
  }

  // 获取选中的数据
  const getCheckedList = (checkedList: string[], type: "left" | "right") => {
    if (type === "left") {
      setLeftCheckedList(checkedList)
    } else {
      setRightCheckedList(checkedList)
    }
  }

  return (
    <div className='transfer'>
      <Item type={"left"} data={leftData} showMore={showMore} getCheckedList={getCheckedList} />
      <div className='btns'>
        <div className='left-btn' onClick={goLeft}>
          <LeftOutlined />
        </div>
        <div className='right-btn' onClick={goRight}>
          <RightOutlined />
        </div>
      </div>
      <Item type={"right"} data={rightData} getCheckedList={getCheckedList} getDragCheckedList={getDragCheckedList} />
    </div>
  )
}

export default Transfer

// Item.tsx
import { useInViewport } from "ahooks"
import { Checkbox } from "antd"
import { useEffect, useRef, useState } from "react"
import { CheckboxChangeEvent } from "antd/lib/checkbox"
import DragSortList from "../DragSortList"

const CheckboxGroup = Checkbox.Group

interface IProps {
  type: "left" | "right"
  data: any[]
  showMore?: () => any
  getCheckedList: (list: string[], type: IProps["type"]) => void
  getDragCheckedList?: any
}

const Item = ({ type, data, showMore, getCheckedList, getDragCheckedList }: IProps) => {
  const [checkedList, setCheckedList] = useState<string[]>([])
  const [loadMore, setLoadMore] = useState(type === "left" ? true : false)
  const checkAll = data.length === checkedList.length && data?.length ? true : false
  const indeterminate = checkedList.length > 0 && checkedList.length < data.length
  const title = type === "left" ? "未关联" : "已关联"
  // const loadMore = type === "left" ? true : false
  const loadMoreRef = useRef<HTMLDivElement>(null)
  const rootRef = useRef<any>(null)

  const [inViewport] = useInViewport(loadMoreRef, {
    root: rootRef,
  })

  const dataOps = data.map((item) => {
    return {
      id: item.id,
      label: item.name,
      value: item.id,
    }
  })

  const Item = (data: any, dragHandleProps?: any) => {
    const { value, label } = data

    return (
      <Checkbox key={value} value={value}>
        <span {...dragHandleProps}>{label}</span>
      </Checkbox>
    )
  }

  const onCheckAllChange = (e: CheckboxChangeEvent) => {
    setCheckedList(e.target.checked ? dataOps.map((item) => item.value) : [])
  }

  const onChange = (list: string[]) => {
    setCheckedList(list)
  }

  const changeDragCheckedList = (list: any[]) => {
    console.log("获取排序后的列表", list)
    getDragCheckedList(list)
  }

  useEffect(() => {
    if (inViewport) {
      showMore &&
        showMore().then((res: any) => {
          setLoadMore(res)
        })
    }
  }, [inViewport])

  useEffect(() => {
    getCheckedList(checkedList, type)
  }, [checkedList])

  useEffect(() => {
    setCheckedList([])
  }, [data])

  return (
    <div className='transfer-item'>
      <div className='header'>
        <Checkbox indeterminate={indeterminate} checked={checkAll} onChange={onCheckAllChange}>
          {title}
        </Checkbox>
        <span>
          {checkedList.length}/{data.length}
        </span>
      </div>

      <div className='content' ref={rootRef}>
        <CheckboxGroup value={checkedList} onChange={onChange}>
          {type === "right" ? (
            <DragSortList
              dropId='transfer-wrapper'
              list={dataOps}
              showDragIcon={false}
              changeHandle={changeDragCheckedList}>
              {Item}
            </DragSortList>
          ) : (
            dataOps.map((item) => {
              return Item(item)
            })
          )}
        </CheckboxGroup>
        {loadMore && (
          <div ref={loadMoreRef} className='load-more'>
            加载更多...
          </div>
        )}
      </div>
    </div>
  )
}

export default Item
```
#### 图文混排组件
```js
// 添加图片上传组件或文本输入框，支持拖拽排序功能
// 通过数据驱动组件更新，更新list: {id: string, type: 'IMAGE' | 'TEXT', value: string}[] 
// 唯一id： import ObjectID from "bson-objectid" new ObjectID(Date.now()).id 在组件内部消化，提交数据时不带id
// 代码片段
<DragSortList dropId='image-text-wrapper' list={list} changeHandle={changeHandle}>
   {Item}
</DragSortList>

const Item = (data: any) => {
    const { id, type, value } = data
    // input change时更新值，但不调用changeCb，因为调用了之后组件重新渲染，input会失去焦点，影响继续输入文本，所以在input blur的时候去changeCb，不会影响input输入
    const changeValueHandle = useDebounceFn(
      (e) => {
        const curVal = e.target.value

        list.forEach((item: any) => {
          if (item.id === id) {
            item.value = curVal
          }
        })
      },
      { wait: 500 },
    )

    const changeValueCb = () => {
      changeDataHandle &&
        changeDataHandle(
          list?.map((item: any) => ({
            type: item.type,
            value:
              item.type === "IMAGE" && Array.isArray(item.value) ? item.value?.[0] : item.value,
          })),
        )
    }

    const UploadCallBack = async (resList: any[]) => {
      const newList = [...list]
      newList.forEach((item: any) => {
        if (item.id === id) {
          item.value = resList?.[0]?.url
        }
      })
      changeDataHandle &&
        changeDataHandle(
          newList?.map((item: any) => ({
            type: item.type,
            value:
              item.type === "IMAGE" && Array.isArray(item.value) ? item.value?.[0] : item.value,
          })),
        )
    }

    const removeHandle = () => {
      const newList = list.filter((item: any) => item.id !== data.id)
      setList(newList)
      changeDataHandle &&
        changeDataHandle(
          newList?.map((item: any) => ({
            type: item.type,
            value:
              item.type === "IMAGE" && Array.isArray(item.value) ? item.value?.[0] : item.value,
          })),
        )
    }
    return (
      <>
        {(type === "TEXT" || type === "text") && (
          <Input.TextArea
            defaultValue={value}
            onChange={changeValueHandle.run}
            showCount
            maxLength={1000}
            onBlur={changeValueCb}
            allowClear
          />
        )}

        {(type === "IMAGE" || type === "image") && (
          <UploadFile
            key={"imageText" + data.id}
            uploadSuccess={UploadCallBack}
            initFiles={value || []}
            maxCount={1}
          />
        )}

        <DeleteOutlined onClick={removeHandle} />
      </>
    )
  }
```
#### 多个tab内容更新，对比两个新旧对象，只传递更新过的内容
```js
import deepEqual from "fast-deep-equal"
/**
 * @param newObj 新的对象
 * @param oldObj 旧的对象
 * @param deepIgnoreKeys 忽略深层比较的对象名称数组
 * @returns 返回一个新的对象，包含更新过的字段
 */
function getDiffObj(newObj: any, oldObj: any, deepIgnoreKeys?: string[]) {
  const diffObj: any = {}
  if ((typeof newObj !== "object" || typeof oldObj !== "object") && newObj !== oldObj) {
    return newObj
  }
  if (newObj === null || oldObj === null) {
    return newObj
  }

  if (Array.isArray(newObj) && Array.isArray(oldObj)) {
    if (newObj.length !== oldObj.length) {
      return newObj
    }
    if (!deepEqual(newObj, oldObj)) {
      return newObj
    }
    return oldObj
  }
  if (typeof newObj === "object" && typeof oldObj === "object") {
    for (const key in newObj) {
      if (!deepEqual(newObj[key], oldObj[key])) {
        if (deepIgnoreKeys && deepIgnoreKeys.includes(key)) {
          diffObj[key] = newObj[key]
        } else {
          diffObj[key] = getDiffObj(newObj[key], oldObj[key], deepIgnoreKeys)
        }
      }
    }
  }

  return diffObj
}

export default getDiffObj
```

开发过程中涉及到的一些组件、公共方法等

后台系统开发记录

## 小程序开发遇到的问题
1. picker-view 选择日期为什么不能默认选中当前年
2. 设置元素absolute绝对定位但是没有设置其相对于哪个元素绝对定位的话显示不了当前元素
3. 需要考虑头部栏以及底部安全区域
wx.getMenuButtonBoundingClientRect()
margin-bottom: env(safe-area-inset-bottom)
4. 父子组件传值问题
父->子：通过属性
子->父：绑定事件
父：binddateChange="dateChange"
子：bindchange="bindChange"
```js
    bindChange(e) {
      const val = e.detail.value

      this.triggerEvent('dateChange', {
        date: `${this.data.years[val[0]]}-${this.data.months[val[1]]}-${this.data.days[val[2]]}`,
        fieldName: this.properties.type
      })
    }
父通过e.detail
  dateChange(e) {
    this.setData({
      info: {
        ...this.data.passportInfo,
        [e.detail.fieldName + 'Label']: e.detail.date,
        [e.detail.fieldName]: new Date(e.detail.date.replace(/-/g, '/')).getTime()
      }
    })
  },
```
5. data-*获取属性值dataset可能在target也可能在currentTarget
6. ios不支持“2024-12-27”这样的格式，需要将-替换成/
7. scroll-view滚动视图和页面原生监听滚动事件不能同时使用，如果使用了scroll-view就要使用组件内部的监听事件监听页面滚动，同时不能使用原生方法指定页面滚动到具体位置
```js
wx.pageScrollTo({
   scrollTop: 0,
   duration: 300
})
```

## 小程序开发记录
```js
<image>组件mode属性，widthFix设置宽度会根据固定宽度在不压缩的情况下自动匹配图片的高度
图片cdn
图片点击预览
<image src="" mode="widthFix" bindtap="previewImage" data-url="{{item.value}}" />
// 图片点击事件处理函数
previewImage: function (e) {
    const currentUrl = e.currentTarget.dataset.url
    wx.previewImage({
        current: currentUrl, // 当前显示图片的URL
        urls: this.properties.list // 需要预览的图片URL列表
    })
}

if判断 wx:if wx:elif wx:else

for循环 wx:for wx:key data-index="{{index}}" data-item="{{item}}"

绑定点击事件：bind:tap

scroll-view横向滚动案例
<scroll-view class="scroll" scroll-x show-scrollbar="{{false}}" scroll-with-animation="{{true}}" scroll-left="{{scrollLeft}}">
    <view class="list">
        <view bind:tap="activeTabHandle" class="tab-item {{activeIndex === index ? 'active' : ''}}" wx:for="{{actInfo.tabInfo}}" wx:key="index" data-index="{{index}}" data-item="{{item}}">
            <image src="{{filters.resizeImage(item.flowerImage ,{width:60}, 'jpg')}}" mode="widthFix" />
             <text>{{item.categoryName}}</text>
         </view>
    </view>
</scroll-view>
  swiperAnimation() {
    timer && clearInterval(timer)
    timer = setInterval(() => {
      const curActiveIndex = this.data.activeIndex
      const len = this.data.actInfo.tabInfo?.length || 0
      // 正向轮播还是反向轮播，轮播方向
      this.direction = curActiveIndex === len - 1 && this.direction === 1 ? -1 : (this.direction === -1 && curActiveIndex === 0 ? 1 : this.direction)

      if (this.direction === 1) {
        this.setData({
          activeIndex: curActiveIndex + 1,
          scrollLeft: len < 4 ? 0 : curActiveIndex * 160
        })
      } else {
        this.setData({
          activeIndex: curActiveIndex - 1,
          scrollLeft: len < 4 ? 0 : (len - 1) * 160 - (len - curActiveIndex + 1) * 160
        })
      }
    }, 2000)
  },
  // 切换tab
  activeTabHandle(e) {
    timer && clearInterval(timer)
    const { index } = e.currentTarget.dataset
    this.setData({
      activeIndex: index
    })

    setTimeout(() => {
      this.swiperAnimation()
    }, 3000)
  },

原生左右切屏
<view style="display: flex;transition: all 1s; transform: translateX(calc(-{{activeIndex}}*100vw));width: {{actInfo.tabInfo.length*100}}vw">
    <view class="item" wx:for="{{actInfo.tabInfo}}" wx:key="index" data-item="{{item}}" style="height: {{activeIndex === index ? 'fit-content': '0'}}">
     </view>
</view>
遇到的问题：高度会根据最高元素撑开，解决方案是非激活项高度置为0，外围宽度设置为100vw,overflow:hidden；

元素吸顶：设置position: sticky
// 页面滚动
onPageScroll: function(e) {
  // 根据滚动距离判断是否吸顶
  const scrollTop = e.scrollTop
  if (scrollTop > (this.data.menuButton.bottom)) {
    this.setData({
      opacity: (scrollTop - this.data.menuButton.bottom) / this.data.menuButton.bottom
    })
    return
  }
  this.setData({
    opacity: 0
  })
},
// 示例：吸顶tab，点击页面自动滚动到具体tab内容，监听页面滚动，滚动到具体tab内容，tab激活
1. tab吸顶设置position属性为sticky
2. 设置当前激活tab项，根据当前激活项切换tab激活样式
3. 给页面中的tab内容设置id，获取id距离页面顶部的高度，再减去顶部menuButton的高度以及tab高度（注意：当页面是动态加载的时候，需要在数据加载完成之后获取高度；当tab内容在页面的组件中时，需要调用子组件的获取元素高度的方法将元素位置信息存储在变量中），当点击tab时，使用wx.pageScrollTo自动滚动到tab内容位置
// 获取自定义组件的实例
const tabInfoComponent = this.selectComponent('#tabInfoComponent')
// 调用组件的方法
tabInfoComponent.getElementInfo()
4. 在onPageScroll方法中监听页面滚动距离顶部的距离，如果超过某个高度，则切换激活项（注意：给一个变量控制在点击tab切换激活项时不监听页面滚动距离，否则两者会冲突）
变量：
menuButton: wx.getMenuButtonBoundingClientRect(),
tabs: ['tab1', 'tab2', 'tab3', 'tab4'],
currentTab: 0,
componentPositions: [],
scrollTop: 0,
tabHeight: {},
页面tab：
<view class="tab-box" id="tab-box" style="top:{{menuButton.top+menuButton.height+10}}px">
    <view wx:for="{{tabs}}" wx:key="index" bind:tap="clickTab" data-index="{{index}}" wx:if="{{item}}" class="{{currentTab===index?'selectedTab':'unSelectedTab'}}">
        {{item}}
    </view>
</view>
在加载完数据时获取tab内容高度：
await this.getComponentHeight()
getComponentHeight() {
    let rect = []
    const query = wx.createSelectorQuery().in(this)
    this.data.tabs.forEach((tab, index) => {
      query.select(`#section${index}`).boundingClientRect()
    })
    query.exec(res => {
      rect = res.map(item => {
        if (item) return item.top + this.data.scrollTop
        else return 0
      })
      this.setData({
        componentPositions: rect
      })
    })
},
点击tab：
clickTab(e) {
    const curTabIndex = e.currentTarget.dataset.index
    this.clickTabChange = true
    this.setData({
      currentTab: curTabIndex
    })
    this.scrollToComponent(curTabIndex)
},
// 滚动到指定组件
async scrollToComponent(index) {
    if (!this.data.componentPositions[index]) return
    wx.pageScrollTo({
      scrollTop: this.data.componentPositions[index] - this.data.menuButton.top - this.data.menuButton.height - 10 - (this.data.tabHeight.height || 66),
      duration: 300,
      complete: function () {
        this.clickTabChange = false
      }
    })
    setTimeout(() => {
      this.clickTabChange = false
    }, 500)
},
getTabHeight() {
    return new Promise((resolve) => {
      const query = wx.createSelectorQuery()
      query.select('#tab-box').boundingClientRect(res => {
        resolve(res)
      }).exec()
    })
}
监听页面滚动：
onPageScroll(e) {
    const scrollTop = e.scrollTop
    this.setData({
      scrollTop
    })
    if (this.data.isPageScroll !== (scrollTop > 50)) {
      this.setData({ isPageScroll: scrollTop > 50 })
    }

    // 获取容器高度
    let containerHeight = 0
    if (wx.getWindowInfo) {
      containerHeight = wx.getWindowInfo().windowHeight
    } else {
      containerHeight = wx.getSystemInfoSync().windowHeight
    }
    if (scrollTop > containerHeight && !this.data.isShowTop) {
      this.setData({ isShowTop: true })
    }
    if (scrollTop <= containerHeight && this.data.isShowTop) {
      this.setData({ isShowTop: false })
    }

    if (this.clickTabChange) return
    const positions = this.data.componentPositions
    for (let i = positions.length - 1; i >= 0; i--) {
      if ((scrollTop >= positions[i] - this.data.menuButton.top - this.data.menuButton.height - 10 - (this.data.tabHeight.height || 66)) && positions[i]) {
        this.setData({
          currentTab: i
        })
        break
      }
    }
},


跳转到tab页面：
wx.switchTab({ url: '/pages/home/home' })

打开公众号文章
wx.openOfficialAccountArticle({
      url,
      success: res => {
      },
      fail: res => {
      }
})
打开公众号兼容问题：有些设备不支持openOfficialAccountArticle
跳转到一个新页面，用webview组件展示页面
<web-view src="{{url}}"></web-view>

跳转页面
wx.navigateTo({ url: url })

返回上一页
  back() {
    wx.navigateBack({
      delta: 1,
      fail: _ => {
        wx.switchTab({ url: '/pages/home/home' })
      }
    })
  },

分享
<button class="share" open-type="share">分享</button>
// 分享给朋友
  async onShareAppMessage(e) {
    return {
      title,
      path,
      imageUrl
    }
}

// 分享到朋友圈
  onShareTimeline() {
    return {
      title,
      query,
      imageUrl
    }
}

// 隐藏分享按钮
  wx.hideShareMenu({
    menus: ['shareTimeline']
  })

// 埋点
wx.reportEvent(string eventId, object data)

// 直播间内点击商品跳转到商品详情页面会自带用户openid，room_id
onLoad: function (options) {
  // options: { openid, room_id }
  this.setData({
    options
  })
}
// 商品详情页分享直播间，给直播间添加分享人id
let path = 'plugin-private://{appid}/pages/live-player-plugin?room_id=' + this.data.options?.room_id
const customParams = encodeURIComponent(JSON.stringify({ share_openid: this.data.options?.openid }))
path += `&custom_params=${customParams}`
// 在小程序app.js中监听路由判断是否在直播间，获取分享人id
const livePlayer = requirePlugin('live-player-plugin')
const liveInfo = await livePlayer.getShareParams()
log.info('直播间信息', liveInfo)
if (!liveInfo.share_openid) liveInfo.share_openid = liveInfo.custom_params?.share_openid
// 可以做直播分享计数等操作

// 使用微信内置地图
wx.openLocation({
   name,
   address,
   latitude,
   longitude,
   scale: 18
})

// markdown文本
<rich-text class="ich-text" nodes="" />

// 打电话
wx.makePhoneCall({
    phoneNumber: phone
})

// 收获地址
wx.chooseAddress({
    success(res) {
       // 选择收获地址回调函数  
    }
})

// open-type="contact"联系客服

```

小程序开发记录

### 大模型的概念
大模型通常指的是参数量极大的神经网络模型，这类模型通过大量的数据进行训练，从而能够在多种任务上表现出色。大模型的一个典型例子就是Transformer架构，以及基于该架构构建的模型，如BERT、GPT系列等。
### 大模型的应用
训练大模型本身成本比较高，所以利用大模型技术进行微调就能基本符合大部分需求。

#### RAG（Retrieval-Augmented Generation）
是一种结合了检索（Retrieval）和生成（Generation）的方法，用于构建更强大和准确的自然语言处理模型。传统的生成模型依赖于模型内部的记忆来生成文本，而RAG通过引入外部文档或知识库的检索机制，使得模型在生成过程中能够访问到更广泛和更新的信息。

被训练后的大模型本身很聪明且有推理能力，但是缺乏知识。除了通用的一些知识以外，通过提供一些问答，可以通过调用OpenAI接口爬取信息以外，自己搜集一些特定的问答，比如医疗相关的数据，进行检索排序最终得到相关回答，结合大模型就能开发一套问答系统了。

对于一个不同AI的来说，人工智能到底是怎么实现的以及如何使用人工智能

人工智能碎片化信息

### 绘制canvas步骤
```js
<canvas id="canvasContainer" width="600" height="400"></canvas>
// canvas通过属性设置宽高，如果通过style样式设置宽高会对画布造成比例压缩

// 1. 获取画布
const canvas = document.getElementById("canvasContainer");

// 2. 获取2d绘制上下文
const ctx = canvas.getContext("2d");

// 3. 开始创作吧
```

### 描边和填充
```js
// stroke描边
// 例如画一个长方形
ctx.rect(100, 100, 200, 100);
ctx.stroke();

// fill填充
// 例如画一个填充的长方形
ctx.rect(100, 100, 200, 100);
ctx.fill();
```

### 路径
```js
ctx.beginPath();
// 画画... 不会跟外面的影响
ctx.closePath();
```

### 清除
```js
// 清除长方形
ctx.clearRect(x, y, width, height);
```

### 画圆弧
```js
// 圆心、半径、开始角度、结束角度、默认顺时针false
ctx.arc(x, y, radius, startAngle, endAngle)
ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);
ctx.stroke();

// 画一个圆
ctx.arc(100, 100, 50, 0, Math.PI * 2);

// 根据三个点画圆切得到的圆弧
ctx.moveTo(x, y);
ctx.arcTo(x1, y1, x2, y2, radius);
ctx.stroke();
```

### 画线段
```js
ctx.moveTo(x, y);
ctx.lineTo(x1, y1);
ctx.stroke();
```

### 贝塞尔曲线
```js
// 二次贝塞尔曲线需要两个点
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();

// 三次贝塞尔曲线需要三个点
ctx.beginPath();
ctx.moveTo(start.x, start.y);
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
ctx.stroke();
```

### 封装路径
```js
const path = new Path2D();
path.moveTo(x, y);
// ...画画画
ctx.stroke(path);
```

### 绘制颜色
```js
// 描边颜色
ctx.strokeStyle = "red";
ctx.stroke();

// 填充颜色
ctx.fillStyle = "blue";
ctx.fill();

// 线性渐变
const gradient = ctx.createLinearGradient(20, 0, 220, 0);

// 添加三个色标
gradient.addColorStop(0, "green");
gradient.addColorStop(0.5, "cyan");
gradient.addColorStop(1, "green");

// 设置填充样式并绘制矩形
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 100);

// 径向渐变
const gradient = ctx.createRadialGradient(110, 90, 30, 100, 100, 70);

// 添加三个色标
gradient.addColorStop(0, "pink");
gradient.addColorStop(0.9, "white");
gradient.addColorStop(1, "green");

// 设置填充样式并绘制矩形
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 160, 160);

// 圆锥渐变
const gradient = ctx.createConicGradient(0, 100, 100); // 角度, x, y

// 添加五个色标
gradient.addColorStop(0, "red");
gradient.addColorStop(0.25, "orange");
gradient.addColorStop(0.5, "yellow");
gradient.addColorStop(0.75, "green");
gradient.addColorStop(1, "blue");

// 设置填充样式并绘制矩形
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 200);
```

### 图案样式
```js
const img = new Image();
img.src = "canvas_createpattern.png";
// 请确保在图像加载完成后再使用
img.onload = () => {
  const pattern = ctx.createPattern(img, "repeat"); // 水平重复：repeat-x；垂直重复：repeat-y；不重复：no-repeat
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 300, 300);
};
```

### 线条样式
```js
lineWidth: 线条宽度
lineCap: 线段末端样式
lineJoin: 线段连接样式
miterLimit： 斜接限制比例
setLineDash(segments)： 设置虚线长度以及虚线间隔
lineDashOffset： 虚线偏移值
```

### 阴影设置
```js
shadowOffsetX: 水平阴影偏移
shadowOffsetY： 垂直阴影偏移
shadowColor： 阴影颜色
shadowBlur： 模糊值
```

### 绘制图像和视频
```js
// 图片
const img = new Image();
img.src = "./test.png";
img.onload = function() {
    // 1. 三个参数时，第二第三个是将图片绘制在画布的水平垂直坐标
    drawImage(img, x, y)
    // 2. 5个参数时，第二第三同上，第四第五个是将图片缩放的宽高
    drawImage(img, x, y, w, h)
    // 3. 9个参数时，img对象后四个参数是原始图片裁剪的x，y坐标以及宽高，后四个参数是绘制在画布上的x，y坐标以及缩放的宽高
    drawImage(img, sx, sy, sw, sh, x, y, w, h);
}

// 视频
const video = document.getElementById("video");
const btn = document.getElementById("playBtn");
btn.onclick = function() {
    if(video.paused) {
	video.play();
	render();
    } else video.pause();
}

function render() {
    ctx.drawImage(video, x, y, w, h);
    requestAnimationFrame(render)
}
```

### 绘制文字
```js
font: 字体
strokeText/fillText: 填充文字，参数：文本，x, y, w, h
textAlign: 对齐方式
textBaseline: 文本基线设置
direction: 方向设置
measureText: 预测文本信息
```

### 变换
```js
// 位移
translate(x, y)

// 缩放
scale(x, y)

// 旋转
rotate(angle)

// 变换矩阵
transform: 六个参数
```

### 合成图像实现刮刮乐
```js
<div id="ggk">中奖啦</div>
<canvas id="c1"></div>

const img = new Image();
img.src = "./bg.png";
img.onload = function() {
    ctx.drawImage(img, 0, 0, 600, 400);
}

let isDraw = false;

canvas.onmousedown = function() {
    isDraw = true;
}

canvas.onmousedown = function() {
    isDraw = false;
}

canvas.onmousemove = function(e) {
    if(isDraw) {
	const x = e.pageX;
	const y = e.pageY;

	ctx.globalCompositeOperation = "destination-out";

	ctx.arc(x, y, 20, 0, Math.PI * 2);
	ctx.fill();
    }
}
```

### 裁剪路径
```js
clip()
clip(path)
```

### 状态保存和回复
```js
// 存栈
save: 保存
restore: 回复
```

### 像素操作
```js
// 获取图片像素信息
ctx.getImageData(x, y, w, h);

// 循环修改数据
for (let i = 0; i < imageData.data.length; i++) {
    imageData.data[i] = 255 - imageData.data[i];
    imageData.data[i + 1] = 255 - imageData.data[i + 1];
    imageData.data[i + 2] = 255- imageData.data[i + 2];
    imageData.data[i + 3] = 255 - imageData.data[i + 3];
}

// 重新渲染修改后的图片
ctx.putImageData(imageData, 0, 0)
```

### 封装绘制元素
```js
class Heart {
    constructor(x, y) {
	this.x = x;
	this.y = y;
	this.color = "red";
	this.heartPath = new Path2D();
	this.heartPath.moveTo(this.x, this.y);
	this.heartPath.bezierCurveTo();

	// 监听鼠标移动
	c1.onmousemove = (e) => {
	    let x = e.offsetX;
	    let y = e.offsetY;
	    // 判断是否在当前元素上
	    let isIn = ctx.isPointInPath(this.heartPath, x, y);
	    if (isIn) {
		this.color = "blue";
	    } else {
		this.color = "red";
	    }
	}
    }

    draw() {
	ctx.save();
	ctx.fillStyle = this.color;
	ctx.fill(this.heartPath);

	ctx.restore();
    }


    let heart = new Heart(100, 100);
    function render() {
	ctx.clearRect(0, 0, c1.widht, c1.height);
	heart.draw();
	requestAninmationFrame(render);
    }

    render()
}
```

### canvas实现在线画笔
```js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas实现在线画笔</title>
    <style>
        canvas {
            border: 1px solid black;
        }

        button.active {
            color: white;
            background-color: orange;
        }
    </style>
</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
    <hr>
    <button id="blodBtn" type="button">粗线条</button>
    <button id="thinBtn" type="button">细线条</button>
    <button id="saveBtn" type="button">保存签名</button>
    <input type="color" id="color">
    <button id="clearBtn" type="button">橡皮擦</button>
    <button id="nullBtn" type="button">清空画布</button>

    <script>
        // 获取canvas元素和context
        const canvas = document.querySelector("#c1");
        const ctx = c1.getContext("2d");
        // 设置连接圆润
        ctx.lineJoin = "round";
        // 设置末端圆润
        ctx.lineCap = "round";
        // 获取输入框和按钮
        const colorInput = document.querySelector("#color");
        const blodBtn = document.querySelector("#blodBtn");
        const thinBtn = document.querySelector("#thinBtn");
        const saveBtn = document.querySelector("#saveBtn");
        const clearBtn = document.querySelector("#clearBtn");
        const nullBtn = document.querySelector("#nullBtn");

        // 设置允许绘制的变量
        let isDraw = false;
        
        canvas.onmousedown = function(e){
            // 设置允许绘制
            isDraw = true;
            ctx.beginPath();
            const x = e.pageX - canvas.offsetLeft;
            const y = e.pageY - canvas.offsetTop;
            ctx.moveTo(x, y);
        }

        canvas.onmouseup = function(e){
            isDraw = false;
            ctx.closePath();
        }

        canvas.onmouseleave = function(e){
            isDraw = false;
            ctx.closePath();
        }

        canvas.onmousemove = function(e){
            if(isDraw){
                const x = e.pageX - canvas.offsetLeft;
                const y = e.pageY - canvas.offsetTop;
                ctx.lineTo(x, y);
                ctx.stroke();
            }
        }

        blodBtn.onclick = function() {
            ctx.globalCompositeOperation = "source-over";
            ctx.lineWidth = 20;
            blodBtn.classList.add("active");
            thinBtn.classList.remove("active");
            clearBtn.classList.remove("active");
        }

        thinBtn.onclick = function() {
            ctx.globalCompositeOperation = "source-over";
            ctx.lineWidth = 2;
            thinBtn.classList.add("active");
            blodBtn.classList.remove("active");
            clearBtn.classList.remove("active");
        }

        clearBtn.onclick = function() {
            ctx.globalCompositeOperation = "destination-out";
            ctx.lineWidth = 30;
            clearBtn.classList.add("active");
            thinBtn.classList.remove("active");
            blodBtn.classList.remove("active");
        }

        nullBtn.onclick = function() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

        saveBtn.onclick = function() {
            const dataUrl = canvas.toDataURL();
            const a = document.createElement("a");
            a.href = dataUrl;
            a.download = "signature.png";
            a.click();
            a.remove();
        }

        colorInput.onchange = function(e) {
            ctx.strokeStyle = e.target.value;
        }
    </script>
</body>
</html>
```

### canvas绘制时钟
```js
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas绘制时钟</title>
</head>

<body>
    <canvas id="c1" width="800" height="600"></canvas>

    <script>
        // 获取canvas元素
        const canvas = document.getElementById('c1');
        const ctx = canvas.getContext('2d');

        function render() {
            // 清除
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // 保存当前坐标位置和上下文对象的状态
            ctx.save();
            // 移动原点
            ctx.translate(canvas.width / 2, canvas.height / 2);
            ctx.rotate(-Math.PI / 2)

            ctx.save();
            for (let i = 0; i < 12; i++) {
                // 绘制小时刻度
                ctx.beginPath();
                ctx.moveTo(170, 0);
                ctx.lineTo(190, 0);
                ctx.lineWidth = 8;
                ctx.strokeStyle = 'gray';
                ctx.stroke();
                ctx.closePath();
                ctx.rotate(Math.PI * 2 / 12);
            }

            ctx.restore();
            ctx.save();
            for (let i = 0; i < 60; i++) {
                // 绘制小时刻度
                ctx.beginPath();
                ctx.moveTo(180, 0);
                ctx.lineTo(190, 0);
                ctx.lineWidth = 2;
                ctx.strokeStyle = 'gray';
                ctx.stroke();
                ctx.closePath();
                ctx.rotate(Math.PI * 2 / 60);
            }

            ctx.restore();
            ctx.save();

            // 获取当前时间
            const date = new Date();
            let hour = date.getHours();
            let minute = date.getMinutes();
            let second = date.getSeconds();
            hour = hour > 12 ? hour - 12 : hour;

            // 绘制秒针
            ctx.rotate(Math.PI * 2 / 60 * second);
            ctx.beginPath();
            ctx.moveTo(-30, 0);
            ctx.lineTo(190, 0);
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'red';
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
            ctx.save();

            // 绘制分针
            ctx.rotate(Math.PI * 2 / 60 * minute + 2 * Math.PI / 60 / 60 * second);
            ctx.beginPath();
            ctx.moveTo(-20, 0);
            ctx.lineTo(130, 0);
            ctx.lineWidth = 4;
            ctx.strokeStyle = '#888';
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
            ctx.save();

            // 绘制时针
            ctx.rotate(Math.PI * 2 / 12 * hour + 2 * Math.PI / 12 / 60 * minute + 2 * Math.PI / 12 / 60 / 60 * second);
            ctx.beginPath();
            ctx.moveTo(-15, 0);
            ctx.lineTo(110, 0);
            ctx.lineWidth = 8;
            ctx.strokeStyle = '#333';
            ctx.stroke();
            ctx.closePath();
            ctx.restore();

            ctx.restore();
            requestAnimationFrame(render);
        }

        render();
    </script>
</body>

</html>
```

canvas 接口说明

## 项目前端知识点
### uniapp特性
#### 1. UniApp 简介
UniApp 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一次代码，可发布到多个平台（如微信小程序、H5、App等），极大地提高了开发效率。

#### 2. uniapp原理
跨平台编译
UniApp 的一大特点是能够将一套代码同时编译成多个平台的应用（如 H5、小程序、App 等）。这种能力主要是通过一套自定义的编译器来实现的，编译器会根据目标平台的不同，将通用的 Vue.js 代码转换成相应的平台代码。例如，H5 平台可能需要生成标准的 HTML、CSS 和 JavaScript 文件，而小程序平台则需要生成符合微信小程序规范的 WXML、WXSS 和 JS 文件。

平台适配层
为了使应用能够在不同的平台上运行，UniApp 引入了一个平台适配层，这个层负责处理不同平台之间的差异。例如，某些 API 可能在微信小程序中可用但在 H5 平台上不可用，适配层会确保在调用这些 API 时能够正确地分发到相应的平台实现。

自定义组件和插件
UniApp 提供了一套丰富的组件库和插件系统，允许开发者使用通用的组件和插件来快速构建应用。这些组件和插件通常都经过优化，可以在多个平台上高效运行。

扩展的生命周期等

这里不得不提到taro
Taro 与 UniApp 的比较
虽然 Taro 和 UniApp 都是用于跨平台开发的框架，但它们在设计理念和技术实现上存在一些差异：

基础框架：Taro 基于 React，而 UniApp 基于 Vue.js。
语法和组件化：Taro 使用 JSX 和 React Hooks，而 UniApp 使用 Vue.js 的模板语法和组件化开发。
平台支持：Taro 支持微信小程序、H5、React Native 等平台，而 UniApp 支持微信小程序、H5、App 等平台。
生态和社区：两者都有活跃的社区和丰富的插件生态，但各自的侧重点不同。
选择哪个框架取决于你的个人偏好、团队的技术栈以及具体的项目需求。

#### 3. UniApp中的生命周期与Vue.js生命周期的区别和联系
UniApp 是基于 Vue.js 的一套框架，用于开发跨平台的应用（如微信小程序、H5、App 等）。因此，UniApp 的生命周期钩子在很大程度上继承了 Vue.js 的生命周期概念，但为了适应更多的平台特性，也做了一些扩展。

Vue.js 生命周期
Vue.js 的生命周期钩子包括：

beforeCreate：实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

UniApp 生命周期
UniApp 的生命周期钩子与 Vue.js 类似，但也有一些特定于 UniApp 的扩展，例如：

onLaunch：全局生命周期钩子，应用启动时触发一次。
onShow：应用前台显示时触发。
onHide：应用后台隐藏时触发。
onError：全局错误监听函数。
onPageNotFound：页面不存在监听函数。
onPullDownRefresh：下拉刷新事件处理。
onReachBottom：触底事件处理。
onShareAppMessage：用户点击右上角菜单的“转发”按钮时触发此事件。
区别与联系
联系：UniApp 的生命周期钩子大部分都是基于 Vue.js 的生命周期设计的，因此它们之间有很多相似之处。例如，onLaunch 对应于 Vue.js 的 created 阶段，onShow 和 onHide 分别对应于 Vue.js 中的 mounted 和 beforeDestroy 的某种扩展。

区别：UniApp 添加了一些特定于小程序或跨平台开发的功能，比如 onPullDownRefresh 和 onReachBottom，这些是专门为处理用户交互（如下拉刷新、滚动到底部）而设计的。此外，UniApp 还引入了全局的生命周期钩子，如 onLaunch，用于处理应用级别的生命周期事件。

总结来说，UniApp 继承并扩展了 Vue.js 的生命周期机制，以更好地适应跨平台开发的需求。

#### 4. uniapp常用api及组件
```
常用 API

网络请求
uni.request: 发起网络请求。
uni.uploadFile: 上传文件。
uni.downloadFile: 下载文件。

数据存储
uni.setStorage: 设置本地数据缓存。
uni.getStorage: 获取本地数据缓存。
uni.removeStorage: 删除本地数据缓存。
uni.clearStorage: 清空本地数据缓存。

设备信息
uni.getSystemInfo: 获取系统信息。
uni.getDeviceInfo: 获取设备信息。

界面操作
uni.showToast: 显示消息提示框。
uni.showModal: 显示模态弹窗。
uni.showLoading: 显示 loading 提示框。
uni.hideLoading: 隐藏 loading 提示框。

导航
uni.navigateTo: 保留当前页面，跳转到应用内的某个页面。
uni.redirectTo: 关闭当前页面，跳转到应用内的某个页面。
uni.switchTab: 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.reLaunch: 关闭所有页面，打开到应用内的某个页面。

媒体
uni.chooseImage: 从本地相册选择图片或使用相机拍照。
uni.previewImage: 预览图片。
uni.saveImageToPhotosAlbum: 保存图片到本地相册。

常用组件

基础组件
<view>: 视图容器。
<text>: 文本。
<image>: 图片。
<button>: 按钮。
<input>: 输入框。
<textarea>: 多行输入框。

布局组件
<scroll-view>: 可滚动视图区域。
<swiper>: 轮播图组件。
<swiper-item>: 轮播图项目。

表单组件
<form>: 表单。
<label>: 标签。
<picker>: 选择器。
<radio>: 单选框。
<checkbox>: 复选框。

导航组件
<navigator>: 导航链接。
<tabbar>: 底部标签栏。

其他组件
<map>: 地图。
<canvas>: 画布。
<rich-text>: 富文本。
<progress>: 进度条。

这些只是 UniApp 中一部分常用 API 和组件，UniApp 还提供了更多丰富的功能和组件，可以根据具体需求查阅官方文档以获取更多信息。
```

### vue3新特性
1. 更好的性能
编译优化：Vue 3 的编译器对静态节点进行了更好的优化，减少了不必要的渲染和更新。
更快的虚拟 DOM 更新：Vue 3 使用了新的 Proxy 代理机制来跟踪响应式数据的变化，而不是 Vue 2 中使用的 Object.defineProperty。这使得 Vue 3 在处理复杂数据结构时性能更好。
2. 响应式系统
Proxy 代理：Vue 3 使用 Proxy 代理来实现响应式系统，这比 Vue 2 中的 Object.defineProperty 更强大和灵活。Proxy 可以监听到对象的所有属性变化，而不仅仅是属性值的变化。
Composition API：Vue 3 引入了 Composition API，这是一种新的组合式 API，它允许你更灵活地组织和重用逻辑代码。Composition API 通过 setup 函数来定义组件的行为，使得逻辑复用更加直观和自然。
3. 新的组件
Teleport：Teleport 允许你将组件的内容渲染到 DOM 中的任何位置，而不仅仅是父组件的子节点。这对于模态框、提示框等场景非常有用。
Fragments：Vue 3 支持多个根节点的组件，即 Fragments。这使得组件的结构更加清晰和灵活。
4. Composition API
setup 函数：setup 函数是 Composition API 的入口点，你可以在这里定义组件的状态、方法和生命周期钩子。
生命周期钩子：Vue 3 将生命周期钩子改名为更具描述性的名称，如 onMounted、onUnmounted 等。这些钩子可以在 setup 函数中使用。
响应式状态：使用 ref 和 reactive 创建响应式状态。ref 用于基本类型的数据，而 reactive 用于对象和数组。
计算属性和监听器：computed 和 watch 函数用于创建计算属性和监听状态变化。
5. 更小的体积
Tree-shaking 支持：Vue 3 的模块化设计使得你可以只导入你需要的部分，从而减小最终打包后的体积。Vue 3 的核心库体积更小，更适合现代前端应用。
6. 更好的 TypeScript 支持
内置 TypeScript 支持：Vue 3 对 TypeScript 的支持更为友好，提供了更好的类型推断和类型定义，使得在 TypeScript 项目中使用 Vue 3 更加方便。
7. 其他改进
更好的错误处理：Vue 3 改进了错误处理机制，使得调试更加容易。
自定义渲染器：Vue 3 提供了自定义渲染器的能力，这使得开发者可以更容易地将 Vue 3 应用扩展到不同的渲染环境。
这些新特性和改进使得 Vue 3 成为一个更强大、更灵活、更高效的前端框架。

### 技术栈
[uniapp](https://zh.uniapp.dcloud.io) [vue3](https://cn.vuejs.org) [vant-ui](https://vant-ui.github.io/vant/#/zh-CN) [tailwindCSS](https://www.tailwindcss.cn/) axios mysql [Express](https://www.expressjs.com.cn/)
### 开发工具
[微信公众平台](https://mp.weixin.qq.com/)：获取开发AppID
Hbuilder：用于代码开发以及打包到小程序开发者工具进行测试
微信开发者工具：Hbuilder进行相关配置，指定微信开发者平台在本地的可运行地址，打包后就可以直接唤起微信开发者工具进行测试。
### 相关配置文件
#### pages.json
页面配置
包含path、style、globalStyle、tabBar等属性
path：配置页面路由
style：配置导航条、使用的第三方组件或自定义组件等
```js
//使用vant-ui
{
    "pages": [ 
        //pages数组中第一项表示应用启动页
        {
	    "path": "pages/index/index",
	    "style": {}
	},
	{
	    "path": "pages/myBill/myBill",
	    "style": {
	        "navigationBarTextStyle": "black",
		"usingComponents": {
		    "van-datetime-picker": "/wxcomponents/vant/dist/datetime-picker/index",
		    "list-item": "/pages/components/listItem"
		}
	    }
	},
    ],
    "globalStyle": {
	//全局设置自定义导航栏
	"navigationStyle": "custom"
    },
    "tabBar": {
	//配置底部tabBar
	"color": "#cdcdcd",
	"selectedColor": "#6C9EF3",
	"borderStyle": "black",
	"backgroundColor": "#ffffff",
	"list": [{
	    "pagePath": "pages/index/index",
	    "iconPath": "static/images/home-icon.png",
	    "selectedIconPath": "static/images/home-active-icon.png",
	    "text": "tabBarText"
	}, ...]
    }
}
```

#### manifest.json
配置各端AppID，这边填入自己的微信AppID，在微信开发平台上下载微信开发者工具，后期就可以使用微信开发者工具进行测试。

### 相关API
#### 获取导航栏高度
```js
//获取屏幕导航栏高度
getHeight() {
    if (wx.canIUse('getMenuButtonBoundingClientRect')) {
	let sysInfo = wx.getSystemInfoSync(); //状态栏的高度
	this.statusBarHeight = sysInfo.statusBarHeight;
	// 胶囊位置信息
	let rect = wx.getMenuButtonBoundingClientRect();
	this.menuButtonRect = JSON.parse(JSON.stringify(rect));
	// 导航栏高度
	let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
	this.navBarHeight = navBarHeight;
	// 自定义导航栏的高度
	this.height = sysInfo.statusBarHeight + navBarHeight;
    } else {
	wx.showToast({
	    title: '您的微信版本过低，界面可能会显示不正常',
	    icon: 'none',
	    duration: 4000
	});
    }
}
```

#### 判断是否在可视范围
```js
observer = uni.createIntersectionObserver(this);
observer.relativeTo('.mybill-page').observe('.amount-main', (res) => {
    // 判断当前元素是否在可视范围，从而显示或隐藏某个元素
    if (res.intersectionRatio > 0 && this.showAmountSimple) {
	this.showAmountSimple = false;
    } else if (!res.intersectionRatio > 0 && !this.showAmountSimple) {
	this.showAmountSimple = true;
    }
})
```

#### 数据存储
```js
// 存取
uni.setStorage({
    key: 'mini_token',
    data: result?.data?.token,
    success: function() {
	recall.headers.Authorization = `Bearer ${result?.data?.token}`
	axios(recall)
    }
})

// 读取
uni.getStorageSync('mini_token')
```

#### 登录
```js
// 下面这段代码是在登录401的时候，重新获取用户token并进行接口的重新请求
// 微信登录方式有静默登录，不需要用户授权，而已获取用户openID
uni.login({
    provider: 'weixin',
    success: async function(res) {
	const result = await wxLogin({
	    code: res?.code
	})

	if (result?.data?.token) {
	    uni.setStorage({
		key: 'mini_token',
		data: result?.data?.token,
		success: function() {
		    recall.headers.Authorization = `Bearer ${result?.data?.token}`
		    axios(recall)
		}
	    })
	}
    }
});
```

#### 选择本地文件并上传
```js
function chooseMediaHandle() {
    uni.chooseMedia({
	success: (res) => {
	    // 返回选定照片的本地文件路径列表 tempFiles
	    const token = uni.getStorageSync('mini_token');
	    Promise.all(res.tempFiles?.map(file => {
		return new Promise((resolve, reject) => {
		    uni.uploadFile({
			url: server?.apiUrl + '/api/diary/uploadFile',
			filePath: file?.tempFilePath,
			name: 'media',
			header: {
    			    'Authorization': `Bearer ${token}`
			},
			success: (uploadFileRes) => {						 
			  
  resolve(JSON.parse(uploadFileRes.data)?.data)
						},
			fail: (err) => {
			    reject(false)
			}
		    });
		})
	    })).then(res => {
		showEditDiary.value = true
		mediaList.value = [...mediaList.value, ...res]
	    }).catch(error => {
		// 如果任何一个请求被拒绝，这里的代码会被执行
		console.error(error);
	    })
	},
	fail: (err) => {
	    // 选择图片失败的回调
	    console.log('选择图片失败', err);
	}
    });
}
```

#### 路由跳转
```js
//跳转
uni.navigateTo({
    url: `路由地址`, 
})

//返回到上一页
uni.navigateBack({
    delta: 1
})
```

### 相关组件
#### webview
webview只能引入绑定的域名，不能随便引入第三方网站；可通过微信公众平台进行域名授权；微信有很多限制，小程序也不能唤起第三方小程序，除非授权过...
```js
<web-view :src="src"></web-view>
```

## 后端知识点
就是一些CRUD的接口，写点sql语句

#### 1. 登录流程
```js
// 1. 根据前端获取到的code，以及开发者AppID、secret获取openID
// 2. 查询数据库中是否存在当前用户，存在则jwt签名获取token，后续请求接口就通过token去请求
router.get('/login', async function (req, res, next) {
    let url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js_code=${req.query?.code}&grant_type=authorization_code`
    const data = await getRequestJSON(url);
    if (data?.openid) {
        const response = await getRequestJSON('/api/user', { openid: data?.openid }, 'post')
        if (response?.wxOpenid) {
            // 验证成功
            res.send(Result.success({ token: jwt.sign({ wxOpenid: response?.wxOpenid }, secret, { expiresIn: '7200s' }) }))
        } else res.send(Result.fail('登录失败，请稍候再试~'))
    } else res.send(Result.fail('登录失败，请稍候再试~'))
})
```

uniapp vue3 开发个人小程序记录

## [nextJS](https://nextjs.org/docs)特性
### fullstack framework(全栈框架)
相较于React，nextJS更全面，React只是个UI框架，开发项目还需要引入其他服务；使用nextJS可以在一个项目里干所有的事情，包括使用nodejs访问数据库...
### Server-side Rendering(服务端渲染)
相较于React，使用服务端渲染页面，页面预渲染加快页面的渲染速度，便于SEO；使用场景：注重页面渲染速度以及SEO的项目可以使用nextJS
### file-system based router(基于文件系统的路由)
相较于React，不用额外配置路由
路由包含[App Router](https://nextjs.org/docs/app/building-your-application/routing)和[Pages Router](https://nextjs.org/docs/pages/building-your-application/routing)两个方式
#### 项目初始化命令
```js
npx create-next-app@latest
```
脚手架初始化会提示是否要以App Router作为路由方式，默认是App Router，
#### 页面跳转方式
1. [<Link>](https://nextjs.org/docs/app/api-reference/components/link)组件
```js
// Navigate to /about
<Link href='/about'></Link>
// Navigate to /about?name=test
<Link href={{
    pathname: '/about',
    query: { name: 'test' },
}}

```
2. [useRouter](https://nextjs.org/docs/app/api-reference/functions/use-router)(Client Components)
```js
import { useRouter } from 'next/navigation'

export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}
```
3. [redirect](https://nextjs.org/docs/app/api-reference/functions/redirect)(Server Components)
```js
import { redirect } from 'next/navigation'
 
async function fetchTeam(id) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}
 
export default async function Profile({ params }) {
  const team = await fetchTeam(params.id)
  if (!team) {
    redirect('/login')
  }
 
  // ...
}
```
4. history API
[window.history.pushState](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState)
[window.history.replaceState](https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#windowhistoryreplacestate)

### [数据获取](https://nextjs.org/docs/app/building-your-application/data-fetching)
React 扩展了 fetch 以提供自动请求重复数据删除，多次调用同一个请求，请求只发送一次；服务端/客户端数据缓存；并行/顺序执行等功能。

对于是使用服务端获取数据以及预渲染还是选择客户端获取数据，个人认为如果考虑到首屏加载速度以及seo的页面或数据可以使用服务端，对于复杂交互的ui可以使用客户端渲染，就目前的React项目代码该怎么写就怎么写。
#### 服务端预渲染获取数据
数据获取建立在原生fetch API之上
```js
let data = await fetch('https://api.vercel.app/blog' })
```
#### 客户端数据获取
在React生命周期钩子函数中获取数据

### 一些组件/API
#### [<Image>](https://nextjs.org/docs/app/building-your-application/optimizing/images)
使用webp等现代图像格式，自动为每台设备提供正确尺寸的图像
当图片进入视口时加载图片
```js
import Image from 'next/image'
```
#### [metadata](https://nextjs.org/docs/app/building-your-application/optimizing/metadata)
定义页面元数据信息，便于SEO
```js
import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}
```

## 本站开发记录
### 涉及到的知识点
#### 1. 页面路由
##### 首先通过官方文档介绍创建nextjs项目：npx create-next-app@latest
创建过程会发现，nextjs默认使用TypeScript、[Tailwind CSS](https://tailwindcss.cn/)、App Router路由方式；根据自身需求去选择用TypeScript还是JavaScript开发；Tailwind CSS 通过给元素设置具体的类名可以简化我们的css代码；

重点讲下App Router路由方式：
根据nextjs官网描述，nextjs支持 App Router 和 Pages Router 两种路由方式，默认情况下是 App Router，因为 App Router 可以使用最新的React特性，比如 
 Server Components 和 Streaming，就是 nextjs 可以将一个页面分成静态渲染部分和动态渲染部分，免于等待所有组件全加载完才渲染，造成页面 blocking。

两种路由方式下的页面路由也有差异，App Router 模式下，任意目录下可访问页面，必须固定定义为 page.tsx；Pages Router 模式下所有pages目录下的文件都被定义为路由。

#### 2. api路由
根据上面提到的 App Router 与 Pages Router 的区别，两种路由方式下的api路由也有差异，App Router 模式下，api目录要放置在app目录下，而且必须命名 route.ts；而 Pages Router 模式下，api目录下的文件都被定义为api路由，具体api定义方式如下：
```js
// App Router
export async function GET(request: NextRequest) {
   // 获取数据逻辑
   const data = await ...
   return NextResponse.json({ data });
}

export async function POST(request: NextRequest) {
   const body = await request.json();
   // 插入数据逻辑
   return NextResponse.json({ msg: 'Created success' });
}

export async function DELETE(request: NextRequest) {
   const id = request.nextUrl.searchParams.get('id')!;
   if (!id) {
     return NextResponse.json({ msg: 'Delete Failed' });
   }
   // 删除数据逻辑
   return NextResponse.json({ msg: 'Deleted Success ' });
}

export async function PUT(request: NextRequest) {
   const id = request.nextUrl.searchParams.get('id');
   if (!id) {
     return NextResponse.json({ msg: 'Update Failed' });
   }
   // 更新数据逻辑
   return NextResponse.json({ msg: 'Updated Success' });
}
```

```js
// Pages Router
function handler(req, res) {
  switch (req.method) {
    case 'GET':
       // ...
    case 'POST':
       // ...
    case 'DELETE':
       // ...
    case 'PUT':
       // ...
    default:
        // ....
  }
}
```

#### 3. layout
设置全局公共布局、公共样式或metadata等
App Router 模式下可以设置全局或单个页面下的layout.ts、template.ts文件，针对整个项目或单个页面下的布局文件。Pages Router 模式下可以设置_app.ts文件、—_document.ts文件，分别是设置布局以及设置html属性等。

#### 4. 图片优化
请看上面说明

#### 5. 导航
请看上面说明

#### 6. SSG 与 SSR
SSG： 静态渲染，在服务端构建部署时，数据重新生效，产生的静态页面内容都是不变的，可以设置revalidate，没多少秒后刷新内容也会改变，访问速度快、利于SEO，针对不会变化、多页面使用的数据；SSR：动态渲染，在服务端接收到每个用户请求时，重新请求数据，重新渲染页面，针对显示实时的数据。

#### 7. Client Component 与 Server Component
NextJs 默认将所有组件都视为服务端组件

Client Component: 客户端组件，组件顶部有 'use client'标识，，用户可以在浏览器进行页面交互，比如使用 useState、useEffect等，它既在服务器又在浏览器运行，先服务器，然后浏览器
Server Component: 服务端组件，完全在服务端渲染，因此无法进行用户交互
可以在不同的位置分别使用'use client'、'use server'，标识某个部分使用client component，某个部分使用server component，从而加快页面的访问速度。

#### 8. fetch data
请看上面说明

#### 9. Database(mongodb)
1. 连接本地数据
2. 创建数据表模型
3. 通过模型操作数据库

#### 10. jwt 身份验证和授权
安装 jsonwebtoken 安装包，整个身份验证和授权过程如下：
1. 通过账号密码注册用户，密码加密存取，查询数据库中是否存在当前用户，jwt签名获取token，发送用户邮箱进行确认
2. 用户点击邮箱地址进行身份验证，根据拿到的token使用jwt验证格式是否正确，如正确将用户账号密码存入数据库的user表中，并将用户信息存入header且自动登录
3. 用户退出登录则清除header中的用户信息
4. 如果用户再次登录，用注册的账号密码进行登录，验证账号是否存在于数据表中，如果没有就是不存在当前账户，如果存在下一步
5. 将数据库中查询到的账户信息的密码与前端输入的密码（加密后）进行比对，如果比对失败就是密码错误，比对成功下一步
6. 使用jwt根据用户的账户信息进行签名获取token，可以对token设置有效期，签名过程中需要设置只有你自己才能知道的密钥，后续在请求的过程中就会使用token，只有设置的密钥才能解出用户信息，从而进行身份验证
7. 将获取到的token存放在header中
```js
const cookie = serialize('userInfo', JSON.stringify({token, role: user.role, userId: user._id }), {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    maxAge: 60 * 60 * 24 * 7, // One week
    path: '/',
})
res.setHeader('Set-Cookie', cookie)
```
8. 后续获取token可以通过req.cookies获取
#### 11. middleware 路由守卫
上面通过jwt获取token进行身份验证和授权，可以通过设置middleware.js文件，对部分页面或部分接口进行身份验证，从而限制部分功能或页面只有登录后的用户才能使用。

#### 12. AI 接入， SSE即时数据更新技术
除了大家熟知的chatgpt以外，国内也有很多AI服务商，不需要外网就可以进行访问，比如阿里云的千问产品，接入方式很简单，可以参考官方文档，选择适合自己的产品，都是有赠送的token的，随便试着玩一玩~

接入方式有一次性返回结果和流式返回结果，参考chatgpt流式传输，这边使用到的server-side-event（SSE）技术。

SSE 是一种基于HTTP的服务器推送技术，允许服务器实时地向客户端推送数据。

SSE是一种服务器端到客户端的单向流式消息推送协议，它通过HTTP连接发送事件流。与传统的轮询或长轮询技术相比，SSE具有更低的延迟、更高的效率和更低的资源消耗。

实时通信技术也有我们熟知的websocket技术，websockert是双向通信，既可以从客户端推送消息到服务端，也可以从服务端推送消息到客户端，这边只需要服务端进行推送，所以SSE技术就足够了。
```js
const completionStream = await openai.chat.completions.create({
    model: "模型名称",
    messages: messages,
    stream: true,
    max_tokens: 4096
});

const responseStream = new ReadableStream({
    async start(controller) {
        const encoder = new TextEncoder()

        for await (const part of completionStream) {
            const text = part.choices[0]?.delta.content ?? ''
            // todo add event
            const chunk = encoder.encode(`data:${text}`)
            controller.enqueue(chunk)
        }
        controller.close()
    },
})

return new Response(responseStream, {
    headers: {
        'Content-Type': 'text/event-stream; charset=utf-8',
        'Connection': 'keep-alive',
        'Cache-Control': 'no-cache, no-transform',
    },
})
```
```js
    // 前端获取数据
    const reader = data.getReader();
    const decoder = new TextDecoder();
    let done = false;

    while (!done) {
        const { value, done: doneReading } = await reader.read();
        done = doneReading;

        const chunkValue = decoder.decode(value)?.replace(/data:/g, '')?.replace(/^\n{2}/, '')?.replace(/\n{2}$/, '');
	// 更新值，将返回的chunkValue拼接在一起
        dispatch({ type: "updatePromptAnswer", payload: chunkValue });
   }
   if (done) {
       // 获取数据结束，可以进行存库等操作
       dispatch({ type: "done" });
   }
```

使用 nextJS 开发本站记录

## 项目记录
#### 项目1（目标库和源库数据比对，校验数据一致性、空值、值域等)
```JavaScript
// 技术栈：vue2 + vuex + event-bus + vue-router + axios + element-ui

// vue mixin 类似于hooks

// ********** 重点改造功能：路由 keep-alive 多级路由缓存，修改根据组件名称获取更改为路由名称进行缓存，同一个页面不同路由参数也会进行缓存
// <keep-alive>组件包含的页面都会进行缓存

// codemirror web代码编辑器
// sql-formatter sql语句格式化工具
// mavon-editor 基于vue的markdown编辑器

// 自定义指令：
import Vue from 'vue';
let MyPlugin = {};
export default MyPlugin.install = function (vue, options) {
    Vue.directive('lazy', {
        bind: function (el, binding) {
            const lazyLoadObser = new IntersectionObserver((entries, observer) => {
                entries.forEach((entry, index) => {
                    if (entry.intersectionRatio > 0) {
                        binding.value.loadingMore();
                    }
                })
            })
            lazyLoadObser.observe(el)
        }
    })
};

// 下载文件
export const download = (res) => {
    const content = res.data
    const blob = new Blob([content])
    // const fileName = '导出信息.xlsx'
    const fileName = decodeURIComponent(res.headers['content-disposition'].split('filename=')[1])
    if ('download' in document.createElement('a')) { // 非IE下载
        const link = document.createElement('a')//创建一个a标签通过a标签的点击事件区下载文件
        link.download = fileName
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)//使用blob创建一个指向类型数组的URL
        document.body.appendChild(link)
        link.click()
        URL.revokeObjectURL(link.href) // 释放URL 对象
        document.body.removeChild(link)
    } else { // IE10+下载
        navigator.msSaveBlob(blob, fileName)
    }
}

/**
 * 返回昨天日期
 * @returns {string}
 */
export const getYesterday = () => {
    let now = new Date()
    let yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)
    let _year = yesterday.getFullYear()
    let _month = yesterday.getMonth() + 1 < 10 ? '0' + (yesterday.getMonth() + 1) : (yesterday.getMonth() + 1)
    let _day = yesterday.getDate() < 10 ? '0' + yesterday.getDate() : yesterday.getDate()

    return _year + '-' + _month + '-' + _day
};

/**
 * 获取当前年份
 */
export const getCurrentYear = () => {
    let now = new Date()
    return now.getFullYear()
}

/**
 * 获取当前月份
 */
export const getCurrentMonth = (n = 0) => {
    let now = new Date()
    return now.getMonth() + 1 + n
}

/**
 * 浏览器判断是否全屏
 */
export const fullscreenToggel = () => {
    if (fullscreenEnable()) {
        exitFullScreen();
    } else {
        reqFullScreen();
    }
};

/**
 * esc监听全屏
 */
export const listenfullscreen = (callback) => {
    function listen() {
        callback();
    }
    document.addEventListener('fullscreenchange', function () {
        listen();
    });
    document.addEventListener('mozfullscreenchange', function () {
        listen();
    });
    document.addEventListener('webkitfullscreenchange', function () {
        listen();
    });
    document.addEventListener('msfullscreenchange', function () {
        listen();
    });
};

/**
 * 浏览器判断是否全屏
 */
export const fullscreenEnable = () => {
    return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen;
};

/**
 * 浏览器全屏
 */
export const reqFullScreen = () => {
    if (document.documentElement.requestFullScreen) {
        document.documentElement.requestFullScreen();
    } else if (document.documentElement.webkitRequestFullScreen) {
        document.documentElement.webkitRequestFullScreen();
    } else if (document.documentElement.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
    }
};

/**
 * 浏览器退出全屏
 */
export const exitFullScreen = () => {
    if (document.documentElement.requestFullScreen) {
        document.exitFullScreen();
    } else if (document.documentElement.webkitRequestFullScreen) {
        document.webkitCancelFullScreen();
    } else if (document.documentElement.mozRequestFullScreen) {
        document.mozCancelFullScreen();
    }
};
```
#### 项目2
```JavaScript
// 技术栈：vue3 + ts + vite2 + pinia + ant-design-vue + antv/x6（流程图）
// echarts 和 D3.js的区别就是echarts是使用canvas绘制，D3使用svg绘制；echarts是封装好的，灵活性差，D3比较灵活，支持事件处理器操作dom，但是学习成本高，看具体开发需求
// go.js也是绘制力导向图的一个js库
```
#### 项目3
```JavaScript
// 技术栈： react + typescript + vite + cbdesign + react-router-dom + mobx + pnpm

// 根据问题智能推荐不同图表数据进行展示并支持切换图标展示，可导出到pdf

/** 重点改造功能： */
/** 1. 手写eventBus */
/** event-emitter.ts */
import { pull } from 'lodash';

export type EventHandler<E = any> = (e: E) => void;

/*这个就是事件的原型*/
class EventEmitter<E = any> {
    private _events: Record<string, EventHandler<E>[]>;

    constructor() {
        this._events = {};
    }

    private _getFns(event: string) {
        return this._events[event] || (this._events[event] = []);
    }

    public on<T = E>(event: string, cb: EventHandler<T>) {
        const fns = this._getFns(event);
        fns.push(cb as any);
    }

    public off(event: string, cb?: EventHandler<E>) {
        if (cb) {
            const fns = this._getFns(event);
            pull(fns, cb);
        } else {
            delete this._events[event];
        }
    }

    public once<T = E>(event: string, cb: EventHandler<T>) {
        const fn2: EventHandler<E> = (e) => {
            this.off(event, fn2);
            cb(e as any);
        };
        this.on(event, fn2);
    }

    /* 同步调用 */
    public emit<T = E>(event: string, param?: T) {
        const fns = this._getFns(event);
        for (let i = 0; i < fns.length; i++) {
            const fn = fns[i] as EventHandler<any>;

            fn(param);
        }
    }

    /* 可以异步调用，返回一个Promise */
    public invoke<T = E>(event: string, param?: T): Promise<any> {
        const fns = this._getFns(event);

        flag: for (let i = 0; i < fns.length; i++) {
            const fn = fns[i] as EventHandler<any>;
            return new Promise < any > ((resolve) => {
                resolve(fn(param));
            });
            break flag;
        }
        return Promise.reject();
    }
}

export default EventEmitter;

/** events.ts */
import EventEmitter, { EventHandler } from './event-emitter'
import { useEffect } from 'react'

const events = new EventEmitter()

export default events

export function useEventBus<T = any>(event: string, cb: EventHandler<T>) {
    useEffect(() => {
        events.on(event, cb)
        return () => {
            events.off(event, cb)
        }
    })
}

/** 如何使用eventBus */
useEventBus('exportPdf', handleExportPdf)  // 监听exportPdf事件，如果触发了exportPdf事件则执行handleExportPdf方法

events.emit('exportPdf')  // 触发exportPdf事件

/** 2. jspdf插件集合html2canvas实现导出图片到pdf文件 */
export const exportPdf = (canvas: HTMLCanvasElement) => {
    const contentWidth = canvas.width
    const contentHeight = canvas.height
    // 一页pdf显示html页面生成的canvas高度;
    const pageHeight = (contentWidth / 592.28) * 841.89
    // 未生成pdf的html页面高度
    let leftHeight = contentHeight
    // 页面偏移
    let position = 0
    // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    const imgWidth = 595.28
    const imgHeight = (595.28 / contentWidth) * contentHeight
    const pageData = canvas.toDataURL('image/jpeg', 1.0)
    const pdf = new JsPDF('p', 'pt', 'a4')
    // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
    // 当内容未超过pdf一页显示的范围，无需分页
    if (leftHeight < pageHeight) {
        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
    } else {
        while (leftHeight > 0) {
            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            // 避免添加空白页
            position -= 841.89
            if (leftHeight > 0) {
                pdf.addPage()
            }
        }
    }
    const nowDate = moment(new Date()).format('YYYY-MM-DD')
    // if (isPrint) {
    //     //打印
    //     pdf.autoPrint();
    //     pdf.output('dataurlnewwindow');
    // } else {
    //     //下载
    pdf.save('test-' + nowDate + '.pdf')
    // }
}

// 整页导出pdf
export const imgDownloadPdf = (
    img: any,
    pdfName: any = moment(new Date()).format('YYYY-MM-DD'),
    x: any = 0,
    y: any = 30
) => {
    document.body.classList.add('hide_Pdf_body')
    // 获取需转图片的范围元素
    document.documentElement.scrollTop = 0
    document.body.scrollTop = 0
    // 利用 html2canvas 下载 canvas
    html2canvas(img).then(function (canvas) {
        //转化为本地的图片地址
        const filename = pdfName
        const pageWidth = canvas.width
        const pageHeight = canvas.height
        const pageData = canvas.toDataURL('image/jpeg', 1.0)
        const pdf = new jsPDF({
            orientation: pageHeight > pageWidth ? 'portrait' : 'landscape',
            unit: 'px',
            format: [pageHeight, pageWidth]
        })
        pdf.addImage(pageData, x || x == 0 ? x : 0, y || y == 0 ? y : 100, pageWidth, pageHeight - y)
        //转pdf下载
        const nowDate = moment(new Date()).format('YYYY-MM-DD')
        pdf.save(filename || '报告-' + nowDate)
    })
    setTimeout(() => {
        document.body.classList.remove('hide_Pdf_body')
    }, 500)
}

/** 3. 是否在可视范围内hooks */
import React from "react";

export function useObserver(ref: any) {

    const [isIntersecting, setIsIntersecting] = React.useState(false);

    // OPTIONS
    const options = {
        // root: target.current,
        rootMargin: '0px',
        threshold: 0.5, // A threshold of 1.0 means that when 100% of the target is visible within the element specified by the root option, the callback is invoked.
    };
    // Observer
    const observer = new IntersectionObserver(([entry]) => setIsIntersecting(entry.isIntersecting), options);

    // Use Effect
    React.useEffect(() => {

        observer.observe(ref.current)
        // DISCONNECT 
        return () => observer.disconnect()

    }, []);
    // Return
    return isIntersecting
};

/** 4. 是否改变了窗口大小hooks */

import { useEffect, useState } from 'react';

const useResizeObserver = (ref: any) => {
    const [dimensions, setDimensions] = useState < { width: number; height: number } | null > (null);

    useEffect(() => {
        const observer = new ResizeObserver((entries) => {
            const { width, height } = entries[0].contentRect;
            setDimensions({ width, height });
        });

        observer.observe(ref.current);

        return () => {
            if (ref.current) {
                observer.unobserve(ref.current);
            }
        };
    }, [ref]);

    return dimensions;
};

export default useResizeObserver;

/** 5. 模拟打字效果 */
const search: any = (data: any) => {
    const str = data?.title
    const strLen = str.length
    let index = 0
    let timer: any = null
    let cur = currentAnswer
    let curLoading = currentAnswerLoading

    timer = setInterval(() => {
        if (index >= strLen) {
            setCurrentAnswerLoading(false)
            clearInterval(timer)
        } else {
            if (!curLoading) curLoading = true
            const randomLen = Math.ceil(Math.random() * (strLen - index > 10 ? 10 : strLen - index))
            const curIndex = index
            index += randomLen
            cur += str?.slice(curIndex, index)
            setCurrentAnswer(cur)
            setCurrentAnswerLoading(curLoading)
        }
    }, Math.random() * 500)
}

// 给文本一个类，设置伪元素光标闪烁
// .typingLoading {
//     &::after {
//         content: ' ▌';
//         animation: changeBg 1s infinite;
//     }
// }

// @keyframes changeBg {
//     from {
//         opacity: 1;
//     }

//     to {
//         opacity: 0;
//     }
// }
```
#### 项目4
```JavaScript
// 重点改造功能：
// 1. electron-vite-react
// 1. B端&C端打开弹窗，B端通过调用方法，postMessage传输数据；C端electron约定协议打开桌面应用内嵌web页面，涉及到electron于内嵌web页面之间通信方式
// electron功能点：
// 1. 自定义标题栏， 首先配置隐藏默认标题栏，react自定义标题栏，设置css控制部分不可拖拽
// 2. electron和react通信，react页面通过ipcRenderer 的send或on方法
// 3. 注册自定义协议，实现浏览器或桌面应用点击打开我们的桌面应用，app.setAsDefaultProtocolClient("")
// 4. iframe和内部react页面之间的通信postMessage
// 5. 打开新窗口，涉及到打包后本地hash url，loadUrl, loadFile

// 2. 封装权限hooks
import { useMemo } from 'react'
import { isAuthorized } from '@/assets/js/publicFunc'

export const useAuth = (key: string) => {
    const auth = useMemo(() => {
        return isAuthorized(key)
    }, [key])
    return auth
}

// 使用forwardRef, useImperativeHandle调用子组件中的方法

/** 获取文件大小 */
export function formatSizeUnits(bytes) {
    if (bytes >= 1073741824) { bytes = (bytes / 1073741824).toFixed(2) + " GB"; }
    else if (bytes >= 1048576) { bytes = (bytes / 1048576).toFixed(2) + " MB"; }
    else if (bytes >= 1024) { bytes = (bytes / 1024).toFixed(2) + " KB"; }
    else if (bytes > 1) { bytes = bytes + " bytes"; }
    else if (bytes == 1) { bytes = bytes + " byte"; }
    else { bytes = "0 bytes"; }
    return bytes;
}
```
#### 项目5
```JavaScript
// 重点改造功能：
// 1. 递归数据处理，表格拆分合并单元格，表格单元格编辑等
// 2. 拆分文本组件封装
import { getSelectedText } from '@/utils/index'
import { PlusOutlined } from '@ant-design/icons'
import { useEffect, useRef, useState } from 'react'

interface Props {
    text: string;
    addSplitHandle: any
}

const SplitText = ({ text, addSplitHandle }: Props) => {
    const [showAddIcon, setShowAddIcon] = useState < any > (false)
    const [curSelectionText, setCurSelectionText] = useState < any > ('')
    const textRef = useRef < any > (null)

    const mouseUpHandle = (e: any) => {
        const selectionText = getSelectedText();
        if (selectionText) {
            setCurSelectionText(selectionText)
            if (!showAddIcon) setShowAddIcon(true)
            const addIcon = document.querySelector('.split-add-icon');
            addIcon?.setAttribute('style', `left: ${e.offsetX + 5}px;top: ${e.offsetY - 7}px`)
        } else {
            setShowAddIcon(false)
        }
    }

    const mouseDownHandle = () => {
        textRef.current?.addEventListener('mouseup', mouseUpHandle)
        if (showAddIcon) setShowAddIcon(false)
    }

    const clickHandle = () => {
        addSplitHandle(curSelectionText)
        setShowAddIcon(false)
    }

    useEffect(() => {
        textRef.current?.addEventListener('mousedown', mouseDownHandle)
    }, [])
    return (
        <p className='split-text' ref={textRef}>
            {text}
            <span className='split-add-icon' style={{ opacity: showAddIcon ? 1 : 0 }} onClick={clickHandle}><PlusOutlined key='addIcon' /></span>
        </p>
    )
}

export default SplitText

/**
 * 获取选中文本
 */
export const getSelectedText = () => {
    let selectedText = ''
    if (window.getSelection) {
        selectedText = (window.getSelection() as any).toString()
    } else if ((document as any).selection && (document as any).selection.type !== 'Control') {
        selectedText = (document as any).selection.createRange().text
    }
    return selectedText
}
```

开发记录3

## React实现eventBus
```JavaScript
// event.ts
import EventEmitter, { EventHandler } from './event-emitter'
import { useEffect } from 'react'

const events = new EventEmitter()

export default events

export function useEventBus<T = any>(event: string, cb: EventHandler<T>) {
  useEffect(() => {
    events.on(event, cb)
    return () => {
      events.off(event, cb)
    }
  })
}

// event-emitter.ts
import { pull } from 'lodash';
 
export type EventHandler<E = any> = (e: E) => void;
 
/*这个就是事件的原型*/
class EventEmitter<E = any> {
  private _events: Record<string, EventHandler<E>[]>;
 
  constructor() {
    this._events = {};
  }
 
  private _getFns(event: string) {
    return this._events[event] || (this._events[event] = []);
  }
 
  public on<T = E>(event: string, cb: EventHandler<T>) {
    const fns = this._getFns(event);
    fns.push(cb as any);
  }
 
  public off(event: string, cb?: EventHandler<E>) {
    if (cb) {
      const fns = this._getFns(event);
      pull(fns, cb);
    } else {
      delete this._events[event];
    }
  }
 
  public once<T = E>(event: string, cb: EventHandler<T>) {
    const fn2: EventHandler<E> = (e) => {
      this.off(event, fn2);
      cb(e as any);
    };
    this.on(event, fn2);
  }
  
  /* 同步调用 */
  public emit<T = E>(event: string, param?: T) {
    const fns = this._getFns(event);
    for (let i = 0; i < fns.length; i++) {
      const fn = fns[i] as EventHandler<any>;
 
      fn(param);
    }
  }
 
  /* 可以异步调用，返回一个Promise */
  public invoke<T = E>(event: string, param?: T): Promise<any> {
    const fns = this._getFns(event);
 
    flag: for (let i = 0; i < fns.length; i++) {
      const fn = fns[i] as EventHandler<any>;
      return new Promise<any>((resolve) => {
        resolve(fn(param));
      });
      break flag;
    }
    return Promise.reject();
  }
}
 
export default EventEmitter;
```
## 导出pdf
React中将div中的内容导出到pdf，首先将div中的内容通过html2canvas生成canvas图片，继而通过jsPDF插件将canvas图片导出到pdf
```JavaScript
// html代码
<div ref={pdfRef}>...</div>

js代码
// 整页导出pdf，避免出现分页后图片被隔断的问题
export const imgDownloadPdf = (
  divContent,  // div内容
  pdfName = moment(new Date()).format('YYYY-MM-DD'), // 导出文件名称
  x = 0,  // 图像在PDF中的x坐标。
  y = 30  // 图像在PDF中的y坐标。
) => {
  document.body.classList.add('hide_Pdf_body')
  // 获取需转图片的范围元素
  document.documentElement.scrollTop = 0
  document.body.scrollTop = 0
  // 利用 html2canvas 下载 canvas
  html2canvas(divContent).then(function (canvas) {
    //转化为本地的图片地址
    const filename = pdfName
    const pageWidth = canvas.width
    const pageHeight = canvas.height
    const pageData = canvas.toDataURL('image/jpeg', 1.0)
    const pdf = new jsPDF({
      orientation: pageHeight > pageWidth ? 'portrait' : 'landscape',
      unit: 'px',
      format: [pageHeight, pageWidth]
    })
    pdf.addImage(pageData, x || x == 0 ? x : 0, y || y == 0 ? y : 100, pageWidth, pageHeight - y)
    //转pdf下载
    const nowDate = moment(new Date()).format('YYYY-MM-DD')
    pdf.save(filename || '报告-' + nowDate)
  })
  setTimeout(() => {
    document.body.classList.remove('hide_Pdf_body')
  }, 500)
}
```

## 实现chartGPT回答时光标闪动效果
在应答过程中给文本添加typingLoading类，在文本末尾添加光标闪烁的伪元素
```JavaScript
    p {
	&.typingLoading {
            &::after {
              content: ' ▌';
              animation: changeOpacity 1s infinite;
            }
          }
    }

    @keyframes changeOpacity {
  	from {
    	    opacity: 1;
  	}

  	to {
    	    opacity: 0;
  	}
    }
```
## 根据返回数据类型生成对应的表格/柱状图/饼图/折线图等
## Echart使用
### 柱状图带标准线
```JavaScript
    const option = {
        tooltip: {
	    // 鼠标悬浮时展示的提示信息
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            className: 'xzhu-tooltip'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '']
        },  //这里x轴的首尾加两个空字符串用来做占位
        yAxis: {
            type: 'value'
        },
        legend: {
            show: true,
            left: 'center',
            bottom: 10,
            data: [// 如果是多条标准线，就设置多个对应的对象
                {
                    name: 'xxx',
                    icon: 'rect',
                    textStyle: {
                        color: '#666666' //对应文本颜色
                    },
                },
                {
                    name: 'yyy',
                    icon: 'rect',
                    textStyle: {
                        color: '#666666'
                    },
                }
            ]
        },
        series: [
            {
                name: 'uuu',
                data: [0, 120, 200, 150, 80, 70, 110, 130, 0], //这里首尾添加两个0，跟上面加的两个空字符串对应作为占位符
                type: 'bar',
                itemStyle: {
                    color: '#2676ED'
                },
            },
            {
                name: 'xxx', // 这里的名称要和上面的保持一致
                data: [40, 40, 40, 40, 40, 40, 40, 40, 40], //标准线是多少，这里的每一项就是多少，跟上面x轴的个数保持一致
                type: 'line',
                symbol: 'none',
                itemStyle: {
                    color: '#E35454' //对应线条颜色
                }
            },
            {   //这是第二条标准线，name名称要和上面定义的一样
                name: 'yyy', // 标准线多少就是多少，这里是例子80%，这里的名称要和上面的保持一致
                data: [80, 80, 80, 80, 80, 80, 80, 80, 80], //标准线是多少，这里的每一项就是多少，跟上面x轴的个数保持一致
                type: 'line',
                symbol: 'none',
                itemStyle: {
                    color: '#E35454'
                }
            }
        ]
    };
```
### 分组柱状图带图例
```JavaScript
    const option = {
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'shadow'
            },
            className: 'xzhu-tooltip'
        },
        xAxis: {
            type: 'category',
            data: ['']  //这里就是['']
        },
        yAxis: {
            type: 'value'
        },
        legend: {
            type: 'scroll',
            show: true,
            left: 'center',
            bottom: 10,
            icon: 'circle'
        },
        series: [ //这里就是每个x轴对应的数据
            {
                name: 'Mon', //每个x轴对应的名称
                data: [120], //当前x轴对应的值
                type: 'bar',
                itemStyle: {
                    color: randomColor() //这里是随机颜色值，例如'#ffffff'
                },
                label: {
                    show: true,
                    formatter: '{a}',
                    position: 'bottom',
                },
            },
            {
                name: 'Tue',
                data: [200],
                type: 'bar',
                itemStyle: {
                    color: randomColor()
                },
                label: {
                    show: true,
                    formatter: '{a}',
                    position: 'bottom',
                }
            },
            {
                name: 'Wed',
                data: [150],
                type: 'bar',
                itemStyle: {
                    color: randomColor()
                },
                label: {
                    show: true,
                    formatter: '{a}',
                    position: 'bottom',
                }
            },
        ]
    }
```
### 横向分组柱状图
```JavaScript
    const option = {
        tooltip: {
            trigger: 'item',
        },
        xAxis: {
            show: false,
        },
        yAxis: {
            type: 'category',
            data: [''] //为空
        },

        series: [ //每个柱状的对象
            {
                name: 'Mon', //label名称
                data: [120], //对应的值
                type: 'bar',
                itemStyle: {
                    color: randomColor() //随机颜色值，例'#ffffff'
                },
                label: {
                    show: true,
                    formatter: '{a}',
                    position: 'left',
                },
                tooltip: {
                    formatter: '{c}',
                    position: 'right',
                }
            },
            {
                name: 'Tue',
                data: [200],
                type: 'bar',
                itemStyle: {
                    color: randomColor()
                },
                label: {
                    show: true,
                    formatter: '{a}',
                    position: 'left',
                },
                tooltip: {
                    formatter: '{c}',
                    position: 'right',
                }
            },
            {
                name: 'Wed',
                data: [150],
                type: 'bar',
                itemStyle: {
                    color: randomColor()
                },
                label: {
                    show: true,
                    formatter: '{a}',
                    position: 'left',
                },
                tooltip: {
                    formatter: '{c}',
                    position: 'right',
                }
            },
        ]
    }
```
### 普通折线图
```JavaScript
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            className: 'zhexian-tooltip'
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed'] //x轴数据
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 100, 150], //y轴对应数据
                type: 'line',
            },
        ]
    }
```
### 分段折线图
```JavaScript
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            className: 'zhexian-tooltip'
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sta', 'Sun'] //x轴数据
        },
        yAxis: {
            type: 'value'
        },
        legend: {
            show: true,
            left: 'center',
            bottom: 10,
            icon: 'circle'
        },
        series: [
            {
                name: '过去',
                data: [120, 100, 300, 80, 200], //过去的数据
                type: 'line',
                smooth: 0.6,
                lineStyle: {
                    color: '#2676ED',
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#C6DBFF' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(221, 234, 255, 0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                    origin: 'auto',
                },
            },
            {
                name: '未来',
                data: ['', '', '', '', 200, 180, 150], //未来的数据，这里前面空着的是过去的数据，空字符串占位
                type: 'line',
                smooth: 0.6,
                lineStyle: {
                    color: '#36CBCB',
                },
            },
        ]
    }
```
### 基础饼图数据
```JavaScript
const option = {
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: [ //对应的数据，value和name对应显示
                    { value: 90, name: 'xxx', itemStyle: { color: 'rgba(38, 118, 237, 1)' } },
                    { value: 10, name: 'yyy', itemStyle: { color: 'rgba(54, 203, 203, 1)' } },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
```
### 分组柱状以及分组折线并存
```JavaScript
const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            className: 'xzhu-tooltip'
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sta', 'Sun'] //x轴数据
        },
        yAxis: [
            {
                type: 'value',
                name: '同期值', //左边数据名称
            },
            {
                type: 'value',
                name: '同期增长率', //右边数据名称
                axisLabel: {
                    formatter: '{value} %', //右边数据对应格式，如果返回的数据值是自带%，那这里的formatter就不需要了
                },
            }
        ],
        legend: {
            type: 'scroll',
            show: true,
            left: 'center',
            top: 10,
            icon: 'circle'
        },
        series: [
            {
                name: '同期值', 
                data: [100, 130, 80, 150, 110, 160, 190], //同期值的数据
                type: 'bar',
                itemStyle: {
                    color: 'rgba(38, 118, 237, 1)'
                },
            },
            {
                name: '环期值', //
                data: [110, 132, 150, 180, 120, 80, 150], //环期值的数据值
                type: 'bar',
                itemStyle: {
                    color: 'rgba(20, 201, 201, 1)'
                },
            },
            {
                name: '同期增长率',
                data: [20, 50, 20, 40, 30, 80, 50], //同期增长率的数据值
                type: 'line',
                itemStyle: {
                    color: 'rgba(247, 163, 92, 1)'
                },
                yAxisIndex: 1,
            },
            {
                name: '环期增长率',
                data: [30, 20, 90, 10, 50, 90, 20], //环期增长率的数据值
                type: 'line',
                itemStyle: {
                    color: 'rgba(188, 149, 223, 1)'
                },yAxisIndex: 1,
            },
        ]
    }
```

开发记录2

## 登录
### token失效问题
日常项目都是用token作为登录凭证，token都具有有效期，用户长时间停留在当前页面未做任何操作情况下，超过有效期token则会失效，为了避免用户在进行繁杂的操作过程中token突然失效退出登录导致前面的操作都无效的问题，可以有以下解决方案：
1. 设计用户自行暂存功能
2. token自动刷新并继续请求当前接口
http请求保存当前请求，监测401状态值，调用刷新token接口并重新发送当前请求
3. 监测用户鼠标移动，利用防抖定时请求用户信息接口
```JavaScript
    // 监听鼠标是否在移动，若在移动则定时请求用户信息接口以防在操作过程中token失效问题
    window.addEventListener('mousemove', throttle(() => {
      if (token) getUserInfo()
    }, 1000 * 60 * 10))
```

## 审批流程
Activiti是一个开源的工作流引擎，用于在Java应用程序中集成业务流程管理（BPM）。在Activiti中，审批流程通常涉及以下步骤：

部署流程定义：将BPMN 2.0兼容的流程定义文件部署到Activiti引擎。
启动流程实例：使用流程定义创建一个新的流程实例。
任务列表：查询并获取参与者的任务。
完成任务：处理任务，可能会触发流程中的下一个节点。

## 动态获取菜单并根据平铺的菜单节点生成树
```JavaScript
const permissions = [
    {
    	"menuId": 1,
    	"name": "首页",
    	"permission": "/",
    	"parentId": 0,
    	"path": "/",
    	"sort": 0,
    	"type": "0", // 是否是菜单
    	"keepAlive": null,
    	"privilegeIcon": "home"
    },
    ...
]

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
  permission: boolean = true
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
    permission
  } as MenuItem
}

const getFormatItem = (item, children) => {
    return getItem(item?.name, item?.path, item?.parentId === 0 && item?.privilegeIcon ? <img src={`/images/menu-icon-${item?.privilegeIcon}.svg`} /> : '', children)
}

/**
    格式化菜单树，对生成菜单包括子节点都进行排序以及添加图标，最后返回菜单
*/
const getFormatTree = (tree) => {
    const res = [];
    tree?.sort((a, b) => a?.sort - b?.sort)?.forEach((item) => {
      if (item?.children && item.children.length) {
        res.push(getFormatItem(item, getFormatTree(item?.children)?.sort((a, b) => a?.sort - b?.sort)))
      } else res.push(getFormatItem(item))
    })

    return res;
}

/**
    对每个节点递归查找父节点直到没有父节点位置，最后生成每个对象树
    {
    	"menuId": 1,
        "children": [
	    {
		"menuId": 2,
		"children": [
		    "parentId": 1
		    ...
		],
		...
	    }
	],
	...
    }
*/
const getObj = (data, menus) => {
    if (data?.parentId === 0) {
      return data;
    } else {
      const parent = menus.find((childItem) => childItem?.menuId === data?.parentId)
      if (!parent) return null;
      if (parent?.children && parent.children?.length > 0) {
        const curItemExistIndex = parent.children?.findIndex((resItem) => resItem.menuId === data.menuId);
	// 避免重复添加子菜单
        if (curItemExistIndex !== -1) parent.children?.splice(curItemExistIndex, 1, data);
        else parent.children.push(data);
      } else parent.children = [data];
      if (parent?.parentId === 0) {
        return parent;
      } else {
        return getObj(parent, menus)
      }
    }
}

/**
    生成菜单树
*/
const getTree = (menus) => {
    const res = [];
    menus?.forEach((item) => {
      const curData = getObj(item, menus);
      if (curData) {
        const curItemExistIndex = res?.findIndex((resItem) => resItem.menuId === curData.menuId);
        if (curItemExistIndex !== -1) res?.splice(curItemExistIndex, 1, curData);
        else res.push(curData)
      }
    })

    const formatTree = getFormatTree(res)
    setMenus(formatTree)
}

const getMenus = () => {
    // 获取菜单列表
    const menus = permissions?.filter((item) => item?.type === '0')
    // 菜单去重
    let uniqueMenus = Array.from(menus.reduce((map, obj) => {
      if (!map.has(obj.menuId)) map.set(obj.menuId, obj);
      return map;
    }, new Map()).values());

    getTree(uniqueMenus)
}
```

## antd Table拆分单元格
```JavaScript
// 返回数据格式
const list = [
    {
	children: [
	    {
		field1: 'xxx',
		...    	
	    },
	    ...	
	],
	field1: 'xxx',
	...    	
    },
    ...
]
/*
    以children中最终子元素作为一行，标记每行的rowSpan以及所属的groupIndex
*/
const formatTableData = (list) => {
  const finalList = []
  let rowIndex = 0;
  list?.forEach((item, itemIndex) => {
    const { children, ...otherItemParams } = item
    const childrenLen = children?.length
    if (childrenLen) {
      children?.forEach((child, childIndex) => {
        rowIndex++;
        finalList.push({
          rowIndex,
          ...child,
          ...otherItemParams,
          rowSpan: childIndex === 0 ? childrenLen : 0,
          groupIndex: itemIndex
        })
      })
    } else {
      rowIndex++;
      finalList.push({ rowIndex, ...otherItemParams, rowSpan: 1, groupIndex: itemIndex })
    }
  })

  return finalList
}

// 最后设置onCell
const columns = [
    {
      title: 'xxx',
      dataIndex: 'xxx',
      key: '',
      onCell: (record) => ({
        rowSpan: record?.rowSpan,
      })
    },
    ...
]
```
```JavaScript
// 如果返回的数据中出现多个维度的，彼此之间没有从属关系的个情况下，比较每个children的长度，哪个子节点多就设为最小行单位
const list = [
    {
	children1: [
	    {
		field1: 'xxx',
		...    	
	    },
	    ...	
	],
	children2: [
	    {
		field1: 'xxx',
		...    	
	    },
	    ...	
	],
	field1: 'xxx',
	...    	
    },
    ...
];

const formatTableData = (list) => {
    const finalList = []
    let rowIndex = 0;
    list?.forEach((item, itemIndex) => {
        const { children1, children2, ...otherItemParams } = item
        const children1Len = children1?.length
        const children2Len = children2?.length
        const array = children1Len >= children2Len ? children1?.map((child, childIndex) => {
            const avgRow = Math.floor(children1Len / children2Len)
            return {
                children1Field1: child?.field1,
                children2Field1: children2?.[Math.floor(childIndex / avgRow)]?.field1,
                children2SingleRow: childIndex % avgRow === 0 ? (Math.floor(childIndex / avgRow) < children2Len ? avgRow : 1) : 0,
            }
        }) : children2?.map((child, childIndex) => {
            	...
            }
        })
        if (array?.length) {
            array?.forEach((arrayItem, arrayIndex) => {
                rowIndex++;
                finalList.push({
                    rowIndex,
                    ...arrayItem,
                    ...otherItemParams,
                    rowSpan: arrayIndex === 0 ? array?.length : 0,
                    groupIndex: itemIndex
                })
            })
        } else {
            rowIndex++;
            finalList.push({ rowIndex, ...otherItemParams, rowSpan: 1, groupIndex: itemIndex })
        }
    })

    return list
}
```
添加删除单元格就是添加删除子节点

## mobx
‌MobX‌是一个简单、可扩展的状态管理库，通过透明的函数响应式编程（TFRP）使得状态管理变得简单且可扩展。它通过观察状态的变化来自动更新组件，而不需要手动编写更新逻辑。‌

‌MobX的核心概念和原理‌

MobX的核心概念包括：

‌‌Observable‌：将数据转变为可观察的，当数据变化时，自动通知依赖的数据。
‌Action‌：任何用来修改状态的操作，通过action修改状态后，会自动触发相关的更新。
‌‌Computed‌：根据现有状态计算得出的值，当依赖的状态变化时，自动重新计算。
‌‌Reaction‌：对状态变化做出的反应，用于执行副作用操作。
MobX通过使用响应式编程，当状态发生变化时，自动通知依赖的数据进行更新。这与‌Redux不同，Redux每次修改状态都需要显式地通知所有依赖的组件进行更新，而MobX可以更高效地处理依赖关系。‌

‌MobX的使用场景和优缺点‌

MobX适用于需要高效状态管理的场景，特别是在React应用中。它的优点包括：
‌上手容易‌：相比Redux等状态管理库，MobX的学习曲线较平缓。
‌性能优越‌：由于MobX只更新变化的部分，而不是全局重新渲染，因此在大型应用中表现更好。
‌灵活性高‌：可以组织状态为类或对象，而不是函数式的reducer。

缺点包括：
‌生态不如Redux丰富‌：虽然功能强大，但在一些复杂场景下的解决方案可能不如Redux多样。
‌兼容性问题‌：不同版本的MobX在语法和支持的浏览器上有所不同，需要特别注意版本兼容性。‌

#### 页面搜索条件，页码查询接口请求等都可以写到mobx中，避免重复请求接口以及可以记住搜索条件避免重复搜索

## 布局
### Grid布局
用于涉及多行多列
```JavaScript
// 设置两行三列的网格布局
.parentBox {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
}
// 第一个盒子占两行两列，第二个和第三个盒子分别占一行一列
.childBox1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
.childBox2 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
.childBox3 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}
```
### flex布局
用于涉及一行多列

## 格式化金额
```JavaScript
/**
 * 千分位加逗号
 */
export function formatMoney(value) {
  return value?.toString()?.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}
```
## 获取选中文本
```JavaScript
/**
 * 获取选中文本
 */
export const getSelectedText = () => {
  let selectedText = ''
  if (window.getSelection) {
    selectedText = window.getSelection().toString()
  } else if (document.selection && document.selection.type !== 'Control') {
    selectedText = document.selection.createRange().text
  }
  return selectedText
}
```
## 递归平铺路由
```JavaScript
/**
 * 平铺路由
 */
export const flattenRoutes = (routes) => {
  let data: any = []
  routes.forEach((item) => {
    if (item.children) {
      data = data.concat(flattenRoutes(item.children))
    } else {
      data.push(item)
    }
  })

  return data
}
```


开发记录

## 加载器
‌Three.js‌提供了多种加载器，这些加载器可以帮助开发者加载不同类型的3D资源。以下是一些常用的Three.js加载器：

‌TextureLoader‌：用于加载图片，可以返回一个纹理对象Texture。通过TextureLoader的.load()方法加载一张图片，可以创建一个纹理对象，该对象可以用于设置材质的颜色贴图属性，从而实现纹理贴图的应用‌。

‌CubeTextureLoader‌：用于加载立方体纹理，即环境贴图。通过加载6张图片（每个面一张），返回一个立方体纹理对象CubeTexture。这种纹理通常用于模拟真实世界中的环境光照射效果‌。

‌GLTFLoader‌：用于加载glTF格式的3D模型。glTF是一种流行的3D场景和模型格式，被广泛用于现代Web和移动应用中。GLTFLoader支持加载.glb和.gltf格式的文件‌。

‌DRACoLoader‌：用于加载压缩的3D模型数据，特别是针对Draco压缩算法的数据。Draco是一种高效的几何压缩算法，用于减少3D模型的数据大小，同时保持高质量的几何信息‌。

‌FBXLoader‌、‌OBJLoader‌、‌TDSLoader‌、‌ThreeMFLoader‌、‌AMFLoader‌、‌GCodeLoader‌、‌KMZLoader‌、‌PCDLoader‌、‌PLYLoader‌等：这些加载器用于加载不同格式的3D模型文件，如FBX、OBJ、TDS、ThreeMF、AMF、GCode、KMZ、PCD和PLY等。这些加载器提供了对各种3D模型格式的支持，使得开发者能够轻松地将不同的3D模型集成到Three.js项目中‌。
## 获取模型对应的结构
加载器返回的对象树中存在children字段，包含物体各个结构，可以通过getObjectByName获取到对应结构对象。
## 核心代码
```js
function onProgress(xhr) {
    if (xhr.lengthComputable) {
        const percentComplete = xhr.loaded / xhr.total * 100;
        console.log(Math.round(percentComplete, 2) + '% downloaded');
    }
}

const loader = new MMDLoader();
const modelFile = '/assets/mmd.pmd';

let mmdMesh;
loader.load(modelFile, function (object) {
    mmdMesh = object;
    scene.add(mmdMesh);

    // 获取头部
    const head = mmdMesh.getObjectByName("首");

    // 创建一个Timeline对象，用于管理动画序列
    const tl = gsap.timeline({ repeat: -1, yoyo: true }); // 设置动画无限循环且往返播放

    // 设置动画从0到1
    tl.to(mmdMesh.morphTargetInfluences, { duration: 1, 8: 1, 15: 1, delay: 1 }); // 针对对象修改属性值。

    // 设置动画从1回到0
    tl.to(mmdMesh.morphTargetInfluences, { duration: 1, 8: 0, 15: 0 }); 

    window.addEventListener("mousemove", (e) => {
        let x = (e.clientX / window.innerWidth) * 2 - 1;
        let y = (e.clientY / window.innerHeight) * 2 - 1;
	// x，y保证在-1至1的区间

        let timeline = gsap.timeline()
        timeline.to(head.rotation, 0.5, {
            duration: 0.5,
            x: y,
            y: x,
            duration: 1
        })
    })
}, onProgress, null);
```


threejs实现载入模型

## 音频分析
创建AudioAnalyser对象, 使用[ AnalyserNode ](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode)去分析音频数据。将声波的波动转化为图形线条的起伏变化，从而表现出声音的音高、音量等信息。
## 核心代码
```js
function createAudio() {
    const fftSize = 1024;
    if (!audio) {
        const listener = new THREE.AudioListener();
        audio = new THREE.Audio(listener);
        const file = '/assets/video.mp4'; // 音视频都可以

        mediaElement = new Audio(file);
        mediaElement.play();
        audio.setMediaElementSource(mediaElement);
    }

    analyser = new THREE.AudioAnalyser(audio, fftSize);

    bufferLength = analyser.analyser.frequencyBinCount;
    dataArray = new Uint8Array(bufferLength);
    analyser.getFrequencyData(dataArray);
    dataArray = analyser.data

    // 获取 ID 为 "oscilloscope" 的画布
    canvas = document.getElementById("oscilloscope");
    canvasCtx = canvas.getContext("2d");

    var canvasTexture = new THREE.CanvasTexture(canvas);
    // 创建平面
    var geometry = new THREE.PlaneGeometry(18, 2);
    var material = new THREE.MeshPhongMaterial({
        map: canvasTexture, // 设置纹理贴图
        transparent: true,
    });
    // 创建一个矩形平面网模型，Canvas画布作为矩形网格模型的纹理贴图
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // 绘制一个当前音频源的示波器
    function draw() {
        drawVisual = requestAnimationFrame(draw);
        canvasTexture.needsUpdate = true;

        analyser.getFrequencyData(dataArray);
        dataArray = analyser.data

	// 绘制柱形
        // canvase背景色透明
        canvasCtx.fillStyle = 'rgba(255, 255, 255, 0)';
        canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

        var barWidth = canvas.width / bufferLength * 4
        var barHeight;
        var x = 0;

        for (var i = 0; i < bufferLength; i++) {
            barHeight = dataArray[i];

            canvasCtx.fillStyle = 'rgb(' + barHeight + 100 + ',200,130)';
            canvasCtx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
            x += barWidth + 1;
        }

	// 绘制波形
        // canvasCtx.lineWidth = 2;
        // canvasCtx.strokeStyle = "rgb(0, 0, 0)";

        // canvasCtx.beginPath();

        // var sliceWidth = (canvas.width * 1.0) / bufferLength;
        // var x = 0;

        // for (var i = 0; i < bufferLength; i++) {
        //     var v = dataArray[i] / 128.0;
        //     var y = (v * canvas.height) / 2;

        //     if (i === 0) {
        //         canvasCtx.moveTo(x, y);
        //     } else {
        //         canvasCtx.lineTo(x, y);
        //     }

        //     x += sliceWidth;
        // }

        canvasCtx.lineTo(canvas.width, canvas.height / 2);
        canvasCtx.stroke();
    }

    draw();
}
```


threejs实现音频可视化效果

[threejs网址](https://threejs.jaclynshi.top/)
## 核心原理
### 深度图
用于记录场景中每个像素的深度信息。

通过深度图可以看出图片中距离每个像素距离摄像机的距离，距离越近越靠近镜头，距离越远就是图片中所谓的背景。

可以通过深度图对图片中的每个像素根据鼠标移动实时计算偏移量，深度较浅的（即靠近镜头的物体）偏移量增加，与背景偏移形成一定的层次感，这样就能实现图片3D效果。
### 着色器
着色器（Shader）是一种在图形渲染管线中运行的程序，它可以对渲染过程中的顶点、像素等进行各种计算和处理，从而实现各种复杂的渲染效果。

着色器通常分为两种类型：顶点着色器和片元着色器。顶点着色器是用来计算顶点的位置、法线、纹理坐标等信息，并将其传递给片元着色器进行处理；片元着色器则是用来计算每个像素（片元）的颜色值，通常根据纹理、灯光、材质等信息进行计算，并输出最终颜色值到屏幕上。
## 核心代码
```js
// 加载图片纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('assets/xx.webp');
const deptTexture = textureLoader.load('assets/xx_depth.png');

// 创建平面
const geometry = new THREE.PlaneGeometry(19.2, 10.8);
// 鼠标坐标
const mouse = new THREE.Vector2();
// 着色器材料
const material = new THREE.ShaderMaterial({
    uniforms: {
        uTexture: { value: texture },
        uDepthTexture: { value: deptTexture },
        uMouse: { value: mouse }
    },
    vertexShader: `
        varying vec2 vUV;
        void main() {
          vUV = uv;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }`,
        fragmentShader: `
        uniform sampler2D uTexture;
        uniform sampler2D uDepthTexture;
        uniform vec2 uMouse;
        varying vec2 vUV;
        void main() {
          vec4 color = texture2D(uTexture, vUV);
          vec4 depth = texture2D(uDepthTexture, vUV);
          float depthValue = depth.r;
      	  float x = vUV.x + uMouse.x*0.01*depthValue;
      	  float y = vUV.y + uMouse.y*0.01*depthValue;
      	  vec4 newColor = texture2D(uTexture, vec2(x, y));
      	  gl_FragColor = newColor;
    	}`
});

const plane = new THREE.Mesh(geometry, material);
scene.add(plane);
```


首页图片转3D效果

## threejs官网速度慢
[github](https://github.com/mrdoob/three.js/) git clone threejs最新版本到本地
```js
git clone https://github.com/mrdoob/three.js.git
npm install // 安装依赖包
npm run start // 运行
```
即可在本地运行threejs，选择example目录即可在本地查看threejs案例，也可在本地查看文档，速度相当快～

## 创建第一个threejs项目
这里使用vite前端构建工具，vite快的原因是在开发过程中可以更快的启动项目，更便于开发；
```js
npm init vite@latest my-vue-app --template vue
npm install // 安装依赖包
npm install three --save // 安装threejs
npm run dev // 运行
```

## 快速生成代码
vscode添加相关ai插件，可以自动生成代码

## threejs核心
threejs使用WebGL作为底层技术
Three.js的核心原理主要包括：

场景图的构建：Three.js使用一个树状的场景图来表示3D空间中的各种元素，如摄像机、灯光、几何体、材质和纹理等。

WebGL渲染管线：Three.js封装了WebGL渲染流程，让开发者能够更简单地使用WebGL。

动画渲染：Three.js提供了一种方法来更新场景中的对象，以实现动画效果。

事件处理：Three.js提供了事件处理机制，如鼠标事件、键盘事件等，以便用户与3D场景交互。

扩展和插件：Three.js有一个活跃的社区，许多开发者为Three.js提供扩展和插件，以增强其功能。
```js
// 引入Three.js
import * as THREE from 'three';
 
// 创建场景
const scene = new THREE.Scene();
 
// 创建摄像机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); 
/* 参数说明：
fov: 摄像机视野的角度，通常定义为视野的垂直视角度，范围从0到180度。
aspect：画布的宽度与高度的比例。
near：摄像机的近剪裁面，这个距离以外的物体不会被渲染。
far：摄像机的远剪裁面，这个距离以内的物体不会被渲染。
/*

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建几何体，threejs有很多几何体类型，具体参考文档
// 这里创建了立方体
const geometry = new THREE.BoxGeometry();
 
// 创建材质，threejs有很多材质类型，具体参考文档
// 这里创建基础颜色值为0x00ff00的基础材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
 
// 创建物体
// 创建了一个基础颜色值为0x00ff00的基础材质的立方体
const cube = new THREE.Mesh(geometry, material);
 
// 将物体添加到场景
scene.add(cube);
 
// 设置摄像机位置
// 物体摄像机默认添加到场景时坐标为(0,0,0),所以将摄像机设置z轴为5时，摄像机的位置在物体的正前方，这样才能清楚地看到物体
camera.position.z = 5;
 
// 渲染循环
function animate() {
 //requestAnimationFrame 是一个浏览器的API，用于在下一个动画帧上执行某段代码
  requestAnimationFrame(animate);
 
  // 旋转物体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
 
  // 渲染场景
  renderer.render(scene, camera);
}
 
animate();
```





初识threejs

[React 学习脑图](http://naotu.baidu.com/file/d6a1de7d6dba966b444803df37ae5dfb?token=818c09a7a8ab4fb8)
敬请期待...

学习脑图汇总

## 节流防抖
```js
## 防抖的意思就是短时间内大量触发同一事件，只执行一次
## 防抖示例代码
function debounce(fn, delay) {
  let timer = null; //借助闭包，可以保存变量
  return function() {
    if(timer) {
        clearTimeOut(timer);
    }
    timer = setTimeOut(fn, delay)
  }
}

## 节流的意思就是短时间内大量触发同一事件，在函数执行一次之后，该函数在指定时间期限之内不再工作，直至过了这段时间才重新生效
## 节流示例代码
function throttle(fn, delay) {
  let valid = true;
  return function() {
      if(!valid) return false;
      valid = false;
      setTimeOut(() => {
          fn();
          valid = true;
      }, delay);
  }
}
```

## js数据类型
```js
基本数据类型：Undefined, Null, Number, String, Boolean
引用数据类型：对象，数组和函数
两者的区别是存储位置不同：基本数据类型存放在栈中，引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始位置。
```

## js有哪些内置对象
```js
1. 值属性：Infinity, NaN, undefined, null字面量
2. 函数属性：eval(), parseFloat(), parseInt()...
3. 基本对象：Object, Function, Boolean, Error...
4. 数字和日期对象：Number, Math, Date
5. 字符串：String, RegExp
6. 可索引的集合对象：Array
7. 使用键的集合对象：Map, Set, WeakMap, WeakSet
...

js三大对象：本地对象，内置对象，宿主对象
本地对象：需要通过new来创建所需的实例对象（Object, Array, Date, RegExp, Function, Boolean等）
内置对象：无需实例化，内置对象是本地对象的子集（Global, Math, JSON）
宿主对象：所有的DOM和BOM对象都属于宿主对象（Window, Document）

Object类型
属性：constructor, prototype
实例方法：toString(), toLocaleString(), valueOf()
静态方法：
Object.assign(target, ...sources)
把一个或多个原对象可枚举，自有属性值复制到目标对象中，返回值为目标对象。
Object.create(proto [,propertiesObject])
创建一个对象，其原型为prototype，同时可添加多个属性。
Object.defineProperty(obj, prop, descriptor)
在一个对象上定义一个新属性或修改一个现有属性，并返回该对象。
Object.defineProperties(obj, props)
Object.seal(obj)/Object.isSealed(obj)
密封对象，防止其修改现有属性的配置特性
Object.freeze(obj)/Object.isFrozen(obj)
完全冻结对象，在seal的基础上，属性值也不可以修改
getOwnPropertyDescriptor(obj, prop)
获取目标对象上某自有属性的配置特性
Object.getOwnPropertyNames(obj)
获取目标对象上的全部自有属性名组成的数组
Object.getPrototypeOf(obj)
获取指定对象的原型
Object.setPrototypeOf(obj, proto)
设置目标对象的原型为另一个对象或null，返回该目标对象
Object.keys(obj)
获取目标对象上所有可枚举属性组成的数组
Object.preventExtensions(obj)/Object.isExtensible(obj)
使某一对象不可扩展，也就是不能为其添加新属性

Array
Array对象属性
1. length
2. constructor
3. prototype
Array对象方法
1. concat()  用于连接两个或多个数组，不改变现有的数组
2. join() 	 把数组中所有元素放入一个字符串，元素通过制定分隔符进行分割
3. push()    向数组的末尾添加一个或多个元素，并返回新的数组长度
4. pop()     删除数组的最后一个元素，并返回被删除的这个元素
5. shift()   把数组的第一个元素从其中删除，并返回被移除的这个元素
6. unshift() 向数组的开头添加一个或更多的元素，并返回新的数组长度
7. reverse() 用于颠倒数组中元素的顺序
8. sort()    排序
9. slice(start, [,end])  截取
10. splice(index,howmany [,item1,item2...] 删除从index开始的hownamy个元素，并用可选参数列表中声明的一个或多个值来替换那些被删除的元素。
map()
filter()
some()
every()
forEach()
reduce()

Date类型
FullYear, Month, Date, Day, Hours, Minutes, Seconds, Milliseconds，每个日期分量都有一个get和set方法

RegExp类型
对象属性：global(g), ignoreCase(i), lastIndex(规定下次匹配的起始位置)
对象方法：
compile() 用于在脚本执行过程中的正则表达式的匹配
exec()    用于检索字符串中的正则表达式的匹配
test()    用于检测一个字符串是否匹配某个模式
正则表达式的String对象的方法有：search(), match(), replace()和split()

Function类型
对象属性  
1. arguments
arguments.length: 获取函数实参的个数
arguments.callee: 获取函数对象本身的引用
arguments.callee.length: 获取函数形参的个数
对象方法  toString()  将函数体转换成对应的字符串

Boolean类型
常用方法： toString(), valueOf()

Number类型
常用方法：toString(), toLocaleString(), valueOf()

String类型
对象属性：length
对象方法：
charAt()      返回指定位置的字符
charCodeAt()  返回在指定的位置的字符的Unicode编码
indexOf       检索字符串，返回指定字符串在字符串中首次出现的位置
lastIndexOf() 从后向前索引字符串，返回指定字符串在字符串中首次出现的位置
match()       返回指定位置的字符
replace()     
search()      
toLowerCase()&toUpperCase()
concat()
split()
slice()       参数1，截取的起始位置，必选；参数2，截取的结束位置，可选
substr()      参数1，截取的起始位置，必选；参数2，截取的字符串长度，可选
substring()   参数1，截取的起始位置，必选；参数2，截取的结束位置，可选；与slice和substr的不同之处是substring()不接受负的参数

Global对象（全局对象）
属性：Infinity, NaN, Undefined,
方法：
encodeURI & encodeURIComponent  后者编码的字符范围大
decodeURI & decodeURIComponent
parseInt(string, radix)
parseFloat()
isFinite(number)
isNaN(number)
Number(object)  把对象的值转换成数字
String(object)  把对象的值转换成字符串

Math对象
常用方法： 
Math.abs()    取绝对值
Math.ceil()   向上取整
Math.floor()  向下取整
Math.round()  四舍五入取整
Math.random() 生成0-1之间的随机数
Math.max(x,y) 取x,y中较大的那个
Math.min(x,y)

JSON对象
对象方法：
JSON.parse()       将字符串反序列化成对象
JSON.stringify()   将一个对象解析成JSON字符串
```
# 数组操作
## 新建数组 
```js
数组内可以存放任意类型的数据
1. let arr = new Array(); //先创建数组对象再赋值
2. let arr = new Array(123, "string", true); //直接实例化创建
3. let arr = [123, "string", true]; //推荐
```
## 增删改查
### 栈方法 push & pop 增删数组元素(从尾部)

```js
let push1 = arr.push(456, "hi"); //返回更新后的数组长度
let pop1 = arr.pop(); //弹出尾部元素，并返回弹出的元素
```
### 队列 shift & unshift 方法增删数组元素(从头部)

```js
let unshift1 = arr.unshift(111, "abc"); //返回更新后的数组长度
let shift1 = arr.shift(); //返回弹出元素
```
### splice 增删数组元素

```js
splice(arg1, arg2, arg3, …)第一个参数定义了新添加元素的位置，第二个参数定义应删除多少元素，其余参数定义要添加的元素，并返回一个包含已删除项的数组
```
### concat 合并数组
`let concat1 = temp1.concat(temp2, temp3);`
### slice 裁剪数组

```js
slice(arg1, arg2) 返回一个新数组，第一个参数为元素选取开始位置，第二个参数为元素选取结束位置
```
## 查找定位
### 查数组中的最大值和最小值
```js
Math.max.apply(null, arr) 来获取数组中的最大值。
Math.min.apply(null, arr) 来获取数组中的最小值。
```
### 查找索引
indexOf(arg1, arg2)方法在数组中搜索元素值并返回其位置。arg1 为搜索元素，arg2 可选从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。

lastIndexOf(arg1,arg2) 与 indexOf() 类似，但是从数组结尾开始搜索。arg2 可选从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到开头。

findIndex() 方法返回通过测试函数的第一个数组元素的索引。
```js
let temp = [1,2,3,4,5,4,3,2];
let pos1 = temp.indexOf(4); //第一次出现4的位置
console.log(pos1); //3
let pos2 = temp.lastIndexOf(4); //最后一次出现4的位置
console.log(pos2); //5
let temp = [1,35,67,8];
//返回第一个大于10的元素索引
let findIndex1 = temp.findIndex(function(value){
    return value > 10;
});
console.log(findIndex1); //1
```
### 查找值
find(function(arg1,arg2,arg3)) 方法返回通过测试函数的第一个数组元素的值。arg1 为数组元素值， arg2 为数组元素索引，arg3 为数组本身。

```js
let temp = [1,35,67,8];
// 返回第一个大于10的值 
let find1 = temp.find(function(value){
    return value > 10;
});
console.log(find1);//35
```
## 数组转换
### toString 数组转字符串（toString()方法把每个元素转换为字符串，然后以逗号连接输出显示）
`let toString1 = arr.toString();`
### join 数组转字符串 (可以指定分隔符，默认使用逗号作为分隔符)
`let join = arr.join('*');`
### split 字符串转数组(split(arg1,arg2),第一个参数为分隔符，指定从哪儿进行分隔的标记；第二个参数指定要返回数组的长度)
`let split =temp.split("-", 2);`
### 对象转数组
```js
let obj = {key1: "value1", key2: "value2"}
// 对象的键组成数组 
let trans1 = Object.keys(temp); //["key1", "key2"]
// 对象的值组成数组 
let trans2 = Object.values(temp); //["value1", "value2"]
// 键值对组成的数组 
let trans3 = Object.entries(temp); //[["key1", "value1"], ["key2", "value2"]]
```
### 数组转对象

```js
let temp = ["a","b"];
let trans1 = {...temp}; //{0: "a", 1: "b"}
let trans2 = Object.assign({}, temp); //{0: "a", 1: "b"}
```
## 数组排序

```js
//字符串可以直接进行排序
arr.sort();
//数字排序
// sort比值函数修正：降序
let temp = [40, 100, 1, 5, 25, 10];
temp.sort(function(a, b){
    return b-a
});

// sort比值函数修正：升序 
let temp = [40, 100, 1, 5, 25, 10];
temp.sort(function(a, b){
    return a-b;
});
```
### reverse 数组反转
temp.reverse();
## 数组迭代

```js
temp.forEach(function(value, index, array){});
temp.map(function(value, index, array){});
filter(function(arg1,arg2,arg3){})方法创建一个包含通过指定条件的数组元素的新数组, arg1 为数组元素值， arg2 为数组元素索引，arg3 为数组本身，不会更改源数组。
every(function(arg1,arg2,arg3){})方法测试数组的所有元素是否通过了置顶条件。arg1 为数组元素值， arg2 为数组元素索引，arg3 为数组本身。不会更改源数组。
some(function(arg1,arg2,arg3){})方法测试数组中是否有元素通过了指定条件的测试。不会更改源数组。
reduce(function(arg1,arg2,arg3,arg4){})接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。arg1 上一次调用回调返回的值，或者是提供的初始值（initialValue）,arg2 为数组元素值， arg3 为数组元素索引，arg4 为数组本身。不会更改源数组。
//普遍for循环
for(let i=0,len=temp.length;i<len;i++) {}
for(let i in temp){}
for(let i of temp){}
```
## 检测类型

```js
1. temp1 instanceof Array
2. Array.isArray(temp1)
3 .Object.prototype.toString.call(temp1)
```

## 洗牌算法

```js
let temp = [1,3,5,6,7,2,4];
temp.sort(() => {
    return Math.random() - 0.5;
})
```
## 数组去重

```js
// es6的set方法
let unique1 = Array.from(new Set(temp));
// 遍历数组
for(let i=0; i<temp.length;i++){
    if(newArr.indexOf(temp[i]) === -1){
        newArr.push(temp[i]);
    }
}
```

## 数组扁平化

```js
对于[1, [1,2], [1,2,3]]这样多层嵌套的数组，我们如何将其扁平化为[1, 1, 2, 1, 2, 3]这样的一维数组呢：

1.ES6的flat()
const arr = [1, [1,2], [1,2,3]]
arr.flat(Infinity)  // [1, 1, 2, 1, 2, 3]

2.序列化后正则
const arr = [1, [1,2], [1,2,3]]
const string = `[${JSON.stringify(arr).replace(/\[|\]/g, '')}]`
JSON.parse(string)

3.递归
const arr = [1, [1,2], [1,2,3]]
function flat(arr){
    let result = [];
    for(const item of arr){
        item instanceof Array ? result = result.concat(flat(item)) : result.push(item)
    }
    return result;
}
flat(arr);

4.reduce()递归
function flat(arr) {
  return arr.reduce((prev, cur) => {
    return prev.concat(cur instanceof Array ? flat(cur) : cur)
  }, [])
}
flat(arr) 

5.迭代+展开运算符
let arr = [1, [1,2], [1,2,3]]
while (arr.some(Array.isArray)) {
  arr = [].concat(...arr);
}
console.log(arr)  // [1, 1, 2, 1, 2, 3]

```









js知识点汇总

## 冒泡排序

```js
// 冒泡排序: 比较两个相邻的项，如果第一个大于第二个则交换他们的位置,元素项向上移动至正确的顺序，就好像气泡往上冒一样
冒泡demo:
function bubbleSort(arr) {
    let len = arr.length;
    for (let i = 0; i < len; i++) {
        for (let j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j+1]) {        //相邻元素两两对比
                [arr[j + 1], arr[j]] = [arr[j], arr[j + 1]];
            }
        }
    }
    return arr;
}
```
## 选择排序

```js
/ 选择排序：大概思路是找到最小的放在第一位，找到第二小的放在第二位，以此类推 算法复杂度O(n^2)
选择demo:
function selectionSort(arr) {
	let len = arr.length;
	let minIndex;
	for (let i = 0; i < len - 1; i++) {
		minIndex = i;
		for (let j = i + 1; j < len; j++) {
			if (arr[j] < arr[minIndex]) {     //寻找最小的数
			    minIndex = j;                 //将最小数的索引保存
		    }
		}
		[arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];
	}
return arr;
}
```

## 排序

```js
//冒泡排序(相邻两个数字进行比较)
function bubbleSort(arr) {
  if(!Array.isArray(arr) || arr.length <= 1) return;
  let lastIndex = arr.length - 1;
  while(lastIndex > 0) {
    let flag = true, k = lastIndex;
    for(let j = 0; j < k; j++) {
      if(arr[j] > arr[j + 1]) {
        flag = false;
        lastIndex = j;
        [arr[j], arr[j+1]] = [arr[j+1], arr[j]];
      }
    }
    if(flag) break;
  }
  return arr;
}

//选择排序（找最小或者最大的数字作为首元素）
function selectSort(arr) {
  let length = arr.length;
  if(!Array.isArray(arr) || length <= 1) return;
  for(let i =0; i < length; i++) {
    let minIndex = i;
    for(let j = i + 1; j < length; j++) {
      if(arr[minIndex] > arr[j]) {
        minIndex = j;
      }
    }
    [arr[minIndex], arr[i]] = [arr[i], arr[minIndex]];
  }
  return arr;
}

//插入排序(插入到前面已经排好序的有序序列中)
function insertSort(arr) {
  let length = arr.length;
  if(!Array.isArray(arr) || length <= 1) return;
  for(let i = 1; i < length; i++) {
    let temp = arr[i];
    let j = i;
    while(j - 1 >= 0 && arr[j-1] > temp) {
      arr[j] = arr[j-1];
      j--;
    }
    arr[j] = temp;
  }
  return arr;
}

//希尔排序(把数组按下标的一定增量分组，对每组使用直接插入排序)
function hillSort(arr) {
  let length = arr.length;
  if(!Array.isArray(arr) || length <= 1) return;
  for (let gap = parseInt(length >> 1); gap >= 1; gap = parseInt(gap >> 1)) {
    for(let i = gap; i< length; i++) {
      let temp = arr[i];
      let j = i;
    	while(j - gap >= 0 && arr[j-gap] > temp) {
          arr[j] = arr[j-gap];
          j -= gap;
        }
      arr[j] = temp;
    }
  }
  return arr;
}

//归并排序（递归的将数组两两分开直到只包含一个元素，然后将数组排序合并)
function mergeSort(arr) {
  let length = arr.length;
  if(!Array.isArray(arr) || length === 0) return;
  if(length === 1) return arr;
  let mid = parseInt(length >> 1),
      left = arr.slice(0, mid),
      right = arr.slice(mid, length);
  return merge(mergeSort(left), mergeSort(right));
}

function merge(leftArr, rightArr) {
  let result = [],
  	leftLength = leftArr.length,
  	rightLength = rightArr.length,
  	il = 0,
 	ir = 0;
  while(il < leftLength && ir < rightLength) {
    if(leftArr[il] < rightArr[ir]) {
      result.push(leftArr[il++]);
    }else {
      result.push(rightArr[ir++]);
    }
  }
  while(il < leftLength) {
    result.push(leftArr[il++]);
  }
  
  while(ir < rightLength) {
    result.push(rightArr[ir++]);
  }
  return result;
}

//快速排序最佳（将要排序的数据分割成独立的两部分，其中一部分的所有数据都比另一部分的所有数据都要小，然后再按此方法对这两部分数据分别进行快速排序，这个排序过程可以递归进行）
function quickSort(arr, start, end) {
  let length = arr.lenght;
  if(!Array.isArray(arr) || length <= 1 || start >= end) return ;
  let index = partition(arr, start, end);
  quickSort(arr, start, index -1);
  quickSort(arr, index+1, end);
  return arr;
}
function partition(arr, start, end) {
  let pivot = arr[start];
  while(start < end) {
    while(arr[end] >= pivot && start < end) {
      end--;
    }
    arr[start] = arr[end];
    while(arr[start] < pivot && start < end) {
      start ++;
    }
    arr[end] = arr[start];
  }
  arr[start] = pivot;
  return start;
}

let arr1 = [1,2,4,3];
let result = quickSort(arr1, 0, 3);
console.log(result)
```

## 给出一个 32 位的有符号整数，你需要将这个整数中每位上的数字进行反转。

```js
int reverse(int x) {
    int num = 0;
    while(x){
        int pop = x%10;
        if (num > INT_MAX/10 || (num == INT_MAX / 10 && pop > INT_MAX % 10)) return 0;
        if (num < INT_MIN/10 || (num == INT_MIN / 10 && pop < INT_MIN % 10)) return 0;
        num = num * 10 + pop;
        x /= 10;
    }
    return num;
}
```

## 给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那两个整数，并返回他们的数组下标。

```js
unordered_map<int,int> m;
for(int i=0;i<nums.size();i++)
{
    if(m.find(target-nums[i]) != m.end())      
        return {m[target-nums[i]] , i};       

    m[nums[i]]=i; 
}
return {};
```

## 判断一个整数是否是回文数

```js
if(x < 0 || (x % 10 == 0 && x != 0)){
    return false;
}
int num = 0;
while(x > num){
    num = num * 10 + x % 10;
    x /= 10;
}

return x == num || x == num / 10;
```

js基础算法实现

## html5介绍
`html5中的一些有趣的新特性：1. 用于绘画的canvas元素  2.用于媒介回放的video和audio元素 3.对本地离线存贮的更好的支持 4.新的特殊内容元素，article、footer、header、nav、section 5.新的表单控件，calendar、date、time、email、url、search`

`html5声明：<!DOCTYPE html>`

## canvas
### 介绍
`canvas只是图形容器，用于图形的绘制，通过脚本（通常是JavaScript）来完成。可以通过多种方法使用canvas绘制路径、盒、圆、字符以及添加图像。`


```js
    html代码：<canvas id="myCanvas" width="200" height="100">
    
    js代码：
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
    //首先找到canvas元素
    //然后创建context对象
    //getContext("2d")对象是内建的html5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
    //fillStyle属性可以是css颜色，渐变，或图案，默认是#000000（黑色）
    //fillRect(x,y,width,height)方法定义了矩形当前的填充方式
```

`canvas是个二维网格，左上角坐标为（0,0）`

### 路径

```js
    //在canvas上画线，使用两种方法：moveTo(x,y)定义线条开始坐标；lineTo(x,y)定义线条结束坐标；绘制线条必须使用“ink”方法，就像stroke()
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
    
    //在canvas中绘制圆形，使用arc(x,y,r,start,stop),在绘制圆形时使用“ink”的方法，比如stroke()或者fill()。
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();
```

### 文本

```js
    //使用canvas绘制文本，重要的属性和方法：font定义字体；fillText(text,x,y)在canvas上绘制实心的文本；stroke(text,x,y)在canvas上绘制空心的文本。
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.font = "30px Arial";
    ctx.fillText("hello world", 10, 50);
    //空心字体
    ctx.strokeText("hello world", 10, 50);
```

### 渐变

```js
    //线性渐变：createLinearGradient(x,y,x1,y1);
    //径向渐变：createRadialGradient(x,y,r,x1,y1,r1);
    //当我们使用渐变对象，必须使用两种或两种以上的停止颜色。addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    //创建渐变
    var grd = ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    //填充渐变
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
```

### 图像

```js
    //drawImage(image,x,y);
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = documnet.getElementById("scream");
    ctx.drawImage(img,10,10);
```

## SVG
`SVG是可伸缩矢量图形，使用XML格式定义图形`

`SVG与canvas两者间的区别：SVG是一种使用XML描述2D图形的语言。canvas通过JavaScript来绘制2D图形。SVG基于XML，所以可以为某个元素添加JavaScript事件处理器。`

## 拖放

```js
    function allowDrop(ev) {
        ev.preventDefault();
    }
    
    function drag(ev) {
        ev.dataTransfer.setData("Text", ev.target.id);
    }
    
    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
    
    //html代码
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <br> 
    <img loading="lazy" id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

    //首先设置元素为可拖放，把draggable属性设置为true
    //规定当元素被拖动时会发生什么，ondragstart属性调用一个函数，drag（event），他规定了被拖放的数据。dataTransfer.setData()方法设置被拖数据的数据类型和值。Text是一个DOMString表示要添加到drag object的拖放数据的类型。
    //ondragover事件规定在何处放置被拖动的数据。默认的无法将数据/元素放置到其他元素中，如果需要设置允许放置，我们必须阻止对元素的默认处理方式event.preventDefault();
    //当放置被拖数据时，会发生drop事件
```

### video

```js
    //video元素支持三种视频格式：MP4，WebM和Ogg
    <video width="320" height="240" controls> 
        <source src="movie.mp4" type="video/mp4"> 
        <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持Video标签。 
    </video>
```

### audio

```js
    //audio元素支持三种音频格式文件：MP3，Wav和Ogg
    <audio controls> 
        <source src="horse.ogg" type="audio/ogg"> 
        <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 
    </audio>
```

### 语义元素
`无语义元素：div，span`

`语义元素：form，table，img清楚地定义了他的内容`

### web存储
`web存储，一个比cookie更好的本地存储方式。web存储更加的安全和快速，这些数据不会被保存在服务器上。`

`客户端存储数据的两个对象为：localStorage：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动删除；sessionStorage：用户临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除这些数据。`


```js
    //不管是localStorage，还是sessionStorage，可使用的API都相同，以localStorage为例
    localStorage.setItem(key, value);//保存数据
    localStorage.getItem(key);//读取数据
    localStorage.removeItem(key);//删除单个数据
    localStorage.clear()//删除所有数据
    localStorage.key(index);//得到某个索引的key
    
    //可以用JSON.stringify()来存储对象数据，将对象转换为字符串,JSON.parse()将字符串转换为JSON对象
```

### webSocket
`webSocket是html5开始提供的一种在单个TCP连接上进行全双工通讯的协议。webSocket允许服务端主动向客户端推送数据，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。`

`webSocket对象的属性，readyState：0表示连接尚未建立，1表示连接已建立，可以进行通信，2表示连接正处在关闭，3表示连接已经关闭或者连接不能打开。`


```js
    var Socket = new WebSocket(url, [protocol]);//创建webSocket对象，url指定连接的url，第二个参数是可选的，指定了可接受的子协议
    //webSocket事件
    Socket.onopen //连接建立时触发
    Socket.onmessage //客户端接收服务端数据时触发
    Socket.onerror //通信发生错误时触发
    Socket.onclose //连接关闭时触发
    
    //webSocket方法
    Socket.send() //使用连接发送数据
    Socket.close() //关闭连接
```

`webSocket协议本质上是一个基于TCP的协议。为了建立一个webSocket连接，客户端浏览器首先要向服务端发送一个HTTP请求，这个请求和通常的HTTP请求不同，包含了一些附加头信息，服务端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务端的webSocket连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会存在知道客户端或者服务端的某一方主动的关闭连接。`

html5学习笔记

`一些重要的css3模块：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画`

## css3边框

```css
    border-radius：10px;   //设置圆角边框,如果只指定一个值，那么将生成4个圆角；指定4个值：左上角，右上角，右下角，左下角；指定三个值：左上角，右上角和左下角，右下角；指定两个值：左上角和右下角，右上角和左下角
    box-shadow: 10px 10px 5px #888888;  //设置边框阴影：水平阴影的位置，垂直阴影的位置，模糊距离，阴影的大小，阴影的颜色，从外层的阴影改变阴影内侧阴影
    border-image
```

## 背景

```css
    background-image:url position position repeat,url position position repeat;
    //position代表right，bottom，left，top四个中的一个，可以通过background-position: position position来设置；repeat代表no-repeat,repeat两个中的一个，可以通过background-repeat:repeat来设置。
    
    background-size: 80px 60px;
    //可以指定像素或百分比大小，指定的大小相对于父元素的宽度和高度的百分比的大小。
    
    background-origin: border-box | padding-box | content-box;
    //指定了背景图像的位置区域
    
    background-clip: border-box | padding-box | content-box;
    //背景裁剪属性是从指定位置开始绘制
```

## 渐变

```css
    //线性渐变：linear-gradient:向下/向上/向左/向右/对角方向
    //径向渐变：radial-gradient:由他们的中心定义
    
    //线性渐变默认是从上到下
    background-image:linear-gradient(direction, color-stop1, color-stop2,...);
    //从左到右direction：to right；对角direction: to bottom right;
    //使用角度：linear-gradient(angle, color-stop1, color-stop2,...);
```

## 文本效果

```css
    text-shadow和box-shadow类似
    text-overflow: clip(截取） | ellipsis （移除部分省略号）
    word-wrap: break-word; //强制换行
    word-break: keep-all | break-all,单词拆分换行
```

## 字体

```css
    <style> 
        @font-face { 
            font-family: myFirstFont; 
            src: url(sansation_light.woff); 
        } 
        div { 
            font-family:myFirstFont; 
        } 
    </style>
```

## 2D转换

```css
    //2D变换方法：
    //translate()方法，根据X和Y位置给定的参数，从当前元素位置移动
    transfrom: translate(50px, 100px);
    
    //rotate()方法，在一个给定度数顺时针旋转的元素
    transform: rotate(30deg);
    
    //scale()方法，该元素增加或减少的大小，取决于宽度X和高度Y的参数
    transform: scale(2,3);
    
    //skew()包含两个参数值，分别表示X轴和Y轴倾斜的角度
    transform:skew(30deg,20deg);
    
    //matrix()有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
```

## 3D转换

```css
    translate3d(x,y,z);
    translateX(x);
    translateY(y);
    translateZ(z);
    
    scale3d(x,y,z);
    scaleX(x);
    scaleY(y);
    scaleZ(z);
    
    rotate3d(x,y,z,angle);
    rotateX(angle);
    rotateY(angle);
    rotateZ(angle);
```

## 过渡
`transition: property(规定应用过渡的css属性的名称） duration（定义过渡效果花费的时间，默认是0）`

## 动画

```css
    //@keyframes
    
    @keyframes myfirst
    {
        from {background: red;}
        to {background: yellow;}
        //from to等同于0%和100%
    }
    
    //也可以用半分比
    @keyframes myfirst
    {
        0% {background: red;}
        25% {background: yellow;}
        50% {background: blue;}
        100% {background: green;}
    }
    
    div{
        animation: myfirst 5s;
        //使用animation定义在具体的元素上
    }
```

## 用户界面

```css
    box-sizing: border-box;
    //高度和宽度应用于元素的所有的部分：内容、内边距和边框
    box-sizing: conetent-box;
    //高度和宽度只应用于元素的内容
```

## 弹性盒子

```css
    //弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器。
    
    flex-direction: row(横向从左到右排列) | row-reverse(反转横向排列) | column(纵向排列) | column-reverse(反转纵向排列)
    
    justify-content: flex-start | flex-end | center | space-between | space-around
    
    align-items: flex-start | flex-end | center | baseline | stretch
    
    flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;
    
    align-content: flex-start | flex-end | center | space-between | space-around | stretch
    
    flex
```

## 多媒体查询

```css
    @media screen and (min-width: 320px) {
    }
```

css3学习笔记

## TS的出现
### TypeScript是JavaScript的超集，是具有静态类型的JavaScript。
### TypeScript增强了代码的可维护性，因为正常写代码的时候鼠标悬浮上去就会给各种提示，告诉你当前这个变量接收什么类型的，如果类型不正确编译就不通过，直接提示错误信息；其次主流的框架Vue/React都全面支持了TypeScript（关键是国内大部分公司也开始陆陆续续使用了TypeScript开发项目），这门语言确实很好，但是需要学习成本...

## 运行条件
### 目前JavaScript可以在浏览器或node环境下直接运行，TypeScript是不能直接在浏览器或node环境下直接运行的，因为不认识。那怎么样才能认识TS呢？其实就是需要一些工具将类型擦除，那么最后生成的就是JS代码，就可以直接运行在以上两个环境了。
- esbuild
- swc
### 以上两种工具在类型擦除的时候不会进行类型检查，比如你定义了type A = numbbbber;这里的number是拼错了，但是以上两种工具不会报错提示类型numbbbber不存在，所以速度会比较快
- tsc
- babel
### 以上两种工具会进行类型检查。以上四种工具的使用方法可以查官网，最后就是生成一个新的可执行的js文件
### 也可以直接运行ts文件，可以在一些在线编辑器，比如playcode.io...也可以在本地使用ts-node,swc-node工具

## 数据类型
||数据类型|
|-|-|-|
|JS数据类型|null、undefined、string、number、boolean、bigint、symbol、Object（包括Array、Function、Date...）|
|TS数据类型|以上所有JS的数据类型+void、nerver、enum、unknown、any+自定义类型type、interface|
### JS的数据类型是具体的值的类型，TS的数据类型是集合
```js
// js
let a = 1;

//ts
type number = 1 | 1.1 | ...
type Object = {?} | Array | Function | Sting | Number | Boolean | RegExp ...
// 类就是构造函数，比如Array，Function...
```
### Object太大了一般都不会用到，以及String，Number，Boolean，这些构造函数只用于包装对象，正常开发中不用他们
```js
// 包装对象
var n = 12;
console.log(n.toFixed(2));  //12.00
// 本身n是个number类型，n.toFixed的时候其实是对n进行new Number()的操作
```

## 如何在TS中描述对象的数据类型？
### 基本对象
- class/constructor
- type | interface
```js
// class/constructor
const a: Array<number> = [1,2]

// type
type Person = {
    name: string
    age: number
}

// 索引签名
type A1 = {
    [k: string]: number
}

//等价于Record泛型
type A2 = Record<string, number>

const p1: Person = {
    name: 'jaclyn',
    age: 25
}

const A3:A1 = {
    xxx: 123
}
```
### 其他对象
- class(构造函数)
```js
const d: Date = new Date();
const r: RegExp = new RegExp('a+b');
const r1: RegExp = /a+b/;
const m: Map<string,number> = new Map();
const wm: WeakMap<{name: string},number> = new WeakMap();
const s: Set<number> = new Set();
const ws: weakSet<{name:string}> = new weakSet();
```


## 如何描述数组对象？
### 由于Array太大不清晰所以TS开发者一般使用string[],Array<?>,[string, string]来描述数组
```js
type A = string[]  <==>   type A = Array<string>  // Array<string>就是泛型
type D = [string, string, string]  // 三元组
```

## 如何描述函数对象？
### 由于Function太不精确，所以TS开发者一般用() => ？来描述函数
```js
type fn = (a: number, b: number) => void
type fn2 = (a:string, b: string) => string

const uFn:fn = (x, y) => {
    console.log('hello')
}

const uFn2:fn2 = (x, y) => {
    return [x,y].join(' ');
}

uFn(1,2)
console.log(uFn2("hello", "jaclyn"))

// 箭头函数没有this，如何使用this
type Person = {
    name: string
    age: number
}

type fnWithThis = (this: Person, name: string) => void

const fnThis: fnWithThis = function() {
    console.log(this.name)
}
// 这里使用的是普通函数，如果使用箭头函数，这里的this指向的就是GlobalThis

const x:Person = {
    name: 'jaclyn',
    age: 25
}

fnThis.call(x, 'xxx');  // jaclyn

// 带有属性的函数声明
type fnWithProps = {
    (a: number, b: number) => number
    props: string
}

const a: fnWithProps = (x, y) => {
    return x + y;
}

a.props = "hello"
console.log(a.props)
```

## any和unknow的区别
### any代表任何类型，ts绝大部分规则对any不生效；unknow代表不知道是什么类型，比如从外部获取到的数据可以通过一个unknow类型的变量进行接收并对变量进行as断言，这样就可以使用对应的方法
```js
const uk: unknow = ajax.get('xxx'); 
const b = uk as string;   // 类型断言
b.split('a');  // 因为进行了断言所以就可以使用string下的split方法
```

## nerver类型怎么用？
### 一般nerver类型就是不能用了，因为他就是个空集，一般可以作为类型判断
```js
type A = string | number | boolean;
const B: A = ajax.get('xxx');
if(typeof B === 'string') {
	// 此时B就是个string类型
}else if(typeof B === number) {
	// 此时B就是个number类型
}else if(typeof B === boolean) {
	// 此时B就是个boolean类型
}else {
	// 此时B就是个nerver类型不能被使用
}
```

## enum的使用
### 一般在需要被映射的时候使用，如果需要遍历就正常看做是个对象使用for in进行key的遍历就行了
```js
enum A {
	todo: 0,
	done, //不定义默认+1
}
let status: A = 0;
let status1: A = A.todo;
```

## type和interface什么时候用？
- type类型别名，只是给其他类型取个名字，type可以描述所有类型包括基本类型string，number，boolean等以及对象类型；interface是类型声明，interface只能描述对象类型，包括普通对象以及Array，Function，Date...interface就是为了迎合面向对象（oop）编程而出的
- type不可扩展，不可重复赋值；interface可扩展，重复赋值的话会自动合并。所以一般对外api尽量使用interface，方便别人扩展，对内api尽量用type，防止代码分散

## 提示类型系统有哪些运算？
### 联合类型（A | B）
### 联合类型就是并的意思，可以是A也可以是B，所以不确定类型到底属于哪一种，所以需要类型收窄，使用的方法包括：
- js方法：typeof对简单类型的判断，instanceof对象类型的判断
- ts方法：类型谓词/类型判断 is
- ts方法：x.kind（添加一个同名的可辨别的简答类型的key）
- ts方法：断言，断言了就类似强制性的属于某种类型

```js
// typeof
const f1 = (a: number | string) => {
    if(typeof a === 'number') {
        //此时a就是number类型
    }else if(typeof a === 'string') {
        // 此时a就是string类型
    }else {
        // 此时a就是nerver类型
    }
}

// instanceof
const f2 = (a: Date | Date[]) => {
    if(a instanceof Date) {
        // 此时a就是Date类型
    }else if(a instanceof Array) {
        // 此时a就是Array类型
    }else {
        // 此时a就是nerver类型
    }
}

// 以上type和instanceof可以判断基本类型以及复杂类型，但是不能判断ts类型
// 通过key in的方式判断
type Person = {
    name: string
    age: number
}

type Animal = {
    x: string
}

const f3 = (a: Person | Animal) => {
    if('name' in a) {
        // Person类型
    }else if('x' in a) {
        // Animal类型
    }else // 此时a就是nerver类型
}

// 通过类型谓词is，可以支持所有ts类型，但是很麻烦
type Rect = {
    width: number
    height: number
}

type Circle = {
    center: number
    radius: number
}

const fn = (a: Rect | Circle) => {
    if(isRect(a)) {
        // 此时a就是Rect类型
    }else if(isCircle(a)) {
        // 此时a就是Circle类型
    }
}

function isRect(x: Rect | Circle) : x is Rect {
    return 'width' in x && 'height' in x;
    // 这里的逻辑判断可以随便写，最后返回true|false就行，关键是x is Rect
}

function isCircle(x: Rect | Circle) : x is Circle {
    return 'center' in x && 'radius' in x;
}

// 通过a.kind，其实就是添加一个同名的可辨别的简单类型的key
type Circle = { kind: 'Circle', x?: [number, number] };
type Square = { kind: 'Square', x: number }; // 这里都有x所以不能通过key in的方式判断
type Shape = Circle | Square;
const fn2 = (x: Shape) => {
    if(x.kind === 'Circle') {
        // 此时a就是Circle类型
    }else if(x.kind === 'Square') {
        // 此时a就是Square类型
    }else // 此时a就是nerver类型
}
```

### 交叉类型
### type使用&模拟继承；interface使用extends实现继承
```js
type A = {
    name: string
}

type B = {
    age: number
} & A

interface C {
    name: string
}

interface D extends C {
    age: number
} 

const a: B = {
    age: 13,
    name: 'hh'
}

const b: D = {
    age: 13,
    name: 'hh'
}
```












TypeScript笔记

ES6笔记2

## let和const
`var是在当前函数内，let和const是在代码块内有效，所谓代码块就是用{}包裹起来的。var存在“变量提升“现象，即变量可以在声明之前使用，值为undefined。而let只能在声明变量之后使用。let和const存在暂时性死区，不允许重复声明`

`块级作用域：ES5只有全局作用于和函数作用域，没有块级作用域，这带来很多不合理的场景。第一种场景，内层变量可能会覆盖外层变量。第二种场景，用来计数的循环变量泄漏为全局变量。`

`块级作用域和函数声明：ES5规定，函数只能在顶层作用域和函数作用域中声明，不能在块级作用域声明。但ES6允许，但应避免在块级作用域内声明函数，如果确实需要，也应该写成函数表达式，而不是函数声明语句。ES6块级作用域必须有大括号，如果没有就不存在块级作用域。`

`const声明一个只读的常量，一旦声明，常量的值就不会改变。const实际上保证的不是变量的值不得改动，而是变量指向的内存地址所保存的数据不得改动，对于简单类型的数据（数值、字符串、布尔值）,值就保存在变量指向的那个内存地址，因此等同于常量。但对于符合类型的数据（主要是对象和数组）变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。`

`顶层对象的属性：顶层对象在浏览器指的是window对象，在Node指的是global对象，顶层对象的属性和全局变量挂钩带来的问题是首先没法在编译时就报出变量未声明的错误，只有运行时才能知道（因为全局变量可能是顶层对象的属性创造的，而属性的创造是动态的）；其次程序员很容易不知不觉地创建了全局变量，最后顶层对象的属性是导出可以读写的，这非常不利于模块化编程。ES6为了改变这一点，var命令和function命令声明的全局变量依旧是顶层对象的属性；另一方面规定，let命令、const命令、class命令声明的全局变量不属于顶层对象的属性。`

## 解构赋值
`解构赋值可以运用到数组、对象、字符串、数值和布尔值、函数参数上。以上情况如果结构不成功变量的值就等于undefined，如果右边的值不具备Iterator接口（不可迭代）会报错。ES6内部使用严格相等运算符（===），判断一个位置是否有值，只有当一个数组成员严格等于undefined，默认值才会生效。对象的结构复制与数组有一个重要的不同，数组的元素是按次序排列的，变量的取值有它的位置决定，而对象的属性没有次序，变量必须与属性同名，才能取到正确的值，取不到undefined。字符串的结构复制是将字符串转换成一个类似数组的对象，这样就可以获取字符串的length属性。结构数值和布尔值的时候是将其先转为对象。`

`解构赋值的用途：1. 变换变量的值 2. 从函数返回多个值 3. 函数参数的定义 4. 提取Json数据 5. 遍历map结构，可以通过for(let [key, value] of map) 6. 输入模块的指定方法`

## 字符串的扩展
`ES6 为字符串添加了遍历器接口，使得字符串可以被for...of循环遍历。实例方法：includes(),startsWith(),endsWith(),传统上，JavaScript只有indexOf方法，以上三个方法都支持第二个参数，表示开始索引的位置。endsWith的第二个参数表示针对前n个字符，其他两个方法针对从第n个位置知道字符串结束。trimStart(),trimEnd(),他们的行为与trm()一致，消除头部或者尾部的空格，不会修改原字符串。matchAll()返回一个正则表达式在当前字符串的所有匹配。replaceAll(searchValue,replacement)替换所有的匹配,searchValue是搜索模式，可以是一个字符串也可以是一个全局的正则表达式（必须带有g修饰符不然报错）。`

## 函数的扩展
`rest参数：（...变量名）用于获取函数的多余参数，这样就不用使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。`


```js
    //arguments变量的写法
    function sortNumbers() {
        return Array.from(arguments).sort();
        //arguments对象不是数组，二十一个类似数组的对象，所以为了使用数组的方法，必须使用Array.from先将其转为数组。
    }
    
    //rest参数的写法
    const sortNumbers = (...numbers) => numbers.sort();
```

`箭头函数：使用注意点：1. 箭头函数没有自己的this对象 2. 不可以当做构造函数 3. 不可以使用arguments对象，可以用...rest替代 4. 不可以使用yield命令。对于普通函数来说，内部的this指向函数运行时所在的对象，但是对于箭头函数，内部的this就是定义时上层作用域中的this，箭头函数的this指向是固定的，普通函数的this指向是可变的。箭头函数没有自己的this，所以不能用call(),apply(),bind()这些方法去改变this的指向。不适用场合：对象的属性，需要动态this的时候，函数体很复杂建议使用普通函数，提高代码可读性。`

`Function.prototype.toString()方法返回函数代码本身`

## 数组的扩展
`扩展运算符（spread）是三个点（...）它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。Array.from方法用于将两类对象转为真正的数组：类似数组的对象和可遍历对象。对于还没有部署该方法的浏览器，可以用Array.prototype.slice方法替代。`

```js
    //类似数组的特征必须有length属性的对象
    ES5: var arr1 = [].slice.call(arrayLike);
    ES6: let arr = Array.from(arrayLike);
    
    //Array.from开可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
    Array.from(arrayLike, x => x * x);
    //如果map函数里面用到了this关键字，还可以传入Array.from的第三个参数，用来绑定this。
```

```js
    //Array.of方法用于将一组值转换为数组
    Array.of(3,11,8);
    
    //这个方法主要的目的是弥补数组构造函数Array()的不足，因为参数个数的不同会导致Array()的行为有差异
    Array()    //[]
    Array(3)   //[,,,]
    Array(3,11,8)    //[3,11,8]
```

```js
    //数组实例的find()和findIndex()
    //find()返回符合条件的数组成员,没找到则返回undefined，findIndex返回符合条件的成员位置，没找到返回-1,回调函数可以接受三个参数（value,index,arr）
    [1,5,10,15].find(function(value,index,arr){
        return value > 9;
    })
    
    //两个方法都可以接受第二个参数，用来绑定回调函数的this对象
    function f(v) {
        return v > this.age;
    }
    
    let person = { name: 'John', age: 20 };
    [10, 12, 26, 15].find(f, person);   //26
    
    //这两个方法都可以发现NaN，弥补了数组的indexOf方法的不足。
    [NaN].indexOf(NaN)    //-1
        [NaN].findIndex(y => Object.is(NaN, y))    //0
```

`fill()方法使用给定值填充一个数组，数组中已有的元素会被全部抹去，fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。`

`entries(),keys(),values()用于遍历数组,他们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别就是keys()是键名的遍历，values()是对键值的遍历，entries()是对键值对的遍历。如果不使用for...of循环，可以手动调用遍历器对象的next对象，进行遍历。`

`Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。第二个参数可选，表示搜索的起始位置。没有这个方法之前我们通常使用数组的indexOf方法，但是indexOf方法有两个缺点，一是不够语义化，他的含义是找到参数值的第一个出现位置，让所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符(===)进行判断，这会导致对NaN的误判。另外Map和Set数据结构有一个has方法。Map结构的has方法，是用来查找键名的，Map.prototype.has(key);Set结构的has方法，是用来查找值的，Set.prototype.has(value)。`

`flat()用于将嵌套的数组‘拉平’，百年城一维的数组，该方法返回一个新数组，不会影响原数据。可以将flat()方法的参数写成一个整数，表示想要拉平的层数。flat(Infinity)表示不管有多少层嵌套，都要转成一维数组。flatMap()方法对原数组的每个成员执行一个函数，然后对返回值组成的数组执行flat()方法，该方法返回一个新数组，不会影响元数据。flatMap()只能展开一层数组，该方法的参数是一个遍历函数可以接受三个参数，分别是(value,index,arr),还可以有第二个参数，用来绑定遍历函数里面的this。`

## 对象的扩展
`对象的每个属性都有一个描述对象(Descriptor)，用来控制该属性的行为,Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。包括value,writable,enumerable,configurable。如果enumerable为false就表示某些操作会忽略当前属性。for...in循环：只遍历对象自身的和继承的可枚举的属性；Object.keys返回对象自身的所有可枚举的属性的键名；JSON.stringify只串行化对象自身的可枚举的属性；Object.assign忽略enumerable为false的属性只拷贝对象自身的可枚举的属性。`

`ES6一共有5种方法可以遍历对象的属性：for...in循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）；Object.keys(obj)返回一个数组，包括对象自身（不含继承的）所有可枚举属性（不含Symbol属性）的键名；Object.getOwnPropertyNames(obj)返回一个数组，包含对象自身的所有属性（不含Symbol属性，但是包括不可枚举属性）的键名；Object.getOwnPropertySymbols(obj)返回一个数组，包含对象自身的所有Symbol属性的键名；Reflect.ownKeys(obj)返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是Symbol或字符串，也不管是否枚举。`

`super关键字：this关键字总是指向函数所在的当前对象，super指向当前对象的原型对象。super关键字只能用在对象的方法之中，用在其他地方都会报错。`

```js
    const proto = {
        foo: 'hello'
    };
    
    const obj = {
        foo: 'world',
        find() {
            return super.foo;
            //super.foo等同于Object.getPrototypeOf(this).foo或Object.getPrototypeOf(this).foo.call(this);
        }
    }
    
    Object.setPrototypeOf(obj, proto);
    //setPrototypeOf设置对象原型
    obj.find()       //'hello'
    
    
    const proto = {
        x: 'hello',
        foo() {
            console.log(this.x);
        }
    };
    
    const obj = {
        x: 'world',
        foo() {
            super.foo();
        }
    }
    
    Object.setPrototypeOf(obj, proto);
    obj.foo()    //'world'
    //因为绑定的this还是当前对象obj
```

### 对象的新增方法
`Object.is()：ES5比较两个值是否相等，只有两个运算符，相等运算符（==）和严格相等运算符（===）。他们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。ES6 Object.is用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致，不同之处只有两个：一是+0不等于-0，二是NaN等于自身。`

`Object.assign()方法用于对象的合并，将元对象（对象本身不包含继承属性）的所有可枚举属性，复制到目标对象（浅拷贝，只是拷贝对象的引用，修改原对象属性值会影响目标对象）。传一个参数直接返回该参数，如果参数不是对象，则会转成对象，然后返回。由于undefined和null无法转成对象，所以如果他们作为第一个参数就会报错，但是作为非第一个参数，就会跳过，不会报错。其他类型的值（即数值、字符串和布尔值）不在首参数，也不会报错，但是，除了字符串会以数组形式，拷贝入目标对象，其他值都不会产生效果。`

```js
    //同名属性会被替换
    const target = { a: { b: 'c', d: 'e' } }
    const source = { a: { b: 'hello' } }
    Object.assign(target, source);
    //{ a: { b: 'hello' } }
    
    //数组的处理
    Object.assign([1,2,3], [4,5]);
    //[4,5,3]
    
    //取值函数的处理
    //Object.assign()只能进行值的复制，如果要复制的值是一个取值函数，那么将求值后再复制
    const source = {
        get foo() { return 1 }
    };
    const target = {};
    Object.assign(targe, source);
    // { foo: 1 }
```

```js
    //Object.assign()方法很多用处
    //1. 为对象添加属性
    class Point {
        constructor(x, y) {
            Object.assign(this, {x,y});
        }
    }
    
    //2. 为对象添加方法
    Object.assign(SomeClass.prototype, {
        someMethod(arg1, arg2) {
            ...
        },
        anotherMethod() {
            ...
        }
    });
    
    //3. 克隆对象
    function clone(origin) {
        return Object.assign({}, origin);
    }
    //如果想要保持继承链，可以采用下面的代码
    function clone(origin) {
        let originProto = Object.getPrototypeOf(origin);
        return Object.assign(Object.create(originProto), origin);
    }
    
    //4. 合并多个对象
    const merge = (target, ...sources) => Object.assign(target, ...sources);
    
    //5. 为属性指定默认值
    const DEFAULTS = {
        logLevel: 0,
        outputFormat: 'html'
    };
    function processContent(options) {
        options = Object.assign({}, DEFAULTS, options);
        //如果两者有同名属性，则options的实行值会覆盖FEFAULTS的属性值
     }
```

`ES5的Object.getOwnPropertyDescriptor()方法会返回某个对象属性的描述对象（descriptor），ES2017引入了Object.getOwnPropertyDescriptors()方法，返回指定对象所有自身属性（非继承属性）的描述对象。该方法主要是为了解决Object.assign()无法正确拷贝get属性和set属性的问题。该方法配合Object.defineProperties()方法，就可以实现正确拷贝。`

```js
    const source = {
        set foo(value) {
            console.log(value);
        }
    };
    
    const shallowMerge = (target, source) => Object.defineProperties(
        target,
        Object.getOwnPropertyDescriptors(source)
    );
    
    //Object.getOwnPropertyDescriptors()方法的另一个用处，是配合Object.create()方法，将对象属性克隆到一个新对象。
    const clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnProPertyDescriptors(obj));
```

`JavaScript语言的对象继承是通过原型链实现的，ES6提供了更多原型对象的操作方法。`

```js
    //__proto__属性，用来读取或设置当前对象的原型对象（prototype）
    //ES5的写法
    const obj = {
        method: function() { ... }
    };
    obj.__proto__ = somOtherObj;
    
    //ES6的写法
    var obj = Object.create(someOtherObj);
    obj.method = function() { ... };
    //__proto__是个内部属性，所以不要使用这个属性，而是使用Object.setPrototypeOf()(写操作)、Object.setPrototypeOf()(读操作)、Object.create()(生成操作)代替。
```

`Object.keys()：返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键名。Object.values():返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值。Object.entries():返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值对数组。Object.entries()的基本用途是遍历对象的属性，另一个用处是，将对象转为真正的Map结构,const map = new Map(Object.entries(obj));`

```js
    //自己实现Object.entries方法
    //Generator函数的版本
    function* entries(obj) {
        for( let key of Object.keys(obj) ) {
            yield [key, obj[key]];
        }
    }
    
    //非Generator函数的版本
    function entries(obj) {
        let arr = [];
        for ( let key of Object.keys(obj) ) {
            arr.push([key, obj[key]]);
        }
        return arr;
    }
```

`Object.fromEntries()方法是Object.entries()的逆操作，用于将一个键值对数组转为对象，因此特别适合将Map结构转为对象。`









ES6笔记

### 跨域问题可以从前端本地调用线上api时webpack配置proxy代理或后端使用cors跨域资源共享配置或nginx等代理服务器配置转发从而得到解决

### 这里着重记录下前端如何通过webpack配置proxy代理
```js
//在webpack配置文件中添加devServer配置
devServer: {
	proxy: {
      		"/api": {
        		target: '域名例如https://xxx.com/',
        		changeOrigin: true,
        		secure: false,
        		pathRewrite: {
          			"^/api": ""
        		}
      		}
    	}
}
```

#### proxy中定义的/api是匹配所有请求中带有/api前缀的请求进行转发配置，例如localhost:3000/#/api/getList接口包含前缀/api，所以会走到上面的转发配置中，配置的target属性就是你需要转接到的api地址，例如本地想要请求的域名是https://xxx.com，所有的接口都是这个域名下的，那么target就设置成该域名，pathRewrite中配置的"^/api": ""，意思就是因为我们需要通过/api前缀去匹配那些需要转发的请求，但是如果添加了/api前缀，但真是的接口地址中并没有包含/api，那么请求转发后会找不到接口地址，因为多了个/api前缀，需要做的就是把/api前缀去掉

#### 举个例子
#### 我需要访问的接口地址是https://xxx.api.com下面的地址，按照上面进行配置之后
#### 例如当前有个接口是https://xxx.api.com/getList
#### https://xxx.api.com/getList本身并不包含/api，但是请求的时候我加上/api前缀，为了就是能把当前请求匹配到并进行转发配置，所以我的请求是例如axios({url: /api/getList});其实我应该要访问的是axios({url: /getList});但是我加了/api前缀之后系统就会匹配到当前请求需要进行转发，转发的时候又把/api前缀去掉了，所以转发玩之后我请求的地址就是https://xxx.api.com/getList，没有问题。
#### 这个过程就是把本地的请求localhost:3000/#/api/getList转发到https://xxx.api.com/getList



跨域问题

## 跳转方式
### 问题描述：首页->A->B->首页，常见的问题是B进行了一系列的操作之后需要回到首页，此时回到首页后不管是点击返回键还是左滑返回不能直接关闭当前应用。目前开发的h5应用基本都是单页应用(spa)，不管是什么浏览器（微信，支付宝等），都存在路由栈的概念。
### 解决方式：需要正确认识push & replace，合理利用这两个API，push是往路由栈中加入当前路由，replace是替换当前路由，如果是B页面返回到首页，首页跳转到的任何页面使用push，从首页跳转到的页面都是用replace方式跳转到其他页面，这样B跳转回首页后首页返回就是直接关闭当前应用。

### 问题描述：h5页面返回键不允许返回上一页
### 解决方法：
```js
        history.pushState(null, null, document.URL); 
        window.addEventListener('popstate', function () { 
            history.replaceState(null, null, document.URL); 
        });
```

### 问题描述：h5页面，A页面pushBpushCreplaceD结果页，结果页返回到首页A，首页A返回关闭当前h5页面。
### 解决方法：
```js
useEffect(() => {
      // history.pushState(null, null, document.URL); 
      window.addEventListener('popstate', function () { 
          history.replaceState(null, null, document.URL); 
      });
      return function leave() {
          window.removeEventListener('popstate', function () { 
              history.replaceState(null, null, document.URL); 
          });
      }
  }, [])

  function goBack() {
    history.replaceState(null, null, document.URL); 
    router.goBack();
  }
```


## ios兼容性问题
### 问题描述：ios不能解析时间格式YYYY-MM-DD
### 解决方式：用YYYY/MM/DD代替

### 问题描述：ios中当输入框获取焦点后滚动屏幕光标会出现浮动的问题
### 解决方式：监听屏幕滚动事件，当屏幕滚动时输入框失去焦点
```js
useEffect(() => {
    document.body.addEventListener('touchmove', clearFocus, {passive: false})
    return () => {
        window.removeEventListener('touchmove', clearFocus, true);
    };
})

function clearFocus(e:any) {
    let ele:HTMLElement = document.activeElement as HTMLElement;
    if (ele) {
        ele?.blur();
    }
}

//addEventListener有三个参数，第一个参数事件名称，第二个参数执行函数，第三个参数默认为false，代表在冒泡阶段执行，true代表在捕获阶段执行，冒泡从里向外，捕获从外向里
```

### 问题描述：ios中对于双数宽度的可能会截取宽度？
### 解决方法：比如宽度设置成66%，右边框就会被截取，看似残缺，设成67%就能正常显示了，很神奇...

### 问题描述：ios对于font-weight识别粗细显示不一致
### 解决方式：暂无，不用数字设置粗细，用bold设置加粗不同页面显示的粗细也还是不一致，不知道是否跟ios有关系？

### 问题描述：文本两端对齐，ios对text-align-last: justify无效，需要使用伪元素
```js
span {
    &:first-child {
        display: inline-block;
        width: 100px;
        text-align: justify;
        // text-align-last: justify;
        // -moz-text-align-last: justify;
        &::after{
            content: "";
            display: inline-block;
            width: 100%;
            overflow: hidden;
        }
    }
    &:last-child{
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: keep-all;
        max-width: 78%;
    }
}
```

### 问题描述：ios底部margin不生效
#### 解决方法：使用padding


## 导航栏
### 问题描述：APP中的h5引用页面切换时顶部导航标题一栏不跟着一起页面
### 解决方法：可以使用AlipayJSBridge，[支付宝H5开放文档](https://myjsapi.alipay.com/jsapi/events/alipay-js-bridge-ready.html) 里面的API，隐藏原本的导航栏，自定义一个导航栏，这样导航标题栏就可以跟着一起切换了

### 问题描述：ios中切换页面title标题没有切换
### 解决方法：使用AlipayJSBridge中修改标题API

## 文本不垂直居中
### 问题描述：文本垂直居中时文本偏上
### 解决方式：display: flex; align-items: center; 此方法貌似也没有解决方法，待观察。

### 问题描述：键盘挡住输入框
#### 解决方式：输入框focus的时候，window.scrollTo(x,y)
```js
      //在全局的父组件中添加代码
      // 解决键盘弹起后遮挡输入框的问题
      window.addEventListener("resize", () => {
       if(typeof document === 'object'&& document.activeElement){
          if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
            window.setTimeout(() => {
              //@ts-ignore
              document.activeElement.scrollIntoViewIfNeeded();
            }, 0);
        }
       }
      })

      //如果上述代码不生效，将具体的input滑动到具体位置
      setTimeout(function(){
          window.scrollTo(0, 240); 
      }, 0);
```

### 问题描述：倒计时0和1的宽度不一致，长度会改变
#### 解决方式：修改倒计时字体，font-family: Helvetica Neue,Consolas, Monaco, monospace;



移动端开发中遇到的问题汇总

[项目连接](https://github.com/jaclynshi/socketIO)
不同于mqtt，发布订阅模式，只从一方发出。

用socket.io实现私聊功能

### 浏览器缓存（Browser Caching）是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据，整体上加速网页展示给用户。打开浏览器地调试模式->application左侧。

## http缓存
### 什么是http缓存
#### http缓存指的是: 当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。
#### 常见的http缓存只能缓存get请求响应的资源，对于其他类型的响应则无能为力
#### http缓存都是从第二次请求开始的。第一次请求资源时，服务器返回资源，并在respone header头中回传资源的缓存参数；第二次请求时，浏览器判断这些请求参数，命中强缓存就直接200，否则就把请求参数加到request header头中传给服务器，看是否命中协商缓存，命中则返回304，否则服务器会返回新的资源。
### http缓存的分类：
#### 根据是否需要重新向服务器发起请求来分类，可分为(强制缓存，协商缓存) 根据是否可以被单个或者多个用户使用来分类，可分为(私有缓存，共享缓存) 强制缓存如果生效，不需要再和服务器发生交互，而协商缓存不管是否生效，都需要与服务端发生交互
### 1.1、强制缓存
#### 强制缓存在缓存数据未失效的情况下（即Cache-Control的max-age没有过期或者Expires的缓存时间没有过期），那么就会直接使用浏览器的缓存数据，不会再向服务器发送任何请求。强制缓存生效时，http状态码为200。这种方式页面的加载速度是最快的，性能也是很好的，但是在这期间，如果服务器端的资源修改了，页面上是拿不到的，因为它不会再向服务器发请求了。
### 1.2、协商缓存
#### 当第一次请求时服务器返回的响应头中没有Cache-Control和Expires或者Cache-Control和Expires过期还或者它的属性设置为no-cache时(即不走强缓存)，那么浏览器第二次请求时就会与服务器进行协商，与服务器端对比判断资源是否进行了修改更新。如果服务器端的资源没有修改，那么就会返回304状态码，告诉浏览器可以使用缓存中的数据，这样就减少了服务器的数据传输压力。如果数据有更新就会返回200状态码，服务器就会返回更新后的资源并且将缓存信息一起返回。跟协商缓存相关的header头属性有（ETag/If-Not-Match 、Last-Modified/If-Modified-Since）请求头和响应头需要成对出现
### 为什么要使用HTTP缓存 ？
#### 1. 减少了冗余的数据传输，节省了网费。
#### 2. 缓解了服务器的压力， 大大提高了网站的性能
#### 3. 加快了客户端加载网页的速度
### 如何使用HTTP缓存 ？
#### 一般需要缓存的资源有html页面和其他静态资源：
#### 1、html页面缓存的设置主要是在<head>标签中嵌入<meta>标签，这种方式只对页面有效，对页面上的资源无效
```js
//1.1、html页面禁用缓存的设置如下：
<meta http-equiv="pragma" content="no-cache">
// 仅有IE浏览器才识别的标签，不一定会在请求字段加上Pragma，但的确会让当前页面每次都发新请求
<meta http-equiv="cache-control" content="no-cache">
// 其他主流浏览器识别的标签
<meta http-equiv="expires" content="0">
// 仅有IE浏览器才识别的标签，该方式仅仅作为知会IE缓存时间的标记，你并不能在请求或响应报文中找到Expires字段

//1.2、html设置缓存如下：
<meta http-equiv="Cache-Control" content="max-age=7200" />
// 其他主流浏览器识别的标签
<meta http-equiv="Expires" content="Mon, 20 Aug 2018 23:00:00 GMT" />
// 仅有IE浏览器才识别的标签
```
#### 2、静态资源的缓存一般是在web服务器上配置的，常用的web服务器有：nginx、apache。

## websql
#### websql这种方式只有较新的chrome浏览器支持，并以一个独立规范形式出现，主要有以下特点
#### - Web Sql 数据库API 实际上不是HTML5规范的组成部分；
#### - 在HTML5之前就已经存在了，是单独的规范；
#### - 它是将数据以数据库的形式存储在客户端，根据需求去读取；
#### - 跟Storage的区别是： Storage和Cookie都是以键值对的形式存在的；
#### - Web Sql 更方便于检索，允许sql语句查询；
#### - 让浏览器实现小型数据库存储功能；
#### - 这个数据库是集成在浏览器里面的，目前主流浏览器基本都已支持；
#### websql API主要包含三个核心方法：
#### - openDatabase : 这个方法使用现有数据库或创建新数据库创建数据库对象。
#### - transaction : 这个方法允许我们根据情况控制事务提交或回滚。
#### - executeSql : 这个方法用于执行真实的SQL查询。
#### openDatabase方法可以打开已经存在的数据库，不存在则创建
```js
var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024);
```
#### openDatabasek中五个参数分别为：数据库名、版本号、描述、数据库大小、创建回调。创建回调没有也可以创建数据库
#### database.transaction() 函数用来查询，executeSql()用于执行sql语句
#### 例如在mydatabase数据库中创建表t1：
```js
  var db = openDatabase(' mydatabase ', '1.0', 'Test DB', 2 * 1024 * 1024);  
   db.transaction(function (tx) {    
      tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');  
   });
```
#### 插入操作
```js
var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024);

   db.transaction(function (tx) { 
      tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');  
      tx.executeSql('INSERT INTO t1 (id, log) VALUES (1, "foobar")');  
      tx.executeSql('INSERT INTO t1 (id, log) VALUES (2, "logmsg")');  
   });
```
#### 在插入新记录时，我们还可以传递动态值，如：
```js
   var db = openDatabase(' mydatabase ', '2.0', 'my db', 2 * 1024);  
   db.transaction(function (tx) {    
     tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');  
     tx.executeSql('INSERT INTO t1 (id,log) VALUES (?, ?'), [e_id, e_log];  //e_id和e_log是外部变量
   });
```
#### 读操作，如果要读取已经存在的记录，我们使用一个回调捕获结果：
```js
   var db = openDatabase(mydatabase, '2.0', 'my db', 2*1024);     
	  db.transaction(function (tx) { 
      tx.executeSql('CREATE TABLE IF NOT EXISTS t1 (id unique, log)');  
      tx.executeSql('INSERT INTO t1 (id, log) VALUES (1, "foobar")');  
      tx.executeSql('INSERT INTO t1 (id, log) VALUES (2, "logmsg")');  
   });  
   db.transaction(function (tx) { 
      tx.executeSql('SELECT * FROM t1', [], function (tx, results) { 
      var len = results.rows.length, i;  
      msg = "<p>Found rows: " + len + "</p>";  
      document.querySelector('#status').innerHTML +=  msg;  
      for (i = 0; i < len; i++){ 
         alert(results.rows.item(i).log );  
      } 
    }, null);  
   });
```


## indexDB
#### 通俗地讲，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。
### 操作步骤
#### 1. 创建/打开数据库。
#### 2. 在数据库中创建一个对象仓库（object store）。
#### 3. 启动一个事务，并发送一个请求来执行一些数据库操作，像增加或提取数据等。
#### 4. 通过监听正确类型的 DOM 事件以等待操作完成。
#### 5. 在操作结果上进行一些操作（可以在 request 对象中找到）
#### 打开数据库
```js
var db = null;
var request = window.indexedDB.open("MyTestDatabase");
request.onerror = function(event) {
  // 错误处理
  console.log(' 打开数据库报错');
};
request.onsuccess = function(event) {
  // 成功处理
  db = event.target.result;
  console.log('打开数据库成功');
};
```
#### 创建和更新数据库版本号
#### 如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneeded。这时通过事件对象的target.result属性，拿到数据库实例。
```js
var db = null;
request.onupgradeneeded = function (event) {
  db = event.target.result;
}
```
#### 新建数据库
#### 新建数据库与打开数据库是同一个操作。如果指定的数据库不存在，就会新建。不同之处在于，后续的操作主要在upgradeneeded事件的监听函数里面完成，因为这时版本从无到有，所以会触发这个事件。
#### 通常，新建数据库以后，第一件事是新建对象仓库（即新建表）。
```js
request.onupgradeneeded = function(event) {
  db = event.target.result;
  var objectStore = null;
  if (!db.objectStoreNames.contains('imgLists')) {
    objectStore = db.createObjectStore('imgLists', { keyPath: 'id' });
    // unique name可能会重复
    objectStore.createIndex('name', 'name', { unique: false });
  }
}
//创建一张叫imgLists的表格，主键是id。
```
#### 写入数据
#### 新增数据指的是向对象仓库写入数据记录。这需要通过事务完成。
```js
// new 一个blob对象
var obj1 = {hello: "world"};
var blob = new Blob([JSON.stringify(obj1, null, 2)], {type : 'application/json'});

function add() {
  var request = db.transaction(['imgLists'],  'readwrite')
    .objectStore('imgLists')
    .add({ id: 1, name: '图片1', path: '/static/image', blob:  blob});

  request.onsuccess = function (event) {
    console.log('数据写入成功');
  };

  request.onerror = function (event) {
    console.log('数据写入失败');
  }
}
```
#### 查询数据
#### 查询数据也是通过事物完成。
```js
function read() {
   var transaction = db.transaction(['imgLists']);
   var objectStore = transaction.objectStore('imgLists');
   // 用户读取数据，参数是主键
   var request = objectStore.get(1);

   request.onerror = function(event) {
     console.log('事务失败');
   };

   request.onsuccess = function( event) {
      if (request.result) {
        console.log(request.result);
      } else {
        console.log('未获得数据记录');
      }
   };
}
```
#### 遍历数据
#### 遍历数据表格的所有记录，要使用指针对象 IDBCursor。
```js
function readAll() {
  var objectStore = db.transaction('imgLists').objectStore('imgLists');

   objectStore.openCursor().onsuccess = function (event) {
     var cursor = event.target.result;

     if (cursor) {
       console.log(cursor);
       cursor.continue();
    } else {
      console.log('没有更多数据了！');
    }
  };
}
```
#### 更新数据
```js
function update() {
  var request = db.transaction(['imgLists'], 'readwrite')
    .objectStore('imgLists')
    // 主动更新主键为1
    .put({ id: 1, name: '图片2',  path: '/static/image2'});

  request.onsuccess = function (event) {
    console.log('数据更新成功');
  };

  request.onerror = function (event) {
    console.log('数据更新失败');
  }
}
```
#### 删除数据
```js
function remove() {
  var request = db.transaction(['imgLists'], 'readwrite')
    .objectStore('imgLists')
    .delete(1);

  request.onsuccess = function (event) {
    console.log('数据删除成功');
  };
}

remove();
```
#### 创建/使用索引
#### 索引的意义在于，可以让你搜索任意字段，也就是说从任意字段拿到数据记录。如果不建立索引，默认只能搜索主键（即从主键取值）。
```js
objectStore.createIndex('name', 'name', { unique: false });
```
```js
    function findIndex() {
      var transaction = db.transaction(['imgLists'], 'readonly');
      var store = transaction.objectStore('imgLists');
      var index = store.index('name');
      var request = index.get('图片1');

      request.onsuccess = function (e) {
        var result = e.target.result;
        if (result) {
          console.log(result);
        } else {
          // ...
        }
      }
    }
```

## cookie
#### Cookie（或者Cookies），指一般网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）。cookie一般通过http请求中在头部一起发送到服务器端。一条cookie记录主要由键、值、域、过期时间、大小组成，一般用户保存用户的认证信息。cookie最大长度和域名个数由不同浏览器决定
#### 不同域名之间的cookie信息是独立的，如果需要设置共享可以在服务器端设置cookie的path和domain来实现共享。浏览器端也可以通过document.cookie来获取cookie，并通过js浏览器端也可以方便地读取/设置cookie的值。
## localstorage
#### localStorage是html5的一种新的本地缓存方案，目前用的比较多，一般用来存储ajax返回的数据，加快下次页面打开时的渲染速度。
```js
//localStorage核心API:
localStorage.setItem(key, value)	//设置记录
localStorage.getItem(key)		//获取记录
localStorage.removeItem(key)		//删除该域名下单条记录
localStorage.clear()			//删除该域名下所有记录
```
#### 值得注意的是，localstorage大小有限制，不适合存放过多的数据，如果数据存放超过最大限制会报错，并移除最先保存的数据。

## sessionstorage
#### sessionStorage和localstorage类似，但是浏览器关闭则会全部删除，api和localstorage相同，实际项目中使用较少。

## application cache
#### application cahce是将大部分图片资源、js、css等静态资源放在manifest文件配置中。当页面打开时通过manifest文件来读取本地文件或是请求服务器文件。HTML5 使用ApplicationCache 接口可以解决由离线带来的部分难题。前提是你需要访问的web页面至少被在线访问过一次。
#### 使用缓存接口可为您的应用带来以下三个优势：
#### - 离线浏览 – 用户可在离线时浏览您的完整网站
#### - 速度 – 缓存资源为本地资源，因此加载速度较快。
#### - 服务器负载更少 – 浏览器只会从发生了更改的服务器下载资源。
#### 一个简单的离线页面主要包含以下几个部分：
#### index.html
```js
<html manifest="clock.manifest">
  <head>
    <title>AppCache Test</title>
    <link rel="stylesheet" href="clock.css">
    <script src="clock.js"></script>
  </head>
  <body>
    <p><output id="clock"></output></p>
    <div id="log"></div>
  </body>
</html>
```
#### clock.mainfest
```js
CACHE MANIFEST
#VERSION 1.0
CACHE:
clock.css
clock.js
```
#### clock.js和clock.css为独立的另外文件。   另外需要注意的是更新缓存。在程序中，你可以通过window.applicationCache 对象来访问浏览器的app cache。你可以查看 status 属性来获取cache的当前状态：
```js
var appCache = window.applicationCache;
switch (appCache.status) {
  case appCache.UNCACHED: // UNCACHED == 0
    return 'UNCACHED';
    break;
  case appCache.IDLE: // IDLE == 1
    return 'IDLE';
    break;
  case appCache.CHECKING: // CHECKING == 2
    return 'CHECKING';
    break;
  case appCache.DOWNLOADING: // DOWNLOADING == 3
    return 'DOWNLOADING';
    break;
  case appCache.UPDATEREADY:  // UPDATEREADY == 4
    return 'UPDATEREADY';
    break;
  case appCache.OBSOLETE: // OBSOLETE == 5
    return 'OBSOLETE';
    break;
  default:
    return 'UKNOWN CACHE STATUS';
    break;
};
```
#### 为了通过编程更新cache，首先调用 applicationCache.update()。这将会试图更新用户的 cache（要求manifest文件已经改变）。最后，当 applicationCache.status 处于 UPDATEREADY 状态时， 调用applicationCache.swapCache()，旧的cache就会被置换成新的。
```js
var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user’s cache.
…
if (appCache.status == window.applicationCache.UPDATEREADY) {
  appCache.swapCache();  // The fetch was successful, swap in the new cache.
}
```
#### 这里是通过更新menifest文件来控制其它文件更新的。

## cacheStorage
#### CacheStorage是在ServiceWorker的规范中定义的。CacheStorage 可以保存每个serverWorker申明的cache对象，cacheStorage有open、match、has、delete、keys五个核心方法，可以对cache对象的不同匹配进行不同的响应。
#### cacheStorage.has() 如果包含cache对象，则返回一个promise对象。 cacheStorage.open() 打开一个cache对象，则返回一个promise对象。 cacheStorage.delete() 删除cache对象，成功则返回一个promise对象，否则返回false。 cacheStorage.keys() 含有keys中字符串的任意一个，则返回一个promise对象。 cacheStorage.delete() 匹配key中含有该字符串的cache对象，返回一个promise对象。
```js
caches.has('v1').then(function() {
  caches.open('v1').then(function(cache) {
      return cache.addAll(myAssets);
  });
}).catch(function() {
  someCacheSetupfunction();
});;
```
```js
var response;
var cachedResponse = caches.match(event.request).catch(function() {
  return fetch(event.request);
}).then(function(r) {
  response = r;
  caches.open('v1').then(function(cache) {
    cache.put(event.request, response);
  });  
  return response.clone();
}).catch(function() {
  return caches.match('/sw-test/gallery/myLittleVader.jpg');
});
```
```js
then.addEventListener('activate', function(event) {
  var cacheWhitelist = ['v2'];

  event.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (cacheWhitelist.indexOf(key) === -1) {
          return caches.delete(keyList[i]);
        }
      });
    })
  );
});
```


浏览器端缓存方法

## 常用正则表达式

```js
一、校验数字的表达式
数字：^[0-9]*$
n位的数字：^\d{n}$
至少n位的数字：^\d{n,}$
m-n位的数字：^\d{m,n}$
零和非零开头的数字：^(0|[1-9][0-9]*)$
非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(\.[0-9]{1,2})?$
带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})$
正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$
有两位小数的正实数：^[0-9]+(\.[0-9]{2})?$
有1~3位小数的正实数：^[0-9]+(\.[0-9]{1,3})?$
非零的正整数：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
非零的负整数：^\-[1-9][0-9]*$ 或 ^-[1-9]\d*$
非负整数：^\d+$ 或 ^[1-9]\d*|0$
非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
非负浮点数：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
非正浮点数：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
正浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
负浮点数：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮点数：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

校验字符的表达式
汉字：^[\u4e00-\u9fa5]{0,}$
英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
长度为3-20的所有字符：^.{3,20}$
由26个英文字母组成的字符串：^[A-Za-z]+$
由26个大写英文字母组成的字符串：^[A-Z]+$
由26个小写英文字母组成的字符串：^[a-z]+$
由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+
禁止输入含有~的字符：[^~\x22]+

三、特殊需求表达式
Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?
InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$
国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
电话号码正则表达式（支持手机号码，3-4位区号，7-8位直播号码，1－4位分机号）: ((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)
身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X：(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)
帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$
强密码(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
日期格式：^\d{4}-\d{1,2}-\d{1,2}
一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$
一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
钱的输入格式：
有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000"：^[1-9][0-9]*$
这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：^(0|[1-9][0-9]*)$
一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9]*)$
这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧。下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$
必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的：^[0-9]+(.[0-9]{2})?$
这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：^[0-9]+(.[0-9]{1,2})?$
这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$

备注：这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里
xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
中文字符的正则表达式：[\u4e00-\u9fa5]
双字节字符：[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
空白行的正则表达式：\n\s*\r (可以用来删除空白行)
HTML标记的正则表达式：<(\S*?)[^>]*>.*?|<.*? /> ( 首尾空白字符的正则表达式：^\s*|\s*$或(^\s*)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)
中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
IP地址：((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))
```

常用正则表达式

## nginx在应用程序中的作用
### - 解决跨域
### - 请求过滤
### - 配置gzip
### - 负载均衡
### - 静态资源服务器
### - ...

#### nginx是一个高性能的反向代理服务器
## 正向代理与反向代理
![微信图片_20220118104116.png](https://www.jaclynshi.top/img/1642478134634.png)
### 正向代理
#### 正向代理，意思是一个位于客户端和原始服务器之间的服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指向指定目标（原始服务器），然后代理向原始服务器转交请求并将获得的内容返回给客户端。
#### 正向代理是为我们服务的，即为客户端服务的，客户端可以根据正向代理访问到它本身无法访问到的服务器资源。
#### 正向代理对我们是透明的，对服务器是非透明的，即服务端并不知道自己收到的是来自代理的访问还是来自真实客户端的访问。

### 反向代理
#### 反向代理方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。
#### 反向代理是为服务端服务的，反向代理可以帮助服务器接收来自客户端的请求，帮助服务器做请求转发，负载均衡等。
#### 反向代理对服务器端是透明的，对我们是非透明的，即我们并不知道自己访问的是代理服务器，而服务器知道反向代理在为他服务。

## 基本配置
### 配置结构
![微信图片_20220118110050.png](https://www.jaclynshi.top/img/1642478134750.png)
```javascript
events { 

}

http 
{
    server
    { 
        location path
        {
            ...
        }
        location path
        {
            ...
        }
     }

    server
    {
        ...
    }

}
```
#### - main:nginx的全局配置，对全局生效
#### - events:配置影响nginx服务器或与用户的网络连接。
#### - http：可以嵌套多个server，配置代理，缓存，日志定义等绝大多数功能和第三方模块的配置。
#### - server：配置虚拟主机的相关参数，一个http中可以有多个server。
#### - location：配置请求的路由，以及各种页面的处理情况。
#### - upstream：配置后端服务器具体地址，负载均衡配置不可或缺的部分。
### 内置变量
|变量名|功能|
|-|-|
|$host|请求信息中的Host，如果请求中没有Host行，则等于设置的服务器名|
|$request_method|客户端请求类型，如GET、POST|
|$remote_addr|客户端的IP地址|
|$args|请求中的参数|
|$content_length|请求头中的Content-length字段|
|$http_user_agent|客户端agent信息|
|$http_cookie|客户端cookie信息|
|$remote_port|客户端的端口|
|$server_protocol|请求使用的协议，如HTTP/1.0、·HTTP/1.1`|
|$server_addr|服务器地址|
|$server_name|服务器名称|
|$server_port|服务器的端口号|

## 解决跨域
### 跨域的定义
#### 同源策略限制了从同一个源加载的文档脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通常不允许不同源间的读操作。
### 同源的定义
#### 如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。
### nginx解决跨域的原理
#### 例如：
#### 前端server的域名为：fe.server.com
#### 后端服务的域名为：dev.server.com
#### 现在我在fe.server.com对dev.server.com发起请求一定会出现跨域
#### 现在我们只需要启动一个nginx服务器，将server_name设置为fe.server.com然后设置相应的location以拦截前端需要跨域的请求，最后将请求代理回dev.server.com。如下面的配置：
```javascript
server { 
	listen	80;
	server_name	fe.server.com;
	location / {
		proxy_pass dev.server.com;
	}
}
```
#### 这样可以完美绕过浏览器的同源策略：fe.server.com访问nginx的fe.server.com属于同源访问，而nginx对服务端转发的请求不会触发浏览器的同源策略。

## 配置gzip
#### gzip是规定的三种标准http压缩格式之一。目前绝大多数的网站都在使用gzip传输html、css、javascript等资源文件。
#### 对于文本文件，gzip的效果非常明显，开启后传输所需流量大约会降至1/4 ~ 1/3。
#### 并不是每个浏览器都支持gzip的，如何知道客户端是否支持gizp呢，请求头中的Accept-Encoding来标识对压缩的支持。
![微信图片_20220118113504.png](https://www.jaclynshi.top/img/1642478134842.png)
#### 启用gzip同时需要客户端和服务端的支持，如果客户端支持gzip的解析，那么只要服务端能够返回gzip的文件就可以启用gzip了，我们可以通过nginx配置来让服务端支持gzip。下面的response中content-encoding:gzip,指服务端开启了gzip的压缩方式。
![微信图片_20220118113526.png](https://www.jaclynshi.top/img/1642478135215.png)
```javascript
    gzip                    on;
    gzip_http_version       1.1;        
    gzip_comp_level         5;
    gzip_min_length         1000;
    gzip_types text/csv text/xml text/css text/plain text/javascript application/javascript application/x-javascript application/json application/xml;
```
### gzip
#### - 开启或者关闭 gzip 模块
#### - 默认值为 off
#### - 可配置为 on / off
### gzip_http_version
#### - 启用 gzip 所需的http最低版本
#### - 默认值为 http/1.1
#### 这里为什么默认版本不是1.0呢？
#### http运行在tcp连接之上，自然也有跟tcp一样的三次握手、慢启动等特性。
#### 启用持久连接情况下，服务器发出响应后让tcp连接继续打开着。同一对客户/服务器之间的后续请求和响应可以通过这个连接发送。
#### 为了尽可能的提高http性能，使用持久连接就显得尤为重要了。
#### http/1.1默认支持tcp持久连接，http/1.0也可以通过显示指定Connection: keep-alive来启用持久连接。对于TCP持久连接上的 HTTP 报文，客户端需要一种机制来准确判断结束位置，而在 HTTP/1.0 中，这种机制只有 Content-Length。而在HTTP/1.1 中新增的 Transfer-Encoding: chunked 所对应的分块传输机制可以完美解决这类问题。
#### nginx同样有着配置chunked的属性chunked_transfer_encoding，这个属性是默认开启的。
#### Nginx 在启用了GZip的情况下，不会等文件 GZip 完成再返回响应，而是边压缩边响应，这样可以显著提高 TTFB(Time To First Byte，首字节时间，WEB 性能优化重要指标)。这样唯一的问题是，Nginx 开始返回响应时，它无法知道将要传输的文件最终有多大，也就是无法给出Content-Length这个响应头部。
#### 所以，在HTTP1.0中如果利用Nginx 启用了GZip，是无法获得Content-Length的，这导致HTTP1.0中开启持久链接和使用GZip只能二选一，所以在这里gzip_http_version默认设置为1.1。
### gzip_comp_level
#### - 压缩级别，级别越高压缩率越大，当然压缩时间也就越长（传输快但比较消耗cpu）。
#### - 默认值为 1
#### - 压缩级别取值为1-9
### gzip_min_length
#### - 设置允许压缩的页面最小字节数，Content-Length小于该值的请求将不会被压缩
#### - 默认值:0
#### - 当设置的值较小时，压缩后的长度可能比原文件大，建议设置1000以上
### gzip_types
#### - 要采用gzip压缩的文件类型(MIME类型)
#### - 默认值:text/html(默认不压缩js/css)

## 负载均衡
### nginx如何实现负载均衡
#### Upstream指定后端服务器地址列表
```javascript
upstream balanceServer {
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}
```
#### 在server中拦截响应请求，并将请求转发到Upstream中配置的服务器列表。
```javascript
    server {
        server_name  fe.server.com;
        listen 80;
        location /api {
            proxy_pass http://balanceServer;
        }
    }
```
### nginx实现负载均衡的策略
#### 轮询策略
#### 默认情况下采用的策略，将所有客户端请求轮询分配给服务端。这种策略是可以正常工作的，但是如果其中某一台服务器压力太大，出现延迟，会影响所有分配在这台服务器下的用户。
```js
upstream balanceServer {
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}
```
#### 最小连接数策略
#### 将请求优先分配给压力较小的服务器，它可以平衡每个队列的长度，并避免向压力大的服务器添加更多的请求。
```js
upstream balanceServer {
    least_conn;
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}
```
#### 最快响应时间策略
#### 依赖于NGINX Plus，优先分配给响应时间最短的服务器。
```js
upstream balanceServer {
    fair;
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}
```
#### 客户端ip绑定
#### 来自同一个ip的请求永远只分配一台服务器，有效解决了动态网页存在的session共享问题。
```js
upstream balanceServer {
    ip_hash;
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}
```

## 静态资源服务器
```js
location ~* \.(png|gif|jpg|jpeg)$ {
    root    /root/static/;  
    autoindex on;
    access_log  off;
    expires     10h;# 设置过期时间为10小时          
}
```
#### 匹配以png|gif|jpg|jpeg为结尾的请求，并将请求转发到本地路径，root中指定的路径即nginx本地路径。同时也可以进行一些缓存的设置。

前端开发者必备的Nginx知识

项目中学习到的一些优化前端的思路总结：针对首屏加载访问速度以及用户使用友好度两个方面
### 减少前端打包体积，webpack plugin:webpack-bundle-analyzer可以查看包体积
#### nginx压缩配置，Nginx开启Gzip压缩功能， 可以使网站的css、js 、xml、html 文件在传输时进行压缩，提高访问速度, 进而优化Nginx性能，图片本身就会有压缩
#### 图片压缩上传
#### 依赖包按需加载，例如应用的前端ui组件，moment库等

### 优化前端卡顿
#### 页面添加加载动画效果
#### 图片占位符，图片加载过程中显示默认图片
#### 修改渲染逻辑，减少state变量触发渲染机制


前端优化总结

## 埋点
### 最近项目中需要对用户行为进行分析，进入页面时触发，点击触发以及模块曝光时触发
#### 手动埋点，页面访问埋点可以对路由进行封装，在进入当前页面时自动上报，点击触发可以监听元素的点击事件，在不影响原有的代码之前，模块曝光需要监听当前dom元素是否在可视范围内，使用IntersectionObserver观察者对象。
#### 埋点其实也是一种前端监控方式，收集用户的行为习惯，能更好的发现前端项目问题，分析白屏事件，不同用户，不同机型和不同系统下的首屏加载时间等等。

## IntersectionObserver
#### 用途：埋点、无限滚动、图片懒加载、控制动画/视频执行（性能优化）
#### 使用场景：判断某个元素是否进入了视口，传统的实现方法是，监听scroll事件，调用目标元素的getBoundingClientRect()方法，得到对于视口左上角的位置，再去判断是否在视口之内，缺点是由于scroll事件频发，计算量很大，容易造成性能问题
#### IntersectionObserver浏览器提供的原生方法，可以自动观察元素是否可见

## 用法
### 以new的形式声明一个对象，接收两个参数callback和options
### callback是添加监听后，当监听目标发生滚动时触发的回调函数。接收一个参数entries，即IntersectionObserverEntry实例，描述了目标元素与root的交叉状态。
|属性|说明|
|-|-|
|boundingClientRect|返回包含目标元素的边界信息，返回结果与element.getBoundingClientRect() 相同|
|**intersectionRatio**|返回目标元素出现在可视区的比例|
|intersectionRect|用来描述root和目标元素的相交区域|
|**isIntersecting**|返回一个布尔值，下列两种操作均会触发callback：1. 如果目标元素出现在root可视区，返回true。2. 如果从root可视区消失，返回false|
|rootBounds|用来描述交叉区域观察者(intersection observer)中的根.|
|target|目标元素：与根出现相交区域改变的元素 (Element)|
|time|返回一个记录从 IntersectionObserver 的时间原点到交叉被触发的时间的时间戳|
### 表格中加粗的两个属性是比较常用的判断条件：isIntersecting和intersectionRatio

### options
#### options是一个对象，用来配置参数，也可以不填。
|属性|说明|
|-|-|
|root|所监听对象的具体祖先元素。如果未传入值或值为null，则默认使用顶级文档的视窗(一般为html)。|
|rootMargin|计算交叉时添加到根(root)边界盒bounding box的矩形偏移量， 可以有效的缩小或扩大根的判定范围从而满足计算需要。所有的偏移量均可用像素(px)或百分比(%)来表达, 默认值为"0px 0px 0px 0px"。|
|threshold|一个包含阈值的列表, 按升序排列, 列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。当监听对象的任何阈值被越过时，都会触发callback。默认值为0。|

### 方法
|方法|说明|
|-|-|
|observe()|开始监听一个目标元素|
|unobserve()|停止监听特定目标元素|
|takeRecords()|返回所有观察目标的IntersectionObserverEntry对象数组|
|disconnect()|使IntersectionObserver对象停止全部监听工作|

## 埋点hooks
```js
import { useState, useCallback, useEffect } from 'react'

/**
 * UseIntersectionObserver
 * @param observerList 由被观察目标所组成的数组，数组项是由React.createRef构建出来的对象
 * @param callback 当目标元素被曝光所需要触发的函数，该函数接受一个参数indexList，由被曝光元素在observerList数组中的索引组成
 * @param infinite 是否持续观察目标元素，默认值为false。（因为曝光打点一般只需上报一次）
 * @param opt 可以自定义曝光条件（值的构成参考MDN），默认为{ threshold: [1] }，只有当目标元素完全暴露在可视区内才触发回调
* @param deps 依赖项
 */
function UseIntersectionObserver (
  observerList,
  callback,
  infinite,
  opt,
  deps
) {
  // list 为需要监听的元素列表。setList做为UseIntersectionObserver函数的返回值，可以让调用者修改需要监听的 list 
  const [list, setList] = useState(observerList)

  // intersectionObserver： 观察者对象
  let intersectionObserver = null

  const observeExposure = useCallback((list) => {
    if (typeof IntersectionObserver === 'undefined') {
      throw new Error('Current browser does not support IntersectionObserver ')
    }
    if (!list || list.length === 0) return
    // 当观察者存在时销毁该对象
    intersectionObserver && intersectionObserver.disconnect()
    // 构造新的观察者实例
    intersectionObserver = new IntersectionObserver(entries => {
      // 保存本次监听被曝光的元素
      let activeList = []

      // 递归每一个本次被监听对象，如果按照曝光条件出现在可视区，则调用callback函数，并且取消监听
      entries.forEach(entrie => {
        // 找出本次被监听对象在list中的索引
        const index = Array.from(list).findIndex(
          item => item.current === entrie.target
        )
        // 防止意外发生
        if (index === -1) return

        // isIntersecting是每个被监听的元素所自带的属性，若为ture，则表示被曝光
        // 并且未被曝光过
        if (entrie.isIntersecting) {
          // 保存本次曝光元素索引
          activeList.push({index, target: entrie.target})

          // 解除观察， 若需要无限观察则不取消监听
          !infinite &&
            intersectionObserver &&
            intersectionObserver.unobserve(list[index].current)
        }
      })

      // callback函数
      activeList.length > 0 && callback(activeList)
    }, opt)

    list.forEach(item => {
      item.current &&
        intersectionObserver &&
        intersectionObserver.observe(item.current)

      // 可以兼容直接传入DOM节点。
      // if((<React.RefObject<any>>item).current) {
      //   intersectionObserver.observe((<React.RefObject<any>>item).current)
      // } else if ((<HTMLElement>item)) {
      //   intersectionObserver.observe((<HTMLElement>item))
      // }
    })
  }, [deps])

  useEffect(() => {
    observeExposure(list)

    // 当 umount 时取消链接
    return () => {
      intersectionObserver && intersectionObserver.disconnect()
    }
  }, [list])

  return [setList]
}

const useIntersectionObserver = UseIntersectionObserver

export default useIntersectionObserver
```

## 图片懒加载
### 原理：
- 图片是否进入可视区域 intersectionRatio
- 将图片的具体地址暂存到data-src属性
- 图片进入可视区后，将img标签的data-src属性赋值给src属性
```js
// ref存储可变值
 const observerRef = useRef(new IntersectionObserver((entries) => {
   entries.forEach((entry) => {
     const { target, intersectionRatio } = entry;
     // target 目标dom
     // intersectionRatio 相交区域和目标元素的比例值，进入可视区域大于0 否则等于0
     // isIntersecting 是否进入可视区域
     if (intersectionRatio > 0) {
       target.src = target.dataset.src; // 替换目标元素的src路径
       target.onload = () => {
         target.style.opacity = '1'
       }
       observerRef.current.unobserve(target); // 关闭监听目标元素
     }
   })
 }))
 
  useEffect(() => {
   // // 创建观察者实例
   // let observer = new IntersectionObserver((entries, observer) => {
   //   entries.forEach(entry => {
   //     let target = entry.target; // 目标元素
   //     // 当元素出现在视图中
   //     if (entry.intersectionRatio > 0) {
   //       target.src = target.dataset.src; // 替换元素的src路径
   //       observer.unobserve(target) // 关闭监听目标元素
   //     }
   //   })
   // })
   Array.from(document.querySelectorAll('img')).forEach(image => {
     observerRef.current.observe(image); // 监听每一个元素
   })
   return () => {
     observerRef.current.disconnect(); // 取消所有监听dom
   }
 }, []);
```

## ahooks
### ahooks中也有类似相关的hooks：useInViewport也是基于intersectionObserve API

判断是否在可视范围内

### http是无状态的，那么应该如何记住登录状态呢？
#### 以前的做法是在客户端cookie中保存sessionId，服务器端的session中保存sessionId,每次客户端发送请求的时候都带上sessionId，在服务端进行验证。
#### 现在前后端分离，由于服务器之间不能共享内存，因此服务器之间session不能互通，因此不能使用session去存储用户的登录信息，一般使用token方式去记录登陆状态。区别就是token使用Redis缓存去存储这个用户标识。

#### token进行登录验证的步骤如下
#### 1. 客户端输入用户名和密码向服务端发起验证
#### 2. 服务端验证通过之后根据某种规则声称用户的token并返回，这个token保存在redis中，保证不同服务器间共享
#### 3. 客户端存储该token，可以存储在sessionStorage或者cookie中
#### 4. 后续服务器的每次请求都在请求头携带token发送到服务端
#### 5. 服务端在执行方法前先对请求进行验证，取出token查询redis中有没有对应的值

### 前端使用的技术
#### 以vue.js前端框架为例，用到的关键技术有路由导航守卫和拦截器
#### 路由导航守卫主要是保证没有获得token时不能访问除登录外的其他页面，这里不对token进行验证，只是判断token存不存在，拦截器主要目的是让请求头携带token
```js
	//路由导航守卫控制访问权限
	//为路由对象，添加beforeEach 导航守卫
	router.beforeEach((to, from, next) => {
		if(to.path === '/login') return next()
		const tokenStr = window.sessionStorage.getItem('token')
		if(!tokenStr) return next('/login')
		next()
	})

	//退出功能
	//基于token的方式实现退出只需要销毁本地的token即可
	window.sessionStorage.clear()
	this.$router.push('/login')

	//通过axios请求拦截器添加token，保证拥有获取数据的权限
	axios.interceptors.request.use(config => {
		config.headers.Authorization = window.sessisonStorage.getItem('token');
		return config;
	})
```

### JWT（JSON WEB TOKEN）
#### jwt的构成分为三部分：
#### 第一部分头部（header）：两部分信息：
#### - 声明类型
#### - 声明加密的算法 通常直接使用HMAC SHA256
#### 完整的头部就像下面这样的JSON
```js
{
	'typ': 'JWT',
	'alg': 'HS256'	
}
```
#### 然后将头部进行base64加密（该加密是可以对称解密的），构成了第一部分

#### 第二部分（payload），存放有效信息，包含三个部分：
#### - 标准中注册的声明
#### - 公共的声明
#### - 私有的声明

#### 第三部分（signature），签证信息，由三个部分组成：
#### - header(base64后的）
#### - payload（base64后的）
#### - secret
#### 注意：secret是保存在服务器端的，jwt的签发生成也是在服务器端的，secret就是用来进行jwt的签发和jwt的验证，所以，它就是你服务端的私钥，在任何场景都不应该流露出去。一旦客户端得知这个secret, 那就意味着客户端是可以自我签发jwt了。

### 如何应用jwt
#### 一般是在请求头里加入Authorization，并加上Bearer标注：
```js
fetch('api/user/1', {
	headers: {
		'Authorization': 'Bearer' + token
	}
}）
```
#### 有点：
#### - 因为json的通用性，所以jwt是可以进行跨语言支持的，像java，javascript，nodejs，php等很多语言都可以使用
#### - 因为有了payload部分，所以jwt可以再自身存储一些其他业务啥逻辑所需要的非敏感信息
#### - 不需要在服务端保存会话信息，所以它易于应用的扩展

### 项目中使用到的二次验证
#### 两步验证已经被广泛应用于各种互联网应用当中，用来提供安全性。
#### 对于如何使用两步验证，大家并不陌生，无非是开启两步验证，然后出现一个二维码，使用支持两步验证的移动应用比如 Google Authenticator 或者 LassPass Authenticator 扫一下二维码。
#### 这时候应用会出现一个 6 位数的一次性密码，首次需要输入验证从而完成开启过程。
以后在登陆的时候，除了输入用户名和密码外，还需要把当前的移动应用上显示的 6 位数编码输入才能完成登陆。
#### 这个过程的背后主要由两个算法来支撑：HOTP 和 TOTP。


token登录验证&谷歌二次验证

## 项目源码

本项目源码已上传到[github](https://github.com/jaclynshi/springBoot-SSM-Thymeleaf-Bootstrap)

## 前言

此项目从0开始，1天入门java，制作一个简易的微博系统。参考网上的资料基于springtool工具搭建springboot项目，仅供自己学习参考，同时希望能给您带来帮助，都是最基础的功能，不喜勿喷哦。

## 功能说明

```js
前台
1、用户登录登出
2、增删改查心情文章
3、关注其他用户
4、查看关注用户的心情微博
后台
1、用户管理
2、心情微博管理
```

## 项目部分截图
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/20/172d09295fd4f3ab~tplv-t2oaga2asx-image.image)

![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/20/172d093127bbb6a7~tplv-t2oaga2asx-image.image)

## 环境搭建
首先下载一个专为Spring设计的eclipse版本——[Spring Tool Suite](http://spring.io/tools)

## 创建项目
下载完安装就行了，然后点击左上角，File —> new —> Spring Starter Project
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/20/172d0250e7cda87c~tplv-t2oaga2asx-image.image)
下一步填入项目名称，自定义名称就行
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/20/172d0283f80f3234~tplv-t2oaga2asx-image.image)
在输入框中依次输入以下五个选项，并选中，会在右侧出现你选中的选项，这些都会在后面的开发过程中用到，如果忘记添加也没关系，后续可以在项目的pom.xml中添加即可，项目的pom.xml是个依赖管理的配置文件
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/20/172d02df01510db9~tplv-t2oaga2asx-image.image)
点击finish即可，到目前为止创建项目成功，静静等待编译结束就可以开始开发啦，这个过程可能比较漫长，这个时候可以选择吃吃零食，看看剧，玩玩游戏...☺

## 项目目录
### 入口文件
首先来看一下项目的入口文件，
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/20/172d0377372a7a47~tplv-t2oaga2asx-image.image)
右击这个类，run as——Spring Boot App，就会启动该项目，看一眼就ok了，不用管它。
### 配置文件
项目最关键两个配置文件，一个是上面提到的依赖管理pom.xml文件，就在项目的根目录下，需要什么包在这里引入就好了;其次就是resources目录下的application.properties文件，可以用来设置连接mysql的配置信息。

```java
# mysql
spring.datasource.url: jdbc:mysql://localhost:3306/springboot?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
spring.datasource.username: root
spring.datasource.password: root
```
以上代码是在application.properties文件中定义连接了本地springboot数据库，mysql连接用户名以及密码，在我的github项目的resouces目录下有个sql.java文件，在mysql中打开此文件运行就能在本地数据库中生成该数据库。

## 开发项目
好啦，数据库也建好了，对于web开发来说，我的理解是最基本的就是后台与数据库的交互获取数据，传给前端，前端通过thymeleaf模板引擎展示数据。首先就是需要建立模型，这样才能通过控制器获取到数据库中的数据。

### 建立模型
在model下新建bean目录，定义一个模型类，以user表为例，在bean目录下新建User.java文件

```java
package com.example.demo.model.bean;
import java.io.Serializable;
public class User implements Serializable {
	private static final long serialVersionUID = -5611386225028407298L;
	private Integer id;
	private String account;
	private String name;
	private String password;
	private Integer agent;
	private String image;
	private String phone;
	private String address;
	private Integer permission;
	private Followuser followuser;

    // 省略get和set方法，大家自己设置即可
	public Followuser getFollowuser() {
		return followuser;
	}
	public void setFollowuser(Followuser followuser) {
		this.followuser = followuser;
	}
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getAccount() {
		return account;
	}
	public void setAccount(String account) {
		this.account = account;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public Integer getAgent() {
		return agent;
	}
	public void setAgent(Integer agent) {
		this.agent = agent;
	}
	public String getImage() {
		return image;
	}
	public void setImage(String image) {
		this.image = image;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	public Integer getPermission() {
		return permission;
	}
	public void setPermission(Integer permission) {
		this.permission = permission;
	}
}
```
有了这个就可以和数据库表有个映射关系，现在还需要一个接口，定义项目中所有关于user表的查询方法，在model目录下新建dao目录，在dao目录下新建UserDAO.java，

```java
package com.example.demo.model.dao;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import com.example.demo.model.bean.User;
import java.util.List;
@Mapper
public interface UserDAO {
	public User find(@Param("account")String account, @Param("password")String password);
	public User findByAccount(@Param("account")String account);
	public User findByID(@Param("userID")String userID);
	public Integer create(@Param("account")String account, @Param("password")String password, @Param("name")String name, @Param("agent")Integer agent, @Param("phone")String phone, @Param("address")String address, @Param("image")String image);
	public List<User> findMyFollow(@Param("userID")String userID);
	public List<User> findAll();
	public Integer remove(@Param("userID")Integer userID);
	public Integer updatePassword(@Param("password")String password, @Param("userID")String userID);
	public List<User> findSearch(@Param("keyword")String keyword);
	// 注： CRTL+Shift+O，快捷导入所有import
}
以上需要注意的是，如果需要查询user表中一条数据多个字段，用上面定义的User类接收，如果查询一条数据的单个字段，可以根据数据表中定义的字段类型去接收，比如create方法返回的是创建此条记录的id值是Integer类型的，如果返回多条数据就用list接收。

```
有了上面的方法接口后，还需要mybatis映射接口到SQL语句的文件，根据application.properties中的配置mybatis.mapper-locations: classpath:mapper/*.xml,在resources文件夹下新建mapper文件夹，下面放入UserDAO.xml文件，都是sql语句就不多说了。

```java
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.example.demo.model.dao.UserDAO">
  <select id="find" resultType="com.example.demo.model.bean.User">
    SELECT id, account, name, password, address, image, phone, agent, permission from user where account = #{account} and password = #{password}
  </select>
  
  <select id="findAll" resultType="com.example.demo.model.bean.User">
    SELECT id, account, name, password, address, image, phone, agent, permission from user where permission = 0
  </select>
  
  <select id="findByAccount" resultType="com.example.demo.model.bean.User">
    SELECT id, account, name, password, address, image, phone, agent, permission from user where account = #{account}
  </select>
  
  <select id="findByID" resultType="com.example.demo.model.bean.User">
    SELECT id, account, name, password, address, image, phone, agent, permission from user where id = #{userID}
  </select>
  
  <select id="findMyFollow" resultMap="userFollowMap">
    SELECT u.name, u.id from user u left join followuser fu on u.id = fu.followTo where fu.followFrom = #{userID}
  </select>
  
  <select id="findSearch" resultType="com.example.demo.model.bean.User">
    SELECT id, account, name, password, address, image, phone, agent, permission from user where account like '%${keyword}%' or name like '%${keyword}%'
  </select>
  
  <resultMap id="userFollowMap" type="com.example.demo.model.bean.User">
		<id property="id" column="id"></id>
		<result property="account" column="account"></result>
		<result property="name" column="name"></result>
		<result property="password" column="password"></result>
		<result property="image" column="image"></result>
		<result property="agent" column="agent"></result>
		<result property="phone" column="phone"></result>
		<result property="address" column="address"></result>
		<association property="followuser" column="id" javaType="com.example.demo.model.bean.Followuser">
			<id property="id" column="id"></id>
			<result property="followFrom" column="followFrom"></result>
			<result property="followTo" column="followTo"></result>
		</association>
	</resultMap>
  
  <insert id="create" parameterType="com.example.demo.model.bean.User">
    INSERT into user(account, password, name, agent, phone, address, image) VALUES(#{account}, #{password}, #{name}, #{agent}, #{phone}, #{address}, #{image})
  </insert>
  
  <delete id="remove" parameterType="com.example.demo.model.bean.User">
    DELETE FROM user where id = #{userID}
  </delete>
  
  <update id="updatePassword" parameterType="com.example.demo.model.bean.User">
    UPDATE user set password = #{password} where id = #{userID}
  </update>
</mapper>
```

### 控制器
有了数据之后就可以通过控制器去接收数据了，比较常用的请求方式是get请求和post请求，我就以两个请求方式为例
#### get请求
以后台用户管理为例

```java
@GetMapping(value = "admin/userManager")  //vaule代表路由
	public Object userManager(Map<String, Object> map, HttpSession session) {
		if(!StringUtils.isEmpty(session.getAttribute("userID"))) {
			User user = userDAO.findByID(session.getAttribute("userID").toString());
			if(user.getPermission()==1) {
				map.put("userID", session.getAttribute("userID"));
				map.put("username", session.getAttribute("username"));
				List<User> allUser = userDAO.findAll();  //这里就是调用dao里面的方法
				if(allUser != null) {
					map.put("allUser", allUser);  //map.put就是向前端传输数据
				}
			}else {
				return new ModelAndView("redirect:/");  //如果验证成功那就
			}
		}else {
			return new ModelAndView("redirect:/");
		}
		return new ModelAndView("admin/userManager");
	}
```

前端通过thymeleaf展示数据

```java
<table class="table">
	  <thead class="thead-dark">
	    <tr>
	      <th scope="col">用户账号</th>
	      <th scope="col">用户密码</th>
	      <th scope="col">用户名称</th>
	      <th scope="col">性别</th>
	      <th scope="col">用户手机</th>
	      <th scope="col">用户地址</th>
	      <th scope="col">操作</th>
	    </tr>
	  </thead>
	  <tbody>
	    <tr th:each="item,stat:${allUser}" >
	    <form method="post">
	      	<th th:text="${item.account}"></th>
	      	<th th:text="${item.password}"  th:id="'password_'+${item.id}"></th>
	      	<th th:id="'passwordInput_'+${item.id}"  style="display:none">
	      		<input type="password" name="password" class="form-control">
	      		<input type="text" name="userID" class="form-control" th:value="${item.id}" style="display:none">
	      	</th>
	      	<th th:text="${item.name}"></th>
	      	<th th:text="${item.agent==1?'女':'男'}"></th>
	      	<th th:text="${item.phone}"></th>
	      	<th th:text="${item.address}"></th>
	      	<th>
	      		<a class="btn btn-primary editPassoword" th:id="'editPassword_'+${item.id}" th:onclick="'editPassword('+${item.id}+')'">编辑</a>
	      		<input class="btn btn-primary savePassword" th:id="'savePassword_'+${item.id}" type="submit" value="保存" style="display:none">
	      		<a class="btn btn-danger" th:href="@{'removeUser?userID=' + ${item.id}}">删除</a>
	      	</th>
	      	</form>
	    </tr>
	  </tbody>
</table>
```
#### post请求

```java
@RequestMapping(value = "admin/login", method = RequestMethod.POST)
	public Object login1(Map<String, Object> map,@RequestParam(value = "account", required = false) String account,
			@RequestParam(value = "password", required = false) String password, HttpSession session) {
		session.removeAttribute("userID");
		session.removeAttribute("username");
		if(StringUtils.isEmpty(account)) {
			map.put("errors", "账号不能为空！");
		}else if(StringUtils.isEmpty(password)){
			map.put("errors", "密码不能为空!");
		}else {
			User user = userDAO.find(account, password);
			System.out.println(user);
			if (user != null && user.getPermission()==1) {
				session.setAttribute("userID", user.getId());
				session.setAttribute("username", user.getName());
				return new ModelAndView("redirect:/admin/userManager");
			} else {
				map.put("errors", "账户或者密码错误！");
			}
		}
			
		return new ModelAndView("admin/login");
	}
	
	//通过@RequestParam接收前端post过来的数据
```

### 同样根据github上的项目进行修改开发另一套选课系统。后台管理系统使用vue前端框架搭建页面，应用ElementUI组件，vuex数据管理；微信小程序使用uni跨平台技术，可以打包运行在微信开发平台进行调试；后端用的springboot框架搭建的服务端，包含各种接口。springboot项目目录介绍：关键目录是在system目录，controller目录是控制器，控制页面请求的接口地址映射，entity目录实现和数据库表字段之间的映射，vo目录实现的是在entity基础上表关联关系的数据库表字段之间的映射，控制器中访问的服务接口在service中统一管理，对应service.impl目录下的相关文件，具体实现在service.impl中体现，数据库表查询对应dao文件的接口，对应resource目录下mapper目录，实现sql表查询操作。
### 放上部分截图
![微信图片_20220207212348.png](https://www.jaclynshi.top/img/1644240650991.png)
![微信图片_20220207212434.png](https://www.jaclynshi.top/img/1644240651243.png)
![微信图片_20220207212454.png](https://www.jaclynshi.top/img/1644240651376.png)
![微信图片_20220207212506.png](https://www.jaclynshi.top/img/1644240651521.png)




springboot+ssm+thymeleaf+bootstrap 创建简易微博系统

react hooks使用记录以及所有常用的api

#### 本文档针对react进行开发使用，创建react项目使用create-react-app初始化项目，参考自[domesy](https://www.yuque.com/domesy/react-mobile)
## 创建项目配置文件
### 插件
#### react-app-rewired customize-cra
### 执行命令
#### npm install react-app-rewired customize-cra --save
#### 官方介绍customize-cra扩展了create-react-app的功能，customize-cra依赖于react-app-rewired，所以需要安装两个包。
## 配置：
### 在 package.json 中的 script 下的 react-scripts 替换为 react-app-rewired 即可
```js
{
 ...
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  ...
}
```
### 然后在更目录下创建 config-overrides.js 文件，以后所有的配置就在此文件中

## 配置装饰器
#### 装饰器只能用于class组件
### 插件 @babel/plugin-proposal-decorators
### 执行命令 npm install @babel/plugin-proposal-decorators -S
### 配置
```js
const { override, addDecoratorsLegacy } = require('customize-cra');

module.exports = override(
 	...,
  addDecoratorsLegacy(),
 	...
);
```

## MUI组件
### 插件 @material-ui/core 
### 执行命令 npm install @material-ui/core  -S

## Testing library
#### Testing libraryshi React官方推荐的单元测试库，提供了一系列拟人化的API来帮助我们测试UI组件。具体使用参考官方文档
### 插件 @testing-library/jest-dom @testing-library/react @testing-library/user-event
#### 如果使用的是create-react-app新建的应用，项目中应该默认会安装以上三个插件，如果不是的话，需要手动安装,官方推荐Jest+testing library
### 执行命令 npm install @testing-library/react @testing-library/user-event @testing-library/jest-dom -S

## @types
#### 当我们用 npm 等包管理工具安装第三方包的时候，有些包并不是 TypeScript 编写的，自然也不会导出 TypeScript 声明文件。这种情况下，如果我们在 TypeScript 项目中引入了这种包，则会编译报错(没有设置 allowJS)。比如，当我们通过npm install jquery --save 安装 jquery 包并引用的时候，typeScript 会报错：TypeScript 没有找到 jquery 这个包的定义，你可以通过npm install @types/jquery安装相关声明，或者自己定义一份.d.ts 文件，并将 jquery 声明为 module。

## @types/axios
#### 用于浏览器和node.js的基于Promise的HTTP客户端
### 1. 从浏览器制作XMLHttpRequests
### 2. 让HTTP从node.js的请求
### 3. 支持Promise API
### 4. 拦截请求和响应
### 5. 转换请求和响应数据
### 6. 取消请求
### 7. 自动转换为JSON数据
### 8. 客户端支持防止XSRF

## @types/jest
#### 一般我们写完代码会通过console.log的方式去测试，上线的时候再删掉，使用Jest测试，可以避免这样的问题出现。Jest 是当下最主流的前端测试框架；对于初学者，Jest 配置入门并不算友好，尤其是选择了 Typescript 做开发语言，教程很烦琐。选择ts-jest 的预处理库 ，配置非常简单，一共就三步。
### 执行命令npm install -D jest typescript ts-jest @types/jest
### 生成配置npm ts-jest config:init
### 运行npm jest
#### 这里推荐一款 vscode 插件——Jest Runner。可以对单个case进行debug，在每个test case上会有run|debug的按钮，可以给代码打断点进行debug也可以直接run这个case。

## @types/mockjs
#### 一般开发前后端都是并行开发的，等待接口的同时数据需要前端自己mock， 具体使用参考文档[mockjs](http://mockjs.com/)
### 执行命令 npm install @types/mockjs -S

## @types/qrcode.react
#### react使用qrcode.react生成二维码
### 执行命令 npm install @types/qrcode.react -S

## @types/qs
#### 是用来处理url中参数的一个js库
### 1. qs.parse 方法可以把一段格式化的字符串转换为对象格式a=1&b=2 => {a: 1, b: 2}
### 2. qs.stringify 则和 qs.parse相反，是把一个参数对象格式化为一个字符串。{a: 1, b: 2} => a=1&b=2
### 3. 可以对格式化后的参数进行排序：qs.stringify(params, (a,b) => a.localeCompare(b))

## @types/react-dom
#### 我们在使用react开发网页时，会下载两个包，一个是react，一个是react-dom，其中react包是react的核心代码，react-dom则是React剥离出的涉及DOM操作的部分。
#### react的核心思想是虚拟DOM，react包含了生成虚拟DOM的函数react.createElement，及Component类。当我们自己封装组件时，就需要继承Component类，才能使用生命周期函数等。而react-dom包的核心功能就是把这些虚拟DOM渲染到文档中变成实际DOM。
#### react-dom主要包含三个API：findDOMNode、unmountComponentAtNode 和 render。
#### 重点讲解render用于将React渲染的虚拟DOM渲染到浏览器DOM，一般在顶层组件使用。该方法把元素挂载到 container 中，并且返回 element 的实例（即 refs 引用），如果是无状态组件，render 会返回 null。当组件装载完毕时，callback 就会被调用。
```js
render(ReactElement element,DOMElement container,[function callback])
```

## ahooks
#### 阿里的一套hook方案， 详情参考官方文档[ahooks](https://ahooks.js.org/hooks/use-request/index)
### 执行命令 npm install ahooks -S

## antd-mobile
#### antd移动端UI组件
### 执行命令 npm install antd-mobile -S

## chalk & clear & figlet
### clear: 清屏
### chalk: 装饰作用，使之终端上的输出加上颜色
### figlet: 作用是将字母转化为图片，使之更加醒目
### 执行命令 npm install figlet clear chalk@^4.1.0 -S

## compression-webpack-plugin
#### 压缩js、css

## cross-env
#### 在内置中分为开发环境和生成环境，对应的分别为 production 和 development 模式，使用cross-env就可以进行分模块打包了
### 执行命令npm install cross-env -S
### 配置：在 package.json
```js
{
	...,
  "scripts": {
    "start": "react-app-rewired start ",
    "start:pre": "cross-env REACT_APP_ENV=pre react-app-rewired start",
    "build": "react-app-rewired build",
    "starbuildt:pre": "cross-env REACT_APP_ENV=pre react-app-rewired start ",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  ...
}
```

## dva-core & dva-loading & dva-dva-model-persist & dva-type
#### dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。当然我们在配置项目的时候没必要要完整的dva，只需要 以下两个插件 在配合 react-redux 配合就可以了dva-core dva-loading
### 执行命令 npm install react-redux -S & npm install dva-core dva-loading -S
### 数据持久化 dva-model-persisit
### 执行命令 npm install dva-model-persisit -S

## html2canvas
#### 将html转化为base64图片
### 执行命令 npm install html2canvas -S

## less & less-loader
#### less预处理器，可以识别less文件内容
### 执行命令npm install less less-loader -D

## lib-flexible & postcss-px2rem-exclude
#### 页面自适应，px转rem
### 执行命令 npm install postcss-px2rem-exclude lib-flexible -S

## react-keeper
#### 路由为什么选择 react-keeper，主要的原因是，在H5，他有一个非常常见的功能，那就是缓存页面，在Vue中这个功能非常好实现 通过 keeper-alive 就可以实现
#### 但在 react 中就比较难以实现了，而 react-keeper 这个库，可以说是很好的解决了这个问题，甚至比 Vue的keeper-alive更加简便，更好配置
#### 以移动端的配置而言，个人觉得 react-keeper 比 React-Router 更加适合~
### 执行命令 npm install react-keeper -S
#### 可以查看[这篇文章](https://zhuanlan.zhihu.com/p/25081540)

## webpack-bundle-analyzer
#### 分析包大小插件
### 执行命令 npm install webpack-bundle-analyzer -S


package.json 项目配置以及依赖包的使用记录

## 发布npm包
```js
1、去npm官网注册一个npm账号，进入注册邮箱点击连接进行验证
（或者npm adduser, 添加npm账号，命令窗口会出现让你输入用户名、密码和邮箱）
2、在需要发布的npm包根目录下打开命令窗口
3、npm init，生成package文件
4、npm login, 输入刚才的用户名、密码和邮箱
5、npm publish
上一步如果出现报错的情况，根据报错内容，合理分析，可能是因为你的包名称已经被人用过，
所以需要换一个包名称，去package.json文件修改name值，
又或者是因为你注册完账户之后没有去邮箱进行验证。
```
## 删除npm包指定版本

```js
npm unpublish 包名称@版本
```
## 删除整个npm包

```js
npm unpublish 包名称 --force
```

## 打包组件
### 使用打包工具rollup/webpack，设置输入输出地址，引入babel等插件处理代码编译问题，注册npm账号，publish到npm库
### 如何使用：npm install 依赖包，在项目中进行引入
### fork [github上的项目](https://github.com/fengxinhhh/Concis)进行框架搭建，组件的定义跟普通的组件是一样的。
[github地址](https://github.com/jaclynshi/package-component)

npm基础命令合集

## html
```js
<div id="main">
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/500x500-2.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/500x500-3.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/500x500-5.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/500x500-2.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/500x500-4.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/500x500-1.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/500x500-3.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="http://www.jq22.com/img/cs/500x500-5.png" alt="">
        </div>
    </div>
</div>
```

## css
```js
 * {
	margin:0;
	padding:0;
}
#main {
	position:relative;
	height:auto;
	margin:0 auto;
}
.box {
	padding:10px 0 0 10px;
	float:left;
	/*height:auto;
	*/
}
.pic {
	padding:10px;
	border-radius:5px;
	border:1px solid #ccc;
	box-shadow:0 0 3px #ccc;
	/*height:auto;
	*/
}
.pic img {
	width:200px;
	height:auto;
}
```

## js
```js
window.onload = function() {
	water();
}

function water() {
	//获取大盒子
	var main = document.getElementById('main');
	//获取所有小盒子
	var boxs = getByClass(main, 'box');
	//获取屏幕宽
	var clientW = document.body.clientWidth || document.documentElement.clientWidth;
	//获取每个小盒子的宽，因为宽度都一样，所以获取第一个就行
	var boxW = boxs[0].offsetWidth;
	//计算需要几列
	var cols = Math.floor(clientW / boxW);
	//给大盒子设置宽度
	main.style.width = cols * boxW + 'px';

	//新建一个数组，存放第一行的小盒子的高度
	var hArr = [];
	for(var i = 0; i<boxs.length; i++) {
		if(i<cols) {
			hArr.push(boxs[i].offsetHeight);
		} else {
			//因为下一排的第一个要放在第一排最短的下面，所以要获取第一排的最小高度
			var minH = Main.min.apply(null, hArr);
			//获取这个最小高度属于第一排中的第几个
			var minIndex = getIndex(minH, hArr);
			//设置位置
			boxs[i].style.position = 'absolute';
			box[i].style.top = minH + 'px';
			box[i].style.left = boxW * minIndex + 'px';
			//因为下面一个和前面是一样的，所以要把高度更新一下
			hArr[minIndex] += boxs[i].offsetHeight;
		}
	}
}

function getByClass(parent, className) {
	var arr = [];
	var eles = parent.getElementsByTagName('*');
	for(var i = 0; i<eles.length; i++) {
		if(eles[i].className == className) {
			arr.push(eles[i]);
		}
	}
	return arr;
}

function getIndex(val, arr) {
	for(var i = 0; i<arr.length; i++) {
		if(arr[i] == val) return i;
	}
}
```


js纯原生手写瀑布流

## https原理
#### 在说HTTPS之前先说说什么是HTTP，HTTP就是我们平时浏览网页时候使用的一种协议。HTTP协议传输的数据都是未加密的，也就是明文的，因此使用HTTP协议传输隐私信息非常不安全。为了保证这些隐私数据能加密传输，于是设计了SSL（Secure Sockets Layer）协议用于对HTTP协议传输的数据进行加密，从而就诞生了HTTPS。
#### 先从对称加密说起。什么是对称加密？简单说就是一个密钥，可以加密一段信息也可以对加密后的信息进行解密，不能只用对称加密，秘钥会被劫持。
![微信图片_20220123202456.png](https://www.jaclynshi.top/img/1642942558261.png)
#### 所以有了非对称加密。什么是非对称密钥？简单说就是有两把密钥，一把公钥一把私钥。只能保证客户端用公钥加密过的数据只能通过服务端的私钥能解开，但是服务端传输给客户端的公钥是明文传输的，可能被劫持，所以只能保证单向传输安全。
![微信图片_20220123202510.png](https://www.jaclynshi.top/img/1642942558124.png)
#### 改良的非对称加密：两组公钥私钥，客户端和服务端分别持有一对公私钥，这样就能保证双向传输安全。
![微信图片_20220123202515.png](https://www.jaclynshi.top/img/1642942558422.png)
#### 因为非对称加密算法非常耗时性能不好，非对称加密+对称加密：浏览器拿到公钥后随机生成一个对称加密的密钥，然后通过对称加密进行传输。这个方法的漏洞是，攻击者可以替换公钥。
![微信图片_20220123202522.png](https://www.jaclynshi.top/img/1642942558330.png)
#### 如何证明浏览器收到的公钥一定是该网站的公钥？通过CA机构颁发的数字证书。如何防止数字证书被篡改？数字签名：CA机构拥有非对称加密的公钥和私钥，CA机构对证书明文数据T进行hash，对hash后的值用私钥加密，得到数字签名S，明文和数字签名共同组成数字证书。
#### 非对称加密算法：RSA，DSA/DSS  
#### 对称加密算法：AES，RC4，3DES    
#### HASH算法：MD5，SHA1，SHA256

#### 验证证书是否是上级CA签发的
#### windows中保留了所有受信任的根证书，浏览器可以查看信任的根证书，自然可以验证web服务器的证书，是不是由这些受信任根证书颁发的或者受信任根证书的二级证书机构颁发的（根证书机构可能会受权给底下的中级证书机构，然后由中级证书机构颁发中级证书）
#### 在验证证书的时候，浏览器会调用系统的证书管理器接口对证书路径中的所有证书一级一级的进行验证，只有路径中所有的证书都是受信的，整个验证的结果才是受信
#### 有些证书本身就存在在操作系统中，浏览器可以识别，如果是自己签发的证书需要自己手动导入到浏览器中

### 如何抓取HTTPS的请求数据
#### 当站点由HTTP转成HTTPS后是更安全了，但是有时候要看线上的请求数据解决问题时却麻烦了，因为是HTTPS的请求，你就算拦截到了那也是加密的数据，没有任何意义。
#### - （1）Fiddler根证书导出
#### - （2）浏览器中导入Fiddler根证书
#### 这里的关系是：浏览器 -> Fiddle（代理）-> 服务器，Fiddler在客户端发出Https请求时，充当了服务器的角色，需要返回一个证书给客户端，但是Fiddler的证书并不是CA机构颁发的，客户端一验证就知道是假的连接肯定就断了，那就想办法让客户端信任这个服务端，于是就在客户端安装一个Fiddler的根证书。所以只要是通过Fiddler的Https请求，验证根证书时自然会通过，因为Fiddler的根证书已经受信了！现在只是客户端和Fiddler这个伪服务端的Https验证通过了，还没有到真正的服务端去取数据的，此时Fiddler会以客户端的身份与真正的服务端再进行一次HTTPS的验证，最后拿到数据后又以服务端的身份与客户端通信。也就是说在一次请求中数据被两次加解密，一次是手机到Fiddler，一次是Fiddler到真正的服务端。

## 双向验证
#### 日常我们看到的是单向验证，是通过https实现的，但对于一些金融行业，不是所有客户端都能访问当前网站，所以就需要双向验证。具体实现方式是通过个人签发证书，在需要访问网站的客户端安装证书，通过在代理（nginx等）配置，或者不使用代理的情况下通过代码的形式手动延签的方式验证。
### 具体实现步骤
```js
//git进入openssl

//生成ca私钥和根证书
openssl>genrsa -out Server.key 4096
openssl>req -new -x509 -days 3650 -key Server.key  -out Server.crt

//生成客户端私钥
openssl>genrsa -out client.key 4096
//生成客户端证书请求文件
openssl>req -new -key client.key -out client.csr
//根据请求文件生成客户端证书
openssl>x509 -req -in client.csr -CA Server.crt -CAkey Server.key -CAcreateserial -out client.crt -days 3650

//将生成的根证书传到服务器中
//nginx增加相关配置
ssl_verify_client on; 
ssl_client_certificate Server.crt; 

//导出客户端pfx证书，用于windows安装
openssl>pkcs12 -export -inkey /c/Users/sjq/Desktop/Cert/client.key -in /c/Users/sjq/Desktop/Cert/client.crt -out /c/Users/sjq/Desktop/Cert/client.pfx
```
#### 以上安装过证书的客户端就能正常访问网站，没有安装过证书的客户端就会显示400无法正常访问。

https原理&双向验证

## html2canvas
### html2canvas 将dom元素转为canvas画布图片，h5长按保存图片到本地
```js
      const dom = document.querySelector("#id") as HTMLElement;
      const options = {
        backgroundColor: '#F6F6F6' // null或transparent可将canvas背景设置为透明
      }
      html2canvas(dom, options).then(canvas => {
        // document.body.appendChild(canvas);
        let dataImg = canvas.toDataURL();
        setNewImgBase64(dataImg);
        setShowElement(false);
      });
```


### 常用的配置项
|参数|类型|默认值|描述|
|-|-|-|-|
|allowTaint|Boolean|false|是否允许跨域图像污染画布|
|useCORS|Boolean|false|是否跨域加载图片|
|backgroundColor|String|#fff|背景色|
|width|Number|元素宽度|单元格|
|height|Number|元素高度|单元格|
### html2Canvas绘制跨域图片
#### 首先在线图片域名需要配置允许跨域访问;
#### 然后img标签需要添加crossorigin="anonymous",src后面添加时间戳防止被缓存;
```js
      <img
        crossorigin="true"
        class="share"
        :src="src+'?'+new Date().getTime()"
      >
```
#### 最后就是html2Canvas添加{allowTaint: true,useCORS: true}配置项。useCORS: true和上面crossorigin="anonymous"起到的作用是一样的（二选一即可，感兴趣的可以在源码里看一下，这个配置项就是影响给不给图片添加crossorigin="anonymous"）
```js
      html2canvas(dom, {allowTaint: true,useCORS: true,}).then(canvas => {
          let imgUrl = canvas.toDataURL()
      })
```

## H5使用微信/支付宝jsBridge
### 微信js-sdk
```js
    //1. 引入微信js-sdk：
    npm install —save weixin-js-sdk
    //2. 封装一个微信js-sdk接口引用的公共类
    import wx from ‘weixin-js-sdk’
    //3. 调用微信js-sdk之前需要先调用config配置接口，从微信公众平台获取微信相关配置信息，后台生成需要的参数信息（appId, nonceStr, signature, timestamp），配置安全域名，前端调用wx.config
    wx?.config({
        beta: true, //对于没有公开的接口需要配置beta
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId, // 必填，公众号的唯一标识
        timestamp, // 必填，生成签名的时间戳
        nonceStr, // 必填，生成签名的随机串
        signature,// 必填，签名
        jsApiList: [
            'chooseInvoiceTitle'  //获取微信抬头信息接口，属于没有公开的接口
        ] // 必填，需要使用的JS接口列表
    });
    //4. 调用接口之前还需要调用wx.ready
    //5. 例如调用获取微信抬头接口
    wx.invoke('chooseInvoiceTitle', { scene: "1" }, function (res) {
        resolve(res);
    })
```
### 支付宝jsBridge
```js
    //支付宝jsBridge比微信sdk方便，不用引入任何库，也不需要获取配置信息，只要在支付宝环境中，window对象下就会注入AlipayJSBridge
    ready(callback) {
        // 如果jsbridge已经注入则直接调用
        if (window.AlipayJSBridge) {
            callback && callback();
        } else {
            // 如果没有注入则监听注入的事件
            document.addEventListener('AlipayJSBridgeReady', callback, false);
        }
    }
    //在每次调用接口之前都要掉用ready方法
    //以获取支付宝抬头信息为例
    this.ready(function () {
        window.AlipayJSBridge.call('startBizService', {
	    name: 'invoice-title' // name为服务名称，发票抬头写死为invoice-title
        }, async(result) => {})
    });
```

h5项目中使用到的知识点汇总

## git 下载

```js
1、新建文件夹
2、右击新建的文件夹，git bash here
3、输入git init
4、git clone 路径
```
## 更新本地代码

```js
1、git add .
2、git commit -m “备注”
3、git push
```

## 上传本地代码到git

```js
1、在github或者gitlab上新建项目
2、拷贝新建项目的http路径
3、cd 本地项目，右击，git bash here
4、git init
   git remote add origin http路径
   git add .
   git commit -m "备注"
   git push -u origin master
```

## 上传本地项目到分支

```js
查看远程仓库： git remote -vv
拷贝远程仓库的url
1、 git init
2、 git add .
3、 git commit -m "备注"
4、 git branch version2  //创建分支
5、 git checkout version2  //切换分支
6、 git remote rm origin 
7、 git remote add origin 远程仓库url
8、 git push origin version2
现在可以去github账户上刷新，就会多出来一个分支version2
```

## 克隆分支

```js
git clone -b 分支名称 项目地址
```

## 查看

```js
git branch 查看当前分支
```

## 合并分支并提交

```js
a为被合并分支
进入a分支，git merge b分支名称
git push
```

常用git命令

// git初始化
Git init

// 创建本地和远程仓库的连接，下面所有命令中用到origin都是这里命名的remote的名称，可以自定义
Git remote add origin https://xxx

// 查看本地和远程仓库连接
Git remote -v

//在你本地创建一个分支，这个分支对应远程仓库中的某个分支，把代码拉下来
Git fetch origin 远程仓库分支名称:对应创建的本地分支名称

// 提交代码到分支就不多说了add、commit、push

// 合并分支
Git merge origin 想要合并的分支
例如想要把develop分支合并到master分支，需要做的操作包括：
在你的开发分支develop分支上，push你本地的代码到远程分支，如果说不只是你一个人开发，多个人开发，那就在push之前也就是commit之后，pull远程分支将其他的开发人员的代码拉下来，此时你本地的代码就是最新的，如果有冲突需要处理冲突问题，处理完之后再走一遍push流程add、commit、push，如果没有冲突直接push。然后切换到master分支，执行上面的代码get merge origin develop，就会把develop分支的代码合并到master分支了

// 查看本地仓库状态，一般用来查看此次本地文件修改了哪些
git status

// 查看本地修改内容
Git diff
// 查看具体那个文件修改了什么内容
git diff 文件名
:q退出查看

// Git branch什么的就不多说了

// vscode可以装插件git graph 可以查看具体提交情况，差不多就是界面版的git，可以不用手敲命令，可以试试看

git基础命令合集

## 创建一个httpd+php的环境镜像(centos系统)
### 安装并启动docker
```js
curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun
systemctl start docker
// 可以用docker -v 查看docker是否安装成功
```
### 拉取centos镜像
```js
docker pull centos
docker images(查看所有的镜像，此时本地会有一个centos的镜像)
// 启动一个容器（-it表示使用终端模式进入容器）
docker run -it -p 8000:80 镜像ID /bin/bash
```
### 安装httpd
```js
yum install httpd
chkconfig httpd on      // 设置开机启动
service httpd start     // 启动apache服务
```
### 安装php
```js
yum install php
yum install php-mysql php-gd php-imap php-ldap php-odbc php-pear php-xml php-xmlrpc
```
```js
此时httpd服务以及php在这个容器内已经安装好，可以在/var/www/html/目录下新建一个info.php文件，在文件中写入测试内容，例如
<?php
	phpinfo();
?>
进入浏览器访问本地服务器，例如http://localhost:8000/info.php查看是否显示phpinfo信息。（因为创建容器的时候做了一个端口映射，本地8000端口映射到容器里的80端口，httpd服务默认配置80端口）
```
### 保存镜像
#### 上传到dockerHub上
在[dockerHub](https://hub.docker.com )上创建一个账号
```js
docker login    //输入用户名和密码
docker tag 容器ID httpd-php:v1    //给容器一个标签
docker ps       //可以查看所有的容器信息，此时可以看到有一个上面创建的容器名称变为httpd-php
docker push httpd-php
去dockerHub上看你的账号是否有一个镜像上传上去了
```
#### 打包镜像
```js
docker save -o centos(或者镜像ID) httpd-php
// 此时当前目录下就会生成一个httpd-php.tar包，就可以转发到目的主机上进行使用
```
### 使用镜像
```js
以上传到dockerHub上的：
docker pull httpd-php（具体的去dockerHub上看，上面有可以复制拉取镜像的代码）
以打包镜像的：
docker load -i httpd-php.tar
```
```js
// 此时本地就会出现一个镜像
docker run -d --privileged -p 8888:80 -v /data/docker:/var/www/html 镜像ID /usr/sbin/init
// 创建容器， 本地8888端口映射容器内的80端口，可以使用本地8888端口进行访问，-v表示本地/data/docker目录映射到容器内的/var/www/html目录，上面是在容器内的/var/www/html/目录下去新建一个文件进行测试，那此时就可以在本地的/data/docker/目录下创建php项目进行访问了。
```


docker使用记录

## antd pro关键知识点
### react+umi+dva+antd

## umi

umi是可扩展的企业级前端应用框架，umi以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，
并以此进行功能扩展。

umi相关路由配置等参考官方文档，可实现按需加载，热更新等，文档地址：[https://umijs.org/zh-CN/docs/](https://umijs.org/zh-CN/docs/)

## dva
### dva介绍
dva 是一个基于 redux 和 redux-saga 的数据流方案，通过 reducers, effects 和 subscriptions 组织 model
dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。

dva 提供了 connect 方法。如果你熟悉 redux，这个 connect 就是 react-redux 的 connect 。把视图和模型连接起来。

动态加载model
如果每个功能页面是通过路由切换，互相之间没有关系的话，通常会使用webpack的require.ensure来做代码模块的懒加载。

动态扩展model
比如说，使用Object.assign来进行对象属性复制，就可以把新的内容添加或者覆盖到原有对象上。
可以借助dva社区的dva-model-extend库来做这件事。

使用take操作进行事件监听

多任务调度
任务的并行执行
```js
const [result1, result2]  = yield all([
  call(service1, param1),
  call(service2, param2)
])
```
把多个要并行执行的东西放在一个数组里，就可以并行执行，等所有的都结束之后，进入下个环节，类似promise.all的操作。一般有一些集成界面，比如dashboard，其中各组件之间业务关联较小，就可以用这种方式去分别加载数据，此时，整体加载时间只取决于时间最长的那个。
注意：上面代码中的那个：
```js
yield [];
```
不要写成：
```js
yield* [];
```
这两者含义是不同的，后者会顺序执行。

任务的竞争
```js
const { data, timeout } = yield race({
  data: call(service, 'some data'),
  timeout: call(delay, 1000)
});

if (data)
  put({type: 'DATA_RECEIVED', data});
else
  put({type: 'TIMEOUT_ERROR'});
```
这个例子比较巧妙地用一个延时一秒的空操作来跟一个网络请求竞争，如果到了一秒，请求还没结束，就让它超时。这个类似于Promise.race的作用。

dva中文文档地址[：https://dvajs.com/guide/](https://umijs.org/zh-CN/docs/)

### 数据流向
数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State。

### 案例
```js
app.model({
  namespace: 'count',
  state: {
    record: 0,
    current: 0,
  },
  reducers: {
    add(state) {
      const newCurrent = state.current + 1;
      return { ...state,
        record: newCurrent > state.record ? newCurrent : state.record,
        current: newCurrent,
      };
    },
    minus(state) {
      return { ...state, current: state.current - 1};
    },
  },
  effects: {
    *add(action, { call, put }) {
      yield call(delay, 1000);
      yield put({ type: 'minus' });
    },
  },
  subscriptions: {
    keyboardWatcher({ dispatch }) {
      key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
    },
  },
});
```

### 开发复杂SPA
在其中一个的effect里面做select操作，是可以获取另外一个中的state，从而可以共享全局。
在一个effect中，可以使用多个put来分别调用reducer来更新状态。

把多个要并行执行的东西放在一个数组里，就可以并行执行，等所有的都结束之后，进入下个环节，类似promise.all的操作。

```js
const [result1, result2]  = yield all([
  call(service1, param1),
  call(service2, param2)
])
```





antd pro关键知识点

## 方案介绍
#### 新版本的gitlab已经集成了CI/CD，可以通过配置，实现在推送代码到仓库，合并分支，创建tag等时机时来触发整个流程。我们一般可以将整个项目流程大致可以分为：
#### 代码拉取 -> 构建（编译）-> 执行自动化测试 -> 部署到服务器 -> 重启服务

## 实现步骤
#### 需要提供一台构建服务器，代码拉取，构建，自动化测试，部署到目标服务器，重启服务都是在构建服务器上门完成。
![微信图片_20220120095033.png](https://www.jaclynshi.top/img/1642648091070.png)
#### 需要在在构建服务器上安装git和gitlab-runner两个应用，git负责从仓库拉取最新的代码，gitlab-runner负责和gitlab 的cicd服务进行通信，触发对应的操作。
#### gitlab-runner需要进行配置后才可与gitlab通信，安装及配置流程如下：
### 安装gitlab-runner
```js
>wget -O /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64
>chmod +x /usr/local/bin/gitlab-runner
>useradd --comment 'GitLab Runner'--create-home gitlab-runner --shell /bin/bash
>gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner
>gitlab-runner start
```
### 注册gitlab-runner
#### 注册gitlab-runner与gitlab的连接，在gitlab的对应的项目设置菜单中找到CI/CD，展开Runner，找到Specific runners，找到如下图：
![图片2.png](https://www.jaclynshi.top/img/1642648091178.png)
#### 在部署服务器上执行
```js
>gitlab-runner register

Enter the GitLab instance URL (for example, https://gitlab.com/):
输入上图显示的URL
Enter the registration token:
输入上图显示的token
Enter a description for the runner:
[stepping-machine]: 
输入当前gitlab-runner的描述
Enter tags for the runner (comma-separated):
输入当前grunner的名称
Registering runner... succeeded                     runner=e1sRrUZi
Enter an executor: docker-ssh, parallels, ssh, virtualbox, docker+machine, kubernetes, custom, docker, shell, docker-ssh+machine:
暂时输入shell
Runner registered successfully. Feel free to start it, but if it's running already the config should be automatically reloaded!
```
#### 执行完上述命令后，回到gitlab项目的runner配置页面，下面显示可用的指定Runner，表示已经配置成功，即完成项目对应的runner配置。
### 配置项目，.gitlab.yml文件结构
#### 要启用项目的cicd，还需要在项目的根目录添加.gitlab.yml文件，
#### 一旦你已经添加了.gitlab-ci.yml到仓库中，GitLab将检测到该文件，并使用名为GitLab Runner的工具运行你的脚本，文件的结构如下图所示：
![微信图片_20220120101329.png](https://www.jaclynshi.top/img/1642648091289.png)
#### stages 节表示整个流水线的步骤，例如上图分为4个步骤
#### build_test（构建测试环境项目）
#### deploy_test （部署到测试环境）
#### build_test（构建生产环境项目）
##### deploy_test （部署到生产环境）

#### cache 节表示缓存内容，可以不设置
#### variables 节表示设置的变量，可以在执行脚本时动态传入

#### build_test_job 节表示具体执行的步骤信息，改名称可以随意指定，具体的配置如下
#### -stage 对应的步骤名称，在stages节中
#### -script 需要执行的脚本，在此处设置要执行的shell命令
#### -only 触发此步骤的分支
#### -tags 执行的runner名称，输入上面注册的runner名称
#### -artifacts 生成的附件，此处可以不配置

#### 经过上述配置后就完成了整个cicd相关的配置了，另外为了方便部署及执行远程命令，需要配置构建服务器到应用服务器的免密登录（公钥登录）
#### 我用的是xshell，通过xshell创建本地公钥，将本地拷贝的公钥放入服务器~/.ssh/authorized_keys文件内，重启ssh即可： service ssh restart

#### 根据以上配置，在推送代码到develop分支的时候，会触发build_test和deploy_test两个步骤，会在构建服务器上面调用对应的构建脚本build.sh和部署脚本deploy_webpack.sh

#### gitlab做的事情就是把gitlab上的代码拷贝到构建服务器上，所以脚本需要做的是打包，将静态资源包拷贝到目标服务器上。

#### build.sh 安装依赖包打包静态资源文件
![微信图片_20220120103745.png](https://www.jaclynshi.top/img/1642648232511.png)
#### deploy_webpack.sh 将打包文件传送到目标服务器中
![微信图片_20220120110939.png](https://www.jaclynshi.top/img/1642648232631.png)
![微信图片_20220120105047.png](https://www.jaclynshi.top/img/1642648091476.png)

## 实现细节
### 配置文件的维护
#### 可将配置文件模板放置于构建服务器，在部署时同步推送内容覆盖服务器的配置文件进行覆盖即可。
#### 关于敏感变量如秘钥，用户名密码等，可以托管在gitlab平台，然后在.gitlab-ci.yml文件中通过变量名获取值在传递给shell进行处理。
#### 在项目中点击设置->CI/CD 找到变量，展开即可设置变量，如下图
![图片3.png](https://www.jaclynshi.top/img/1642648091568.png)

### 构建环境的安装
#### 为了完成项目的构建和编译，需要安装各种环境，比如前端构建需要安装nodejs环境

### ci/cd运行情况监测
#### 流程将会以一些列流水线的形式运行，在项目菜单CI/CD菜单中可以检测运行情况，点击流水线，可以看到整体的每一条流水线的运行情况。

### 回滚方案
#### 需要在.gitlab-ci.yml对应的阶段作业配置下面配置了environment变量


所有文章