跳至主要內容
瀑布流布局步骤

瀑布流布局

  • 父容器相对定位,成员绝对定位
    • 利用topleft属性控制位置
  • 记录每一列的高度
    • 每次新增加成员时找到高度最低的那个将成员置于其下方
  • 一些细节
    • 一次性加载供展示
      • flex布局
        • flex-direction:column
        • flex-wrap:wrap
    • 动态插入数据

yyshino大约 3 分钟ComponentTool/Demo
防抖与节流

防抖

防抖:动作绑定事件,动作发生后一定时间后触发事件,在这段时间内,如果该动作又发生,则重新等待一定时间再触发事件。

几种实现


function debounce(func,time){
	let timer = null;
	return () => {
		clearTimerout(timer); // 事件再次触发,清除定时器 
		timer = setTimeout(() => { // 等待time时间后,再触发事件
			func.apply(this,arguments);
		},time);
	}
}


/**
 * 快速书写一个防抖函数
 * @description 只要一直调用, callback 将不会被触发
 * 在一次调用结束后, 只有等待 timeout ms 时间, 才能继续调用 callback
 * immediate 决定触发时机
 * @example 
 * 1. 点击按钮发送请求(保存数据之类的)
 * 2. 搜索时自动联想
 * 3. 自动保存
 * 4. Debouncing a resize/scroll event handler
 */
function debounce(callback, timeout, immediate) {
  let timer;
  return function () {
    const context = this; // 持有执行上下文
    const args = arguments; // 记录传参
    const later = function () {
      timer = null; // 贤者时间过了,重振旗鼓,重置为初始状态
      if (!immediate) callback.apply(context, args); // 设置为尾部调用才延时触发
    }
    const callNow = immediate && !timer; // 如果确认允许首部调用,且首次调用,那么本次立即触发
    clearTimeout(timer); // 杀掉上次的计时器,重新计时
    timer = setTimeout(later, timeout); // 重启一个计时器,过了贤者时间之后才触发
    callNow && callback.apply(context, args); // 设置为首部调用立即触发
  }
}

yyshino大约 2 分钟ComponentJS
轮播图实现步骤

轮播图实现思路

大概思路

  1. 创建轮播图容器
    1. flex实现图片水平布局
    2. position的绝对定位与相对定位实现轮播图
    3. overflow: hidden;将其他图片隐藏
  2. 轮播实现
    1. js实现
      1. 定时器实现图片不断左移
      2. 边缘处理
        1. 将第一张轮播图追加到一行图片之后,当切换到最后一张轮播图时,下一张即播放第一张图,当此图轮播完成后,将所有图片归位
    2. css实现
      1. 动画animate。 有一定限制
  3. 其他细节
    1. 根据图片数量,创建底部按钮

yyshino大约 5 分钟ComponentTool/Demo
自动化部署git项目

创建部署脚本deploy.sh

    #!/usr/bin/env sh

    # 确保脚本抛出遇到的错误
    set -e

    # 生成静态文件
    npm run build

    # 进入生成的文件夹
    cd docs/.vuepress/dist

    # 如果是发布到自定义域名
    # echo 'www.yourwebsite.com' > CNAME

    git init
    git add -A
    git commit -m 'deploy'

    # 如果你想要部署到 https://USERNAME.github.io
    git push -f git@github.com:USERNAME/USERNAME.github.io.git master

    # 如果发布到 https://USERNAME.github.io/<REPO>  REPO=github上的项目
    # git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages

    cd -


yyshino小于 1 分钟ComponentTool/Demo
优质整合

打造自己的开源库

整合组件 | 便于封装 | 建立属于自己的开源库 | 造轮子做准备


yyshino小于 1 分钟ComponentTool/Demo