20200607 前端开发日报

使用 Nodejs 开发的 SpaceX-API 开源了;四年前端带你理解路由懒加载的原理;从零开始解说vue中动态组件的创建和使用;一分钟玩转 Git;来自 1000+ 个项目的 10 大 JavaScript 错误(以及如何避免);javascript 阻断程序运行;html篇–这可能是目前较为全面的html面试知识点了吧;Vuex的各个模块封装的实现

  1. 使用 Nodejs 开发的 SpaceX-API 开源了

    上面是这个图片不是从网上随便找的,来自于 SpaceX-API 项目的 Github 网站,想起了之前说的一个玩笑 “面试造火箭” 这次是真的造火箭了。。。 SpaceX-API 是什么? SpaceX-API 是一个用于火箭、核心舱、太空舱、发射台和发射数据的开源 REST API。 https://docs.spacexdata.com 展示了所提供的 API 接口,还包括…

  2. 四年前端带你理解路由懒加载的原理

    前言 说起路由懒加载,大家很快就知道怎么实现它,但是问到路由懒加载的原理,怕有一部分小伙伴是一头雾水了吧。下面带大家一起去理解路由懒加载的原理。 路由懒加载也可以叫做路由组件懒加载,最常用的是通过 import() 来实现它。 function load(component) { return () => import(`views/${component}`…

  3. 从零开始解说vue中动态组件的创建和使用

    逻辑: 用户手动选择加入那些组件 方式:通过element ui tree组件复选框来选择,加载哪个组件 1.在html页面构建 加入keep-alive是保持这些组件的状态,以避免反复重渲染导致的性能问题 el-tree(:data="treeData" ref="tree" class="filter-tree" show-che…

  4. 一分钟玩转 Git

    今天又有新来的小朋友问我关于 Git 的用法,我发现还是有蛮多新人不会用的,或者用不好的。其实想想自己刚工作时也是倒腾不清楚这些参数和用法,而且总怕出错,慢慢的多看文档、用得多了就熟悉了,今天简单跟大家…

  5. 来自 1000+ 个项目的 10 大 JavaScript 错误(以及如何避免)

    为了回馈我们的开发人员社区,我们查看了包含数千个项目的数据库,并发现了JavaScript中的前10大错误。我将向你展示导致它们的原因以及如何防止它们发生。如果你避免这些“陷阱”,它将使你成为更好的开发人员。 由于数据为王,因此我们收集、分析并排名了前10个JavaScript错误。Rollbar收集每个项目的所有错误,…

  6. javascript 阻断程序运行

    JavaScript 是单线程的,一段 Js 程序的运行会占满整个程序进程,我们通常会想方设法的通过异步编程来减少程序的阻塞,但在某些特殊的场景下我们需要阻塞程序的运行,那么今天就反其道而行之,看看通过怎么样正常的方式来阻塞 Js 运行。 方法一 :无限循环 单线程的 JavaScript 可以给我们灵感,只要程序不断的计算…

  7. html篇–这可能是目前较为全面的html面试知识点了吧

    也不知道有没有跟小编有同感的童鞋,随着技术的逐(ri)渐(yi)提(tui)升(bu),对于一些底层的概念性的知识点却有些遗忘。有时候知道是这么个意思,但是表述出来的时候也没能完整的说到点子上。出现此现象的时候,小编觉得是时候该做点什么了(嗯!)。 以下是小编就这HTML常见的问题整理出来的知识点,后继还会出 CSS …

  8. Vuex的各个模块封装的实现

    一、各个模块的作用: state 用来数据共享数据存储 mutation 用来注册改变数据状态(同步) getters 用来对共享数据进行过滤并计数操作 action 解决异步改变共享数据(异步) 二、 创建文件: actions.js getters.js index.js mutations.js mutation-types.js s…

  9. Vuex架构指南 —— 你真的会用Vuex吗?

    最近,在和朋友们协作的时候,暴露了许多问题,这其中最让人头疼的应该是, 代码组织问题 。 代码组织能力会随着知识面的拓展逐渐养成,但是在这个过程中,你是否看过优秀的、让人眼前一亮的代码,并从中获得感悟,很大程度上影响着最终代码组织能力的强弱。这并不单单看你的阅历,和做过项目的多少,而是有意识地,…

  10. 前端持久化之浏览器存储技术(localStorage、sessionStorage 、session、cookies)

    表格一览 特性 cookie localStorage sessionStorage indexDB 数据生命周期 一般由服务器生成,可以设置过期时间;前端采用和js-cookie等组件也可以生成 除非被清理,否则一直存在;浏览器关闭还会保存在本地,但是不支持跨浏览器 页面关闭就清理刷新依然…

  11. 从原型到原型链,修炼JavaScript内功这篇文章真的不能错过

    前言 又到了回忆过去的时候了,知识就是这样,原型和原型链在我之前的实习生涯中用到的很少——几乎没有(噗!我菜我摊牌了),但是它和 this指向问题 一样,是初级、中级前端开发在面试时永远绕不开的话题。是不是大家每次看面经的时候都会去搜索原型相关的知识点? 你看这知识,总是在考的时候,才能知道它的重要…

  12. 前端开发必备工具箱

    前端开发是一个相当复杂的方向,至少就大项目而言,你很难仅用浏览器和编辑器完成工作。这里列出了我在开发过程中用到的工具。我希望这个列表能帮助其他人发现一些可以用在工作流程中的好工具。

  13. vue路由hash模式引发的血案

    路径1: xxxxx.djtest.cn/driver-regi… 路径2: xxxxx.djtest.cn/driver-regi… 大家平常用那个什么格式的链接,路径1还是路径2???? 我一直习惯用路径2,可是就在前不久出现了一个线上bug:sob::sob::sob:。 这个bug原因还是路径不规范造成的,当是我一脸懵逼,我是谁,我在哪???? url的组成 协议…

  14. JavaScript必须掌握的基础 —> 原型&原型链

    原型和原型链的主要作用: 实现属性和方法的公用 继承 所以下面的例子全是以构造函数为例。 原型 函数是也是对象,是一个属性的集合,所以函数下也有属性,也可以自定义属性。当我们创建一个函数时就默认会有一个…

  15. 循序渐进VUE+Element 前端应用开发(7)— 介绍一些常规的JS处理函数

    在我们使用VUE+Element 处理界面的时候,往往碰到需要利用JS集合处理的各种方法,如Filter、Map、reduce等方法,也可以设计到一些对象属性赋值等常规的处理或者递归的处理方法,以前对于这些不是很在意,但往往真正使用的时候,需要了解清楚,否则很容易脑袋出现短路的情况。本篇随笔列出一些在VUE+Element 前端开发中经…

  16. javascript基本数据类型赋值和对象引用的内存情况分析

    let c = { name: ‘我的对象’ } let d = c; console.log(c, d); // {name: "我的对象"} {name: "我的对象"} d.name = "我是改变后的对象"; console.log(c, d); // {name:"我是改变后的对象"}{name:"我是改变后的对象"} 复制代码 第一次…

  17. 那些不常见,但却非常实用的css属性(整理不易)

    1、-webkit-line-clamp 可以把 块容器 中的内容限制为指定的行数。并且在超过行数后,在最后一行显示”…” 这是正常的展示 {代码…} 这是加了 line-clamp 后的展示 [链接] 2、all 将除却 unicode-bidi 与 direct…

  18. 如何通过nvm安装多版本nodejs?如果nodejs安装成功,npm安装失败了怎么办?

    我们在开发项目的时候,最开始,是只有一个老的项目,老项目单独安装了node版本4.4.7,后来有了新项目,由于有两个项目,但是一个需要老一些版本的node,一个需要新版本的node,因此需要在两个版本之间进行切换,这时候应该怎么做呢? nvm可以很好的解决这个问题,我们一起来看看把。 一、什么是nvm? nvm就是nod…

  19. 基于Bpmn-js的流程设计器校验实现

    它根据一组已定义的规则来验证您的图表,并将其报告为错误或警告。它可以从命令行检查您的BPMN图,或者通过 bpmn-js-bpmnlint 将其集成到我们的 BPMN建模器中 : 核心规则 库的核心是用于检测BPMN图中某些模式的规则。每个规则都是由一段代码定义的,该代码可以检测并报告从丢失标签到检测到特定的易于出…

  20. webpack 如何同时输出压缩和未压缩的文件

    有的时候我们想要同时生成压缩和未压缩的文件,比如我们构建 lib 包的时候,我们希望用户能够使用压缩过后的代码文件作为 cdn 文件,最简单的一个方式就是通过指定环境变量,比如指定 MINIFY,如下: const path = require(‘path’) const isMinify = process.env.MINIFY /** * @type {import(‘webpack’).Configurat…

  21. Web安全之CSRF实例解析

    之前写过一篇 web安全之XSS实例解析,是通过举的几个简单例子讲解的,同样通过简单得例子来理解和学习CSRF,有小伙伴问实际开发中有没有遇到过XSS和CSRF,答案是有遇到过,不过被测试同学发现了,还有安全扫描发现…

  22. 记 vue-cli 项目首页加载速度慢的有效优化

    开始我想把这个锅甩给网速,但我发现一些大商城项目(淘宝,京东),在网速一般的情况下,加载速度依然还是挺快,哎,网速不背这个锅 还是找项目的原因吧,加载时间4.5s 监控首页加载的过程,找到拖后腿的 vendors***.js 这个锅他来背 1.9M 的 js文件下载3.42秒 ,先不说网速,这个js也太TM大了…

  23. Flutter Weekly Issue 58

    教程 逆向 Flutter 应用 进展汇总 | Flutter 精彩不停,与您同在 插件 creditcard-slider Dart package for creating a credit card slider flutter-orientation …

  24. 写一个脚本,将所有js文件后缀批量改成ts后缀

    做项目的时候准备把js项目重构成ts项目,需要把文件后缀改成ts,一个bat脚本搞定,命令如下: {代码…} 把脚本放到根目录下,双击运行完就可以了

  25. 一个封装iframe的vue插件,可修改样式,隐藏滚动条

    最近有空,就抽空把以前做过的公司业务组件慢慢抽离出来做成插件,也算是对近年来的技术方面做一个总结吧。 今天要写的是一个用vue-jsx封装的iframe插件,可修改iframe中的样式,隐藏滚动条,默认设置保证页面安全等功能。不想看想直接使用的话请前往项目处 pikaz-iframe , 背景 由于公司爬取了一些文章,需要对…

  26. 总结面试中 promise 相关题目的套路

    Promise 作为当下主流的异步解决方案,在工作中和面试中常常出现,尤其是在面试中,会弄个场景让你手写代码,这里给大家介绍五道比较有代表性的题目,以便熟悉一些套路。 promise 简单介绍 先简单介绍下 Promise Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值。可以为异步操作的成功和失败绑定执…

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


关注我

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

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

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