jimmiemax / web-develop-knowledge Goto Github PK

分支命名规则

• 每次提交必须写明注释，如果是修复 Bug，请加上 Bug 号
• 创建特性分支，名称要以 feture/开头，加上特性名
• 创建发布分支，名称要以 release/开头，加上预发布版本号
• 创建 Bug 修复分支，名称要以 bugfix/开头，加上 Bug 号
• 创建标签，名称要以 tag/开头，加上发布版本号
• 合并分支时必须使用--no-ff 参数，以保留合并历史轨迹

Header 部分只有一行，包括三个字段：type（必需）、scope（可选）和 subject（必需）。 type:

• feat：新功能（feature）
• fix：修补 bug
• docs：文档（documentation）
• style： 格式（不影响代码运行的变动）
• refactor：重构（即不是新增功能，也不是修改 bug 的代码变动）
• test：增加测试
• chore：构建过程或辅助工具的变动

• Vue+Element
• React+Ant Design
• Angular

容器的属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

• transition: 过渡动画

  • transition-property: 属性
  • transition-duration: 间隔
  • transition-timing-function: 曲线
  • transition-delay: 延迟
  • 常用钩子: transitionend

• animation / keyframes

  • animation-name: 动画名称，对应@keyframes
  • animation-duration: 间隔
  • animation-timing-function: 曲线
  • animation-delay: 延迟
  • animation-iteration-count: 次数
    • infinite: 循环动画
  • animation-direction: 方向
    • alternate: 反向播放
  • animation-fill-mode: 静止模式
    • forwards: 停止时，保留最后一帧
    • backwards: 停止时，回到第一帧
    • both: 同时运用 forwards / backwards
  • 常用钩子: animationend

• 动画属性: 尽量使用动画属性进行动画，能拥有较好的性能表现

  • translate
  • scale
  • rotate
  • skew

栈堆，基本数据类型与引用数据类型;

• 基本类型--名值存储在栈内存中
• 引用数据类型--名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值

递归实现深拷贝

function deepClone(obj) {
  let objClone = Array.isArray(obj) ? [] : {};
  if (obj && typeof obj === "object") {
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        //判断ojb子元素是否为对象，如果是，递归复制
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone(obj[key]);
        } else {
          //如果不是，简单复制
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}

let a = [0, 1, [2, 3], 4],
  b = deepClone(a);
a[0] = 1;
a[2][0] = 1;
console.log(a, b);

前后端分离开发 Mock.js 参考文档

1. webpack 参考文档
2. parcel 参考文档

1. DNS 解析
2. TCP 三次握手
3. 发送请求，分析 url，设置请求报文(头，主体)
4. 服务器返回请求的文件 (html)
5. 浏览器渲染
   • HTML parser --> DOM Tree
     • 标记化算法，进行元素状态的标记
     • dom 树构建
   • CSS parser --> Style Tree
     • 解析 css 代码，生成样式树
   • attachment --> Render Tree
     • 结合 dom 树 与 style 树，生成渲染树
   • layout: 布局
   • GPU painting: 像素绘制页面

1. 整体的 script(作为第一个宏任务)开始执行的时候，会把所有代码分为两部分：“同步任务”、“异步任务”；
2. 同步任务会直接进入主线程依次执行；
3. 异步任务会再分为宏任务和微任务；
4. 宏任务进入到 Event Table 中，并在里面注册回调函数，每当指定的事件完成时，Event Table 会将这个函数移到 Event Queue 中；
5. 微任务也会进入到另一个 Event Table 中，并在里面注册回调函数，每当指定的事件完成时，Event Table 会将这个函数移到 Event Queue 中；
6. 当主线程内的任务执行完毕，主线程为空时，会检查微任务的 Event Queue，如果有任务，就全部执行，如果没有就执行下一个宏任务；
7. 上述过程会不断重复，这就是 Event Loop 事件循环；

• 宏任务(macro-task)：整体代码 script、setTimeOut、setInterval
• 微任务(micro-task)：promise.then、promise.nextTick(node)

• 函数节流是指一定时间内 js 方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。
• 函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。

函数节流应用的实际场景，多数在监听页面元素滚动事件的时候会用到。因为滚动事件，是一个高频触发的事件。以下是监听页面元素滚动的示例代码：

// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function () {
  if (!canRun) {
    // 判断是否已空闲，如果在执行中，则直接return
    return;
  }

  canRun = false;
  setTimeout(function () {
    console.log("函数节流");
    canRun = true;
  }, 300);
};

函数防抖的应用场景，最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后，前端才需要检查格式是否正确，如果不正确，再弹出提示语。以下还是以页面元素滚动监听的例子，来进行解析：

// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function () {
  clearTimeout(timer); // 清除未执行的代码，重置回初始化状态

  timer = setTimeout(function () {
    console.log("函数防抖");
  }, 300);
};

现代浏览器为 JavaScript 创造的 多线程环境。可以新建并将部分任务分配到 worker 线程并行运行，两个线程可 独立运行，互不干扰，可通过自带的 消息机制 相互通信。

常见状态码

• 1xx: 接受，继续处理
• 200: 成功，并返回数据
• 201: 已创建
• 202: 已接受
• 203: 成为，但未授权
• 204: 成功，无内容
• 205: 成功，重置内容
• 206: 成功，部分内容
• 301: 永久移动，重定向
• 302: 临时移动，可使用原有 URI
• 304: 资源未修改，可使用缓存
• 305: 需代理访问
• 400: 请求语法错误
• 401: 要求身份认证
• 403: 拒绝请求
• 404: 资源不存在
• 500: 服务器错误

• cookie 设置 httpOnly
• 转义页面上的输入内容和输出内容

• get 不修改数据
• 不被第三方网站访问到用户的 cookie
• 设置白名单，不被第三方网站请求
• 请求校验

冒泡排序: 两两比较

function bubleSort(arr) {
  var len = arr.length;
  for (let outer = len; outer >= 2; outer--) {
    for (let i = 0; i <= outer - 1; i++) {
      if (arr[i] > arr[i + 1]) {
        [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];
      }
    }
  }
  return arr;
}

初始在第一级，到第一级有 1 种方法(s(1) = 1)，到第二级也只有一种方法(s(2) = 1)， 第三级(s(3) = s(1) + s(2))

function cStairs(n) {
  if (n === 1 || n === 2) {
    return 1;
  } else {
    return cStairs(n - 1) + cStairs(n - 2);
  }
}

Updating...