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

实例：使用puppeteer headless方式抓取JS网页；面试：对javascript的闭包的理解；新来的开发花了四天时间来制作一个简单的 HTML 和 CSS 按钮，我该解雇他么？；JavaScript 工作原理之四－事件循环及异步编程的出现和 5 种更好的 async/await 编程方式(译)；学习express.js源代码的方法；JavaScript 是如何运作的：用 MutationObserver 追踪 DOM 的变化；大三前端doge迟来的春招实习总结（百度offer）；git 操作规范

实例：使用puppeteer headless方式抓取JS网页 puppeteer google chrome团队出品的puppeteer 是依赖nodejs和chromium的自动化测试库，它的最大优点就是可以处理网页中的动态内容，如JavaScript，能够更好的模拟用户。有些网站的反爬虫手段是将部分内容隐藏于某些j
面试：对javascript的闭包的理解 js的变量作用域有两种，全局变量和局部变量需要注意的是，函数内部可以直接读取全局变量。 var global = 666; function func() { alert(global); } func(); //666 函数外部无法读取到函数内部的局部变量，因为函数在执行完之后，函数内部的环境就被销毁了。 function func() { var message = 888; } aler…
新来的开发花了四天时间来制作一个简单的 HTML 和 CSS 按钮，我该解雇他么？简评：quora 上面的一个提问，我觉得他对编程这事儿是不是有什么误解。你看到这个按钮了么？这只是个简答的、普通的，毫无花哨的，没动画，没 JS，没有特殊的触发机制，没有复杂的权限的小按钮。我花了 8 个小时才做出来，究竟发生了什么？首先我没有什么想法，我要做啥我根本不知道。然…
JavaScript 工作原理之四－事件循环及异步编程的出现和 5 种更好的 async/await 编程方式(译) 原文请查阅这里，略有改动。本系列持续更新中，Github 地址请查阅这里。这是 JavaScript 工作原理的第四章。现在，我们将会通过回顾单线程环境下编程的弊端及如何克服这些困难以创建令人惊叹的 JavaScript 交互界面来展开第一篇文章。老规矩，我们将会在本章末尾分享 5 条利用 async/await 编写更简洁代码…
学习express.js源代码的方法尽管有Hapi,Koa等有力的竞争者，express.js依然是非常流行的nodejs web服务器框架，毕竟它早于2007年就已经在开发了。学习expressjs的源代码的好处自然不少。它可以帮你深刻理解HTTP协议，这个协议是做前端后端
JavaScript 是如何运作的：用 MutationObserver 追踪 DOM 的变化本系列专门研究 JavaScript 及其构建组件，这是第 10 期。在识别和描述核心元素的过程中，我们也分享了一些构建SessionStack 的重要法则，SessionStack 是一个 JavaScript 应用，为了帮助用户实时查看和再现他们的 web 应用程序缺陷，它需要健壮并且高性能。 web 应用正在持续的越来越侧重客户端，这是由很…
大三前端doge迟来的春招实习总结（百度offer）从2月底开始复习各种知识点，3月中旬已经有同学拿到了offer，而我直到今天上午才offer call了，这两个多月真是经历了好多… 因此写一篇文章记录和纪念这段时光…另外会给出一些有印象的面试题，大部分就不写了，因为网上都有，我挑一些没说过的点写 1
【git 操作规范】好文推荐！详见（来自：Miss_Ye）
作为一名初级前端开发工程师的一些感悟从大三接触前端工作到现在已有3年时间，因为本人本科专业是GIS（地理信息科学，2017届本科），唯一和前端相关的就是webgis，专业课程关于前端学的也是一知半解，其实在那个时候大家喊的大多数都是网页开发，学校的课程也都是最基础的网页开发课程，所以学的也不是很
[NGX]Angular组件/指令生命周期简介 Angular中所有的组件和指令都有相同的生命周期钩子，在@angular/core库中定义；可能很多初学者（包括我-。-）都只知道ngOnInit()和ngOnDestroy()，这里简单介绍一下Angular的几个生命周期的顺序和作用。执行顺序按照调用
阿里系 React 项目飞冰 2.0 正式发布, 支持 Vue 项目开发飞冰 2.0 大版本已正式发布，带来了许多重要更新。飞冰 2.0 是什么? 飞冰通过 Iceworks GUI 工具、完善的开发文档、丰富的组件等，无需安装配置任何前端开发环境（比如安装 node 等）、无需编写构建脚本等，即可拥有前端开发最佳实践。开发过程十分简单。通过海量的物料，可以快速复用专注于编写业…
深入理解ES6–12.代理与反射接口代理是什么？通过调用 new Proxy() ，你可以创建一个代理用来替代另一个对象（被称之为目目标对象），这个代理对目标对象进行了虚拟，因此该代理与该目标对象表面上可以被当作同一个对象来对待。代理允许你拦截目标对象上的底层操作，而这本来是JS引擎的内部能力，拦截行为适用了一个能响应特定操作的函数…
大佬，JavaScript 柯里化，了解一下？简介柯里化从何而来柯里化, 即 Currying 的音译。 Currying 是编译原理层面实现多参函数的一个技术。在说JavaScript 中的柯里化前，可以聊一下原始的Currying是什么，又从何而来。在编码过程中，身为码农的我们本质上所进行的工
移植Rxjs中部分常用operators到数组一段时间的响应式编程的研究,对Rxjs有了一些熟悉。虽然工作中绝大部分时候很少会有复杂的需求用到Rxjs,但是对于Rxjs的思想和响应式编程、观察者模式等相关知识是值得学习的! 而且其中的观察者模式Observable已经列入了JavaScript规范中。Ob
用CSS3美化单选框 radio 、多选框 checkbox 和 switch开关按钮用CSS3美化单选框 radio 、多选框 checkbox 和 switch开关按钮发表于 2018年05月5日 by 愚人码头被浏览 1,584 次分享到：小编推荐：掘金是一个高质量的技术社区，从
HTML5 : History API back() forward() go() //返回 window.history.back() window.history.go(-1) //向前跳转 window.history.foward() window.history.go(1) //历史记录中页面总数 history.length() HTML5 新方法：添加和替换历史记录的条目 pushState history.pushState(state, title, url); 添加一条历史记录，不刷新页面 …
Angular使用动态加载组件方法实现Dialog 网上的文章和教程基本上写到组件加载完成就没了！没了？！而且都是只能存在一个dialog，想要打开另一个dialog必须先销毁当前打开的dialog，之后看过 material 的实现方式，怪自己太蠢看不懂源码，就只能用自己的方式来实现一个dialog组件了 D
x-loader.js图片加载loading控制ES6插件 x-loader.js 是什么 x-loader是用于H5页面加载时，通过图片的加载的进度控制loading效果的ES6插件。起步第一步。通过import引入x-loader，通过new操作符创建一个新的xLoader对象。 // javasc
实现前端点击按钮自动复制剪贴板功能【目录】明确需求 html分析代码实现 css分析 js分析代码实现只要是文本，长按选中就可以复制，但是需求来了挡也挡不住：明确需求为了提升用户体验，点击【复制】按钮就自动复制到剪贴板，那么就需要前端实现这种功能了。首先明确了需求
JavaScript中symbol对象中方法的知识梳理 JavaScript中symbol对象中方法的知识梳理 1.Symbol.hasInstance 每一个函数都有一个Symbol.hasInstance, 用于确定某个对象是否为该函数的事例。该方法在F
前端干活系列—-入门webpack这一篇文章就够了博主学习webpack，并不是因为项目需要，而是因为webpack现在比较流行，所以想学习一下，顺便看看对现在的项目是否有用。最后经过思考感觉对当前项目的作用并不大，不过总结了一下webpack适合使用的几个场景 1.前后端分离的项目，像vue,angular,react都采用了webpack。现在三大主流框架（vue,react,angular）为前后端…
JavaScript 编程精解中文第三版十、模块编写易于删除，而不是易于扩展的代码。 Tef，《Programming is Terrible》理想的程序拥有清晰的结构。它的工作方式很容易解释，每个部分都起到明
babel-polyfill VS babel-runtime VS babel-preset-env 在项目开发过程中，我们往往需要引入babel来解决代码兼容性的问题。目前有三种方式，分别是babel-polyfill，babel-runtime和babel-preset-env，那么这三种方式有什么区别，结合webpack打包出来的效果哪种比较优呢，下面我
reactjs 史上最详细的解析干货一.  State和 Props       state是状态机。       应该包括：那些可能被组件的事件处理器改变并触发用户界面
实战Parcel构建一个基于Vue.js的相册应用前段时间发了一篇《前端构建工具发展及其比较》，回顾了前端构建工具的发展历程和进化，其中最新出来的零配置打包工具 Parcel 我一直很好奇，它到底怎么零配置了？众所周知此前 Webpack 的配置简有点让人茫然和无措，虽然现在 Webpack 4 也号称零配置，但也是相对的，依然需要配置一些东西，而我使用了 Parcel 后我有…
JS 的 new 到底是干什么的？大部分讲 new 的文章会从面向对象的思路讲起，但是我始终认为，在解释一个事物的时候，不应该引入另一个更复杂的事物。今天我从「省代码」的角度来讲 new。 ————————— 想象我们在制作一个策略类战争游戏，玩家可以操作一堆士兵攻击敌方。我们着重…
如何实现一个HTTP请求库——axios源码阅读与分析在前端开发过程中，我们经常会遇到需要发送异步请求的情况。而使用一个功能齐全，接口完善的HTTP请求库，能够在很大程度上减少我们的开发成本，提高我们的开发效率。 axios是一个在近些年来非常火的一个HTTP请求库，目前在 GitHub 中已经拥有了超过40K的star，受到了各位大佬的推荐。今天，我们就来看下，axios…
完爆Facebook/GraphQL，APIJSON全方位对比解析(一) 自APIJSON发布以来，不断有网友拿来和Facebook开发的GraphQL对比，甚至不少人声称“完爆”APIJSON。然而事实正好相反，本系列博客将以大量真实依据来证明，APIJSON“完爆”GraphQL！   APIJSON的口号是: 后端
HTML5入门教程：Cookie会话跟踪技术 1. Cookie会话跟踪技术介绍会话跟踪是Web程序中常用的技术，用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Session。Cookie通过在客户端记录信息确定用户身份,可以在客户端保存临时数据。Cookie 技术诞生以来，它就成了广大网络用
掌握HTTP的方法无论前端程序员，还是后端程序员，稍微系统的学习HTTP是非常值得的。实际上，它是日常开发一直在用的，之所以没有怎么太学习也可以工作，现存的各种框架帮了很多的忙。然而，想要快速理解概念，理解安全，使得开发性能高效的程序称为可能，学习HTTP都是必不可少的。