20200426 前端开发日报

Vue首屏优化记录;一个全新的Vue拖拽特性实现:“调整尺寸”部分;聊聊 HTTPS 的工作原理;基于vue2,eggjs,mysql的个人博客(正在更新);精读:10个案例让你彻底理解React hooks的渲染逻辑;Node 企业级框架和应用Egg.js 入门;一文看懂Vue2的数据侦测原理;后台管理系统,前端根据角色动态设置菜单栏和路由

  1. Vue首屏优化记录

    vue引入element-ui之后生成的vendor特别大,导致第一次访问页面加载特别慢,查询了网上的一些方法,大致有几个方式可以解决 cdn gzip vue路由懒加载 element-ui按需引入 cdn 使用cdn的方式在index.html中引用,不过我试了,不知道是不是没有弄对,按照网上的操作了之后,打的包是小了,但是element-ui没有…

  2. 一个全新的Vue拖拽特性实现:“调整尺寸”部分

    关于拖拽 CabloyJS提供了完备的拖拽特性,可以实现 移动 和 调整尺寸 两大类功能,这里对 调整尺寸 的开发进行阐述 关于 移动 的开发,请参见: 拖拽:移动 演示 开发步骤 下面以模块 test-party 为例,说明 拖拽(调整尺寸) 的开发步骤 完整源码请参见文件 src/module/test-party…

  3. 基于vue2,eggjs,mysql的个人博客(正在更新)

    为了避开烦人的 eslint,选择了手动选择特性:同时没有选择 Linter/Formatter,使用 vscode 中的插件 prettier 和 vetur 配合格式化代码。

  4. 精读:10个案例让你彻底理解React hooks的渲染逻辑

    写在开头: 由于项目全面技术转型,项目里会大量启用到hooks,于是有了这次写作 作为一个class组件的重度爱好者,被迫走向了hooks,阅读hook的源码(惨) 原创:从零实现一个简单版React (附源码) 如何优化你的…

  5. Node 企业级框架和应用Egg.js 入门

    Egg.js 缩写为 Egg,是阿里开源的企业级Node.js 框架,专注于企业级框架和应用而生。Egg特性:提供基于 Egg 定制上层框架的能力,高度可扩展的插件机制,内置多进程管理,基于 Koa 开发,性能优异,框架稳定,测试覆盖率高,渐进式开发。下面雷雪松带大家一起来快速入门Node 企业级框架和应用Egg.js 。 1、Egg 脚手…

  6. 一文看懂Vue2的数据侦测原理

    1.Object的变化侦测: 什么是变化侦测 Vue的状态发生改变的时候,框架知道是哪个状态发生改变(这点和react区别是react并不知道是哪一个状态发生了改变,只能通过vdom暴力比对来找出哪些Dom节点需要重新渲染),可以进行更细粒度的更新;所谓更细粒度更新就是说有一个状态绑定着n个依赖组件,一旦这个状态发生…

  7. 后台管理系统,前端根据角色动态设置菜单栏和路由

    后台管理系统都有这种需求,不同角色账号进来后,就只能看到自己权限内的页面 这种权限限制,需要前后端共同完成。后端需要在用户越权访问时,返回错误提示。 也可让后端直接返回路由列表。只是这样不够灵活,之…

  8. ECMAScript 2020 的新功能速成

    ECMAScript 2020 是我们最喜欢的编程语言的第 11 版,其中包含一些新功能。有些是小特性,但有些将会有可能永远改变我们编写 JavaScript 的方式。

  9. 霖呆呆向你发起了多人学习webpack-构建方式篇(2)

    你盼世界,我盼望你无 bug 。Hello 大家好!我是霖呆呆! 什么?!你还想要 "呆妹" 出来给你讲 webpack ?!小伙子,你的想法很危险:x:啊。 不可能的,下次想要见到 "她" 可能要等到呆呆 5000 粉的时候吧:unamused:。在这之前我绝不可能再女装:womans_clothes:了 :blush:。 (所以请醒醒…

  10. vue开发父子组件通信的一个小坑

    记录一下vue开发父子组件通信的一个小坑 场景:子组件使用echart展示图表,所需options由父组件通过prop传入,父组件中的options初始值为空,在mounted钩子函数中发起http请求获取数据然后更新options,结果子组件无法正确显示图表,经过一番查找解决了问题,通过本文做个记录,也希望能帮到以后遇到相同问题的小伙…

  11. canvas图片换色(转加自我总结)

    最近有一个需求说是需要换图片颜色。 最后其实给我拒绝了,因为我说很难实现。但是心中还是上心了。 下面是替换颜色的方法。效果还行吧。一般般 主要代码还是copy别人的。这里就写一下,当记录 1、canvas的getImageData所生成的图片组成 根据循环可以得出 图片组成是ARGB格式,第一个是透明度,后续rgba 2、得出…

  12. web 图像技术:前端引入图片的各种方式及其优缺点

    点赞再看,养成习惯本文 GitHub [链接] 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

  13. 一小时的时间,上手 Webpack

    慢一拍 查看代码 序言 为什么要用构建工具?如果你只会js+css+html,最多再加上jquery,那么当你听到构建工具这个说法是不是蒙的?这种情况下我不建议你学习webpack,建议你学下 vue 或者 react 框架,这两个框架都有自己的脚手架,所谓脚手架就是别人用构建工具帮你搭好了原始项目,你…

  14. JS 的立即执行函数

    JS 的立即执行函数 本文写于 2019 年 12 月 7 日 其实 ES6 之后有了之后,很多之前的用法都没必要了,立即执行函数就是其一。 今天看到一道面试题: 请「用自己的语言」简述 立即执行函数是什么 立即执行函数有什么用途 我愣了一下,突然发现自己不是很能清晰的解答这个概念。 我只知道 () 代表了两种作…

  15. 前端面试的那些事儿~JavaScript 原始数据类型

    自我总结面试常问的一些细节,方便不断回顾与补充。第一次发表文章,如有问题或不足之处望及时指出。 JavaScript 原始数据类型 1.1 基础数据类型 7大基础数据类型 boolean null undefined number string symbol BigInt(Stage阶段) 1.2 boolean …

  16. JavaScript常量和变量、表达式 —— 基础语法(3)

    JavaScript基础语法(3) 常量和变量 编程实质上就是在对各种各样的数据进行处理。 在对数据进行处理的过程中,需要使用一个容器将数据保存起来,这样就可以实现对容器中的数据进行处理。 根据容器中保存的数据在程序运行的过程中 可不可以改变 ,容器分成了两种: 常量和变量 一、常量 常量就是…

  17. 一份vue3-beta.3相关文集前来报告,请您收下

    一在于技术本身的缺陷和不合理、而目前又得以支持改造; 二是受环境影响和业务冲击下,上有政策下有对策;三得以硬件和底层的支持,上游技术不断更新进步。

  18. 打通多个视觉任务的全能Backbone:HRNet

      磐创AI分享    来源 | GiantPandaCV 编辑 | pprp 【导读】 HRNet是微软亚洲研究院的王井东老师领导的团队完成的,打通图像分类、图像分割、目标检测、人脸对齐、姿态识别、风格迁移、Image Inpainting、超分、optical flow、Depth est…

  19. Webpack那些你不知道的事

    随着前端工程化的不断发展,构建工具也在不断完善。 Webpack 藉由它强大的扩展能力及万物皆模块的概念,逐渐成为前端构建工具中的小王子,随着webpack 4 的不断迭代,我们享受着构建效率不断提升带来的快感,配置不断减少的舒适,也许你已经可以熟练使用Webpack进行项目构建,但是在编写自己的 Plugin 的时候不知道如何…

  20. vue项目之服务器文件压缩

    参照上一篇博客最后的图,虽然采用了路由懒加载,但是首页加载的速度仍然比较慢,因为我们的 chunk-vendors.js 文件还是比较大 下面我们就可以在服务器端想点办法,客户端请求某个文件时,服务区端采用一定的压缩算法,对文件体积进行压缩后,再发送给客户端 对于 node.js 来说,可以使用 compression 中间件 1、…

  21. 如何在Vue2与Vue3中构建相同的组件

    随着Vue3即将发布,许多人都在想“ Vue2与Vue3有何不同?” 为了显示这些更改,我们将在Vue2和Vue3中构建一个简单的表单组件。 在本文结尾,你将了解Vue2和Vue3之间的主要编程差异,并逐步成为一名更好的开发人员。 创建我们的模板 对于大多数组件,Vue2和Vue3中的代码即使不完全相同,也是非常相似的。但是,Vue…

  22. 在 JavaScript 中为什么 Math.max() 会比 Math.min() 小?

    Math.max() < Math.min() === true 惊讶吗?这就是为什么在不传递参数时,JavaScript 中取最大值函数小于取最小值函数的原因。 你知道在 JavaScript 中 Math.max() 不传参数返回的值要比 Math.min() 不传参数返回的值小的原因吗? console.log(Math.max() < Math.min()) // true 复制代码 …

  23. 18 个漂亮的 Bootstrap 模板

    如果你正在阅读本文,则意味着你与时俱进。根据预测,对模板的需求会不断增长,这是基于当前全球新冠肺炎大流行的现状而得出的,这是一个非常严重和悲惨的情况,我只想强调其后果:人们被迫待在家里,从而线上活…

  24. Webpack 实战入门系列(二):插件使用及热更新打包

    慢一拍 查看代码 序言 今天带来webpack入门之三,这可能是入门系列最后一篇了,后面会进入进阶系列。之所以说是入门最后一篇,是因为我觉得很多项目只需要有这个入门级别就可以很好的实现升级维护了。 现在vue、react很流行,新项目基本用这些新框架,组件化开发确实是趋势,但是他…

  25. GitHub 上的一些技巧、工具和搞笑的东西

    我用 GitHub 来辅助项目开发、业务开发和市场营销经理等工作已有10多年了。在此过程中,我掌握了一些技巧来管理我的通知,快速查找内容和创建 pull 请求,将 markdown 发挥极限,并通过一些第三方扩展个性化我的…

  26. 关于JS垃圾回收机制

    一、垃圾回收机制的必要性 由于字符串、对象和数组没有固定大小,所以当它们的大小已知时,才能对它们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时,解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存,最终都要释放这些内存以便它们能够被再用,否则,JavaScript的解释器将会消耗…

  27. vue 使用 vue-pdf 实现pdf在线预览

    之前的demo增加了图片预览,于是今天下午追完番剧就突然想到能不能把pdf在线预览也做了,说干就干,刚开始查了很多教程,我发现很多人都在说什么pdf.js这个库,这当然没什么问题,pdf.js的确可以非常完美的实现pdf在线预览的过程,但是感觉这样直接进去有点不太优雅,于是找找看看有没有什么现成的组件,发现有vue-pdf这…

更多内容请关注公众号【前端开发博客】每日更新


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流