Chrome

作者： lizheming 编辑：魔卡 原文地址： http://www.zcfy.cc/@lizheming ━━━━━ 令人欣慰，React 16 首个 beta 版已经发布，可以公开测试了！🎉 下面我来告诉大家如何使用以及新版的一些值得注意的地方。 如何使用 安装 由于还是 beta 版，常规的 NPM 安装命令仍然会使用 15.6 正式版。beta 版我们使用 next 标签发布在 NPM 上，你需要使用如下命令安装使用 beta 版： # Yarn yarn add react@next react-dom@next # NPM npm install --save react@next react-dom@next Javascript 环境要求 由于 React 16 依赖 新的数据集合类型 Map 和 Set ，所以我们不支持一些老浏览器和设备（例如 <IE11）。如果你要支持它们的话，最好为项目引入一个全局的 Polyfill，core-js 和 babel-polyfill 都是不错的选择。 下面是在 React 16 中使用 core-js 来支持老浏览器的示例： import 'core-js/es6/map'; import 'core-js/es6/set'; import React from 'react'; import ReactDOM from

摘要 ：恰逢官方征文，谨以此篇记录自己一年的心酸历程与前端知识的感悟。 目录 在时代工场的主要工作 我为什么从时代工场离职？ 我辞职后去了哪里？ 先说说我的经历吧 分享给前端人一些我的博客整理，希望也可以帮助到你 关于粉丝高频疑惑的解答 在时代工场的主要工作 先简单说一下自己这一年的变化吧，以前是在时代工场办公，是一个初创的共享办公科技公司，在那边开发过时代工场后台管理系统，时代工场小程序，时代工场APP,时代工场网站，业余时间还要顺便运营一些新媒体（小公司，你懂的，人手不够，广泛撒网），APP是基于APICloud这种敏捷式开发平台开发，一套代码可以适配两种操作系统，自己一个人重零开始到上架Android应用到腾讯应用包、百度手机助手、华为应用市场、小米应用商店、阿里应用分发平台，APPStore整了一个全套流程。 上架的流程可以参考我往期的文章。 https://blog.csdn.net/weixin_41937552/category_9342190.html 至于微信小程序是采用的微信小程序那套体系，这个创业公司搞这个玩意所有的认证开发测试等都需要自己来，不要问为什么，问就是成本。框架采用的vue,网站也是采用的vue,网站及小程序用来展示页面，里面的数据共用一个后台管理系统。系统老板着急出成果，刚开始简单找了个模板，后面不断优化，已经用PHP逐渐改成自己想要的那种模样啦

