20190528 前端开发日报

Javascript即将到来的3个新特性;关于webpack4的14个知识点,童叟无欺;《阿里云前端技术周刊》第五期;JS核心知识点梳理——异步,单线程,运行机制;(JS基础)Proxy 对象;原生js实现each方法;理解:javascript中DOM0,DOM2,DOM3级事件模型;Vue + Echarts + 百度地图 实践

  1. Javascript即将到来的3个新特性 1、Optional Chaining(可选链式调用) const data = { user: {}, }; console.log(data.user.address.street); // Uncaught TypeError: Cannot read property ‘street’ of undefined 这是我们现在 ES6 中会遇到的问题,原因是 user 中没有 address 对象,然后我们这样判断: const street = data && data…
  2. 关于webpack4的14个知识点,童叟无欺 没有什么比时间更具有说服力了,因为时间无需通知我们就可以改变一切。      最近工作中用到了nuxt,才发现,如果webpack学的6,nuxt基本不需要学习,没什么学习成本的,因此,这篇重新记录下webpack4的一些基础知识点, 下一篇将会配置一个优化到极致的react脚手架 ,也希望大家能够持续关注,配置webpac…
  3. 《阿里云前端技术周刊》第五期作者:雏恬校对:染陌 知乎:阿里云中台前端/全栈团队专栏Github:阿里云前端技术周刊 给我们投稿:传送门参与交流:传送门 前端速报 GitHub Package Registry 发布!你依旧是那个我们所爱的 GitHub!更多 Google…
  4. JS核心知识点梳理——异步,单线程,运行机制学习javascipt的时候,经常听人说,javascipt即是异步的,又是单线程的。究竟什么是异步,什么是单线程?javascript在浏览器中的运行机制是怎么样的?什么是eventloop,task queue?怎么写异步函数?相信读完这篇文…
  5. (JS基础)Proxy 对象 2019年05月26日 阅读 6 (JS基础)Proxy 对象 Proxy 意为" 代理器 ",用于修改目标 对象的成员 之前进行"拦截",外界对该对象的成员的访问,都必须先通过这层拦截。其中,成员包括未定义的,即访问或设置不存在的属性,也会触发相应的代理函数。 …
  6. 原生js实现each方法 jquery里面有个each方法,将循环操作简化、便捷。 随后es出了个forEach方法,两个虽然用法相近,但是不能处理对象类型。且无法通过return true达到continue效果。 此外还有个every方法,该方法虽然可以实现continue效果,但是在处理类数组与对象类型时,完全无用。 在不使用 jquery 的 each 方法时,该如何处理;或者…
  7. 理解:javascript中DOM0,DOM2,DOM3级事件模型 参考原文: cloud.tencent.com/info/ad9898… javascript中的事件 javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用:事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 所…
  8. Vue + Echarts + 百度地图 实践 npm install echarts@3.0.0 –save 如果需要在线定制适合自己项目的echarts包,可以使用 <script> 引入。建议开发环境使用 echarts.js <script src="echarts.min.js"></script> 在调用echarts的组件内引入,也可以在mian.js里面全局引入 import echarts from ‘echarts’ 如…
  9. Vue引入echarts使用教程 本文将介绍如何在vue project中引入echarts,在引入echarts之前首先需要添加echarts的依赖包。 vue2.0框架添加方法。 npm install echarts 复制代码 vue3.0框架添加方法。 npm add echarts 复制代码 全局引入 在全局引入,需要在main.js文件中,引入echarts。 全部引入 import …
  10. 手摸手入门webpack4 0配置 webpack4现在是支持0配置的 基本概念 entry output loader plugins mode file module chunks compiler complilation tapable事件流 2.从0开始配置 初始化项目 npm init git init 新增 .gitignore文件 src目录(index.js) webpack.config.js 安装webpack npm install -D webpack webpac…
  11. [Vue.js进阶]从源码角度剖析vue-router(二) 在上篇中主要叙述了 vue-router 的注册和实例化过程,以及如何生成 $router, $route 对象 在本篇中会讲述: $route 对象生成的时机 路由守卫的原理 路由懒加载的原理 文中的源码截图只保留核心逻辑 完整源码地址 vue-router 版本: 3.0.2 $route 对象生成的时机 在上篇中解释了在…
  12. Node.js 多进程处理CPU密集任务 大家都知道 Node.js 性能很高,是以异步事件驱动、非阻塞 I/O 而被广泛使用。但缺点也很明显,由于 Node.js 是单线程程序,如果长时间运算,会导致 CPU 不能及时释放,所以并不适合 CPU 密集型应用。 当然,也不是没有办法解决这个问题。虽然 Node.js 不支持多线程,但是可创建多子进程来执行任务。 Node.js 提供了 …
  13. React造轮系列:对话框组件 – Dialog 思路本文是React造轮系列第二篇。 1.React 造轮子系列:Icon 组件思路 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! UI 对话框一般是我们点击按钮弹出的这么一个东西,主要类型有 Alter, Confirm …
  14. 每日前端进阶第五题:防抖(debounce)函数的作用是什么?有哪些应用场景,请实现一个防抖函数 防抖是什么?防抖就是防止抖动,例如小朋友喜欢多动,停不下来,然后做家长的打一顿,让小朋友安静下来,这种行为就叫做防抖。 (~o ̄3 ̄)~ 抖个机灵,哈哈哈~ 抖动是一个很常见的控制函数在一定时间内执行多少次的技巧,其实就是确定了函数执行的最小间隔,如果还在这个间隔内触发函数,则重新计算。 …
  15. 前端核心工具:yarn、npm、cnpm三者如何优雅的在一起使用 ?一位用不好包管理器的前端,是一个入门级前端,一个用不好webpack的前端,是一个初级前端 三个包管理器是可以一起用的,只要你够胆大心细,就没任何问题! 推荐两篇文章 手写优化版React脚手架 手写Vue的脚手架 …
  16. 翻转字符串算法(JavaScript)问题: 实战翻转字符串算法 可以先把字符串转化成数组,再借助数组的reverse方法翻转数组顺序,然后把数组转化成字符串。 要求: 结果必须得是一个字符串 解答: {代码…} 链接: [链接]
  17. 渐进式配置webpack4单页面和多页面(二) 使用包的版本 webpack ->4.3.0 babel-loader ->8.0.5 npm ->6.4.1 webpack-cli ->3.3.1 复制代码 每个章节对应一个demo 模块化拆包1 参考代码 demo8 什么是模块化拆包。比如我们在项目里面需要引入echarts、xlsx、lodash等比较大的包的时候。如果不做代码拆包,都会打包到一个js文件里面。如果…
  18. 复习webpack4之提升Webpack打包速度的方法 之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习。 这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,比如打包原理等等,所以可能会省略一些比较基础的内容,但是希望我可以通过此次学习掌握webpack,更好…
  19. Web技巧(07) 在这一期中咱们一起来聊聊HTML5中的表单。说到HTML,可能很多同学会说,HTML5有什么好聊的,不就是一些HTML的标签吗?事实上并非如此,就拿HTML中的表单中的 input 元素为例吧, input 元素及其相关属性和类型的支持情况都会因为浏览器的不同而存在较大的差异。甚至在支持特定功能的各个浏览器之间,它们的行为也会有所…
  20. html-webpack-plugin 使用总结 html-webpack-plugin 的作用是:当使用 webpack 打包时,创建一个 html 文件,并把 webpack 打包后的静态文件自动插入到这个 html 文件当中。 使用 安装 npm install html-webpack-plugin –save-dev 复制代码 使用默认配置 const HtmlWebpackPlugin = require(‘html-webpack-plugin’) module….
  21. 用 GHTorrent 和 Libraries.io 查询 10 年的 GitHub 数据 | 有一种方法可以在没有任何本地基础设施的情况下使用开源数据集探索 GitHub 数据。 …
  22. js异步从入门到放弃(四)- Generator 封装异步任务在之前的文章介绍了传统异步的实现方案,本文将介绍ES6中的一种全新的异步方案–Generator函数。
  23. Canvas 文字碰撞检测并抽稀一般在做地图相关的需求是才会用到文字抽稀,我也是在为公司的地图引擎实现一个功能时才实现了该方法,在这里将其简化了,就在普通的 Canvas 上进行操作,并没有引入地图概念

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多


关注我

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

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

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