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>