20190404 前端开发日报

pika 开源:替代 WebPack 的全新 JS 构建工具;为什么 Node 是小菜前端团队的核心技术栈;基于Vue实现web端超大数据量表格;JavaScript中的算法(附10道面试常见算法题解决方法和思路);前端工程化: 脚手架+物料库快速生成新项目;js计算图片内点个数;CSS文本溢出;前端小报 – 201903月刊

  1. pika 开源:替代 WebPack 的全新 JS 构建工具 在过去几年中,JavaScript 打包已经从一种生产环境优化手段演变成几乎所有 Web App 都必不可少的构建步骤。不管你喜欢与否,打包器已经给 Web 开发带来了巨大的复杂性,这是个不争的事实。 为什么要进行打包? 现在的 JavaScript 打包概念可以追溯到很早以前(大约 6 年前),那个时候我们通常会对 JavaScript 文件...
  2. 为什么 Node 是小菜前端团队的核心技术栈 著作权归作者所有。商业转载请联系 Scott 获得授权,非商业转载请注明出处 。 Scott 近两年无论是面试还是线下线上的技术分享,遇到许许多多前端同学,由于团队原因,个人原因,职业成长,技术方向,甚至家庭等等原因,在理想国与现实之间,在放弃与坚守之间,摇摆不停,心酸硬抗,大家可以找...
  3. 基于vue实现web端超大数据量表格 一、整体思路 1.思路来源 最近工作比较忙好久没写文章了,有一丢丢不知道如何写起了,那就先说说我是为什么要开发本文的组件把。公司有一个定位系统,基本上来说一个定位单位一分钟或者更短就会有一个定位点,这样一天下来就会有很多定位点了,如果表格想要一下子放一天甚至三天的数据,那么数据量将会特别大(可能...
  4. JavaScript中的算法(附10道面试常见算法题解决方法和思路) 面试过程通常从最初的电话面试开始,然后是现场面试,检查编程技能和文化契合度。几乎毫无例外,最终的决定因素是还是编码能力。通常上,不仅仅要求能得到正确的答案,更重要的是要有清晰的思维过程。写代码中就像在生活中一样,正确的答案并不总是清晰的,但是好的推理通常就足够了。有效推理的能力预示着学习、适应和...
  5. 前端工程化: 脚手架+物料库快速生成新项目 美团有乐高, 京东有通天塔,阿里有飞冰,大厂都在尝试用自动化工具减少人工,看完这一篇,考虑给你的团队搭建一套自动化开发工具吧! 一、背景 笔者所在公司并非大厂, 发现一些痛点. 1.前端研发跟随业务, 不同部门技术栈五花八门, 同岗位支援困难.( react | vue | seek.js), 2.规范不统一, 跨部门开项目, 编辑器一片...
  6. js计算图片内点个数 图片是由连续的点信息组成,每个点信息包含四个长度即rgba信息,通过遍历配合处理函数实现对点个数的判断。 实现思路 本例子采用png格式图片,只需要判该点透明度(opacity)是否为0即可确定是否为小球上一点,如果不为0,判断上下左右方向的点是否透明度为0,不为0递归该结果,并且将该点的rgba信息置为0...
  7. CSS文本溢出文本溢出单行显示 {代码...} 文本溢出多行显示 {代码...}
  8. 前端小报 - 201903月刊【Alibaba-TXD 前端小报】- 热门前端技术快报,聚焦业界新视界;不知不觉 2019 年已经过去了 1/4,日新月异的前端技术正在蓬勃发展,ES10 都已到来。
  9. 使用javascript实现小型区块链 区块链概念 一、挖矿(产生新区块) 首先,区块链是由每一个区块联系而形成的,在产生新区块之前必须先有一个最初始的区块,这个区块也叫创世区块。通过这个创世区块,不停地通过变化随机数(nonce)来计算出符合条件的区块。以下是创世区块基本信息: const initBlock = { index: 0, data: 'hey,this is...
  10. VUE 项目:API配置、版本控制(V1.0方案) 项目的api的baseUrl 需要灵活配置,不能打包在代码中。 项目需要写入版本号,用以保证用户的浏览器资源为最新。 自古评论出大佬,在下初级解决方案奉上。欢迎大佬评论指正更高的解决方案。 问题一(在下解决方案) 在项目public目录下新增文件,config.js,内容为: // 此处设置是为了方便多环境...
  11. 用原生 JS 实现 innerHTML 功能 都知道浏览器和服务端是通过 HTTP 协议进行数据传输的,而 HTTP 协议又是纯文本协议,那么浏览器在得到服务端传输过来的 HTML 字符串,是如何解析成真实的 DOM 元素的呢,也就是我们常说的生成 DOM Tree,最近了解到状态机这样一个概念,于是就萌生一个想法,实现一个 innerHTML 功能的函数,也算是小小的实践一下。 ...
  12. 漫话:如何给女朋友解释什么是 Git 和 GitHub? 周末,我正在家里看《最强大脑》,女朋友在一旁刷手机,相安无事。谁知道,刚过了没多久,她突然问我: 版本控制 想要介绍什么是GitHub,就要介绍下什么是Git,想要介绍什么是Git,那就不得不提版本控制。 ...
  13. rrweb:打开 web 页面录制与回放的黑盒子 前段时间开源了我们的 web 录制、回放基础库 rrweb,它可以将⻚⾯中的 DOM 以及⽤户操作保存为可序列化的数据,以实现远程回放。 研发这⼀⼯具起初是为了解决我们在客户环境 debug 时遇到的⼀些问题。 我们的产品通常部署在客户的内⽹环境中,因此⼀旦出现问题只能通过各类远程操作⼯具登⼊客户环境中进⾏de...
  14. js基础(一):判断类型操作符返回一个字符串,表示未经计算的操作数的类型,用于除null、对象和数组之外的通用类型的判断方法
  15. 前端必懂之熟悉又陌生的BFC写在最前:BFC看起来是个很陌生的概念但它却时时发生在我们工作中,如何清除浮动影响?如何避免margin穿透问题?如何编写两栏自适应布局?都和BFC有这密不可分的关系,下面走进切图妞的世界,分分钟搞定BFC!
  16. JS每日一题:Webpack如何实现一个Loader?loader定义: 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件
  17. 如何搭建一个REACT全家桶框架 前端技术发展太快,有些库的版本一直在升级,现在网上的搭建教程不是不全面,就是版本太低,本人综合一些教程和自己的理解,整理了一下,方便大家快速入手react框架。本教程针对刚入门和技术栈转型人员。注:(本教程写于2019-3-29,请注意版本)!!! 大家阅读的时候,如发现问题,可提出,我会及时更新(本人较懒,...
  18. 纯CSS实现垂直居中的几种方法垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。
  19. 4.hot-load-replacement配置(react-hot-loaderV4)按照前面的配置,更改App.jsx中的内容,保存后,页面上的内容也会实时的变化,这难道不是热更行吗?我刚开始也有这样的疑问。但是,你要注意,目前更改内容保存后,浏览器执行的是刷新操作,相当于F5刷新页面。而...
  20. git reflog 你不知道的事A:“一个前端小白,她对git不熟悉,辛辛苦苦加班一星期敲的代码没了。”B:"噢?怎么没了"A:"在终端输入git log,列出所有的commit信息,如下图:"A:“commit的信息很简单,就是做了6个功能,每个功能对应一个commit...
  21. 记2019前端面经Motivation 2019寒冬来临,卷入动荡之中只能又开启了漫漫求职路。有辛酸,有坎坷,但也有点小幸运。 Experience 前前后后面试了6家公司,总结一下问题做一个backup。(仅记录问题,不区分面试轮次) 脉脉 框架 简...
  22. [JavaScript] Promise 与 Ajax/Axios 前言 在单线程的js执行中,必然需要异步的出现来协程操作,否则就不用玩了, 而在js异步编程方案中,我们经历了回调地狱后终于推出了更合理强大的新方案,那就是——Promise,而在经历了co模块的洗礼后,es7顺利推出了Generator 的语法糖——Async(谁用谁知道,真滴爽=-=) Promise 承诺 What 用于处理异步回调的一种解...
  23. Node.js 应用故障排查手册 —— 利用 CPU 分析调优吞吐量 楔子 在我们想要新上线一个 Node.js 应用之前,尤其是技术栈切换的第一个 Node.js 应用,由于担心其在线上的吞吐量表现,肯定会想要进行性能压测,以便对其在当前的集群规模下能抗住多少流量有一个预估。本案例实际上正是在这样的一个场景下,我们想要上线 Node.js 技术栈来做前后端分离,那么刨开后端服务的响应 QPS...
  24. 一些有趣的 CSS 魔法和布局(下)(结尾有岗位内推哦~)上一篇 一些有趣的 CSS 魔法和布局(上) 中,我们聊了一些有趣且实用的布局。今天,将呈现一些 CSS 带来的魔法特效,有部分特效可以帮我们省去不少工作量。
  25. Flutter WebView与JS互相调用简易指南 本文采用Flutter官方WebView插件: pub.dartlang.org/packages/we…   WebView与JS互相调用是一个刚需,但是貌似现在大家写的文章讲的都不是很清楚,我这个简易指南简单粗暴地分为两部分: JS调用Flutter 和 Flutter调用JS , 拒绝花里胡哨,保证一看就懂,一学就会。   开始之前先简单了解一下官...
  26. 我在GitHub上找到一本大牛程序员献给女儿的书《TensorFlow 内核剖析》】前几天,无意中在GitHub上看到一本硬核书籍——《TensorFlow 内核剖析》。详见

    我在GitHub上找到一本大牛程序员献给女儿的书《TensorFlow 内核剖析》
  27. #开源项目#【原生小程序插上 JSX 的翅膀:mp-jsx】详见: 让开发者直接在原生小程序使用 JSX 写 WXML,实时编译,实时预览。

    mp-jsx
  28. #开源项目#【清理无用 CSS 的工具:DropCSS】详见: DropCSS 是一个简单、快捷清理无用 CSS 的工具。它将三个开源工具(Fast HTML Parser、CSSTree、CSS-Select)连接了起来,故具备移除 CSS 选择器、处理媒体查询,以及保留 CSS 伪类和伪元素选择器的功能。

    DropCSS
  29. 一网打尽 JavaScript 的作用域一网打尽 JavaScript 的作用域 翻译:疯狂的技术宅[链接]​​-javascript-cbd957022652 本文首发微信公众号:jingchengyideng欢迎关注,每天都给你推送新鲜的前端技术文章 作用域决定了变量的生命周期和可见性,变...
  30. Deep into React HooksReact 16.7 的版本中,Hooks 诞生了,截止到目前, 也有五六个月了, 想必大家也也慢慢熟悉了这个新名词。
  31. DIY 一个 Vuex 持久化插件在做 Vue 相关项目的时候,总会遇到因为页面刷新导致 Store 内容丢失的情况。复杂的项目往往涉及大量的状态需要管理,如果仅因为一次刷新就需要全部重新获取,代价也未免太大了。

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

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

原文:20190404 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20190404.html)