20180308 前端开发日报

前端面试手册；写了个移动端可滑动（惯性滑动&回弹）Vue导航栏组件 ly-tab；Egg 2.4.1 和 1.13.1 发布，阿里企业级 Node.js 框架；前端小生面试之看不懂的 []+{}；Vue 服务端渲染（SSR）；杂谈区块链生态里的前端黑；简单理解JSONP的定义及其实现；闲里偷忙，来点Vue

1. 前端面试手册 这是什么？ 与典型的软件工程师面试不同，前端面试对算法的重视比较低。面试会更多考查错综复杂的前端知识，像HTML、CSS、JavaScript等等。 虽然现在有一些资料，可以帮助前端开发者准备面试，但是远不如软件工程师那么丰富。目前为止，最有用的前端面试资料是前端开发者面试问题集。但是，有相当一部分问题…
2. 写了个移动端可滑动（惯性滑动&回弹）Vue导航栏组件 ly-tab 前段时间写了一个移动端的自适应滑动Vue导航栏组件，觉得有一定实用性，大家可能会用得到（当然有些大佬自己写得更好的话就没必要啦），于是前两天整理了一下，目前已经发布到npm和GitHub上了，点我到npm， 点我到GitHub项目 ，有需要的同学可以在项目中 npm install ly-tab -S 或者 yarn add ly-tab 使用，具体用法下面…
3. Egg 2.4.1 和 1.13.1 发布，阿里企业级 Node.js 框架 Egg 2.4.1 和 1.13.1 已发布，Egg 是阿里开源的企业级 Node.js 框架，为企业级框架和应用而生。团队的架构师和技术负责人可以非常容易地基于自身的技术架构在其基础上扩展出适合自身业务场景的框架。 Egg 2.4.1 中值得关注的更新 fix 默认情况下不允许 x-forwarded-host 标头 ctx….
4. 前端小生面试之看不懂的 []+{} 有一天，去面试，遇到这样的题： {}+{} 1+[] ???WTF，谁会没事这么写代码，好吧，我错了，大佬别打我。懵逼之后要干嘛？当然是要学习一波，于是我满世界找资料，有好东西当然是要分享一波，好了，接下来我们就一起走进 JavaScript 隐式转换的世界吧。 加法运算 在 JavaScript 中加法运算规则很简单，它只…
5. Vue 服务端渲染（SSR） 什么是服务端渲染，简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。 于传统的SPA（单页应用）相比，服务端渲染能更好的有利于SEO，减少页面首屏加载时间，当然对开发来讲我们就不得不多学一些知识来支持服务端渲染。同时服务端渲染对服…
6. 杂谈区块链生态里的前端黑 我这里给大家开个头，今年我带领的一支团队（慢雾安全团队）会对外做个大分享，和区块链生态安全有关的分享。这个生态安全很大，内容很多，你看我写“黑客与区块链”系列就知道，这个系列很有得写… 今天我就专门提下前端安全领域在区块链生态里为什么会这么的重要。 这个重要性首先和区块链生态里币的…
7. 简单理解JSONP的定义及其实现 同源策略规定只在协议相同、域名相同、端口相同的情况下，也就是两个网页同源时，才能读写对方的资源。这是为了保证用户的信息安全做出的限制，然而同源策略有时也会对合理的用途造成影响，那么就需要想办法规避同源策略带来的影响。 用script标签发请求 浏览器解析html页面时，如果看到有如link、img、script等标签…
8. 闲里偷忙，来点Vue 最近对vue学习一段时间之后，于是自己打算通过学习实现了一个项目，在这里想与看到的您分享实战中踩过的雷和关于一些细节的处理技巧，最主要的还是原生组件的实现。由于主要是前端界面的实现，所以在后台使用的是express来模拟数据，当然你还可以选择json-server和easy-mock这些都能进行数据的模拟。不过自己在使用过程…
9. html2image原理简述前言 看到 TJ 大神 star了dom-to-image，也一直很好奇html怎么转 image 那么就翻下源码，看下是如何实现的，其实一共就不到800行代码，还蛮容易读懂的 工作原理 使用svg的一个特性，允许在<foreignobject>…
10. 如何判断JavaScript中的两变量是否相等？ 可能有些同学看到这个标题就会产生疑惑，为什么我们要判断JavaScript中的两个变量是否相等，JavaScript不是已经提供了双等号“==”以及三等号“===”给我们使用了吗？ 其实，JavaScript虽然给我们提供了相等运算符，但是还是存在一些缺陷，这些缺陷不符合我们的思维习惯，有可能在使用的时候得到一些意外的结果。为了避免…
11. JavaScript中的堆漏洞利用（翻译） Introduction 从XP SP2到来起，Windwos堆漏洞的利用变得越来越难。堆保护机制像是safe unlinking和heap cookies已经成功的让许多通用的堆利用技术失效。当然，存在绕过堆保护的方法，但是这些方法往往要需要控制漏洞程序的分配模式。 本文将会介绍一个新的技术，（+++通过特定的javascript分配序列精确操作浏览器的…
12. 理解JavaScript中的去抖函数 何为去抖函数？在学习JavaScript去抖函数之前我们需要先弄明白这个概念。很多人都会把去抖跟节流两个概念弄混，但是这两个概念其实是很好理解的。 去抖函数（Debounce Function），是一个可以限制指定函数触发频率的函数。我们可以理解为 连续调用 同一个函数多次，只得到执行该函数一次的结果;但是隔一段时间再次…
13. webpack打包之后的文件过大的解决方法 以前一直使用 create-react-app 这个脚手架进行 react 开发，后面因为一些自定义的配置，转而使用 webpack 搭建一套自己的脚手架。但是在使用 webpack 打包之后发现，纳尼？怎么文件这么大？？？ 于是研究了一下如何处理 webpack 打包之后文件太大的情况，简单记录下来。 首先配置全局变量 首先，通过指定环境，告…
14. 原生ES6写的Web游戏：ES6-Mario，小美女，小帅哥快来玩啊~~ ES6-Mario 这是一个用原生ES6语法和HTML5新特性写成的Web 游戏。 通过这个项目，你可以在实践中对ES6的主要内容、HTML Canvas 相关API以及Webpack的基础配置有一个直观的认识。 主体结构学习自 Meth Meth Metho…
15. 浅谈 Web 编程中的异步调用的发展演变 作者 | 京东金融-移动研发部-前端开发工程师 作为Web工程师，相信大家在开发项目的过程中，都存在与服务器端的通信，如登录验证、获取用户信息、获取应用数据等都需要通过调用后端的API来进行操作，而实现这一操作的正是异步调用； 这篇文章旨在通过一些异步调用的概念和相应的代码演示，尽量详细地…
16. 如何编写一个高性能的Angular组件 这篇文章讲述如何分析组建，编码技巧，如何巧妙的规避一些嵌套循环，减少嵌套循环，低性能的编码等。 案例 这次还是主要拿之前分享的一片文章中出现的业务组建，上次只是贴了代码，并没有详细说出实现过程，这次就以这个业务组建为中心，讲述如何编写一个高性能的业务组件。 根据上图分析组件所要完成的…
17. JavaScript中的图片处理与合成(二)JavaScript中的图片处理与合成(二) 引言 本系列分成以下4个部分: 基础类型图片处理技术之缩放、裁剪与旋转(传送门)； 基础类型图片处理技术之图片合成； 基础类型图片处理技术之文字合成； 算法类型图片处理技术…
18. 高性能迷你React框架 anu1.3.0 发布anujs1.3.0是一款高性能React-like框架，是目前世界上对React16兼容最好的迷你库。 自React16起，相继推出createContext，createPortal, createRef与createResource等新API，表明官方正积极由纯view库向大而全的…
19. ❤️❌ 如何用vue制作一个探探滑动组件前言 嗨，说起探探想必各位程序汪都不陌生(毕竟妹子很多)，能在上面丝滑的翻牌子，探探的的堆叠滑动组件起到了关键的作用，下面就来看看如何用vue写一个探探的堆叠组件 一. 功能分析 简单使用下探探会发现，堆…
20. 前端小知识–地图坐标转换地图坐标转换 LBS，基于位置的服务（Location Based Service)，近年来已经无处不在，尤其是我们前端，相信或多或少都有接触一些地图API服务，比如高德、百度啊、谷歌啊~但是用的时候可能看到下面这些字眼：比如BD…
21. 追溯 React Hot Loader 的实现文：萝卜（沪江金融前端开发工程师）本文原创，转载请注明作者及出处 如果你使用 React ，你可以在各个工程里面看到 Dan Abramov 的身影。他于 2015 年加入 facebook，是 React Hot Loader 、React Transform、re…
22. 《Node.js 调试指南》 node-in-debugging 《Node.js 调试指南》是本人整理的从事 Node.js 开发这几年的一些调试经验和思路，希望授人以鱼也能授人以渔。 开发环境 MacOS|Linux(Ubuntu@16.04 64位) Node.js@8.9.4 目录 CPU 篇 perf + FlameGraph v8-profiler…
23. JavaScript 2/30: JS & CSS Clock JavaScript30 为Wes Bos推出的一项为期30天的挑战，旨在帮助人们用纯JavaScript来实现效果，初学者若想在JS方面快速精进，不妨一试。 实现效果 利用JS及CSS模拟时钟，时、分、秒针实时摆动，例如现在是14：36，时钟效果如下： 查看我的Demo 和 代码 。 解题思路 获取时、分、秒针； 获取当…
24. 深入JavaScript继承原理 本文首发于个人 Github ，欢迎 issue / fxxk。 ES6 的 class 语法糖你是否已经用得是否炉火纯青呢？那如果回归到 ES5 呢？本文，将继续上一篇 《万物皆空之 JavaScript 原型》 篇尾提出的疑问 如何用 JavaScript 实现类的继承 来展开阐述： 通过本文，你将学到： 如何用 JavaScript 模拟类中的私有变量…
25. 开源一个 Vue.js 2.0+ 石墨文档样式的富文本编辑器 之前一直使用的wangEditor 不能满足我司编辑和PM需求, 使用过程中也出了很多问题,  simditor 体验之后效果不是很好, 并且也不维护了; 目前的 后台管理系统 技术选型已经转向了 Vue, 所以就有了这个轮子; 功能 轻, 快 48 KB 自动添加图片描述框 (类似简书) 复制上传, 多张批量上…
26. 基于 Nest.js(Node.js) + React 的模块化敏捷开发系统架构 Notadd 2.0 Beta2 发布前言 大多数 node.js 框架都没解决架构问题，使得 node.js 没能像 spring 一样的适合大型项目开发和维护的框架。 nest.js 出现改变了这种现状。我们基于 nest.js 开发了 Notadd ，更加解决了快速开发需求。 [开发…
27. 巧用JS位运算 位运算的方法在其它语言也是一样的，不局限于JS，所以本文提到的位运算也适用于其它语言。 位运算是低级的运算操作，所以速度往往也是最快的，相对其它运算如加减乘除来说，并且借助位运算的特性还能实现一些算法，可以说恰当地使用运算还是有很多好处的。 1. 使用按位非~判断索引存在 这是一个很常用的技巧，如判…
28. 你所要知道的所有关于Angular的变化检测机制原文地址：Everything you need to know about change detection in Angular 如果想像我一样全面的了解Angular的脏值检测机制，除了浏览源代码之外别无他法，网上可没有太多可用信息。大部分文章都提到，Angular…

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

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