20200328 前端开发日报

Vue+element实现图片的上传与显示；《吐血整理》系列 大厂前端组件库工具集合（PC端、移动端、JS、CSS等）；手写源码系列：原生js实现call方法；前端工程化建设；request停止维护：用node.js实现http网页爬虫抓取，模拟ajaxpost请求,大文件上传下载；封装一个基于Vue的评论留言编辑器组件；短短几行代码搞懂 vuex 的核心；一步步带你搞一个微前端框架–基于single-spa

1. Vue+element实现图片的上传与显示 业务逻辑：某个模块新增时新增图片，详情显示也有图片字段，编辑也能对图片进行编辑。 1.图片上传 自己写了一个图片上传的组件，在父组件中引入即可，图片上传组件返回一个图片id的数组，然后在父组件的上传函数中把图片id传给对应的字段即可。 父组件： <template> <div> <el-form-item label…
2. 《吐血整理》系列 大厂前端组件库工具集合（PC端、移动端、JS、CSS等） 前言 Coding 应当是一生的事业，而不仅仅是 30 岁的青春:rice: 本文已收录 Github https://github.com/ponkans/F2E ，欢迎 Star，持续更新:droplet: 上一篇 《吐血整理》系列 大厂前端必备工具集合（抓包、调试、Mock 数据等等） 发布之后，很多小伙伴问怪怪有没有大厂前端开发工具组件库的集合，今天，它来了…
3. 手写源码系列：原生js实现call方法 thiaArg 必选的。在 func 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。 arg1, arg2, … 指定的参数列表。 返回值 func函数的返回值，如果func没有返回值，则…
4. 前端工程化建设随着浏览器和前端技术的发展，现在的前端项目越来越大、业务也越来越复杂，前端工程化已经成为一件势在必行的事情。
5. request停止维护：用node.js实现http网页爬虫抓取，模拟ajaxpost请求,大文件上传下载 最近 node.js 一个比较出名的 http request 模块停止维护了。其实这个模块已经变得非常臃肿，模块依赖过多，体积过大，接口不统一。 其实现在node.js的http模块已经非常完善，几行代码就能自己写一个，比如： Node.js网页抓取：一个最简单的http请求客户端示例(request client) 不过上面的示例并不支持post和…
6. 封装一个基于Vue的评论留言编辑器组件 现在市面上有非常多的基于 Vue 的组件库，但是看了好多都没有发现有关留言评论的组件，这对于想做一些文章信息展示类的项目可就显得棘手了，因为有太多的页面需要这个功能了，难道我们需要重复的去写（复制粘贴）这些代码吗？对于现在模块化体系逐渐完善的前端工程项目来说，一次性封装一个通用功能的组件式非常有必要的…
7. 短短几行代码搞懂 vuex 的核心 我们都知道在用 vue 的时候，简单的父子通信和 EventBus 已经不能满足我们的要求了，嵌套层级过多和难以追踪改变是两个较为主要的问题:dizzy_face:，这个时候可以用 vuex 来解决，想必大家都用过，所以今天跟大家分享的是 vuex 的简单实现，真的是超简单，就几行代码（文章结尾有链接），带你领略 vuex 的精髓，并且在最…
8. 一步步带你搞一个微前端框架–基于single-spa 原文地址 微前端是我参加工作不久，一个同事大佬在公司尝试推行的，本人有幸参与其中。在微前端的概念出现之前，微服务就已经出现并且大火，而微前端就是借鉴了微服务的架构而产生的，他们很相似，我们可以对比着理解。 微服务 微前端 一个微服务就是由一组接口构成…
9. Electron-vue 创建 Electron + Vue 项目 Electron 是由 GitHub 开发的一个开源框架。它允许使用 Node.js（作为后端） 和 Chromium（作为前端） 完成 桌面GUI应用 程序的开发。 我们所常用的 Visual Studio Code 和 Atom 都是基于 Electron 框架。 去年由于业务需求，有考虑将产品迁移至 Electron 来解决 Web 端的部分短板。 当时主要考虑的几点因素： …
10. webpack自己用的配置 项目基本结构 config：基本的项目配置，以及打包文件配置 dist：打包后的文件目录 public：html，ico等项目出示文件，以及第三方js，css等文件 src项目主文件 __ tests __：测试文件 commen：公共静态文件，数据请求等 components：公共组件 layout：项…
11. GitHub 和京东等网站无法正常访问，疑似高中生黑客误操作导致刚刚，有大量用户反馈无法正常访问 GitHub 和京东 等网站，访问时会提示“您的连接不是私密连接，攻击者可能会试图从xxxx窃取您的信息（例如：密码、通讯内容或信用卡信息）。
12. Qunar 酒店 NodeJS 覆盖率收集实践 作者介绍 马涛，2013 年加入去哪儿网技术团队，目前在目的地事业部，负责 H5、小程序类应用开发。 个人对移动端技术领域和前后端工程化有浓厚兴趣，勇于探索实践追求极致。 概述 一般来讲我们是通过写单元测试来验证程序在执行过程中的代码覆盖。覆盖率结果可以从代码行、逻辑判断及函数方法等维度进行分析。得…
13. 写给初中级前端的高级进阶指南（万字长文，路线明确）我曾经一度很迷茫，在学了Vue、React的实战开发和应用以后，好像遇到了一些瓶颈，不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题，这篇文章，笔者想结合自己的一些成长经历整理…
14. 让小白顺利启动一个vue项目之避坑小攻略 笔者经历了无数的坑，才找到了一招启动一个vue项目的万能避坑方案。如果你在启动一个vue项目的过程中遇到了问题，接下来请务必按照我说的去做！不要偷懒和耍小聪明，不然你就卡在坑里吧！！ 避坑第一点：在完整安装vue-cli之前禁止以大写字母命名你所要安装的目录文件夹和文件。举个例子，你想在D盘的文件夹vue中安装vue…
15. 一篇vue项目技巧总结 时间真的过得很快，从做开发到现在也已经9年有余了，最近招来了不少实习生和经验不是很丰富的前端开发，在带着他们做项目的同时，也发现很多入行0-3年的前端很多欠缺的东西。 那么，这里就以我们公司的 vue 项目为例给大家分享一下 vue 项目的一些技巧。 其实有很多人的项目可能都是直接 vue-cli 那一套。但…
16. vue文字横向滚动公告每条公告信息（li）的margin必须设置‘px’单位，否则要转换，后面js中回到起点还要用到这个值。
17. 2020前端面试，CSS会问你这些CSS往往是我们前端开发者不太看重的一环，而且现在重构岗也越来越少，不像前几年前端领域还分为js岗和重构岗。注重基础的面试官，在CSS基础回答不上时，印象分就会有所下降。下面整理一些常问到的CSS的知识点，欢…
18. Koa + GraphQL + Mongoose实战（Typescript版） 写在前面 前几天看了一篇文章 GraphQL 搭配 Koa 最佳入门实践 ，非常详细地讲述了koa集成graphql的实战, 但是是js的版本，因为是两年前的文章了，有点包现在也已经更新了使用方式。 所以心血来潮，基于原作者的版本更新了一个ts版本的。 代码戳这里 github.com/sunxiuguo/A… ，喜欢的话动动小手star一波❤~ …
19. CSS Grid 布局不好理解？可借助 CSS Grid Generator 快速上手并掌握 Grid 布局点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
20. Vue修饰符集合 作用: 允许props数据的双向数据绑定 , 不能和表达式一起使用,例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的 复制代码 //子组件 this.$emit(‘update:title’, newTitle) //父组件 <text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event" ></text-docu…
21. JS是如何实现前端路由的 JS实现原生路由路由就是根据不同的 url 地址展示不同的内容或页面，早期路由的概念是在后端出现的，通过服务器端渲染后返回页面，随着页面越来越复杂，服务器端压力越来越大。后来ajax异步刷新的出现使得前端也可以对url进行管…
22. 唯心主义蠢货的[vue学习] Vue的nextTick Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工…
23. [推荐] 前端响应式你了解多少？ 前端网红集结号，传递一线全栈技术，带你穿越前端时空。 ❝ 一两年以前，我发现，很多人都被响应式搞得很迷茫。现在，我依旧发现还有很多人不知道响应式到底是什么。所以，我感到很奇怪。到底是哪里有问题，让这么多前端的小伙伴对于这个响应式很捉急？我想，平时总是会百度「响应式」这个关键词吧，数…
24. Vue编辑&新建表单复用的一些思考 最近的工作，都是一些后台管理类项目，涉及到表单的使用上，有着大量的相同内容的表单，根据使用场景分为 新建表单 与 编辑表单 。在日常的搬砖过程中，对此类出现较多的场景做了一些思考。 以下将通过一个小案例结合几种常见场景一步一步进行分析并实现。 举个栗子 实现一个员工管理功能，其中包含员工列表，新…
25. 前端构建环境工具之webpack中babel的工作原理 如图所示为babel工作原理图： 整个babel粗略地其实就是三个转化节点：从获取入口文件(entry)后经过babylon这个工具的解析(parse)， 进入AST(abstract syntax tree)抽象语法树的节点，由于AST只是一种对于entry代码的描述，并不能被浏览器运行， 所以最终还需要被转化为output这个出口文件，也就是代码的形式。 接下来…
26. Vue.js render函数那些事儿大多时候，我会使用template, vue单文件去渲染组件。虽然知道Vue中有个render函数，但却很少在项目中去主动使用它。使用最多的地方是在使用一些UI框架的时候，比如iview table中的按钮操作，会使用到render函数。…
27. WebSocket 协议初探 公司项目使用WebSocket作为主要的请求方式，知其然也要知其所以然，会用也需要知道它的基本原理，所以写此文章分享下自己的浅见，文章主要包括以下内容： WebSocket是什么 WebSocket和Socket区别 建立连接 数据帧格式 发送数据 聊天Demo代码： github.com/madaoCN/Web… 包含tornado写的 Server …

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

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