react

JavaScript给图片添加水印及马赛克 基于react-hooks封装图片水印和马赛克的方法 实际调用 效果图展示 基于react-hooks封装图片水印和马赛克的方法 //封装的picWaterMark函数 const picWaterMark = ( { url = '' , //需要添加水印的图片地址，默认没给 textAlign = 'center' , //水印位置 textBaseline = 'middle' , //水印位置 content = '水印水印水印' , //默认水印内容 callback = null , //回调函数 } ) => { const img = new Image ( ) ; //创建img对象节点 img . src = url ; //crossOrigin属性设置会产生跨域问题需要在服务器上添加Access-Control-Allow-Origin:*, //后端解决，不设置此属性toDataURL()不能使用 img . crossOrigin = 'anonymous' ; img . onload = function ( ) { const canvas = document . createElement ( 'canvas' ) ; //创建canvas节点 canvas . width = img . width

Promise 是异步编程的一种解决方案。 Promise /** * 属性 */ Promise.length Promise.prototype /** * 方法 */ Promise.all(iterable) // 所有成功触发成功 任何失败触发失败 Promise.race(iterable) // 任意一个成功或失败后触发 Promise.reject(reason) Promise.resolve(value) /** * 原型 */ Promise.prototype.constructor //方法 Promise.prototype.catch(onRejected) Promise.prototype.then(onFulfilled, onRejected) Promise.prototype.finally(onFinally) Promise 有三种状态 pending: 初始状态，既不是成功，也不是失败状态。 resolve: 意味着操作成功完成。(resoloved) reject: 意味着操作失败。 pending pending 是初始状态，执行 resolve/reject 会进入对应状态，如果不执行，责一直为 pending 状态 例如下面代码，promise 将一直在 pending 状态，不会执行 then/catch. new

前言 之前学习 vue 的时候，一直没刨根问底过。在看到网上这类文章比较多，参差不齐的质量有时候看的一头雾水。当然也有不错的文章，但是终究是别人的理解。于是写一篇关于自己的理解记录下来，亲身实践才能收获更多！ 初阶：响应式原理 在说明之前，我们先了解一个 Object.defineProperty() 。引用 MDN 上的权威介绍 developer.mozilla.org/zh-CN/docs/… ： Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。 语法 Object.defineProperty(obj, prop, descriptor) 复制代码 参数 obj 要定义属性的对象。 prop 要定义或修改的属性的名称或 Symbol 。 descriptor 要定义或修改的属性描述符。 返回值 被传递给函数的对象。 注意：除了本文项目 。我还结合多年开发经验整理出2020最新企业级实战视频教程， 包括 Vue3.0/Js/ES6/TS/React/node等，有兴趣的进扣扣裙 519293536 免费获取，小白勿进哦！接下来我们继续 在了解了这个之后，我们就可以用它来实现一个响应式的初级样子。 const TestObject = { name: "", age: 10 } let

云栖号资讯：【 点击查看更多行业资讯 】 在这里您可以找到不同行业的第一手的上云资讯，还在等什么，快来！ 当我走进现代前端开发行业的时候，我做了一个每位开发人员都要做的决策：选择一个合适的框架。当时正逢 jQuery 被淘汰，前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。前端正在走向一个时髦的，流行的，模块化的 JavaScript 框架的新时代。所以我选择了 VueJS。 下面就是我热爱（现在还是爱着）VueJs 的原因所在。 1. 它将 HTML/CSS/JS 结构结合到一起 目前来看，这是 VueJS 最吸引人的优势。 Vue 文件对初学者非常有吸引力。它易于理解，而且我们很容易将整个 HTML 模板分解为许多 Vue 文件。我一眼就能看出来结构（模板）、行为（脚本）和外观（样式）。 <template> <div id="myComponent"> <Counter /> <span v-if="reading">Hello reader !</span> </div> </template> <script> import Counter from "@/components/Counter"; export default { name: "myComponent", components: { Counter } } </script>

