20200618 前端开发日报

【vue选手极速进阶】图文详解vue+ts+class+注解风格开发排坑全指南；自认为精通React，这些JavaScript概念你掌握了没？；React Native 的常见 bug（一）；React系列四 – React脚手架；webpack运行过程分析；了不起的 Webpack HMR 学习指南（含源码分析）；Vue 3.0 初探 – 组合式 API；JS实现网站楼层导航效果代码实例

1. 【vue选手极速进阶】图文详解vue+ts+class+注解风格开发排坑全指南

   ts的大势所趋，你还在吭哧吭中徘徊在vue+js大门口吗？来吧，是时候表演真正的技术了～～～ 从vue开始火热起来到现在，已经基本上前端开发小伙伴入门的技能了。相信这么久时间过去之后，大家也早已习惯vue的开发模式了。那么，你和别人比比的时候，难道不想有些许亮点吗？虽然目前vue2+对ts的支持没有像react、ng等支持…

2. 自认为精通React，这些JavaScript概念你掌握了没？

   本文转载自公众号“读芯术”(ID：AI_Discovery) 想要确定一个人是否掌握React，考考他最新的JavaScript语法就可以了。JavaScript语法对于理解React至关重要，它能让我们更加容易地阅读日志，编写出更简洁的React代码。 一旦掌握了一些新的JavaScript语法，编写React代码将变得轻而易举。来看看精通React不可缺少…

3. React Native 的常见 bug（一）

   原文: https://blog.logrocket.com/common-bugs-in-react-native/ 2020.1.31 翻译: 祝坤荣(时序) email: zhukunrong@yeah.net React Native是可以用来同时实现Android和iOS平台应用的不错的框架。由于它被React社区和Facebook支持，它离version 1.0还很早。 一些你遇到的er…

4. React系列四 – React脚手架

   一. 认识脚手架 1.1. 前端工程的复杂化 如果我们只是开发几个小的demo程序，那么永远不需要考虑一些复杂的问题： 比如目录结构如何组织划分； 比如如何管理文件之间的相互依赖； 比如如何管理第三方模块的依赖； 比如项目发布前如何压缩、打包项目； 等等… 现代的前端项目已经…

5. webpack运行过程分析

   我目前正在学习webpack，首先对webpack的知识点进行简单的总结，更加全面的请前往官方网站学习；其次再结合汪磊老师的《webpack原理与实践》实现一个loader和plugin，对整体的运行过程进行一个梳理；如有错误，敬请指出。 一、webpack基本知识点 1、webpack 什么是webpack？ webpack 是一个模块打包机，将…

6. 了不起的 Webpack HMR 学习指南（含源码分析）

   学习时间：2020.06.14 学习章节： 《Webpack HMR 原理解析》 一、HMR 介绍 Hot Module Replacement（以下简称：HMR 模块热替换）是 Webpack 提供的一个非常有用的功能， 它允许在 JavaScript 运行时更新各种模块，而无需完全刷新 。 Hot Module Replacement (or HMR) is one of the most useful featur…

7. Vue 3.0 初探 – 组合式 API

   Vue 3.0 中引入了一种新的代码编写方式，那就是 Composition API，这是有别于 Vue 2.0 Options API 的一种函数式 API。无需通过指定一长串选项来定义组件，Composition API允许用户像编写函数一样自由地组合逻辑和代码。那么我们接下来就一起来看看 Composition API 是啥东东？ 什么是 Composition API? 组合式 API…

8. JS实现网站楼层导航效果代码实例

   壹 ❀ 引言 对于楼层导航而言，还有个重要的功能就是，随着滚动条滚动，达到某层时得同步点亮楼层导航的小图片。 由于我前面也说了不打算使用JQ，所以想着用JS去实现它，实现并不难，主要得弄清滚动满足怎样的条件才应该点亮对应楼层，我们先看看实现效果： 贰 ❀ 实现思路 第一点，因为是由滚动触发的楼…

9. Vue组件通信的六种方式

   在平时的开发过程中，父子 / 兄弟组件间的通信是肯定会遇到的啦，所以这里总结了 6 种 Vue 组件的通信方式： props / $emit $emit / $on Vuex $attrs / $listeners $parent / $children 与 ref provide / inject 前言 如上图所示，A/B，B/C，B/D 组件是父子关系，C/D…

10. 探索 Vue-Multiselect

    每日前端夜话 第355篇 正文共：3400  字 预计阅读时间：10 分钟 创建下拉菜单总是很麻烦的，特别是当我们需要自定义样式时， select 元素的作用非常有限。如果用 Vue 来构建我们的应用，则可以用一些组件来帮助简化工作。 在本文中，我们将研究怎样用 Vue-Multiselect 库来改善下拉菜…

11. 傻瓜式通俗易懂nodejs连neo4j教程，一个坑都不想踩

    这是一个全套的傻瓜式教程，把可能出现问题的地方进行了汇总，日常项目习惯了nodejs，（也许java和python会很方便），加上nodejs的教程少，做一个分享帮助大家一次教程，快乐连通。 毕设内容里有一个图谱相关的内容，之前一直用静态的json文件，想着加个数据库能够实现动态交互，选择了图数据库neo4j，作为一个踩啥啥…

