20180304前端周报

标签： 1182View

细数国内外的前端大牛；2018 年 Web 开发者路线图：最全的教程、资源和在线课程；《你不知道的javascript上卷》读书笔记1；JavaScript的反调试技术（上篇）；JavaScript 奇怪事件簿；JavaScript 工作原理：Web Worker 的内部构造以及 5 种你应当使用它的场景；Pandora.js — 阿里巴巴开源的 Node.js 应用监控管理器；JS内存泄漏实例解析

  1. 1、细数国内外的前端大牛

    本文将枚举一些前端界内比较熟知的前端技术大牛，分为个人简介、技术博客、擅长领域几个方向，希望能对初步进入前端的人一些指引和学习的方向。以下排名不分先后，个人推荐需要了解的大牛有朴灵，尤雨溪，大漠，张鑫旭，阮一峰，wintercn等。 国内 玉伯 简介 玉伯（王保平），淘宝前端类库 KISSY、前端模块化开…

  2. 2、2018 年 Web 开发者路线图：最全的教程、资源和在线课程

    编者按：WEB开发是一个非常热门的职业。该工作的技术性很强, 它需要你必须不停地提高、不断地加强, 才不会被别人比下去, 才能保住饭碗。看了以下文章，希望对你提高技能能有一些帮助。本文编译自Brandon Morelli在Medium上发表的文章The 2018 Web Developer Roadmap。 想学习代码？没有比现在更好的时候了。 下面是一…

  3. 3、《你不知道的javascript上卷》读书笔记1

    最近闲赋在家，看看去年买的《你不知道的JavaScript上卷》，在这做点简单的笔记。 第一部分：作用域和闭包 第一章 作用域是什么？ 问题，变量如何储存？储存在哪里？如何找到他们？ 传统编译的三个步骤：分词/词法分析，解析/语法分析，代码生成。其中分词和词法分析的微妙区别：词法单元的识别是通过有状态还是…

  4. 4、JavaScript的反调试技术（上篇）

  5. 5、JavaScript 奇怪事件簿

  6. 6、JavaScript 工作原理：Web Worker 的内部构造以及 5 种你应当使用它的场景

    这是探索 JavaScript 及其内建组件系列文章的第 7 篇。在认识和描述这些核心元素的过程中，我们也会分享我们在构建SessionStack 时所遵循的一些经验规则。SessionStack 是一个轻量级 JavaScript 应用，它协助用户实时查看和复现他们的 Web 应用缺陷，因此其自身不仅需要足够健壮还要有不俗的性能表现。 如果你错过了…

  7. 7、Pandora.js — 阿里巴巴开源的 Node.js 应用监控管理器

    Pandora.js 阿里巴巴产出的一个Node.js 应用监控管理器，可以让您对自己的 Node.js 应用了若指掌，我们的目标就是让应用可管理、可度量、可追踪。 同时，这也是阿里巴巴开源的第一个使用了类型系统的 Node.js 软件。它使用的是 TypeScript，为 Pandora.js 带来了前所未有的逻辑健壮性。 什么是 Pandora.js 就像…

  8. 8、JS内存泄漏实例解析

    今天突然想到一个问题，let的块级作用域，以及闭包的变量引用功能很有意思（这脑洞咋联想到一起的，囧）。。闭包的使用会影响浏览器的GC过程。那么： JS 对象什么时候会被 自动回收 ？ 如何使用正确使用闭包，并避免内存泄漏？ 先看一个经典例子，循环异步打印问题（没耐心的直接跳最后一个…

  9. 9、利用console.time优化js代码

    也许你经常会想知道如何优化自己的代码，除了设计模式、代码简洁、易维护之外，我们还需要考虑的一点也非常重要，尤其是检测一些逻辑的复杂性上，那就是代码的实际执行时间。 console.time(timerName) 作为常识，我们首先要知道console.time() 以及timeEnd()已经为我们提供了api，可以方便的检测代码段的执行时间，…

  10. 10、万物皆空之 JavaScript 原型

    ES6 的第一个版本发布于 15 年 6 月，而本文最早创作于 16 年，那也是笔者从事前端的早期。在那个时候， ES6 的众多特性仍处于 stage 阶段，也远没有现在这么普及，为了更轻松地写 JavaScript ，笔者曾花费了整整一天，仔细理解了一下原型——这个对于一个成熟的 JavaScript 开发者必须要跨越的大山。 ES6 带来了太多…

  11. 11、前端萌新眼中的Promise及使用

    一个 Promise 就是一个代表了异步操作最终完成或者失败的对象。这是MDN上关于Promise的解释。在前端开发中，Promise经常被拿来用于处理异步和回调的问题，来规避回调地狱和更好排布异步相关的代码。本篇文章对于Promise以及相关的async/await记录一些自己的理解和体会。 一、Promise的三种状态 从字面的意思理解，P…

  12. 12、更优雅的下一代 Node.js 开发框架 — Nest.js 4.6.4 发布

    Nest 是构建高效，可扩展的 Node.js Web 应用程序的框架。 它使用现代的 JavaScript 或 TypeScript（保留与纯 JavaScript 的兼容性），并结合 OOP（面向对象编程），FP（函数式编程）和FRP（函数响应式编程）的元素。在底层，Nest 使用了 Express，可以方便地使用各种可用的第三方插件。 Nest 真正解决了长期以来 Node…

  13. 13、面试官: 你了解过Babel吗？写过Babel插件吗? 答: 没有。卒

    也就前两天，面试大厂，其中更有那么一个问题: 你了解过Babel吗？ 了解过抽象语法树，又称AST，有学习过，也写过一个基于AST的 乞丐版模板引擎 ，先是词法解析token，然后生产抽象语法树，然后更改抽象语法树，当然这是插件做的事情，最后根据新的AST生成代码。 写过Babel插件吗 没有，只是看过…

  14. 14、理性分析 JavaScript 中的 this

    了解 python 的同学可能会知道，python 构造函数中总是会出现 self 参数。这个参数用来表示创建的实例对象。 class Student(object): def __init__(self, name, score): self.name = name self.score = score 在 JavaScript 和 Java 中这个参数被隐藏了。我们不必在参数列表中显式声明这个参数…

  15. 15、JS脚本加载后执行相应回调函数

    项目中经常会遇到这样的问题：当某个 js 脚本加载完成后再执行相应任务，但很多朋友可能并不知道怎么判断我们要加载的 js 文件是否加载完成，如果没有加载完成我们就调用 js 文件里面的函数是不会成功的。本文主要讲解怎么在成功加载 js 文件后再执行相应回调任务。 基本思路 我们可以动态的创建 …

  16. 16、译文 | Google出品 – 利用 webpack 做 web 性能优化

    原文 https://developers.google.com/web/fundamentals/performance/webpack/ 作者 Addy Osmani Instroduction 介绍 现代 Web 应用经常用到 bunding tool 用于创建一个生产环境的打包文件（例如脚本、样式等），这个打包文件是已经优化完，并且最小化完成的，并且能够被用户用更少的时间下载到。在这篇文章中，…

  17. 17、实现数据的双向绑定mvvm-剖析Vue的原理

    完成的效果 <div id="mvvm-app"> <input type="text" v-model="word"> <p>{{word}}</p> <button v-on:click="sayHi">change model</button> </div> <script src="observer.js"></script…

  18. 18、Yarn 1.5.0 发布，Facebook 推出的 JavaScript 包管理器

    Facebook 推出的 JavaScript 包管理器 Yarn 发布了 1.5.0 版本，该版本的主要更新是对 bug 进行修复，还包含一些改进。部分内容如下： feat(cli): Improves "yarn workspaces info" fix(windows): Adjusted windows path so that bin folder has a backslash on the end of the path value, as p…

  19. 19、探索AJAX

    之前学习了JSONP可以发送请求去获取数据，JSONP传送门然后通过callback来异步的执行我们预先准备好的函数。 可是JSONP只能发送get请求，这是不是太单一了？需求很多的变化，对于复杂一点的需求的话，无法满足，所以我们来试试用AJAX来实现跨域。 开工 先实现一个点击按钮发送一个请求，这里就需要介绍了一个WEB…

  20. 20、Webpack 4.0.0 正式发布，模块加载打包工具

    Webpack 4.0.0 正式版已发布，Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle – 通常只有一个，由浏览器加载。 这是一个大的更新版本，亮…

  21. 21、vue 实现剪裁图片并上传服务器

    预览链接点击预览 需求 预览：根据选择图像大小自适应填充左侧裁剪区域 裁剪：移动裁剪框右侧预览区域可实时预览 上传&清空：点击确认上传裁剪图片，点击取消按钮清空图像 裁剪框可调节大小 实现步骤 methods:funName() – 对应源码中methods中的funName方法 …

  22. 22、搭建 Node.js 应用部署平台（一）—— 综述

    为什么要开发这样一个平台 当我们想要写一个 Node.js 应用时，需要解决很多编写代码之外的事情（机器、环境、部署、etc），这很大程度上提高了编写应用的成本。Node Labs 平台将提供应用创建、运行环境、部署、监控等功能，让创建 Node.js 应用变得更加简单。 什么样的项目适用于这个平台进行部署和管理 我们前期…

  23. 23、前端每周清单第 52 期: Webpack 4.0，GraphQL 安全加固，去中心化的 Web

    前端每周清单第 52 期: Webpack 4.0，GraphQL 安全加固，去中心化的 Web 作者：王下邀月熊 编辑：徐川 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发…

  24. 24、JaveScript函数(JS知识点归纳六)

    JS 实例 JS 对象实例 JS 测验 JS 总结 JS 参考手册 JavaScript 对象 HTML DOM…在调用函数时,您可以向其传递值,这些值被称为参数。 这些参数可以在函数中使用…

  25. 25、CSS中各种布局的背后(*FC)

    CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。 盒模型(Box Model) .png) 上图为W3C标准盒模型，另外还有一种IE盒模型（IE6以下），唯一的区别就是：前者…

  26. 26、顶级高性能动画Javascript类库KUTE.js实战入门介绍

    基于javascript的动画类库其实有挺多滴， 在这套教程中我们将介绍一款新的javascript动画类库 – KUTE.js， 和其它动画类库不同的地方， 在于KUTE.js拥有非常高效的动画性能， 并且优化了内存， 模块化的代码管理 大家访问 KUTE.js 类库的首页可以看到一个非常赞的动画效果演示，如下： 可以看到以上动画非常…

  27. 27、关于 Promise 的 9 个提示

    正如同事所说的那样，Promise 在工作中表现优异。 这篇文章会给你一些如何改善与 Promise 之间关系的建议。 1. 你可以在 .then 里面 return 一个 Promise 让我来说明这最重要的一点 是的！你可以在 .then 里面 return 一个 Promise 而且，return 的这个 Promise 将在下一个 .then 中自动解析。 …

  28. 28、前端简洁并实用的工具类

    前言 本文主要从日期,数组,对象,axios,promise和字符判断这几个方面讲工作中常用的一些函数进行了封装,确实可以在项目中直接引用,提高开发效率. 1.日期 日期在后台管理系统还是用的很多的,一般是作为数据存贮和管…

  29. 29、JavaScript中Map和ForEach的区别

    译者按： 惯用Haskell的我更爱map。 原文: JavaScript — Map vs. ForEach – What’s the difference between Map and ForEach in JavaScript? 译者: Fundebug 为了保证可读性，本文采用意译而非直译。另外，本文版…

  30. 30、React 是怎样炼成的

    本文主要讲述 React 的诞生过程和优化思路。 内容整理自 2014 年的 OSCON – React Architecture by vjeux，虽然从今天（2018）来看可能会有点历史感，但仍然值得学习了解。以史为鉴，从中也可以管窥 Facebook 优…

  31. 31、原生js实现移动端选择器插件

    原生js实现移动端选择器插件 前言 插件功能只满足我司业务需求，如果希望有更多功能的，可在下方留言，我尽量扩展！如果你有需要或者喜欢的话，可以给我github来个star 仓库地址在线预览(记得将浏览器切换到手…

  32. 32、基于 Webpack 开发和构建多页面站点

    基于 Webpack 开发、调试和构建多页面站点（普通 Web 站点）的前端工程化方案，同时适用于 PC 端和移动端。 项目地址 github.com/zhaotoday/w… 特性 前端工程化 集成 PostCSS、Sass 支持 EJS 模板引擎 支持响应式 支持模块化、组件化 支持开发、调试和构建 支持 JS、CSS …

  33. 33、撸js基础之异步

    前端这两年的新技术铺天盖地，各种框架、工具层出不穷眼花缭乱。最近打算好好复习下 js 基础，夯实的基础才是学习新技术的基石。本文作为读书笔记简单的总结下 js 异步的基础知识。 本系列目前已有四篇： 撸js基础之数组 撸js基础之对象 撸js基础之函数 撸js基础之异步 本文首发于个人博…

  34. 34、浅谈vuex

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单的来说，就是数据共用，对数据集中起来进行统一的管理。 如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果…

  35. 35、随想录（node.js环境）

    声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com javascript之前一般用于web前段开发，然而由于node.js的出现，用javascript开发后端程序也不再是一件复杂的事情。node.js中js引擎来自于chrome v8浏览器，配合node.js额外开发的工具代码，本身使用起来非常容易，也很高效。除此之…

  36. 36、JS 实现抛物线动画

    {代码…} JS 实现抛物线动画 在做无人便利小程序的项目中，某一天产品说要像某产商产品学习，给添加购物车增加抛物线小球动画。好吧，产品你最大，做！ 先给大家看下效果图（其实已经是实现后的效果了，顺便给自…

  37. 37、组件库webpack构建速度优化经验总结

    在公司的主要工作是组件库（基于vue的ui组件库，类似element-ui）的开发，也已经有两个多月，期间一直觉得项目的开发构建太慢，每次开发打开开发环境需要 40s 左右，简直不能忍。前前后后尝试了各种优化手段，但是都不理想。终于在今天，找到了问题所在，构建速度提升了 50% 以上，现在只需要 17s 左右，整个心情…

  38. 38、babel-polyfill vs babel-runtime

    背景 在项目迭代过程中，因为有兼容 IE 的需求，根据文档使用 babel-polyfill 和 babel-runtime 两个插件解决问题。但是对于二者之间的恩怨情仇，却不甚了解，便打算细细探究一番。 关于 Babel 如果我们没有配置一些规则，Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如 Itera…

  39. 39、如何在 Vue 中使用 TypeScript

    注意：此文并不是把vue改为全部替换为ts，而是可以在原来的项目中植入ts文件，目前只是实践阶段，向ts转化过程中的过渡。 ts有什么用？ 类型检查、直接编译到原生js、引入新的语法糖 为什么用ts？ TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没…

  40. 40、JavaScript复制内容到剪贴板

    原文链接：https://github.com/axuebin/ar… 最近一个活动页面中有一个小需求，用户点击或者长按就可以复制内容到剪贴板，记录一下实现过程和遇到的坑。 常见方法 查了一下万能的Google，现在常见的方法主要是以…

喜欢这篇文章的朋友，欢迎收藏、分享、评论，帮我上热门，你的支持，是我每日更新的动力！

喜欢前端的朋友可以点击关注一下我微博，每日分享精彩的前端文章！

关注我

我的微信公众号：前端开发博客，在后台回复以下关键字可以获取资源。

  • 回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识，加我微信:caibaojian89 交流