20191029 前端开发周报

Node.js 入门到干活，10 个优质项目就够了；「干货」用 Vue + Echarts 打造你的专属可视化界面（上）；1024 献礼，10 个前端开发者必收的高赞资源；浏览器多进程、JS单线程，EventLoop的相爱相杀；Vue 组件间通信 11 种方法汇总；【JS 口袋书】第 9 章：使用 JS 操作 HTML 元素；Vue项目中使用Axios封装http请求；想成为一个出色的Web工程师？学Golang而非Node.js

1. Node.js 入门到干活，10 个优质项目就够了
2. 「干货」用 Vue + Echarts 打造你的专属可视化界面（上）在近期的项目中，有大量处理可视化数据的需求。说起这个，相信很多同学跟我一样，都会想到用 Echarts 来实现。没错，Echarts 拥有高度可定制化的配置，以及非常详尽的开发文档，并且它的最新版已经更新到了 v4.3。
3. 1024 献礼，10 个前端开发者必收的高赞资源 不知不觉《IT 程序狮》的微博已经运营 3 年多了，我在微博上陆续的发布了 5200+ 技术分享、开源项目、编程灵感以及一些工具推荐的博文，不少内容得到了大V的推荐，也有幸收获了一批热情的关注者，让我倍感欣慰。 值此 1024 来临之际，我重新梳理了曾在 #前端技术# 话题下发表的高赞内容，挑选出了 10 个值得前端开…
4. 浏览器多进程、JS单线程，EventLoop的相爱相杀 几乎在每一本JS相关的书籍中，都会说JS是单线程的，JS是通过事件队列(Event Loop)的方式来实现异步回调的。 对很多初学JS的人来说，根本搞不清楚单线程的JS为什么拥有异步的能力，所以，我试图从进程、线程的角度来解释这个问题。 CPU 计算机的核心是CPU，它承担了所有的计算任务。 它就像一座工厂，时…
5. Vue 组件间通信 11 种方法汇总修饰符 .sync 是 2.3.0+ 新增，它对 props 起到了一种修饰的作用，使用 .sync 进行修饰的 props 意味子组件有修改它的意图，这种情况下它只起到一个标注性作用，有它没它都不会影响逻辑（后文会介绍使用 .sync 的…
6. 【JS 口袋书】第 9 章：使用 JS 操作 HTML 元素 作者：valentinogagliardi 译者：前端小智 来源：github 这几天自己的公众号无套路送现金 200+，参与方式如下： https://mp.weixin.qq.com/s/PT… 文档对象模型(DOM) JS 有很多地方让咱们吐槽，但没那么糟糕。作为一种在浏览器中运行的脚本语言，它对于处理web页面非常有用。在本中，我们将看到…
7. Vue项目中使用Axios封装http请求 使用axios可以统一做请求响应拦截，例如请求响应时我们拦截响应信息，判断状态码，从而弹出报错信息。请求超时的时候断开请求，还可以很方便地使用then或者catch来处理请求。 下载源码 安装 npm install axios –save 建立http.js文件 在/src/utils/目录下建立一个htttp.js 1.首先导入axios和router。…
8. 想成为一个出色的Web工程师？学Golang而非Node.js 原文： medium.com/codezillas/… Nodejs是一个运行时或者说是一个Javascript代码运行时的环境，而Golang是一门编程语言但不仅仅用于后端开发。Golang是由Google于2007年发明的。Nodejs能让Javascript代码运行在服务端上，而Golang适用于服务器端编写代码。Nodejs代码也就是Javascript的代码，所以继承了大…
9. 喊话 JavaScript 开发者：玩 DOM 也要专业范儿 充分挖掘 DOM 的潜力，你会真的爱上它。
10. VUE框架：基础知识及核心原理 cn.vuejs.org Vue (读音 /vjuː/，类似于 view ) 是一套用于构建用户界面的 渐进式框架 特点：易用、灵活、高效 全家桶：vue + components（vue element / iview…） + vue-router + vuex + vue-cli 类库 vs 插件 vs 组件 vs 框架 类库：jquery、zepto、underscore… 插件：dialog、banner、drag、…
11. 使用 `import()` 执行 JavaScript 代码 使用 import() 操作符 ，我们可以动态加载 ECMAScript 模块。但是 import() 的应用不仅于此，它还可以作为 eval() 的替代品，用来执行 JavaScript 代码（ 这一点是最近 Andrea Giammarchi 向我指出的 ）。这篇博客将会解释这是如何实现的。 eval() 不支持 export 和 import eval() 的一大缺陷是…
12. JS 原生面经从初级到高级【近1.5W字】是时候撸一波 JS 基础啦,撸熟了,银十速拿 offer;本文不从传统的问答方式梳理,而是从知识维度梳理,以便形成知识网络包括函数,数组,对象,数据结构,算法,设计模式和 http.
13. 带你手写微前端框架 关注核心实现请直接跳至 第四小节：执行流程。 本文中的命令仅适用于支持shell的系统，如Mac、乌班图及其他linux发行版。不适用于windows，如果想在windows下执行文章中的命令请使用git命令窗口(需安装git)或linux子系统(win10以下不支持)。 一、初始化工程 1、初始化工程目录 cd ~ && mkdir my-single-…
14. 2019年最新经典web前端面试题超全面细节 文章涉及的内容可能不全面，但量很多，需要慢慢看。我花了很长的时间整理，用心分享心得，希望对大家有所帮助。但是难免会有打字的错误或理解的错误点，希望发现的可以邮箱告诉我1163675970@qq.com，我会及时的进行修改，只希望对你有所帮助，谢谢。 本片文章记录一下当时自己学习JavaScript的过程以及一些知识点和注意…
15. 那些你应该知道的 ES6 特性 原文：https://www.freecodecamp.org/news/these-are-the-features-in-es6-that-you-should-know-1411194c71cb/ 作者：Cristian Salcescu 译者：Hanx 校对者：ZhichengChen 提示：文中的蓝色字体可点击“阅读原文”访问更多内容 ES6 为 JavaScript 这门语言…
16. vue 项目中踩过的坑在做项目规划的时候没有注意cookies共享；前后台项目需要共享用户登陆状态发现不同域名下cookies不能共享cookies又个domain属性；给cookies
17. Ajax学习笔记
18. 用 MelonJS 开发一个游戏游戏开发并不需要局限于使用 Unity 或 Unreal Engine4 的用户。 JavaScript 游戏开发已经有一段时间了。实际上，最流行的浏览器（例如Chrome，Firefox和Edge）的最新版本提供了对高级图形渲染（例如WebGL）的支持…
19. Vue.js 3.x 源码解析先导 2018 年 6 月我在慕课网发布了 Vue.js 2.x 的源码解析课程 《Vue.js 源码全方位深入解析》 ，同时也开源了课程配套电子书。时隔一年多，Vue 官方也开源了 Vue.js 3.x，那么在不久的将来，我也会系统化地做 Vue.js 3.x 的源码分析，同时更新我的这门课程视频以及电子书。 Vue.js 3.x 源码刚开源不久，很多人都非常兴奋…
20. 爱奇艺直播 WebAssembly 优化之路 WebAssembly 和直播，不一样的火花。
21. Vue 组件通信 11 种解决方案 父组件向子组件传值 1. 通过属性传值 props props 可以是数组或对象，用于接收来自父组件的数据。 // 父组件 List.vue <template> <div> <List-item :str="str" :obj="obj" :arr="arr"></List-item> </div> </template> <script&…
22. 重磅 | OpenJS 基金会推出 Node.js 专业认证考试 2019 年 10 月 22 日 OpenJS 基金会启动了新的专业认证计划，以支持 Node.js 开发的未来，两个认证程序分别为 OpenJS Node.js 应用程序开发（JSNAD）和 OpenJS Node.js 的服务开发（JSNSD）认证。 来自于 Node.js 界专业人士的看法 OpenJS 基金会执行董事 Robin Ginn 表示：“OpenJS Node.js 专业认证计划旨…
23. Vue脚手架使用介绍 博主在更新此文档时， Vue 脚手架已经更新到 v4.0.5 点击查看最新版本 。可以说vue团队的工作劲头还是很足，出活儿~~ 此文将介绍 Vue 脚手架3个大版本的使用方式，分别有两种不同的方式： 第一种： 2.x 第二种： 3.x 和 4.x 一. vue-cli 2.x 使用 1. vue-cli 安装 $ np…
24. Vue 3 Cheat Sheet 下载（中文版） Vue 3 中最主要的新特性：组合式 API，已经可以借助 https://github.com/vuejs/composition-api （在 Vue 2 项目中作为插件使用）体验到。 如果是新项目，亦可直接采用 https://github.com/vuejs/vue-next 库；该项目仍处于 Pre-Alpha 版本。 另外，由 Vue Mastery 网站归纳的 Vu…
25. webpack多页面内存溢出 因为自己的项目是基于 vue-cli3 进行开发，所以这里只讨论这种情况下的解决办法 在进行多页面开发的时候，项目刚开始阶段，页面较少，编译速度还能忍受，但是一旦页面增加，多次热更新就造成了内存溢出。 原因 这里需要借助一个插件来进行性能分析 webpack-bundle-analyzer ，在 vue.config.js 中添加以…
26. Vuex状态管理(state,mutation,action,getter完全分离) 一、安装依赖 npm install vuex –save 或者 yarn add vuex –save复制代码 二、基本配置文件事例 在项目中src文件夹下新建store文件夹,并在创建如下文件： index.js 入口文件 state.js 所有状态的管理 mutations.js mutation-types.js 存储相关mutation字符串常量 action.js 异步操作，修改，mut…
27. 前端资源缓存详解前言 对每个前端开发者来说都避不开前端缓存，那么前端缓存都有哪些，又该如何去设置呢？ 前端缓存只要分为HTTP缓存和浏览器缓存，下面我们分别来介绍一下 HTTP缓存 HTTP缓存又分一下两种： 强缓存 协商缓存 两者…
28. 从零开始构建一个webpack项目 新建一个空文件夹，用于创建项目，使用 npm init 命令创建一个 package.json 文件。 输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，也可以使用 npm init -y 这个命令来一次生成 package.json 文件，这样终端不会询问你问题。 2、安装 webpack 安装 webapck 时把 webpack-cli 也装上是因为…
29. 现代 JavaScript 原始类型转换你真的学会了吗？ 大多数情况下，运算符和函数会自动将赋予他们的值转换为正确的类型。 比如， alert 会自动将任何值都转换为字符串以进行显示。算术运算符会将值转换为数字。 在某些情况下，我们需要将值显式地转换为我们期望的类型。 对象还未纳入讨论中 本章不会讨论 object 类型。先学习原始类型，之后我们会学习 obj…
30. 浅谈JS高阶函数 我们都知道函数是被设计为执行特定任务的代码块，会在某代码调用它时被执行，获得返回值或者实现其他功能。函数有函数名和参数，而函数参数是当调用函数接收的真实的 值 。 今天要说的高阶函数的英文为 Higher-order function , 高阶函数的高阶是什么意思呢？ 定义 至少满足下列一个条件的函数 接收一…
31. vue导航守卫详解导航守卫又称路由守卫，实时监控路由跳转时的过程，在路由跳转的各个过程执行相应的操作，类似于生命周期函数，在开发过程中经常被使用，比如用户点击一个页面，如果未登录就调到登录页面，已登录就让用户正常进入。
32. 解密JSON.stringify()的参数使用基本使用 一般情况下，我们使用JSON.stringify序列化对象，即将一个对象的属性和值转化为字符串 {代码…} 第二个参数 实际上并不是所有的JSON数据都能被序列化 {代码…} 可以通过传递第二个参数来解决，首先来…
33. 前端小菜，先别慌——JS篇（数组） 随着前端MVVM框架（React，Vue，Angular）的全面普及，前端工程师在数据操作上耗费的时间越来越多；数组作为数据的主要载体，自然挑起了大梁，在前端编码中扮演者不可或缺的角色。因此，数组是菜鸟们的前端成长之路上，必须消灭的一个精英怪。 1. 开始之前 在讲数据的创建，访问，遍历以及其他具体的操作方法之前，我…
34. 初识单文件vue组件 全局定义 ：强制要求每个 component 中的命名不得重复 字符串模板 ：缺乏语法高亮，在 html 有多行的时候，需要用到丑陋的 不支持css ：意味着当 html 和 JavaScript 组件化时，css 明显被遗漏 没有构建步骤 ：限制只能使用 html 和 ES5 JavaScript ，而不能使用预处理器，…
35. “寒冬”三年经验前端面试总结（含头条、百度、饿了么、滴滴等）之手写题（二）不论是寒冬还是暖冬，找工作之前都需要做好充足的准备，面试的时候才能做到游刃有余。此文是把我最近找工作准备的以及笔试面试中涉及到的手写题做一个总结。给自己，也给需要的同学。
36. [小组分享] React 当中性能优化手段整理内部小组分享底稿. 回顾一下 React class 组件的优化 useMemo 提供的优化 React.memo 优化 useCallback 优化 避免 render 当中的 DOM 操作 class 组件的优化 通过判断减少数据变化触发的重新渲染, 以及之后的 DOM…
37. GitLab搭建并接入自建Nginx大家好，我是CrazyCodes，这篇文章的标题有些严肃了，算是非常单纯的教学文，愿可以帮助到有需要的人。
38. Vue源码简析之Watcher（下） <template> <div class="container"> <div>{{fullname}}</div> </div> </template> <script> import child from ‘./components/child’ export default { name: ‘App’, data(vm) { return { firstname: ‘klay’, lastname: ‘thompson’ …
39. 一周 GitHub 开源项目推荐，Star 吧 一周 GitHub 开源项目推荐 点击链接或图片即可阅读 喜欢请分享到朋友圈哦 一款超轻量级通用人脸检测模型，大小仅 1MB 该模型设计是针对边缘计算设备或低算力设备（如用 ARM 推理）设计的一款实时超轻量级通用人脸检测模型，旨在能在低算力设备中如用 ARM 进行实时的通用…
40. 前端深入之css篇丨初探【transform】，手把手带你实现1024程序员节动画说起来css动画是一个很尬的事，一方面因为公司用css动画比较少，另一方面大部分开发者习惯了用JavaScript来做动画，所以就导致了许多程序员比较排斥来学习css动画（至少我是），但是一个不懂css动画的前端工程师…
41. HTTP 服务端架构演进 摘要 在详解http报文相关文章中我们介绍了http协议是如何工作的，那么构建一个真实的网站还需要引入组件呢?一些常见的名词到底是什么含义呢？ 什么叫正向代理，什么叫反向代理 服务代理与负载均衡的差别 有了nginx，为啥还需要LVS …
42. 起底阿里完整前端技术体系 点击蓝字前端真好玩关注，回复“1”加入前端进阶群 与大家一起成长 进入2019年，大前端技术生态似乎进入到了一个相对稳定的环境，React在2013年发布至今已经6年时间了，Vue 1.0在2015年发布，至今也有4年时间了。 整个业界在前端框架不断迭代中，也寻找到了许多突破方向，例如跨平台…
43. 不使用任何插件，前端原生js从音频数据源上改动尝试音频倒放（未完成） 为啥是尝试——因为现在我也没搞明白前端使用blob二进制储存音频到底是个什么解析规则，网上实在找不到参考资料，完全是自己一点一点试出来的，下面说我是怎么试的以及试出来的结果。 界面 三个<audio>标签，分别用来录音，正放和倒放，两个<button>分别用来开始录音和结束录音。 尝试 首先…
44. vue3响应式源码解析-Effect篇
45. Vue项目的热更新怎么辣么好用啊？原来200行代码就搞定（深度解析） 大家都用过Vue-CLI创建vue应用，在开发的时候我们修改了vue文件，保存了文件，浏览器上就自动更新出我们写的组件内容，非常的顺滑流畅，大大提高了开发效率。想知道这背后是怎么实现的吗，其实代码并不复杂。 这个功能的实现底层用了 vue-hot-load-api 这个库，得益于vue的良好设计，热更新的实现总共就一个js文件，2…
46. JS对象的 rest/spread 属性指南在ES5中，咱们合并对象通常使用Lodash的_.extend(target, [sources]) 方法，在ES6中咱们使用 Object.assign(target, [sources])来合并对象，当然现在最常用应该是使用 Rest/Spread(展开运算符与剩余操作符)。
47. 50行代码完成视频通话 (WebRTC + WebSocket)“它（WebRTC）允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输”。
48. TypeScript学习 泛型使用any类型会导致这个函数可以接收任何类型的arg参数，这样就丢失了一些信息：传入的类型与返回的类型应该是相同的。如果我们传入一个数字，我们只知道任何类型的值都有可能被返回。
49. React 项目快速搭配 eslint, prettier, commitlint, lint-staged 为了实现代码规范，我们在使用中会使用诸多插件，比如eslint、prettier、commitlint、stylelint等等，在新项目中这样一套组合拳下来，也是稍显繁琐，另外还要定制配置文件，某种程度上来说是体力活。 本文的目的是介绍如何简化配置，统一规范。 1. magic-lint magic-lint是一款代码规范工具…
50. 重学ES6之出来混迟早要还的（四）本系列博客为ES6基础语法的使用及总结，如有错误，欢迎指正。重学ES6之出来混迟早要还的（四）主要包括Array.from()、Array.of()、find()/findIndex()、some()/every()、Promise、ES6对象增强写法。
51. 重学JavaScript之匿名函数 匿名函数就是没有名字的函数，有时候也称为《 拉姆达函数 》。匿名函数是一种强大的令人难以置信的工具。如下： function a(a1, a2, a3) { // 函数体 } 复制代码 ==其他函数表达式== var a = function(a1, a2, a3) { // 函数体 } 复制代码 以上两个例子在逻辑上等价，其主要的区别是： 前者会在代码执行…
52. 还在收集资料？我这里有个github汇总国内程序员都喜欢收集资料，但是又不看，github是重灾区。更有莫名其妙fork的，让人不得要领。这些资料其实也代表了收集者的一个思路，还是有不小参考价值的。
53. 用JavaScript和Node.js实现文件分片上传 本文使用node.js实现文件分片上传，没有使用node.js的框架。前端使用javascript实现，也没有使用框架。这里用到了mongoDB数据库。（本文代码练习用，非项目） 准备工作 npm init -y npm install mongodb —save 实现思路 主要的思路就是将文件切片后，分片上传，后端将所有的分片都接收完成后，合并为一个完整…
54. React Native 使用 react-native-webview 渲染 HTML 在 App 中，渲染 HTML 是一个非常常见的功能，有可能是直接渲染 HTML 字符串或者是通过 URL 渲染远程 HTML页面。 React Native 提供了一个 WebView 组件以供我们实现 HTML 的渲染。 早先 WebView 是在 React Native 核心包中，后来为了减小 React Native 核心包的体积，便将其单独提出到 react-native-w…
55. js修改覆盖伪类样式一般jq操作css样式是很方便的,但是修改伪类的样式直接操作jq就比较难了,应用如下方法还是很快滴`var lineWid = ‘内容’
56. 使用 Vue 脚手架搭建项目 vue-cli 也是一个 npm 包，可以帮助我们快速搭建起 vue 项目的脚手架。 环境说明 win10 / node.js@10.15.0 / vue-cli @3.2.1 安装 首先全局安装 vue-cli 3.x （这里以 3.2.1 版本为准）： npm install @vue/cli@3.2.1 -g 为了对比 3.x 和 2.x 在项目创建上的区别，执行下面命令： npm install @vue/…
57. 基于Spring Boot+Spring Security+JWT+Vue前后端分离的开源项目最近整合Spring Boot+Spring Security+JWT+Vue 完成了一套前后端分离的基础项目，这里把它开源出来分享给有需要的小伙伴们
58. 基于 HTML5 + WebGL 实现的垃圾分类系统垃圾分类，一般是指按一定规定或标准将垃圾分类储存、分类投放和分类搬运，从而转变成公共资源的一系列活动的总称。分类的目的是提高垃圾的资源价值和经济价值，力争物尽其用。垃圾在分类储存阶段属于公众的私有…
59. 尝鲜Vue3之六：响应式原理的革新 – Vue2、Vue3实现对比 首先我们说说什么是响应式。通过某种方法可以达到数据变了可以自由定义对应的响应就叫响应式。 具体到我们MVVM中 ViewModel的需要就是数据变了需要视图作出响应。 如果用Jest用例便表示就是这样 it(‘测试数据改变时 是否被响应’, () => { const data = reactive({ name: ‘abc’, …
60. JS 仿头条App频道编辑功能 (拖拽排序，添加，删减)由于，项目中使用App混合开发，要实现频道编辑功能；在没找到合适的解决方案的情况下，自己写了这个库；已经在项目中跑了2年多，有不错的可用性；写下这篇文章分享下

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

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