20170724 前端开发日报

Zzzfan 7年前
   <p>前端事件绑定知识点(面试常考);合格前端系列第六弹-从指向看 <a href="/misc/goto?guid=4958879020187554774" rel="nofollow,noindex">JavaScript</a> ;刺破 <a href="/misc/goto?guid=4959734766423311971" rel="nofollow,noindex">Vue</a> 的心脏之—— <a href="/misc/goto?guid=4959751046730859162" rel="nofollow,noindex">响应式</a> 源码分析;10个JavaScript难点;webpack多页应用架构系列(十六):善用浏览器缓存,该去则去,该留则留; <a href="/misc/goto?guid=4959751046826842091" rel="nofollow,noindex">JS</a> 事件浅析;htcap:一款实用的递归型 <a href="/misc/goto?guid=4958879019403163939" rel="nofollow,noindex">web</a> 漏洞扫描工具;使用node爬虫,爬取指定排名网站的JS引用库</p>    <ol>     <li> <p><a href="/misc/goto?guid=4959751046947546726" rel="nofollow,noindex">前端事件绑定知识点(面试常考)</a> <a href="/misc/goto?guid=4959751047039184523" rel="nofollow,noindex"> </a> 简介 事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。 事件通常与函数配合使用,当事件发生时函数才会执行。 执行JS 事件的方式: <a href="/misc/goto?guid=4958879020687701845" rel="nofollow,noindex">HTML</a> 事件属性...</p> </li>     <li> <p><a href="/misc/goto?guid=4959751047155897819" rel="nofollow,noindex">合格前端系列第六弹-从指向看JavaScript</a> <a href="/misc/goto?guid=4959751047246587680" rel="nofollow,noindex"> </a> 很多人刚刚接触前端甚至一些“老”前端都经常会在JavaScript中所谓的难点,如this,原型,继承,闭包等这些概念中迷失了自我。接下来这篇文章会把我自己对于JavaScript中这些点通过指向的概念做个总结并分享给大家,希望可以帮助大家更好的了解这些所谓的难点。</p> </li>     <li> <p><a href="/misc/goto?guid=4959751047338988182" rel="nofollow,noindex">刺破vue的心脏之——响应式源码分析</a> <a href="/misc/goto?guid=4959751047443633018" rel="nofollow,noindex"> </a> 之前发 刺破 vue 的心脏之——详解 render function code 的时候,承诺过会对 Vue 的核心过程的各个部分通过源码解析的方式进行抽丝剥茧的探索,今天就来进入第二部分 响应式原理部分的源码解析 ,承诺兑现得有些晚,求轻拍 一、先分析工作原理 还是之前的套路,在读源码之前,先分析原理 上图来自 Vue 官...</p> </li>     <li> <p><a href="/misc/goto?guid=4959751047538744132" rel="nofollow,noindex">10个JavaScript难点</a> <a href="/misc/goto?guid=4959751047632121321" rel="nofollow,noindex"> </a> 10个JavaScript难点 1.立即执行函数 立即执行函数,即Immediately Invoked Function Expression (IIFE),正如它的名字,就是创建函数的同时立即执行。它没有绑定任何事件,也无需等待任何异步操作: {代码...} fu...</p> </li>     <li> <p><a href="/misc/goto?guid=4959751047722251198" rel="nofollow,noindex">webpack多页应用架构系列(十六):善用浏览器缓存,该去则去,该留则留</a> <a href="/misc/goto?guid=4959751047812334615" rel="nofollow,noindex"> </a> 本文首发于Array_Huang的技术博客——实用至上,非经作者同意,请勿转载。原文地址:https://segmentfault.com/a/1190000010317802如果您对本系列文章感兴趣,欢迎关注订阅这里:https://segmentfault.com/blog/arr...</p> </li>     <li> <p><a href="/misc/goto?guid=4959751047905213689" rel="nofollow,noindex">JS事件浅析</a> <a href="/misc/goto?guid=4959751047997875852" rel="nofollow,noindex"> </a> 一个网页由三层组成(html 结构,js 行为,css 表现),一切的东西其实都建立在html上,html里面的dom提供了一些事件,然后通过js封装,我们可以用js去调用dom上的事件。事件有很多,有我用过的有我没用过的,今天我想分析一番。 事件流 我们都知道,有两种事件流,一个是冒泡一个是捕获。 捕获就是从body开始到你...</p> </li>     <li> <p><a href="/misc/goto?guid=4959751048086428912" rel="nofollow,noindex">htcap:一款实用的递归型Web漏洞扫描工具</a> <a href="/misc/goto?guid=4959751048172206905" rel="nofollow,noindex"> </a> 今天给大家介绍的是一款名叫 htcap 的开源 Web 漏洞扫描工具,它通过拦截 <a href="/misc/goto?guid=4959738837372508532" rel="nofollow,noindex">ajax</a> 调用和页面 DOM 结构的变化并采用递归的形式来爬取单页面应用(SPA)。htcap 并不是一款新型的漏洞扫描工具,因为它主要针对的是漏洞扫描点的爬取过程,然后使用外部工具来扫描安全漏洞。在 htcap 的帮助下,我们就可以通过手动或自动渗透测...</p> </li>     <li> <p><a href="/misc/goto?guid=4959751048289052393" rel="nofollow,noindex">使用node爬虫,爬取指定排名网站的JS引用库</a> <a href="/misc/goto?guid=4959751048375728915" rel="nofollow,noindex"> </a> 前期准备 本爬虫将从网站爬取排名前几的网站,具体前几名可以具体设置,并分别爬取他们的主页,检查是否引用特定库。 github地址 所用到的node主要模块 express 不用多说 request http模块 cheerio 运行在服务器...</p> </li>     <li> <p><a href="/misc/goto?guid=4959751048469140010" rel="nofollow,noindex">关于javascript中的从堆栈内存到执行上下文</a> <a href="/misc/goto?guid=4959751048554723364" rel="nofollow,noindex"> </a> 关于javascript中的从堆栈内存到执行上下文 我GitHub上的菜鸟仓库地址: 点击跳转查看其他相关文章 文章在我的博客上的地址: 点击跳转         先从计算机角度说一下内存:内存,包括三个部分:只读存储器(ROM...</p> </li>     <li> <p><a href="/misc/goto?guid=4959751048634167021" rel="nofollow,noindex">ReactNative学习笔记十之npm</a> <a href="/misc/goto?guid=4959751048714700232" rel="nofollow,noindex"> </a> 在之前的笔记中总有各种形式的npm install,npm到底是干什么用的,它的命令都有哪些,这里会详细介绍一下。 npm NPM的全称是Node Package Manager,是随同 <a href="/misc/goto?guid=4959751048801886242" rel="nofollow,noindex">NodeJS</a> 一起安装的包管理和分发工具,它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。 版本 查看 $ npm -v 2.3.0 升级 $ sudo npm...</p> </li>     <li> <p><a href="/misc/goto?guid=4959751048886131628" rel="nofollow,noindex">TypeScript:不止稳,而且快</a> <a href="/misc/goto?guid=4959751048978103903" rel="nofollow,noindex"> </a> 前言 关于 TypeScript 是什么,应该大部分人都已经知道了,但是在这儿,还是摘抄一下知乎的回答: TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript,所以 TypeScript 并不依赖于浏览器的支持,也并...</p> </li>     <li> <p><a href="/misc/goto?guid=4959751049061739616" rel="nofollow,noindex">Vue 和 React 使用方式的对标</a> <a href="/misc/goto?guid=4959751049145141166" rel="nofollow,noindex"> </a> 这篇文章将接地气的从开发使用角度对比Vue和 <a href="/misc/goto?guid=4959738839028189055" rel="nofollow,noindex">React</a> ,带有严重个人偏好,慎入。 这篇文章首次发布于 knowledge 项目,因为博客正在换皮肤和评论系统,关于这篇文章的任何问题,都可以在我 GitHub 的 knowledge 仓库提issues讨论。 目录结构 关于组建的创建方式 关于 State ...</p> </li>     <li> <p>分享自己折腾多时的一套 vue 组件 --we-vue <a href="/misc/goto?guid=4959751049261738281" rel="nofollow,noindex"> </a> 接触 Vue.js 已经一年多了,记得用它 hello world 的时候,最新的稳定版本还是 1.0.24,而眼下,v2 都已经迭代好多次了。 不得不说,初识Vue.js 时,让我有种初恋的赶脚。(当然了,对于 <a href="/misc/goto?guid=4959734767280433882" rel="nofollow,noindex">jQuery</a> 这旧爱也是没办法...</p> </li>     <li> <p><a href="/misc/goto?guid=4959751049369843564" rel="nofollow,noindex">JavaScript 函数重载</a> <a href="/misc/goto?guid=4959751049465884933" rel="nofollow,noindex"> </a> 译者按: jQuery之父John Resig巧妙地利用了闭包,实现了JavaScript函数重载。 原文: JavaScript Method Overloading 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。 在一个业余项目中,我写了一个简单的addMethod函数,用于实现函数重...</p> </li>     <li> <p><a href="/misc/goto?guid=4959751049553039048" rel="nofollow,noindex">用 TS + Vue 重写 APlayer HTML5 音乐播放器</a> <a href="/misc/goto?guid=4959751049630310659" rel="nofollow,noindex"> </a> 简介 @DIYgod/APlayer 是一款简洁漂亮的 <a href="/misc/goto?guid=4958879020080002186" rel="nofollow,noindex">HTML5</a> 音乐播放器 (〃ノωノ) 在我第一次看到这款播放器颜值的时候让我眼前一亮,我非常崇拜那些能设计出好看界面的设计师 (* 简介 @DIYgod/APlayer 是一款简洁漂亮的 HTML5 音乐播放器 (〃ノωノ) 在我第一次看到这款播放器颜值的时候让我眼前一亮,我非常崇拜那些能设计出好看界面的设计师 (*</p> </li>     <li> <p>JSXX - 又一个模板引擎 <a href="/misc/goto?guid=4959751049753170607" rel="nofollow,noindex"> </a> 该模板引擎采用与 JSX 类似的语法,但是提供了 for 和 if 语句来方便使用,与 JSX 类似,该模板引擎会将模板编译为与之对应的模板函数,可以同时在浏览器和 node 端使用。 Vue 的模板引擎似乎也提供了预编译的方式,但是它生成的模板函数会使用 with 语句来在运行时确定模板变量的作用域,见 Vue-Templ...</p> </li>     <li> <p><a href="/misc/goto?guid=4959751049831385235" rel="nofollow,noindex">Web前端模板引擎の字符串模板</a> <a href="/misc/goto?guid=4959751049921783104" rel="nofollow,noindex"> </a> 这是一个系列文章,将会介绍目前Web前端领域里用到的三种模板引擎技术,它们分别是: 基于字符串的模板 基于Dom操作的模板 基于虚拟Dom的模板 本文是这个系列的第一篇,着重介绍基于字符串的模板引擎的实现原理,...</p> </li>     <li> <p><a href="/misc/goto?guid=4959751050010620393" rel="nofollow,noindex">如何更有效率和质量地开发Vue项目</a> <a href="/misc/goto?guid=4959751050096201307" rel="nofollow,noindex"> </a> 前言 自总结完了上篇前端工程化的思想,并在vue全家桶的项目加以实践,趁热给大家总结一篇如何更有效率与质量地开发vue项目,以及其中踩过的一个个坑。。。 基于vue-cli的自定义</p> </li>     <li> <p><a href="/misc/goto?guid=4959751050178704834" rel="nofollow,noindex">nodejs + express + mssql 封装数据操作</a> <a href="/misc/goto?guid=4959751050263155872" rel="nofollow,noindex"> </a> 在网上看到有一些nodejs连接sqlserver的相关教程,但非常少,而且很多都有错,特别是操作数据库的语句,在这里我做了一番整理,搭建一个完整的nodejs后台,并封装sqlserver的操作。 nodejs的安装和express的安装...</p> </li>     <li> <p>前端每周清单第 23 期:React 内部原理与实现,自定义基于 JavaScript 的 16 位虚拟机 - 知乎专栏 <a href="/misc/goto?guid=4959751050343708980" rel="nofollow,noindex"> </a> 前端 前端每周清单 编辑:徐川 作者:王下邀月熊 前端每周清单专注前端领域内容,分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号(ID:frontshow),及时获取前端每</p> </li>     <li> <p>阿里云前端周刊 - 第 17 期 <a href="/misc/goto?guid=4959751050430754274" rel="nofollow,noindex"> </a> 推荐 1. Styled-Components 实战 https://hackernoon.com/styled... Styled-Components 是由 Max Stoiber 与 Glen Maddern 创建的新的 <a href="/misc/goto?guid=4959734766667478708" rel="nofollow,noindex">CSS</a> -in-JS 工具库,能够帮你组织 React 或者 React Native 项目中的样式声明...</p> </li>     <li> <p><a href="/misc/goto?guid=4959751050554649225" rel="nofollow,noindex">换个思路理解Javascript中的this</a> <a href="/misc/goto?guid=4959751050639357969" rel="nofollow,noindex"> </a> 在网上很多文章都对 Javascript 中的 this 做了详细的介绍,但大多是介绍各个绑定方式或调用方式下 this 的指向,于是我想有一个统一的思路来更好理解 this 指向,使大家更好判断,以下有部分内容不是原理,而是一种解题思路。</p> </li>     <li> <p><a href="/misc/goto?guid=4959751050735435092" rel="nofollow,noindex">Angular Renderer (渲染器)</a> <a href="/misc/goto?guid=4959751050817817418" rel="nofollow,noindex"> </a> Angular 其中的一个设计目标是使浏览器与 DOM 独立。DOM 是复杂的,因此使组件与它分离,会让我们的应用程序,更容易测试与重构。另外的好处是,由于这种解耦,使得我们的应用能够运行在其它平台 (比如:Node.js、WebWorkers、NativeScript 等)。 为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异。比如定...</p> </li>     <li> <p><a href="/misc/goto?guid=4959751050897132422" rel="nofollow,noindex">前端视角下的Ruby</a> <a href="/misc/goto?guid=4959751050983150807" rel="nofollow,noindex"> </a> 请把话筒转交给我,对Ruby我有一些逼要装。 image.png 在Beansmile做前端已经有半年多了,这件四川特产我还留着。倒不是说这件衣服布料有多好,它怎么看都更像是一个表白的工具吧?当然穿着这件衣服在外面招摇撞骗的时候,还是会有些朋友问我“Ruby 请把话筒转交给我,对Ruby我有一些逼要装。 image.png 在Beansmile做前端已经有半年多了,这件四川特产我还留着。倒不是说这件衣服布料有多好,它怎么看都更像是一个表白的工具吧?当然穿着这件衣服在外面招摇撞骗的时候,还是会有些朋友问我“Ruby</p> </li>     <li> <p><a href="/misc/goto?guid=4959751051068814313" rel="nofollow,noindex">Webpack 2 Tree Shaking配置</a> <a href="/misc/goto?guid=4959751051162014900" rel="nofollow,noindex"> </a> 原文 Tree Shaking是一个针对 <a href="/misc/goto?guid=4959751051243865063" rel="nofollow,noindex">ES6</a> 以上代码的清楚死代码的算法,也是Webpack 2最被期待的特性之一。通过清除未使用的ES6引用,Webpack能更助于压缩过程从而得到比之前更小的文件体积。 Webpack 2简单应用代码已更新...</p> </li>     <li> <p><a href="/misc/goto?guid=4959751051326626646" rel="nofollow,noindex">关于promises,你理解了多少?</a> <a href="/misc/goto?guid=4959751051412818111" rel="nofollow,noindex"> </a> 用Javascript的小伙伴们,是时候承认了,关于 promises 我们一直存在着问题。并非说 promises 本身有问题,Promises/A+ 是极好的。 就我过去数年观察大量 PouchDB API 以及其他 promise-heavy API 的 用Javascript的小伙伴们,是时候承认了,关于 promises 我们一直存在着问题。并非说 promises 本身有问题,Promises/A+ 是极好的。 就我过去数年观察大量 PouchDB API 以及其他 promise-heavy API 的</p> </li>     <li> <p><a href="/misc/goto?guid=4959751051497722953" rel="nofollow,noindex">理解 JWT(JSON Web Token)认证及实践</a> <a href="/misc/goto?guid=4959751051583248240" rel="nofollow,noindex"> </a> 最近想做个小程序,需要用到授权认证流程。以前项目都是用的 OAuth2 认证,但是Sanic 使用OAuth2 不太方便,就想试一下 JWT 的认证方式。这一篇主要内容是 JWT 的认证原理,以及python 使用 jwt 认识的实践。 几种常用的认证机制 <a href="/misc/goto?guid=4959734766538914077" rel="nofollow,noindex">HTTP</a> Basic Auth HTTP Basic Auth 在HTTP中,基本...</p> </li>     <li> <p><a href="/misc/goto?guid=4959751051699494149" rel="nofollow,noindex">面向未来的API —— GitHub GraphQL API 使用介绍</a> <a href="/misc/goto?guid=4959751051788100161" rel="nofollow,noindex"> </a> 本文根据GitHub开发者文档,整理翻译了GitHub GraphQL API的使用方法,你可以了解到GraphQL的基本概念、GitHub GraphQL API的使用,两个实际的使用案例,以及使用Explorer查询GitHub GraphQL API 本文根据GitHub开发者文档,整理翻译了GitHub GraphQL API的使用方法,你可以了解到GraphQL的基本概念、GitHub GraphQL API的使用,两个实际的使用案例,以及使用Explorer查询GitHub GraphQL API</p> </li>     <li> <p><a href="/misc/goto?guid=4959751051864936153" rel="nofollow,noindex">开源JavaScript插件和库速查表</a> <a href="/misc/goto?guid=4959751051951017676" rel="nofollow,noindex"> </a> 我关注的</p> </li>     <li> <p>Vue 折腾记 - (6) 写一个不大靠谱的backToTop组件 <a href="/misc/goto?guid=4959751052038758497" rel="nofollow,noindex"> </a> 前言 返回顶部这个功能用jq实现,好容易实现,一个animate配合scrollTo就搞定了 今天我们来试试vue封装一个原生js实现的返回顶部;写起来够呛,借助github,看了别人的gist,稍微封装了下; 当然不是用scrollTo直接调位那种,没有过渡</p> </li>    </ol>    <p> </p>    <p>来自:http://caibaojian.com/fe-daily-20170724.html</p>    <p> </p>