React 事件机制 (不完全总结)；收下这波 JS 技巧，从此少加班；从北京回到二三线城市，你的前端什么水平？；Vue中v-model解析、sync修饰符解析；用Vue做个Window玩；几道前端笔试题；HTML5 – 拖放；渗透测试 | 突破前端JS加密限制
-
React 事件机制 (不完全总结) React 事件机制
-
收下这波 JS 技巧，从此少加班 各种业务开发都离不开对数据的处理，然而遇到的很多数据都是不好处理的。这个时候就需要寻求搜索引擎的帮助。这种方法效率是非常低下的，而且根据作者的个性不能保证其对自己的口味。因此这篇文字包含了一份 JS 常用业务函数手册，例如时间格式的处理、用的是哪个手机浏览器，手机号、邮箱的验证，以此来提高你的开发效…
-
从北京回到二三线城市，你的前端什么水平？ 昨天周末，土哥回了趟农村老家，暂别了城市的喧嚣。 回到家的晚上，我妈跟我闲聊了一会儿，说我家附近一个邻居，她家儿子之前在北京从事编程工作，现在想回太原发展。知道我也是搞软件开发的，就串门来我家打听情况，顺便唠唠家常，说回来也好，离家近点，父母也放心。至于挣多挣少，看个人能力。 我妈对这个不太了…
-
Vue中v-model解析、sync修饰符解析 在平时开发是经常用到一些父子组件通信，经常用到 props 、 vuex 等等，这里面记录另外的三种方式 v-model 、 sync 是怎么使用，再说是怎么实现，其实 v-model 、 sync 都是语法糖。还有 $attr 、 $listener 实现父子组件通信。 使用方式 v-model 2.2.0+ 新增 v-mode1 其实就是一个语法糖，默认会利用名为 val…
-
用Vue做个Window玩 20190910 前端开发日报 用Vue做个Window玩;渗透测试 | 突破前端JS加密限制;HTML5 – 拖放;Vue之不完美的极致优化; Vuex学习手记;Vue + Koa 2 + …
-
几道前端笔试题 据称，题目平均难度达到 P6 水平。快看看你都能答对吗？
-
HTML5 – 拖放 前言 拖放（Drag and Drop）在开发中较为常见，并且在 HTML5 标准中得以实现。借助 HTML5 拖放的 api ，我们可以方便的实现拖拽功能。 在深入拖放前，我们需要了解一些知识作为前提。首先是拖放过程涉及到两个角色，一个是被拖动的元素，这个元素会在“拖”的过程触发一系列的 drag 事件。另一个是放置的目的地，这…
-
渗透测试 | 突破前端JS加密限制 现在前端开发为了提高爬虫的难度及加强安全性，都会在数据包提交前进行加密，最典型的就是传参加密，相信大家在测试的时候都遇到过，那么我们在抓取数据包并修改之后，修改之后的参数无法通过后端程序数据完整性的校验，就无法进行进一步测试。如果我们逆向解析出加密的过程，就可以模拟出相同的密文，通过后端接口的校…
-
Vue之不完美的极致优化如果我们的项目是用脚手架搭建的，大部分的优化脚手架都帮你做了。比如：图片转base64、代码压缩等。
-
vuecli3创建项目，尤其推荐用图形化界面 TL;DR 安装cli3的命令行 npm install -g @vue/cli 安装预览单个vue文件 npm install -g @vue/cli-service-global 强烈推荐使用 vue ui 导入已有项目或新建项目 ，安装插件，进行eslint规则配置等超级好用 保存时自动统一代码风格，真的爽爆了 个人生成项目的习惯参数，这里换成ui视图也是一样…
-
Ract vs Angular vs Vue.js——2019 该选谁？（更新版） 我们在 2018 年分布了一篇比较 React 和 Angular 的文章，而在 2019 年，由于每个框架的快速版本迭代，我们将再次比较两者以及市场上的新玩家 Vue.js，分享每个前端框架的优缺点，从而帮助开发者为产品开发中的每个单独案例找到最适合他们开发需求的正确选择。 之前我们发布了一篇 文章 ，比较了 Angular 与 React。…
-
JSON Web Token 使用详解JSON Web Token（缩写 JWT）是目前最流行的<font color=’red’>跨域</font>认证解决方案。它是有三部分组成,示例如下，具体的讲解如下(jwt是不会有空行的，下面只是为了显示，便使用了换行看着比较方…
-
走进HTML5-让你从不懂到精通SVG(大量实例操作) 可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。 应用场景 图表 图标 icon 动效 矢量图 SVG 的优势 由于 SVG 图像是矢量图像，可以 无线缩放 ，而且在图像质量下降方面没有任何问题…
-
漫谈JavaScript中的提升机制（Hoisting） 前言 刚接触到JavaScript的时候，便知道JavaScript是按顺序执行的，是如浏览器的解析DOM树一样的流程，解析DOM结构的时候，如果遇到JS脚本或者外联脚本便会停止解析，继续下载脚本之后，执行脚本，然后再解析DOM。 然而，却因此常常碰到问题。 看如下代码以及输出： var name; console.log(name); // undefin…
-
[精读源码系列]前端路由Vue-Router 相信用vue开发过项目的小伙伴都不会陌生,vue-router模块帮助我们处理单页面应用的理由跳转的,我们只需要将不同path对应的组件信息传给vue-router,就可以在页面局部刷新的情况下实现路由跳转了,你有没有觉得对这一处理过程感到很好奇,想要揭开这一操作的神秘面纱?来吧,让我们一起开启探索之旅~ vue-router的使用 impo…
-
现代 JavaScript 教程到底是什么？《现代 JavaScript 教程》是开源的现代 JavaScript 从入门到进阶的优质教程，它旨在帮助你逐渐掌握 JavaScript 这门语言。但是一旦你已经熟悉了这门语言的基础知识，你就会需要其他资料。
-
[Vuex]Vuex学习手记 本篇文章更像是我学习vuex的一个笔记，学习的资源主要是来自官方文档教程，官方教程已经讲的比较细致了，部分地方也有自己不理解的地方，所以也查过其他资料来辅助自己理解，本手记在官方的教程上加了一些自己的补充内容，希望能给你带来一些参考价值，另外也感谢互联网上其他分享知识的大佬，让我少走了些弯路！如果文…
-
Vue 组件数据通信方案总结 （给前端大全加星标，提升前端技能） 作者：政采云前端团队 公号 / 季节 （本文来自作者投稿） 背景 初识 Vue.js ，了解到组件是 Vue 的主要构成部分，但组件内部的作用域是相对独立的部分，组件之间的关系一般如下图： …
-
Vue + Koa 2 + mongoose 写一个像素绘板 项目演示：像素绘板 GitHub： server | 前端 作为一名前端，总会有意无意接触到 NodeJS 、有意无意会去看文档、有意无意会注意到框架，但真当需要我们需要在工作中善用它时，多半还是要感叹一句“纸上得来终觉浅”。所以一周前我决定进行一个实践尝试，希望能把以往无意中学到的知识融汇贯通，最终选择把以前的一…
-
不会手写vue-cli脚手架，leader竟要辞退我 遥想当年，土哥入行之初，因为不会从零手写一个适合公司项目vue-cli脚手架，差点被leader劝退。 还记得那个时候，我还是个工作没几年的前端新人，在公司搭建vue项目也是从一个npm install vue-cli -g的命令行开始的。 傻瓜式操作，几条命令轻松搞定。 我觉得，官方提供的vue-cli脚手架很友好，不用想vue+webpack的…
-
实现一个简易版的vuex持久化工具 背景 最近用uni-app开发小程序项目时，部分需要持久化的内容没法像其他vuex中的state那样调用，所以想着自己实现一下类似vuex-persistedstate插件的功能，貌似代码量也不会很大 初步思路 首先想到的实现方式自然是vue的watcher模式。对需要持久化的内容进行劫持，当内容改变时，执行持久化的方法。 先弄个dep和ob…
-
一看就懂之webpack高级配置与优化所谓打包多页面，就是同时打包出多个html页面，打包多页面也是使用html-webpack-plugin，只不过，在引入插件的时候是创建多个插件对象，因为一个html-webpack-plugin插件对象只能打包出一个html页面。如:
-
前端理解依赖注入(控制反转)前端的技术的极速发展，对前端同学来说也是一个不小的挑战，有各种各样的东西需要学，在开发过程中经常会被后端同学嘲讽，对于前端来讲根本就不存在类的概念，很多时候需要把大量的业务代码堆积在页面或者组件中…
-
京东 PC 首页 2019 改版前端总结 距离上次首页改版，已有2年3个月零五天。相比上次改版对首页整体框架、开发流程的大刀阔斧（前两次改版总结传送门：2016版，2017版），这次的改版看起来显得有点像跳水——没什么水花。在站在巨人肩膀上的小巨人的叮咛与期盼下，这次改版在延续17版的框架与流程的基础之上，为首页的稳定性、安全性、视觉体验、无障碍体验…
-
如何加快 Node.js 应用的启动速度 关注 Node.js 应用进程启动耗时。
-
浏览器垃圾回收机制与 Vue 项目内存泄漏分析 浏览器的 Javascript 具有自动垃圾回收机制(GC:Garbage Collecation)，也就是说，执行环境会负责管理代码执行过程中使用的内存。其原理是： 垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存 。但是这个过程不是实时的，因为其开销比较大并且GC时停止响应其他操作，所以垃圾回收器会按照固定的时…
-
Vue实战—如何实现商品评价栏目（14）我们先来设置一个ratings容器，还是熟悉的老情况，ratings-wrapper的高度可能会超过ratings，这时候我们肯定会让ratings内出现滚动条的，ref也是老朋友了，配合Bscroll实现ratings-wrapper的滚动。
-
jQuery的前世今生 作者：Danny Guo 翻译：奶爸码农 jQuery曾经是世上最流行的JavaScript库，在2000年后期，它得到了广泛的应用，围绕它也产生了一个丰富的生态系统，诞生了大量的插件、框架。 但是到了最近一段时间，jQuery的地位急剧下降。这篇文章会回顾一下jQuery的前世今生。 jQuery的历史 John Resig在2005年开发了JQuery…
-
开源 | GGEditor：阿里巴巴开源的基于 G6 和 React 的可视化图编辑器 点击链接或图片即可阅读 喜欢请分享到朋友圈哦 项目介绍 GGEditor 是阿里巴巴开源的基于 G6 和 React 的可视化图编辑器 GitHub 地址 如何获取项目地址？点击链接，打开后，「复制链接」即可。 https://github…
-
Vue原理解析（十）：搞懂事件API原理及在组件库中的妙用 上一篇： Vue原理解析（九）：搞懂computed和watch原理，减少使用场景思考时间 在 vue 内部初始化时会为每个组件实例挂载一个 this._events 私有的空对象属性： vm._events = Object.create(null) // 没有__proto__属性 复制代码 这个里面存放的就是当前实例上的自定义事件集合，也就是自定义事件中心，它存放…
-
「中高级前端」高性能渲染十万条数据 在实际工作中，我们很少会遇到一次性需要向页面中插入数十万条数据的情况，但是为了丰富我们的知识体系，我们有必要了解并清楚当遇到大量数据时，如何才能在不卡主页面的情况下渲染数据，以及其中背后的原理。 最粗暴的做法（一次性渲染） <ul id="container"></ul> 复制代码 // 记录任务开…
-
前端这些年我到底经历了什么（上）那时大学里这种专业的课除了数学和英语外，基本上都是些计算机语言的课程，比如《C#语言程序设计基础》、《面向对象程序设计》等。
-
美团 HTTP 服务治理实践 2019 年 7 月 6 日，OpenResty 社区联合又拍云，举办 OpenResty × Open Talk 全国巡回沙龙·上海站，美团基础架构部技术专家张志桐在活动上做了《美团 HTTP 服务治理实践》的分享。 OpenResty x Open Talk 全国巡回沙龙是由 OpenResty 社区、又拍云发起，邀请业内资深的 OpenResty 技术专家，分享 OpenResty 实战经…
-
关于React的一个V8性能瓶颈背后的故事 译注: 原文作者是Mathias Bynens, 他是V8开发者，这篇文章也发布在V8的博客上。他的相关文章质量非常高，如果你想了解JavaScript引擎内部是如何工作的，他的文章一定不能错过。后面我还会翻译他的其他文章，一方面是他文章质量很高，另外一方面是我想学习一下他们是怎么写文章的，通过翻译文章，让我可以更好地消化知识…
-
js设计模式（二）深入理解享元模式 享元（flyweight）模式是一种用于性能优化的模式，“fly”在这里是苍蝇的意思， 意为蝇量级。享元模式的核心是运用共享技术来有效支持大量细粒度的对象。 复制代码 如果系统中因为创建了大量类似的对象而导致内存占用过高，享元模式就非常有用了。在JavaScript中，浏览器特别是移动端的浏览器分配的内存并不算多，如何节…
-
基本的 Promise 和 Async 函数的用法 实习已经结束很久了，但是还有很多事情拖着没做，报告也还没有给老板，现在休息了一周开始慢慢做。这里主要总结一下实习过程中遇到的 Node.js 中异步的问题。 阮一峰的博客已经讲的特别清楚了，我这里就记录一下阅读阮一峰博客和自己使用的心得。阮一峰的博客 Promise 对象 Promise 对象有两个特点。首先，它代表一…
-
25个JavaScript代码简写技巧(上篇)对于任何JavaScript开发人员来说，这篇文章很值得一读。这里记录了我多年来学习的JavaScript代码简洁写法，也给大家提供一些编码上的思考和取舍。
-
JavaScript知识点：this 关键字到底指向谁？ 前端开发的小伙伴多多少少曾被 this 关键字难倒过，因为 JS 的 this 的指向很多时候可以是“动态变化”的，但是关于 this 关键字我们只需要记住一点： 哪个对象调用函数，函数的this指向哪个对象 。 但是这个判断是谁就是一个不那么简单的过程了，接下来我们就一一举例说明。 1、普通函数调用 1.1、基本调用 像这…
-
10 种 Git 技巧，让你省时省力又省心 全文共1800字，预计学习时长4分钟 图片来源：unsplash.com/@sam_truong 1. 从另一分支切换单个文件 大家是否曾销毁文件只为能重新开始? 或需要在另一分支的某文件中进行更改？而git指令可以实现从另一分支切换文件。 git checkout some-other-branch -…
-
HTML5 容器入门解析：支付宝 Hybrid 方案原理与实战 根据公开的 2018 年移动互联网行业分析报告，目前支付宝的月活跃用户已经超过 QQ ，成为国内第二大 App。 支付宝一开始仅仅只是一个单体应用的工具型 App，让用户可以在手机完成支付宝相关的业务查询和操作。2013 年后，支付宝逐步转型为平台型 App， 平台型 App 具有服务化、模块化、工具组件化的特点。这…
-
用Vue实现一款属于自己的树形组件 当你首次进入这个界面的时候 它会给我们展示的是一级的内容 点击一级就展开二级 点击二级就展示下一级的内容 如果有子集的话下面会有个小箭头 如果没有子集的话就没有小箭头 这是一个细节 当点击展开全部子集的时候 当再次点击合上然后再次点击展开 还是一次性展开全部子集在我们页面上 性能优化 我们要求我…
-
花椒 Web 端多路音频流播放器研发 一、背景 语音交友直播间 Web 端使用 WebRTC (Web Real-Time Communications) 实现多路音频流传输的播放。但由于云服务等原因，看播端我们需要改成 HTTP-FLV 或 HLS 协议的媒体服务。并实现 移动端页面多路音频流同时播放 获取多路音频的可视化数据 …
-
前端中的接口聚合 这是一个前端简易版接口聚合模块，主要用于以下场景： 一个支持参数合并的接口，在组件化或其他场景下调用了不同参数的相同的接口，这时把这些调用合并成一个或多个接口再请求。 避免发起相同的请求,某些情况下发起了相同的请求，经收集处理后，实际只发起一个请求。但是不同的发起端的callback 都能得到处理。 …
-
面试官：请你谈一谈vue的双向绑定原理（面试简答三） Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新。 具体说一下Object.defineProperty： Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。 Object.defineProperty(o…
-
程序员不装x能行？先给登录来一个图形验证码（canvas实现）细心的同学可以发现，现在很多网站当登录多次之后就会出现一个图形验证码，或是当提交表单、或点击获取手机验证码等等场景都会有图形验证码的出现。
-
36 个JS 面试题为你助力金九银十(面试必读)为了回馈读者，《大迁世界》不定期举行(每个月一到三次)，现金抽奖活动，保底200，外加用户赞赏，希望你能成为大迁世界的小锦鲤，快来试试吧
-
走进HTML5，Canvas一探究竟 Canvas 是 HTML5 新增的一个标签属性，一个可以使用脚本在其中绘制图像的 HTML 元素。它可以用来制作照片或者制作简单的动画，甚至可以进行实时的视频处理和渲染。Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域，类似于其他通用的 API，通过一套完整的绘图函数来动态生…
-
vue-router的addRoutes的刷新404和重复路由的终极解决方案 Vue 后台管理项目经常有权限控制，不同角色使用不同权限，常用方法就是用 addRoutes 来动态添加路由，但有两个问题是官方文档上找不到解决方案的 角色切换，addRoutes提示有重复的路由，无法删除之前角色的路由 刷新页面，动态路由消失，提示404 常用解决方案 网上常用的解决方案角色切换的时候刷新页面，这…
-
JavaScript原型系列（三）Function、Object、null等等的关系和鸡蛋问题 基本上都知道原型链的尽头指向 null ，那么 Function.prototype 、 Object.prototype 、 null 、 Function.prototype.__proto__ 、 Object.prototype.__proto__ 、 function、object 之间的关系是什么，下面慢慢来记录一下。 Object Object构造函数创建一个对象包装器。 JavaScript 中的所有对象都来自 Object ；…
-
JavaScript原型系列（二）什么是原型继承 在上一节上面介绍了原型和原型链，即每个对象拥有一个 原型对象 ，通过 __proto__ 指针指向上一个 原型 ，并从中 继承方法和属性 ，同时原型对象也可能拥有原型，这样一层一层，最终指向 null ，这种关系被称为 原型链(prototype chain) 。 继承 是面向对象编程语言的一大核心功能点， JavaScript 是面向对象的只不…
-
码云 Gitee 率先支持中国开源许可证：木兰宽松许可证 为响应开源产业发展需求，本着立足本土、面向全球、开放透明的原则，北京大学作为国家重点研发计划“云计算和大数据开源社区生态系统”的子任务牵头单位，依托全国信标委云计算标准工作组和中国开源云联盟，联合国内开源生态圈产学研各界优势团队、开源社区以及拥有丰富知识产权相关经验的众多律师，共同研制形成重要成果—…
-
用了这么久 HTTP, 你是否了解 Content-Length 和 Transfer-Encoding ? 前言 Content-Length, HTTP消息长度, 用十进制数字表示的八位字节的数目. 一般情况下, 很多工作都被框架完成, 我们很少去关注这部分内容, 但少数情况下发生了Content-Length与实际消息长度不一致, 程序可能会发生比较奇怪的异常, 如: 无响应直到超时. 请求被截断, 而且下一个请求解析出现错乱….
-
JavaScript 中的 Symbols 怎么用 本篇采用意译，原文链接在文章末尾附上。 为了防止属性名冲突， JavaScript 介绍了一种 symbols 的类型。在 2015 – 2019 中，symbols 提供一种方法去模拟私有属性。 简介 创建 symbol 最简单的方式是调用 Symbol() 方法。有两个关键属性使得 symbols 变得特殊： Symbols 可以用于对象 key。只有字符串和…
-
如何实现Web页面录屏？摘要： 很有意思的操作… 原文：web页面录屏实现 译者：frontdog Fundebug经授权转载，版权归原作者所有。 写在前面的话 在看到评论后，突然意识到自己没有提前说明，本文可以说是一篇调研学习文，是我自己感觉…
-
前端知识点之JavaScript系列1-20 答案是肯定的，那为什么不是 呢？ 知识 首先看看官网上： paserInt的用法 parseInt() 函数解析一个字符串参数，通过基数解析，返回一个整数或者NAN parseInt() 的两个参数分别是string和radix string就是要解析的字符串，radix就是基数 注意： 基数不在2-36之间，则返回值就是NAN map …
-
前端这些年我到底经历了什么（下）2015 年 7 月，大学刚刚毕业的我进入了一家游戏公司做前端开发，在各种资源匮乏，前端只有自己一人的情况下如何进行突围？
-
精读《React Hooks 最佳实践》React 16.8 于 2019.2 正式发布，这是一个能提升代码质量和开发效率的特性，笔者就抛砖引玉先列出一些实践点，希望得到大家进一步讨论。
-
图解 JavaScript 竞态处理 最近被公司安排分享一些主题，思来想去，觉得还是想分享关于 JavaScript 竞态相关的知识。于是总结成此文。 这篇博客的目标主要以图例的方式带大家了解 JavaScript 并发与竞态，如有疏漏，欢迎大家指正。 以下正文。 竞态导致的错误 经验较为丰富的开发者，可能会感触于异步代码的确较比同步代码难以理解和编写…
-
Hybird 开发之 JavaScriptCore 通过 JavaScriptCore 框架，你可以在 Objective-C 或者基于 C 的程序中运行（evaluate） JavaScript 程序。它还能帮你插入一些自定义对象到 JavaScript 环境中去。 JavaScriptCore框架其实就是基于webkit中以C/C++实现的JavaScriptCore的一个包装，在旧版本iOS开发中，很多开发者也会自行将webkit的库引入项目编译使用…
-
2019最新web前端学习路线：前端从初级入门到入坟到高级进阶 2019最新web前端学习路线：从初级入门到入坟到高级进阶 我的前端学习路线-从初级入门到高级架构 初中级阶段 一、前端基础阶段 HTML CSS JavaScript DOM BOM 二、前端中级阶段 HTML5 CSS3 bootstarp Canvas JQuery 三、后台技术阶段 Node.js MongoDB Koa EJS 四…
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