12. 使用vuex-ts-enhance提升vuex的使用体验

    vuex 对 ts 支持并不友好, 我们定义了一堆 state , 但是在使用 mapXXX 方法的时候并不知道有哪些 namespace 以及有哪些 getters 或者 actions 可以获取 而 vuex-ts-enhance , 借助 ts 的类型推导功能，在使用 vuex 时能提供 state , actions , getters , mutations 和 dispatch 的类型推导。解决了上述问题 简单…

13. Vue实现数据的懒加载节流版

    vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验，又不想做分页，这时候就很适合懒加载了。 收藏总有用武之地 在评论区留下您宝贵的建议~ 看前先点赞，养成好习惯哈哈哈 在了解它的原理前，需要分清楚三个属性： scrollH…

14. Vue项目实践，你能举一反三么？

    随着这几年前端技术快速发展，Vue框架在国内普及率极高，人人都会用，那Vue如何写得比别人优雅？如何写得比别人漂亮？ 鉴于一线互联网大厂在前沿技术领域的持续研究和大规模投入，直接向他们取经，是最便捷也是最高效的学习方式。但对于中小公司工作的程序员来说，平时忙碌于业务代码，却很少有机会接触到大厂的优秀实…

15. Node.js Stream —— 可读流

    可读流是 生产数据 用来供程序消费的流。常见的数据生产方式有读取磁盘文件、读取网络请求内容等，看一下前面介绍什么是流用的例子： const rs = fs.createReadStream(filePath);复制代码 rs 就是一个可读流，其生产数据的方式是读取磁盘的文件，控制台 process.stdin 也是一个可读流： process.stdin.pipe(process…

16. 发现了 10 个好用JavaScript图像处理库

    本文已经作者授权 用 JavaScript 处理图像可能非常困难且繁琐。幸运的是，有许多库可以让这些变得简单得多。下面介绍一些图像处理的库。 1. Pica事例地址：http://nodeca.github.io/pica/demo/Github: https://github.com/nodeca/pica pica 可在浏览器上实现高质量而且高性能的图片大小调整JS库，目标是在浏览器中以…

17. 探索 React 的内在 —— postMessage & Scheduler

    本文包含了一定量的源码讲解，其中笔者写入了一些内容来替代官方注释（就是写了差不多等于没写那种），若读者更青睐于原始的代码， 可移步官方仓库，结合起来阅读。也正因为这个原因，横屏或 PC 的阅读体验也许会…

18. Vue 出场率99%的面试题

19. promise讲解

    promise 简介 Promise 是 ES6 加入标准的一种异步编程解决方案，通常用来表示一个异步操作的最终完成 (或失败)。 Promise 标准的提出，解决了 JavaScript 地狱回调的问题。 语法 var p = new Promise( function(resolve, reject) {…} /* executor */ ); p.then(() => {}) // 成功resolve .catch(()=> …

20. DataX Web 2.1.2发布

    DataX阿里在开源的时候并未提供任何可视化界面，我们在使用的过程中，需要将Json配置文件放到DataX的job路径下，随着业务的增加，配置文件不方便管理和迁移并且每次执行都需要记录命令。目前DataX只支持单机版，…

21. reactivity 诞生记

    看完 vue3 的 reactivity 模块后，脑子里面有无数的念头冒出来。 不得不写一篇文章来记录一下脑子里面的想法 我怕想法太多脑子会爆炸 首先现在各种论坛上讨论的最多的都是直接分析 vue3 的源码 但是我认为直接分析源码，不如分析过程 它是怎么设计的，这个思考的过程才是最迷人的 结果只是这个思考的产物 当脑子…

22. Ajax(2) —— Ajax接收JSON数据

    1.   Ajax接收JSON数据 JSON：JavaScript对象表示法（JavaScript Object Notation）。JSON是一种存储和交换文本信息的语法。因为JSON比XML更轻量，效率更高，更易解析，所以在Ajax中前后台传输数据一般都使用的是JSON格式。 1.1.JSON与 XML的对比 数据格式 特点 …

23. 初探前端架构

    大致目录划分有 ├── config │ ├── htmlAfterWebpackPlugin.js │ ├── webpack.development.js │ └── webpack.production.js ├── gulpfile.js ├── package.json ├── postcss.config.js ├── src │ ├── nodeuii │ │ ├── app.js │ │ ├── config │ │ │ └── index.js │ │ ├── controllers │ │ …

24. Vuex源码阅读(二) store内的getters实现逻辑

    1. 准备工作 1)创建一个store，state只包含一个count成员： new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } }, actions: { incrementOfActive: ({ commit }) => { commit(‘increment’); } }, getters: { countOfGetter: (state) => { …

25. 浏览器事件知多少——JS事件流与事件处理程序

    从window层往事件触发处传播,直到遇到注册的捕获事件会触发 //addEventListener用来给Dom节点注册一个点击事件 document.getElementById(‘root’).addEventListener(‘click’, function(){ console.log(123) }) 复制代码 传播到事件触发处时，触发注册事件 从事件触发处往window传播，遇到注册的冒泡事件…

26. web前端达到什么水平，才能找到工作？

    前端都需要学什么（可以分为八个阶段） <1>第一阶段： ▪ HTML+CSS: HTML进阶、 CSS进阶、DIV+CSS布局、HTML+CSS整站开发、 ▪ JavaScript基础： Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 ▪ JS基本特效： 常见特效、例如：tab、导航、整页滚动…

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