- 博客(10)
- 收藏
- 关注
RSS订阅
原创 webpack loader—在md文件中写vue
一、需求一般在开发公司内部或者自己的组件库的时候，往往需要编写一些demo用来调试组件，然后在编写文档的时候，我们又需要给对应的组件编写示例代码和demo，就显得很麻烦。所以我想把两件事一起做了！二、思路1、把文档中的示例代码run起来，作为我们的调试代码2、markdown-it可以把md标记转换为html代码3、在webpack loader中可以使用markdown-it来转换代码，将整个md文件转换为vue单文本组件4、在loader中提取vue代码标记为子组件，然后再次请求当前
2020-07-25 23:25:14
1689
2
原创 前端性能优化总结
概要一说到页面性能优化，可能大家都会想到很多关键词，例如：雅虎军规、2-5-8原则、3秒首屏指标等。虽说这些东西不是我们开发的硬性指标，但是在我们追求页面性能、用户体验等或者迫于良心谴责（自老板的压力），就要对我们项目开发的代码进行优化调整。加载优化（1）、减少http(s)请求数。据统计，页面响应时间的80%花在图片、样式及脚本等资源的下载上，但这些又是网页渲染不可或缺的...
2019-09-03 21:01:03
249
原创 手撸 webpack+vue 打包环境
概要如果我们手动去配置一个webpack+vue的开发环境，这中间不免要使用到各种依赖。下图所示我在本项目中所用到的依赖包在本文章中以代码形式有展示。如果我们还要使用别的更多依赖，那么我们就要使用更多的依赖。但是这些依赖的开发者不是同一个人，功能各不相同，带来的结果就是依赖的使用方法各有各的风格，每一个都要详尽去阅读他们的文档。于是vue-cli应运而生，简单几步操作就可以搭建出基于v...
2019-08-17 11:57:18
792
原创 js类型转换大全
概要JavaScript是一种弱类型语言，在定义变量的时候不需要指定变量类型所带来的后果就是：使用的时候，遇到不符合的类型时就会触发隐式类型转换，稍不注意，就会得到预期之外的结果。所以这篇文章的目的为了更好的避免出错和巧妙的利用js变量之间的类型转换。我们都知道，js的基本数据类型有：String、基本数据类型 Boolean、基本数据类型 Number、基本数据类型 undef...
2019-07-20 21:26:55
613
原创 JavaScript进阶之手写Promise
前言Promise异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。这里手写一次，希望能和大家一起彻底掌握Promise。概述所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个...
2019-07-05 16:52:51
594
原创 js 原型继承
<script> /* * js 原型继承 * @params {Function} supperClass; 父类构造函数 * * @params {Function}; 返回子类构造函数 */ Function.prototype.prototy...
2019-06-05 14:52:44
165
原创 popper.js 使用
Popper.js是一款功能强大的JS定位引擎。最近在写tooltip弹窗时，需要用到提示框定位的问题，然后度娘推荐我使用popper.js库，查看了iview库和element库的源码，发现定位都是用的这个玩意儿。既然大佬们都在用这个，我也去Popper.js官网瞅了下，没有中文文档，不得不吐槽一下。然后就是demo也少的可怜，而且网上的教程也比较少。于是就手敲了一遍这个库的使用属性及方法，相关...
2019-05-15 20:48:37
63432
13
原创 手摸手教你配置rollup构建js类库
什么是 ROLLUP?rollup自称自己是下一代的 JavaScript 模块打包工具。至于后面会有什么高级的打包工具我们先不管，在这个大前端时代，当你使用 ES2015 模块来编写你的者库时，rollup通过 Tree-shaking 技术，抽取式打包代码我们的js文件到一个单独的文件确实当下比较好的选择了。我也尝试过使用webpack来打包，但是要求严格（挑剔）的大家肯定会对...
2019-04-06 12:07:42
967
原创 js递归优化
1、尾调用优化尾调用，简单的说，就是一个函数执行的最后一步是将另外一个函数调用并返回。以下是正确示范： function foo(n){ return bar(n); } function func(x){ if(x &amp;gt; 0){ return bar(x); } return bar(x); }以下是错误示范： function foo(x){ ...
2018-10-22 16:47:48
3523
原创 js+css+html购物车动画特效
在购物网站中，加入购物车的功能是必须的功能，比较大的购物网站（例如：某宝、某东）在点击加入购物车的时候，会将选中商品以抛物线方式弹入购物车内，提高用户体验。网上也有现成的插件和教程，但是感觉写的不是很清楚，自己就摸索了一下，写一写笔记。实现方法大致分为两种：1、js计算坐标实现以点击添加按钮位置作为坐标原点建立坐标系（这里坐标的Y轴与常见坐标系的Y轴方向相反），然后就近取一个坐标点，最...
2018-10-09 20:58:00
5513
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人