iwowen的博客
前端
前端

使用rollup和typescript搭建自己的函数库

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

2020年12月02日 0条评论 56点热度 1人点赞 阅读全文
前端

前端关于性能优化方面的记录

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

2020年05月10日 0条评论 78点热度 1人点赞 阅读全文
前端

关于前端BFC相关笔记

什么是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或…

2020年05月09日 0条评论 44点热度 0人点赞 阅读全文
前端

js数据类型和数据转换

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

2020年04月25日 0条评论 40点热度 0人点赞 阅读全文
前端

dom事件笔记

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

2020年04月25日 0条评论 35点热度 0人点赞 阅读全文
前端

css盒模型

标准模型 + 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…

2020年04月15日 0条评论 39点热度 0人点赞 阅读全文
vue

在vue中使用mock

通过一个简单的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…

2020年03月30日 0条评论 36点热度 0人点赞 阅读全文
前端

前端css实现左中右布局

高度已知,实现左中右布局 浮动 左右通过浮动控制 <!-- 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:…

2020年02月15日 0条评论 36点热度 0人点赞 阅读全文
前端

js中new的过程是什么?

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…

2020年01月18日 0条评论 31点热度 0人点赞 阅读全文
前端

js函数节流和防抖

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

2020年01月15日 0条评论 25点热度 0人点赞 阅读全文
12
最新 热点 随机
最新 热点 随机
使用rollup和typescript搭建自己的函数库 前端关于性能优化方面的记录 关于前端BFC相关笔记 js数据类型和数据转换 dom事件笔记 css盒模型
关于前端BFC相关笔记前端关于性能优化方面的记录前端使用canvas实现贪吃蛇小游戏前端css实现左中右布局如何在react项目中使用redux?使用create-react-app打造多页面应用
前端css实现左中右布局 js数据类型和数据转换 css盒模型 使用rollup和typescript搭建自己的函数库 前端使用canvas实现贪吃蛇小游戏 在vue中使用mock
分类目录
  • react
  • vue
  • 前端
  • 工具
文章归档
  • 2020年12月 (1)
  • 2020年5月 (2)
  • 2020年4月 (3)
  • 2020年3月 (1)
  • 2020年2月 (1)
  • 2020年1月 (2)
  • 2019年12月 (1)
  • 2019年11月 (3)
  • 2019年10月 (1)

COPYRIGHT © 2020 iwowen的博客. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

蜀ICP备19037276号-1