前言 就在前段时间，vue官方发布了3.0.0-beta.1 版本，趁着五一假期有时间，就把之前的一个电商商城的项目，用最新的 Composition API 拿来改造一下！ 👉GitHub地址请访问🔗： github.com/GitHubGanKa… 项目介绍 vue-jd-h5 是一个电商H5页面前端项目，基于Vue 3.0.0-beta.1 + Vant 实现，主要包括首页、分类页面、我的页面、购物车等。 📖本地线下代码vue2.6在分支 demo 中，使用mockjs数据进行开发，效果图请点击🔗 这里 ❌️master分支是线上生产环境代码，因为部分后台接口已经挂了😫，不建议使用！ 📌 本项目还有很多不足之处，如果有想为此做贡献的伙伴，也欢迎给我们提出PR或者issue ； 🔑 本项目是免费开源的，如果有伙伴想要在次基础上进行二次开发，可以clone或者fork整个仓库，如果能帮助到您，我将感到非常高兴，如果您觉得这个项目不错还请给个start！ 🙏 除了本项目，我结合多年开发经验整理出2020最新企业级实战视频教程 包括 Vue3.0/Js/ES6/TS/React/node等，想学的可进扣扣裙 519293536 免费获取，小白勿进哦！ 搭建步骤 首先,选择一个文件，将代码clone到本地（需要先fork代码到你自己的仓库，别用我的这个链接）： git clone

登高远眺 沧海拾遗，积跬步以至千里 基础技术 官宣: Typescript 3.9 正式发布 TypeScript 3.9 正式发布，这个版本主要聚焦于性能、改进某些特性和提升稳定性。编译器效率在这一版有了极大提升，平均编译时长从 26 秒缩短至 10 秒，改善了编辑体验，同时修复了早期 Typescript 版本面临的 Promise 困扰等等，快点升级到 3.9 尝尝鲜吧。 史上最详尽的 Git 分支管理实践 Git 作为我们日常开发必不可少的代码管理工具，掌握好它，可以达到事半功倍的效果，特别在多人协作的项目中尤为重要。本文不单讲解了 Git 的设计理念，同时带领我们重新认识分支，用实战的方式详细讲解了日常工作中可能遇到的问题及最佳实践。 懂你的测试框架 -- Cypress Cypress 是基于 node.js 研发的 E2E 测试框架。解决了开发人员和 QA 工程师在测试现代应用程序时面临的关键难点问题。拥有着开箱即用，文档清晰美观的优点，语法用起来比较舒服优雅，最重要的一点是测试跑在 Chrome 的标签页里，使得开发者可以方便地在测试和开发中进行便捷的切换。 图形编程 开发必备: Opentype.js opentype.js 是一款用于 TrueType 和 OpenType 字体的JavaScript解析器和编写器, 它可以直接提取字体文件中的文字 bézier

Hooks 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 使用 React hooks 转化 class 的一些思考   Hooks 其实已经是大势所趋的一个技术了，作为一个可能是 React，甚至是 JS 史上都是一个比较伟大的发明，Hooks 已经被大部分中小型公司所接受并尝试使用，但是对于大中型公司来讲，从 class 组件移植 Hooks 的成本太高，不能像其他公司一样随心所欲地拥抱新技术，所以我们对于 Hooks 的讨论，应该考虑的比较全面，才能更好的了解这个技术，以及是否应该在项目中尝试这一新技术。   在论坛上我也有和一个小伙伴对此有一个讨论，感谢@无怨，前代 react 项目 class 转 hooks 的必要性。其实大家对 hook 都是认可的，但是对于重写 class 的成本方面还是望而却步的，react 官方也不希望因为这个使得新版本使用者剧减，所以暂时还是会兼容 class 组件的写法。   所以其实对于是重写部分还是只有新组件使用 hook，大家都还是比较犹豫的，对这种选择来看，我们必须实际考虑成本-产出比，所以我们这篇就具体讨论成本与产出，以及可行的方案吧~ 首先咱们来看看成本吧 修改成本   作为 React 16.8 新增特性，一些第三方的库可能还暂时无法兼容

