20180304前端周报

细数国内外的前端大牛;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. 6、JavaScript 工作原理:Web Worker 的内部构造以及 5 种你应当使用它的场景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  15. 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...

  16. 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...

  17. 19、探索AJAX

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

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

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

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

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

  20. 22、搭建 Node.js 应用部署平台(一)—— 综述

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  28. 30、React 是怎样炼成的

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

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

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

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

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

  31. 33、撸js基础之异步

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

  32. 34、浅谈vuex

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

  33. 35、随想录(node.js环境)

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

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

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

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

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

  36. 38、babel-polyfill vs babel-runtime

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

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

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

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

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

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

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

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