需求：更改前端的某个ajax网络请求的负载(payload)并测试保证功能正常 假如此次的修改改动较大，或者原本的构建 payload 的逻辑比较复杂，我们可能需要反复地修改和测试。 如果这个 ajax request发送后对后端资源造成的影响很小的话 —— 比如 创建一本书籍记录，更新一篇文章的标签，其实我们也不需要考虑太多，直接 一边修改一边测试 就可以了。 因为这些不痛不痒的资源即使在测试过程中被创建或者修改了，测试结束后也可以轻松地删掉，不会造成大影响。 但是，假如这个ajax request 在后端会 触发比较重的操作 —— 比如创建某个服务集群，重新部署某个服务节点，我们就得谨慎考虑了。 这类比较重的操作一方面会花费比较长的时间，另一方面会真实地修改或消耗线上资源，随意且频繁地测试并不合适。 这种情形要求我们 除了最后的一两次验收，其余的测试都不该真的发请求到后端. 那应该怎么做呢？ 方案一：修改并注释请求发送的代码 假如以下是原本的代码 getFormData = （）=> { // construct the payload from form data } onSubmit = () => { const payload = getFormData(); httpClient.postRequest(payload); }; 测试时期的代码 getFormData

原文链接 Document Ready 事件 在jQuery中，document.ready可以让代码在整个文档加载完毕之后执行： $(document).ready(function() { // Code }); JavaScript同样拥有一个DOM内容加载事件的侦听器: document.addEventListener("DOMContentLoaded", function() { // Code }, false); 选择器API jQuery中的选择器语法丰富灵活： var element = $("div"); 现在js中的querySelector完全可以替代它，document.querySelector只获取第一个元素，document.querySelectorAll可以获取全部元素。 var element = document.querySelector("div"); 或者选择所有div的某些内部容器： var elements = document.querySelectorAll(".container div"); 也可以针对特定元素进行查询来找到它的子元素： var navigation = document.querySelector("nav"); var links = navigation.querySelectorAll("a");

作为Web开发者，你愿给Firefox一次机会吗？ 作者｜Ibrahim Nergiz译者｜大愚若智编辑｜覃云本文从开发者角度介绍了 Mozilla 全新发布的 Firefox Quantum 浏览器在诸多方面的改进和增强，尤其是在 Web 开发者工具方面新增的功能。 友情提示：原文的图片大多都是动图，但由于微信对图片大小的限制，以及动图压缩后变成高糊，为了保证阅读质量，小编将动图换成了png图，想获取原图的读者可点击文末 原英文链接 。 作为“晚期”八零后的我，对 Firefox 的崛起和衰落至今依然感觉历历在目。 Firefox 最初作为开源项目，以 Internet Explorer 6 竞争对手的姿态诞生。当时这是个很棒的项目，因为它为用户提供了更多选择，例如，用户可以通过各种扩展获得新的功能，还可以更改浏览器的视觉主题等，每个人都爱过它。 然而几年后另一个重量级选手登场了。这个选手名叫 Chrome，Chrome 发布后迅速攻城掠地，很快超越了所有对手。实际上，Chrome 在极短的时间里获得了如此众多的用户，成为 Google 有史以来最有价值的 资产，相信很多人现在就是使用 Chrome 阅读本文的。 不过我们还是先简单回顾一下吧。作为开发者，我完全明白用户有多难取悦。 随着各种越来越复杂的 Web 技术，以及常规应用程序和软件逐渐涌现，内存和 CPU

背景 之前出去面试的时候， 经常会被问到一些 安全方面 的问题。 安全涉及的领域很大， 我也仅仅是了解一些皮毛， 每次面试前都要找资料复习， 很麻烦。 所以我就根据之前搜集的一些资料和面试的经验，系统的梳理了一下，希望对大家有所帮助。 「 正文 」 首先简单介绍 几种常见的攻击方式 ： SQL注入 XSS CSRF 点击劫持 中间人攻击 1 SQL 注入 这是一种比较简单的攻击方式。 如果后台人员使用用户输入的数据来 组装SQL查询语句 的时候不做防范， 遇到一些 恶意的输入 ， 最后生成的SQL就会有问题。 举个例子 比如地址栏输入的是： articlrs/index.php? id = 1 发送一个 get 请求， 调用的查询语句是： sql = " SELECT * FROM articles WHERE id = ", $id 正常情况下， 返回 id = 1 的文章。 如果攻击者想获得所有的文章，语句就可以改成： articlrs/index.php? id = -1 OR 1 = 1 这样就可以了， 为什么呢？ 这是因为，id = -1 永远是 false，1=1 永远是true，所有整个where语句永远是ture. 所以 where 条件相当于没有加where条件，那么查询的结果相当于整张表的内容，攻击者就达到了目的。 现在的系统一般都会加入 过滤 和 验证 机制，

什么是JavaScript？ JavaScript 是一种 直译式 脚本语言，一种 轻量级 的 脚本语言 。 什么是脚本语言？ Script language 指的是它不具备开发操作系统的能力，而是只用来编写控制其他程序的 语言 。 JavaScript 是一种 嵌入式(embedded) 语言。它本身提供的核心语法并不是很多，更多的功能需要依靠 宿主环境(host) 提供。So，这门语言适合嵌入更大型的应用程序环境中,去调用宿主环境提供的底层 API 。 目前常见的 JavaScript 宿主环境有 浏览器 和 服务器环境Node 。 如果从 语法 的层面来看， JavaScript 是一门 对象模型语言 。各种宿主环境通过这个模型，描述自己的功能和操作接口，从而通过 JavaScript 控制这些功能。 同时， JavaScript 还支持 函数式编程 。所以在学习的过程中，我们需要更多的去了解和学习一些不同解决问题的方法。 JavaScript 的核心语法部分包括 基本语法构造 和 标准库 ，当然如果学习这门语言还需要学习不同的 宿主环境 提供的一些其他 API [这种API通常情况下只能在该宿主环境下使用]，从而在需要的时候方便调用。 例如经常涉及的宿主环境 浏览器 ，它提供的额外的 API 可以分成三大类: 浏览器控制类：操作浏览器 DOM类： 操作网页的各种元素

谷歌浏览器:chromedriver驱动资源下载地址: https://chromedriver.storage.googleapis.com/index.html 人人网是我们10多年前，在校学生一种喜闻乐见的娱乐方式，当你有中国Facebook的称号。 但是最近几年已经不复当年之勇，甚至销声匿迹。博主在研究了一下它的安全登录机制之后，发现，它的消失真的是有原因的。 登录方式及其不安全，而且网络安全验证都是使用明文密码传输。这也太坑了。。。 在代码中 将id值传入到控件中，模拟点击登陆 click。就可以登陆了 来源： oschina 链接： https://my.oschina.net/u/4382386/blog/4822050

编写一个chrome插件，你需要准备好一个好看的图片作为扩展程序的图标。准备好图标后，我们就要开始设计插件了。 1、chrome扩展需要的文件 可以这么理解，chrome扩展程序就是一个web应用，所以我们实际是要写html代码。而chrome插件需要的文件就包括配置文件(manifest.json)、扩展图标(icon.png 可以是任意的名字，在配置文件中会使用到)、popup弹出窗口html文件(popup.html)以及其他静态资源文件(如images、css、js等)。如下图，我建立了一个jubar的文件用作chrome扩展文件夹。 2、Browser Actions（扩展图标） 只要chrome启用了某个chrome扩展程序，对应地将该程序的扩展图片显示在地址栏的右侧。 3、popup弹出窗口 接下来，就是编写popup弹出窗口了。 4、编写配置文件manifest.json { "name": "Jubar", "manifest_version":2, "version": "4.0.1", "description": "Gather your friends and family", "browser_action": { "default_icon": "icon.png" , "default_title": "Jubar", "default_popup"

众所皆知，web上传大文件，一直是一个痛。上传文件大小限制，页面响应时间超时.这些都是web开发所必须直面的。 本文给出的解决方案是：前端实现数据流分片长传，后面接收完毕后合并文件的思路。 实现文件夹上传，要求：服务端保留层级结构，支持10w级别的文件夹上传。 大文件上传及断点续传，要求：支持50G级的单个文件上传和续传。续传要求：在刷新浏览器后能够续传上传，在重启浏览器后能够继续上传上（关闭浏览器后重新打开），在重启电脑后能够继续上传。 支持PC端全平台，Windows,Mac,Linux 浏览器要求支持全部浏览器，包括ie6,ie7,ie8,ie9,Chrome,Firefox 下面贴出简易DEMO源码分享： 前端页面： 后端代码，此Demo是基于MVC架构的： 后端代码我进行了模块划化，而不是网上的将所有的模块放在一个类中，这样对于以后的维护和升级来说都是一个灾难。 文件块处理逻辑 文件块保存逻辑如下 web.xml 配置如下 整个项目的截图 依赖的JAR包如下 运行效果如下： 在此分享！希望多多指正~ 后端代码逻辑大部分是相同的，目前能够支持MySQL,Oracle,SQL。在使用前需要配置一下数据库，可以参考我写的这篇文章： http://blog.ncmem.com/wordpress/2019/08/07/java超大文件上传与下载/ 来源： oschina 链接：