2020年12月_自由的♂

原创收集11 个超火的前端必备在线工具，终于有时间上班摸鱼了

1. LightHouseLightHouse 是一个开源的自动化工具，用于改进网络应用的质量。可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。当为 Lighthouse 提供一个要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。让开发人员根据生成的页面性能的报告，来进行网站优化和完善，提高用户体验。可以参考失败的测试，看看可以采取哪些措施来改进应用。在里面你可以看到它给你各个方面的建议，比如图片、css、js 这些文件的处理，还有 ht

2020-12-17 16:00:16 2136 6

原创速度提高几百倍，记一次数据结构在实际工作中的运用

这段时间写了一堆源码解析，这篇文章想换换口味，跟大家分享一个我工作中遇到的案例。毕竟作为一个打工人，上班除了摸鱼看源码外，砖还是要搬的。本文会分享一个使用恰当的数据结构来进行性能优化，从而大幅提高响应速度的故事，提高有几百倍那么多。事情是这样的，我现在供职一家外企，我们有一个给外国人用的线下卖货的APP，卖的商品有衣服，鞋子，可乐什么的。某天，产品经理找到我，提了一个需求：需要支持三层的产品选项。听到这个需求，我第一反应是我好像没有见到过三层的产品选项，毕竟我也是一个十来年的资深剁手党，一般的产品选项好

2020-12-17 15:56:00 263

原创这10 个 GitHub 上超火的 CSS 奇技淫巧项目，找到写 CSS 的灵感！

