Vue 3-beta 相关文集；一个单行代码的 npm 库，竟然让数百万个 JavaScript 项目崩溃了…；GitHub 中间人攻击原理分析；记平时工作中的一代码规范(Vue项目，纯记录)；理解 JavaScript 内存模型，就靠这几张图了；浓缩的就是精华——ES6 Promise；vue 官方风格指南解析；Angular 9 的新特性
-
还是这篇总结得全…… 看到内容我都惊呆了
-
文章目录 序言 为什么会出现这样的提示 总结 序言 3 月 26 日，国内多个地区访问 Github 以及 Github pages 的时候，谷歌浏览器提示“您的连接不是私密连接”的错误信息，不少用户想知道为什么会这样。在这起事件中，我得出的结论是由于 …
-
近期翻了翻自己在群里提交的review代码，发现一些小问题，还有一些问题犯了不止一次，还是老老实实记录一波，以免记性不好又忘记就怪不好意思的。我在团队中主要负责前台项目，框架是vue，以下是我们工作中团队里…
-
持续进步的同学都关注了“1024译站” 这是1024译站的第 83 篇文章 来源：Medium 作者：Ethan Nam 编译：大道至简 // 声明变量并初始化 var a = 5 let b = ‘xy’ const c = true // 重新赋值 a = 6 b&nb…
-
ECMAscript 6 原生提供了 Promise 对象。Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。 Promise 对象有以下两个特点: 1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态…
-
Vue 有个官方的风格指南，我从中摘抄了些认为比较重要、自己常忽略的点，加上一些分析列出来。也可以直接去观看风格指南：[链接] 单文件组件文件的命名 文件名要么是单词开头大写，要么是横线连接 MyComponent.vu…
-
注意： Angular 9 现在已经处于 release candidate 阶段，随时可能发布。 Ivy 来了 Angular 8 中虽然支持试用 Ivy Renderer，但是默认的 Complier Engine 还是 View Engine，并且需要修改 tsconfig.json 文件： “angularCompilerOptions”: { “enableIvy”: true } JavaScript复制代码 Ang…
-
译文：Rendering on the Web 本文主要内容来源于对上文的翻译，图也来源于此，加上了一点平时工作的理解，英语渣、翻译不是很准确，有条件的可以直接阅读上文链接。本文主要是自己在阅读时做的笔记，供自己以后查…
-
原来webpack的loader如此简单，轻松写一个自己loader
webpack的思想就是万物皆模块，这里的模块不仅仅只是JavaScript文件，它还可以是一个文件、一张图片、一个css样式表等资源。如果我们把这些内容全部在index.html中引入，那整个项目的代码看起来满篇都是引入的外…
-
【面试官】| 要不说说，JavaScript中的new操作符（别走）
文章第一时间发在笔者github mdn-箭头函数 阮老师es6-箭头函数 什么是箭头函数 语法简洁 没有自己的this 不能用作构造函数。 const agesArr = const res = agesArr.map(item=>`${item}岁`) console.log(res) // [ ’12岁’, ’13岁’, ‘7岁’, …
-
「架构师技术图谱」上 GitHub 热榜了，助你早日成为架构师
大家好，我是头条菌。 我爱程序员！我的微信号：toutiaoio007，欢迎加我好友，拉你入群～ 头条菌推荐过很多别人家的项目。 今天，我们的「架构师技术图谱」上了 GitHub 热榜！已有 7.1k Star! 那就自荐下吧！ 本项目是《码农周刊》架构学习资料精选，码农周刊团队官方出品。架构师…
-
译原文： www.valentinog.com/blog/switch… 作者：Valentino 译：黄梵高 无”switch” 不欢 Java的大佬非常喜欢switch，JavaScript开发人员也是如此。老实说，我们的开发人员很懒惰，对于像我这样缺乏创造力的人来说，很容易坚持现状。 switch很方便：给定一个表达式，我们可以检查它是否与一堆cas…
-
本文首发于欧雷流。由于我会时不时对文章进行补充、修正和润色，为了保证所看到的是最新版本，请阅读原文。 从事前端开发的你，不知有没有被问过：「前端有架构吗？」 问你的人的身份，可能是你的 boss 或上司，…
-
迎接 Vue 3.0：在 Vue 2 与 Vue 3 中构建相同的组件
4月16日，Vue 开发团队终于在今天发布了 3.0-beta.1 版本，也就是测试版。通常来说，从测试版到正式版，只会修复 bug，不会引入新功能，或者删改老功能。所以，如果你对新版本非常感兴趣，或者有新项目即将上马，不妨尝试一下新版本。 随着Vue3即将发布，许多人都在想“ Vue2与Vue3有何不同？” 为了显…
-
我们知道angular组件间通讯有多种方法，其中最常用的一种方法就是借助于 @Input 和 @Output 进行通讯。具体如何通讯请参考angular组件间通讯，本文不再赘述，我们来讲讲关于此方法如何进行单元测试。
-
引言 对于变量提升这个问题，我想从事前端的同学都或多或少认为我懂这个。曾经，我也是这样认为的， 我懂变量提升 ，并且可以从变量在 Chrome 中的内存分配讲起，以及中间发生了什么。 但是，在一次面试中，我遇到了几个一起面前端的同学（当然技术水平参差不齐，并不是很高），在和他们聊这次笔试中的变量提升的…
-
点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
-
【Babel 小玩具】如何用 Babel 为代码自动引入依赖
最近在尝试玩一玩已经被大家玩腻的 Babel ，今天给大家分享 「 如何用 Babel 为代码自动引入依赖 」 ，通过一个简单的例子入门 Babel 插件开发。 const a = require(‘a’);import b from ‘b’;console.log(axuebin.say(‘hello babel’));复制代码 同学们都知道，如果运行上面的代码，一定是会报错的： VM…
-
点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
-
Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】
今天，我们使用Vue CLI3 做一个移动端适配 。 前言 首先确定你的项目是Vue CLI3版本以上的。 一、移动端适配包 1、安装移动端适配包 npm i lib-flexible -S 复制代码 2、在 main.js 引入适配包 import Vue from ‘vue’ import App from ‘./App.vue’ import ‘lib-flexible’ // 引入适配包 Vu…
-
页面应用需要Vuex管理全局/模块的状态，大型单页面组件如果靠事件（events）/属性（props）通讯传值会把各个组件耦合在一起。因 此需要Vuex统一管理，当然如是小型单页面应用，引用Vuex反而会增加复杂度。因此需要衡量引用Vuex增加的收益是否大于成本。 快速入门 1. 安装vuex库 cnpm install -S vuex 2. 创…
-
欢迎点击「算法与编程之美」↑关注我们！ 本文首发于微信公众号：”算法与编程之美”，欢迎关注，及时了解更多此系列文章。 欢迎加入团队圈子！与作者面对面！直接点击！ 1 前言 随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足日益更新的需求，会经常性的在本…
-
这周的计划是用VUE将之前的小demo的前端给重构了，并且做成前后端分离的样式，因为之前的那个聊天室的demo几乎都是在一个路由上完成的，所以学习Vue-router是不可避免的，本次笔记是我在学习vue-router这个框架过程中的一些笔记。中间也穿插了部分知识点，希望能帮助到正在学习Vue-router的朋友。 什么是vue-router？ …
-
web登录方式 为什么会有登陆态 因为http协议无状态，两次请求服务器无法分辨是否为同一账号请求。登录就是用某种方法让服务器识别不同的请求都是谁发出的。 从登录到登出的过程中，服务器维护了一个可以识别用户…
-
本人是一个刚入行的菜鸡前端程序员，写这个文章的目的只是为了记录自己学习的笔记与成果，如有不足请大家多多指点。 数组(列表)、栈、队列和链表这些顺序数据结构我们在前面的文章已经一起学习过了。本篇文章我们一起来学习集合，这是一种不允许重复的顺序数据结构。 构建数据集合 集合是由一组无序且唯一(即不能重…
-
配置全局cdn，包含js、css 开启Gzip压缩，包含文件js、css 去掉注释、去掉console.log 压缩图片 本地代理 设置别名，vscode也能识别 配置环境变量开发模式、测试模式、生产模式 请求路由动态添加 axios配置 添加m…
-
云开发静态托管是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持。 在云开发静态托管中，你同样可以托管一个 Angular 项目，接下来，我就介绍一下应该如何将一个 Angular 项目部署到云开发静态网站托管服务中。 …
-
Vue 结合html2canvas和jsPDF实现html页面转pdf
结合 html2canvas 和 jsPDF 实现 html 页面转 pdf By ：授客 QQ ： 103355122 实践环境 win10 Vue 2.9.6 axios 0.18.0 html2canvas 1.0.0-rc.3 jspdf 1.5.3 安装 html2canvas 进入vue项目所在目录,然后执行以下安装命令 cd /d E:MyProjectsTMPfrontend E:MyProjectsTMPfrontend>n…
-
Hoisting(变量提升) 变量升级 声明错误 案例1-Fake Protect 案例2-midnightCTF(Crossintheroof) for循环遍历 with表达 this的绑定 最后 …
-
在 Vue.js 中，除了它内置的组件如 keep-alive 、 component 、 transition 、 transition-group 外，其它用户自定义的组件在使用前必须注册，否则会抛出如下错误： 组件的注册有两种方式： 全局注册 和 局部注册 。这里我们举两个例子： // main.jsimport Vue from “vue”;import App from…
-
每日前端夜话 第321篇 翻译： 疯狂的技术宅 作者：Dr. Axel Rauschmayer 来源：2ality 正文共：2437 字 预计阅读时间：10 分钟 本文介绍了如何通过 TypeScript 和 webpack 创建 Web 应用程序。我们仅使用 DOM API，而不使用特定的前端框架。源码文件 ts-demo-webpack 可以从 GitH…
-
Web安全是前端开发人员经常忽略的主题。当我们评估网站的质量时，我们通常会查看性能，SEO友好性和可访问性等指标，而网站抵御恶意攻击的能力却常常被忽略。即使敏感的用户数据存储在服务器端，后端开发人员也必…
-
（立下flag）每日10道前端面试题-15 关于【高级技巧】十问
第一问：安全类型检测——typeof和instanceof 区别以及缺陷，以及解决方案 这两个方法都可以用来判断变量类型 区别：前者是判断这个变量是什么类型，后者是判断这个变量是不是某种类型，返回的是布尔值 （1）typeof 缺陷： 1.不能判断变量具体的数据类型比如数组、正则、日期、对象，因为都会返回object,不过可以…
-
Blazor WebAssembly 3.2.0 正式起飞，blazor 适合你吗？
最近blazor更新很快，今天在官方博客上发布了 Blazor WebAssembly 3.2.0 RC： https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-release-candidate-now-available/ ，这是最后一次预览版了，功能开发都已经完成。 5.19的微软Build大会上就正式发布了，我最近也在积极的研究学习blazor，在博客和…
-
JavaScript ECMA-262-3 深入解析（二）：变量对象实例详解
本文实例讲述了JavaScript ECMA-262-3变量对象。分享给大家供大家参考，具体如下： 介绍 我们在创建应用程序的时候，总免不了要声明变量和函数。那么，当我们需要使用这些东西的时候，解释器(interpreter)是怎么样、从哪里找到我们的数据(函数，变量)的，这个过程究竟发生了什么呢？ 大部分ECMAScript程序员应…
-
故事开始 午饭时间，暗恋已久的学妹拉着我的衣袖：“学长学长，你能不能让这些爱心变成五颜六色的吗~”。我在旁边笑开了花~~~ 诶呀，口水流出来了。我想最终效果是这样的（猜猜多少个爱心）： 然后开始动手吧~ 学啥…
-
基于 Express + MySql 的 Node.js 的后端开发
框架: express 数据库 ORM : sequelize 、 mysql2 依赖注入: awilix 路由插件: awilix-express 项目结构 |– express-backend |– src |– api // controller api文件 |– config // 项目配置目录 |– container // DI 容器 |– daos // dao层 …
-
点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
-
图片添加水印、文件转图片、图片转文件、html2canvas截屏功能
做法: canvas base64 下面先提供代码，并对代码做进一步的讲解： picWaterMark = ({ // 1 url = ”, textAlign = ‘left’, font = “30px Microsoft Yahei”, fillStyle = ‘rgba(255, 255, 255, 0.8)’, content = ‘请勿外传’, callback = null, } = {}) => { const img = new Image(); // 2…
-
写在前面（不看错过一个亿） 最近一直在读 Vue 源码，也写了一系列的 源码探秘 文章。 但，收到很多朋友的反馈都是：源码晦涩难懂，时常看着看着就不知道我在看什么了，感觉缺乏一点动力，如果你可以出点面试中会问到的 源码 相关的面试题，通过面试题去看源码，那就很棒棒。 看到大家的反馈，我丝毫没有犹豫…
-
作为程序员的我们每天都在和网络请求打交道，而前端程序员接触的最多的就是HTTP请求。平时工作中，处理网络请求之类的操作是最多的了。但是一个请求从客户端发出到被服务端处理、再回送响应，再被客户端接收这一…
-
Vue的两大核心 1. 数据驱动 – 数据驱动界面显示 2. 模块化 – 复用公共模块，组件实现模块化提供基础 组件基础 组件渲染过程 template —> ast（抽象语法树） —> render —> VDom(虚拟DOM) —> 真实的Dom —> 页面 Vue组件需要编译，编译过程可能发生在 打包过程 （使用vue文…
-
一些关于 Gulp 的基础概念 首选要明确的一点是， gulp 中的每个任务都是一个 javascript 异步函数。处理异步任务，最基础也最常用的就是 error-first callbacks , 但是 gulp 也支持流、 promises 、 async/await 等等其他异步方式，根据自己的需要进行选择即可，我们这里选用的就是返回流的方式。 代表…
-
问题场景: 在做一个后台返回数据是否有值的处理操作时，用if判断发现的一个有意思的问题 代码如下: 复制代码 后台返回数据即：res.data.list = ){ console.log(‘无数据返回’) } else { console.log(‘有数据’) } 打印结果：有数据 复制代码…
-
应用场景：换一批功能 {代码…}
-
锥形渐变是 CSS Images Module Level 4 规范中新定义的一种渐变，可以非常方便实现过去很难实现的效果，例如饼图，色板，棋盘等各种效果，CSS 开发必学必会技能。
-
现代前端，模块化已成必备，不仅有多种工具类的库，还被写进规范当中，不论大小公司，代码都遵循模块化思想在开发，它已经成为独立于技术的一种经验和能力。 本文我们就来聊聊这个话题。 需求 网页刚出现的时候，只是很简单的文档，样式简单，极少的交互，极少的设计元素，一个页面不会依赖很多文件，逻辑代码少。 …
-
防抖是前端业务常用的工具，也是前端面试的高频问题。平时面试候选人，手写防抖人人都会，但是稍做修改就有小伙伴进坑送命。本文介绍了如何在react hooks中实现防抖。 背景 — 防抖（debounce）是前端经常用到的工具函数，也是我在面试中必问的一个问题。团队内部推广React Hooks以后，…
-
这个标题可能很拗口，请允许我先做下简短的解释。 在我们使用 Vue 进行开发时，Dom 最终渲染的结构与 template 嵌套逻辑是一致的，有着严格的父子级关系。 假如我们有特殊需求，需要将某个 viewModel 的 Dom 渲染到父级之外，需要如何操作？ 一、真的有这种需求 ？ 可能你在看了前面介绍之后会觉得很奇怪，也意…
-
很久以前看过一个老外写的帖子， JavaScript Puzzlers! ，直译就是JavaScript难题，里面列举了44道JavaScript选择题，大部分都是让人摸不着头脑的题目，需要仔细琢磨一番才能得到正确答案。也有一些作者也没有解释清除，直接通过实验给出答案了。 这100个问题是在ECMA 262(5.1)环境下，浏览器中试验的，如果是node环…
-
github-webhook 工具实现 GitHub 自动构建
原理 当本地git push origin master向Github远程仓库提交代码时，可以通过配置github自带webhook向服务器发送请求， 利用github-webhook工具在服务器端接到请求后，调用自定义shell脚本来实现自动构建 github-webhook 文档 更多详情文档 https://github.com/yezihack/github-webhook …
-
10年前，亚马逊分享一个例子，每100毫秒的延迟都会是他们损失1%的销售收入，即在全年中，每增加1秒钟的加载时间将使该公司损失约16亿美元。同样，谷歌发现搜索页面的生成时间增加500毫秒，访问量将减少20%，潜在的广告收入也将减少五分之一。 我们中很少人可以像谷歌和亚马逊一样去处理这种大场面，但是，相同的原则也…
-
最近公司项目中，添加了视频模块，但是产品觉得Video自带的控制条有点LOW，于是自己设计了一个。于是开始了自定义Video控制的采坑之旅。。 首页效果图： 需求描述： 当鼠标放在图片上的时候，自动播放视频，并显示预览进度条，当鼠标移开，显示预览图片，再次hover图片，继续上次播放 视频详情页的效…
-
前天晚上在一个技术群里面看到一些小伙伴在讨论这么一道有趣的题目，题目 大致意思就是实现一个懒汉，并且提供一系列的行为方法，调用 eat 就打印吃饭信息，调用 sleep 方法则进行延迟传入时间，再进行下一步的操作。 当然，限制条件是不使用 Promise。 实现一个LazyMan，可以按照以下方式调用: LazyMan(“Hank”…
-
这道考察computed属性的题蛮有意思的。不仅仅考察了computed，而且还考察了vue的依赖收集以及脏检查。 如果此时this.a = 0，foo()如何计算？ 如果此时this.b = 2，foo()如何计算？ 如果a的初始值为-1，执行this.a…
-
H5、Web、NodeJS 人脸检测识别 基于TensorFlowJS
使用 Vue 框架搭建演示， H5 、 Web 、 NodeJS 实现人脸检测识别，基于 TensorFlowJS 实现的 face-api.js 人脸识别库。 起初在 2018 年时，有个项目用人脸检测，当时我在百度寻找了一下关于在浏览器网页 JavaScript 实现人脸识别的方法很少，好多都是用 百度AI 人脸识别接口来实现的。当时 Python 人工智能方面最为…
-
经过不断的迭代，Win10 下已经发布多时的 Linux 子系统（WSL – Windows Subsystem for Linux）现在已经比较成熟了；WSL 默认只是不带图形化界面的终端窗口，这个由开放心态带来的新组合，补齐了 Windows 在终端操作和包管理等方面的短板，加上 windows 下丰富的软件生态，开发体验上已经可以简单类比甚至局部超越 macOS …
-
GitLab 向「赏金猎人」颁发 20,000 美元赏金，用于修补远程代码执行漏洞
虽然钱看起来并不是特别多，但根据漏洞反馈者的说法，如果该漏洞被攻击者发现，可能会被利用来”读取 GitLab 服务器上的任意文件，包括令牌、私有数据、和配置”。
-
是否总觉得自学 JS、HTML、CSS 小有成就但心里空虚？ 眼看着《HTML 从入门到精通》 手下却一行代码十个 error ？ 莫慌！你离大牛只差一步之遥 360前端星计划 360 前端星计划是由 360 前端团队倾力主办，面向在校大学生，为培养最优秀最潜力的前端人才举办的前端技术系列培训&人才选…
更多内容请关注公众号【前端开发博客】每日更新
