简介 每当在项目中需要使用一些工具函数时，一般需要去引入一些第三方的工具库，而像lodash这样的工具库又体积很大，影响打包后整个项目的大小。所以封装自己的代码库就很必要了。 本篇文章将介绍如何使用rollup工具生成自己的代码库； 为了提高代码可维护性，将使用typescript编写代码； 为了保证代码质量，将通过jest进行代码测试; 工具库需要可查阅的文档，为了更好的支持typescript，使用了typedoc生成文档。 依赖的库 rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成…

性能优化的原则 多使用内存、缓存或其他方法 减少cpu计算量，减少网络加载耗时 （使用与所有便程的性能优化 --- 空间换时间） 从哪里入手 让加载更快 减少资源体积：压缩代码 减少访问次数：合并代码，ssr服务器端渲染，缓存 使用更快的网络，使用CDN 让渲染更快 css放到head，js放到body下面 尽早开始执行js，用DOMContentLoaded触发 懒加载（图片懒加载，上滑加载） 对dom缓存 频繁dom操作，合并插入dom结构 节流throttle 防抖 debouce

什么是BFC？ W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的BFC（Block Fromatting Context， 即块级格式上下文）。 BFC的触发条件 1. 根元素html 2. float不为none 3. overflow不为visible 4. position为fixed或…

数据类型 原始数据类型 Boolean String Number Symbol Null Undefined 对象 Object 显式类型转换 String 函数 原始类型转换 数值：转换为相应的字符串 字符串：转换后还是原来的值 布尔值：转换后为'true'或者'false' undefined: 转换后为'undefined' null: 转换后为'null' 对象类型转换 先调用toString方法，如果toString方法返回的是原始类型的值，则调用String函数，不在继续。 如果toString返回的…

dom dom0 element.onclick = function() {} dom2 element.addEventListener('click', function(){}, false) dom3 事件类型添加了很多 element.addEventListener('keyup', function(){}, false) 制定dom1标准的时候没有定义事件 dom事件类 事件流 -> 目标阶段 （捕获） 目标阶段 -> 事件流 （冒泡） 捕获的具…

标准模型 + IE模型 标准模型宽高为content的宽高 box-sizing: content-box; IE模型宽高是 content + border + padding 的宽高 box-sizing: border-box; js如何设置和获取元素宽高 dom.style.width/height // 只能获取内联样式的宽和高 dom.currentStyle.width/height // 能够拿到最后的样式，但只有ie支持 window.getComputedStyle(dom).width/hei…

通过一个简单的demo演示如何在vue项目中使用mock 使用vue-cli3开始vue项目 npm install -g @vue/cli vue create mockdemo cd mockdemo npm run serve 安装及使用mock 使用npn安装mockjs npm install mockjs --save 在项目src中创建mock文件夹，文件夹中创建index.js import Mock from 'mockjs' const Random = Mock.Rando…

高度已知，实现左中右布局 浮动 左右通过浮动控制 <!-- float --> <style type="text/css" media="all"> .layout-1 .content > div{ height: 100px; } .layout-1 .center{ background-color: blue; } .layout-1 .left{ float: left; width: 300px; background-color:…

new的过程： 1、创建新对象 2、新对象的proto指向构造函数的prototype 3、执行构造函数，this上下文指向新对象 4、构造函数返回了对象，放弃之前的对象，返回新的对象；反之，返回之前建立的对象。 function newObj(func) { var obj = new Object() obj.__proto__ = func.prototype var o = func.call(obj) if (typeof o === 'object') { return o } el…

什么是函数节流？ 就是函数在一定时间只能执行一次。 举例：再使用mousemove事件时，函数会不断触发，为了节省计算机资源和网络资源，控制函数调用频率，也就是n秒内，不管调用多少次，只生效一次。 什么是函数防抖？ 函数被控制在n秒后再执行，如果时间内再次触发函数则重新计时。 举例：在一定时间内点击两次按钮，只有最后一次有效。 怎么实现函数节流？ 使用定时器对函数调用进行限制。 每次调用函数时创建定时器，传入所需函数。每次只有当函数执行完毕后才能重新创建定时器。这样，一定时间内频繁调用函数时，如果定时器正在生效则不…