You-need-to-know-css该项目是 CSS 的各种效果实现，尤其是动画效果。笔者把自己的收获和工作中常用的一些 CSS 小样式总结成这份文档。目前文档一共包含 43 个 CSS 的小样式（持续更新…），所以还是很不错的学习 CSS 的项目来的。比如：打字效果<style> main { width: 100%; height: 229px; display: flex; justify-content: center;

2020-12-17 15:53:57 957 4

原创 Chrome浏览器的渲染原理

正文VueVue2.0：Vue2.0 文档 Vue3.0：Vue3.0 文档 Vue-Router：Vue.js 官方的路由管理器。 Vuex：Vue.js 应用程序开发的状态管理模式。 Element-UI：饿了么UI组件库 View UI：一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。 Vuetify：用于构建功能丰富、快速的应用程序。 Buefy-UI：简单且轻量的UI库。 Quasar: 编写代码一次并同时将其部署为网站、移动应用和/或E

2020-12-17 15:50:41 642

原创从零构建到优化一个类似vue-cli的脚手架

前言想必大多数人在开发 vue 等 SPA 项目都时候都会直接用 vue-cli 等脚手架开发，一是方便省去了好多配置上的功夫，二是 vue-cli 毕竟是久经考验较为成熟的东西，遇到问题也能在网上找到相应解决方案。但是，如果我们要更好地理解脚手架的配置及其构建打包的机制，我们就有必要从零开始，依葫芦画瓢自己配置一个类似于 vue-cli 这样的项目了。在此，我做了以下简单配置，请各位大佬批评指正，并诚心希望能得到大佬的指点，解决文章最后关于 Tree Shaking 导致打包缺失 css 的问题。

2020-12-17 15:45:12 344

原创 18个webpack插件，总会有你想要的！

何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。Plugin 是一个扩展器，它丰富了 webpack 本身，针对是 loader 结束后，webpack 打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听 webpack 打包过程中的某些节点，执行广泛的任务。Plugin 的特点是一个独立的模块模块对外暴露一个 js 函数函数的原型 (prototype) 上定义了一个注入 compiler 对象的 apply方法

2020-12-17 15:41:37 230

原创搭建一个vue-cli4+webpack移动端框架

简介这是基于 vue-cli4 实现的移动端框架，其中包含项目常用的配置，组件封装及webpack优化方法，可供快速开发使用。技术栈：vue-cli4 + webpack4 + vant + axios + less + postcss-px2rem源码 github.com/Michael-lzg…// 安装依赖npm install// 本地启动npm run dev// 生产打包npm run build复制代码在一两年前，vue-cli3已经声驾到3.0+版本，

2020-12-17 15:39:32 427

原创总结vue知识体系之高级应用

vue 作为目前前端三大框架之一，对于前端开发者可以说是必备技能。那么怎么系统地学习和掌握 vue 呢？为此，我做了简单的知识体系体系总结，不足之处请各位大佬多多包涵和指正，如果喜欢的可以点个小赞！本文主要讲述一些vue开发中的几个高级应用，希望能对大家有所帮助。Vue.use我们使用的第三方 Vue.js 插件。如果插件是一个对象，必须提供install方法。如果插件是一个函数，它会被作为install方法。install方法调用时，会将Vue作为参数传入。该方法需要在...

2020-12-17 15:35:33 154

原创总结vue知识体系之实用技巧

vue 作为目前前端三大框架之一，对于前端开发者可以说是必备技能。那么怎么系统地学习和掌握 vue 呢？为此，我做了简单的知识体系体系总结，不足之处请各位大佬多多包涵和指正，如果喜欢的可以点个小赞！本文主要讲述一些vue开发中的实用技巧。监听组件的生命周期比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，常规的写法可能如下： // Parent.vue<Child @mounted="doSome...

2020-12-17 15:34:28 176

原创总结vue知识体系之基础入门篇

vue 作为目前前端三大框架之一，对于前端开发者可以说是必备技能。那么怎么系统地学习和掌握 vue 呢？为此，我做了简单的知识体系体系总结，不足之处请各位大佬多多包涵和指正，如果喜欢的可以点个小赞！Vue 的优缺点是什么优点：低耦合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。可重用性。你可以把一些视图...

2020-12-17 15:33:23 200

原创总结移动端H5开发常用技巧（干货！）

html 篇常用的meta属性设置meta对于移动端的一些特殊属性，可根据需要自行设置<meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋转<meta name="full-screen" content="yes"> //全屏显示<meta name="browsermode" content="application"> //UC应用模

2020-12-17 15:31:57 234

原创分享8个非常实用的Vue自定义指令

在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过Vue.directive( id, [definition] )方式注册全局指令。然后在入口文件中进行Vue.use()调用。批量注册指令，新建directives/index.js文件import copy from ...

2020-12-17 15:30:49 130

原创响应式网页中的高度设计，你认真的吗？

大家看到这个标题可能会以为小智是不是又写错别字了 ????，响应式高度设计？你认真的吗？因为“响应式Web设计”通常是在多个宽度和设备尺寸上检查浏览器。我们一般通过减小宽度调整水平方向的响应能力，但是我很少看到通过减小浏览器高度来进行垂直响应的考虑。此时，智米么内心可能有一丝的波动，并带有许些疑问：我们需要降低浏览器的高度吗？是的，我们一直探讨一下。当我们在设计网站的时候，不依赖实际数据进行假设是不好的，水平和垂直测试的责任也是非常重要。为什么要测试高度？对于一个设计师来说，一个不合理的

2020-12-17 15:29:21 631

原创 10 个事例，有助于你理解 ES 中的 Promise

在开发中，了解 JavaScript 和 Promise 基础，有助于提高我们的编码技能，今天，我们一起来看看下面的 10 片段，相信看完这 10 个片段有助于我们对 Promise 的理解。片段1：const prom = new Promise((res, rej) => { console.log('first'); res(); console.log('second');});prom.then(() => { console.log('third');

2020-12-17 15:27:42 225

原创十八个 JavaScript 入门技巧！

1. 转字符串const input = 123;console.log(input + ''); // '123'console.log(String(input)); // '123'console.log(input.toString()); // '123'2. 转数字const input = '123';console.log(+input); // 123console.log(Number(input)); // 123console.log(parseIn

2020-12-17 15:26:43 155

原创 17 个提升用户体验图像特效库

1.imagehover地址：https://github.com/ciar4n/imagehover.cssimagehover.css-纯CSS3鼠标滑过图片效果动画库，44种鼠标滑过效果2. ImageTiltEffect地址：https://github.com/codrops/ImageTiltEffectTiltEffect是一款让图像跟随鼠标产生微妙立体倾斜效果的插件，使其有层次感和深度感。3.Magnifier.js地址：https://github.c.

2020-12-17 15:25:24 315

原创 17个你可能还不知道 JS 技巧！

1.三元运算符新手let hungry = true;let eat; if (hungry == true) { eat = 'yes'; } else { eat = 'no';}老手let hungry = true;let eat = hungry == true ? 'yes' : 'no';2.数字转字符串/字符串转数字新手let num = 15; let s = num.toString(); // number to

2020-12-17 15:23:41 134

JNPF快速开发平台的博客