20190404 前端开发日报-前端开发博客

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

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