针对面试中出镜率比较高的重难点知识梳理。 相比于第一篇 前端面试必备技巧 ，本篇文章更贴合今年的面试实际。第一篇比较全面，也比较基础，建议先看一遍上一篇再看本篇会更容易理解。 一、ES6常见用法 关于 ES6（泛指 ECMAScript 2015 及以后的版本）几乎是面试必问的，一般的问法是：“平常会使用 ES6 吗？列举几个 ES6 的用法”。 回答出来三四个就差不多了，但回答的每一个都要弄清楚，有的面试官会延伸着追问。 如果时间充足，还是建议看看 阮一峰的 ES6 入门教程 。 1.1 let 和 const let 在块级作用域内有效，不会污染全局变量 const 一经声明不能改变。注意保证的是它指向的内存地址不能改变，如果是对象或者数组里面的属性或元素可以改变的。 存在暂时性死区，不能变量提升。 只能先声明再使用，且不能重复声明 1.2 字符模板 用作字符串拼接： 你好，${name} 1.3 变量的解构赋值 let [a,b,c] = [1,2,3] 交换变量的值：[a,b] = [b,a] 提取 JSON 数据，获取服务器返回数据时有用：let {data, code} = res 输入模块的指定方法: const { SourceMapConsumer, SourceNode } = require( "source-map" ); 复制代码 从函数返回多个值:

这是一个拥有九年开发经验的程序员进行的分享，讲述了他这么多年从零基础到成为专业工程师的一些经验与心得，希望对各位成长之路会有帮助，共勉！ 1、与程序打交道的人生，是简单的人生 一次规划局的项目，规划局的职员很是钦佩地说：“你们真了不起，在电脑上敲敲键盘就能做出软件来。” 规划局领导说： “跟电脑打交道是最简单的，难的是跟人打交道。” 领导的话很有深意，一语道破了本质，做程序的人，是比较简单的。 2、不懂什么叫编程 大学本科，读“计算机科学与技术专业”（相信大部分小伙伴都是这个专业吧），课程 重理论而轻实践 。 最初学习C语言，对于编程没有任何概念。 一次在课堂上问老师： “计算机输入法，可视化操作界面已经很完善了，为什么要用C语言中 Print() 函数输出一段字符呢？ 而且我们学习使用Console控制台的黑白屏输入输出，也不像是平时使用的软件啊？” 老师听后也是一脸的懵逼，说：“你好好学，慢慢就明白了。” 你不懂的，老师也没法回答你，只有靠自己慢慢地摸索，慢慢去领悟。 3、Java还是C#，平台选择的爱恨情仇 初学Java，这是接触的第一个最具有实用意义的编程语言。 可以做网站，做软件，虽然C语言、C++也可以开发应用软件。 当时的学习，基本是自学，上网下载视频教程，一集一集地看。 不懂的概念上网查，去图书馆借阅相关书籍资料，什么JSP标签、Servlet、JDBC

自从我发过几篇关于面试经历的文章，由于我面试结果还不错，所有很多人来询问我一些面试相关的问题， 我这里给到 5 点建议，希望对大家有帮助。 1. 简历里应该惜字如金 简历简历，可以分为 简 和 历。 简，简单简洁之意，历，经历，总体就是 简单 的表达自己的经历。 我看到一些人的简历写了四、五页，甚至十来页的都有，每个项目把细节都写出来了，甚至还把项目截图给贴在了简历里面，生怕面试官不能理解需求，我建议最多不超过 2 页，亮点能写两页就已经很牛逼了。 我相信有很多人工作了很多年，经历的项目很多，其实不需要把所有的项目都列出来， 简历里是要展示自己的亮点，牛逼的点，这个亮点、牛逼的点事相对的，相对于自己所做的东西里面的，不是客观的牛逼(如果有当然更好，那必然也是你相对的里面的亮点，不冲突) 。 这句话意味着两层意思： 很多人觉得自己的项目没有亮点的问题，因为你是那这别人更高的标准来衡量自己，所以你相对于别人没有亮点，这样你就写不出一份简历。 多个亮点类似的项目合并，或者只写一个，因为都是为了给面试官展示这一个亮点，写多了就是浪费空间，简历上面的字很珍贵。 第一层让你的简历有东西可写(增加)，第二层是让你把简历写得更优质(减少)。 2. 简历应该是你设计过的 「设计简历」可能对这个词有点迷惑，可能你第一感觉是设计得好看一点，其实我想表达的设计是一种「圈套」，给面试设计的「圈套」