20191223 前端开发周报-前端开发博客

再学JavaScript ES(6-10)全版本语法大全；Vue Router被我们忽略的知识点；Python 3+Django 3 结合Vue.js框架构建前后端分离Web开发平台实战；身为前端，你不得不懂的一些 HTTP 知识；如何写出一个惊艳面试官的 Promise【近 1W字】；javascript for循环+异步请求导致请求顺序不一致；讲给前端的正则表达式(1)：基本概念；异步编程解决方案——Promise对象（ES6语法）

再学JavaScript ES(6-10)全版本语法大全第1章课程介绍与环境搭建 JS作为前端的立身之本，让大家了解学习这门课的必要性。考虑到很多同学刚刚接触前端或者对工程化方法不太了解，为了快速进入到学习状态，我们提供了极其简单的方式帮大家准备好学习环境。第2章 ES6基础知识 ES6语法相对于ES5有了非常大的改变，让原生 JavaScript 能力再上一个台阶，这…
Vue Router被我们忽略的知识点 2、响应路由参数变化针对复用组件（只是路由参数发生改变），生命周期函数钩子不会被调用。 watch: { ‘$route’ (to, from) { // 对路由变化作出响应… } } 复制代码 beforeRouteUpdate (to, from, next) { // react to route changes… // don’t forget to call next() } 复制代码 …
Python 3+Django 3 结合Vue.js框架构建前后端分离Web开发平台实战
身为前端，你不得不懂的一些 HTTP 知识全文阅读大致3分钟，学习本文可以掌握以下知识： netcat、ss、lsof命令的使用 tcp协议的三次握手和四次挥手 udp协议的基本表现过程以及icmp报文发送的原因 tcpdump、nc命令的使用三道关于TCP/IP协议的面试题答案 1、从查看系统端口监听说起在平时的开发…
如何写出一个惊艳面试官的 Promise【近 1W字】1.高级 WEB 面试会让你手写一个Promise,Generator 的 PolyFill(一段代码); 2.在写之前我们简单回顾下他们的作用; 3.手写模块见PolyFill.
javascript for循环+异步请求导致请求顺序不一致工作中遇到一个问题 for循环，再把循环出来的ID再进行二次请求这就导致一个问题请求结果返回顺序不一致原因：异步请求会把回调事件放入微任务事件队列，宏任务执行完毕再执行微任务，具体参考事件队列机制解决方法：通过map方法进行循环请求将异步请求方法封装起来，返回一个promise 这样将会返回一…
讲给前端的正则表达式(1)：基本概念正则表达式（regex）是定义搜索模式的字符序列。由于对程序员的日常工作非常有用，所以在 JavaScript 中也支持它。在这个系列文章中，我会向你展示其工作方式以及其实际用途。希望在结束本系列后，你将能够轻松的…
异步编程解决方案——Promise对象（ES6语法）回调函数事件监听事件发布/订阅模式 Promise 生成器Generators/ yield async/await JS 异步编程进化史：callback -> promise -> generator -> async/await Promise对象 Promise是什么 promise 即承诺，异步编程的一种解决方式，内部保存异步操作，通过它可以获得异步操作的消息特点 …
冰与火之歌：JavaScript 的困境与挑战最近几年以来，伴随着各个端平台的迅猛发展，以 TypeScript、Swift、Kotlin 和 Dart 为代表的新一代应用编程语言纷纷浮现。群雄环伺之下，JavaScript 也在不断演进。在今天正在深圳召开的 GMTC2019 全球大前端技术大会上，360 高级前端架构师贺师俊发表《JavaScript 的困境与挑战》的主题演讲，分析 JavaScript 目前面…
Vuex如何实现数据共享在用vue作为前端框架进行开发的时候，对于组件间的传值你一定不会陌生，如果只是简单的父子组件传值，我想你肯定不会选择用Vuex来进行状态管理，但是如果你需要构建一个中大型单页应用，组件间数据交互比较复杂频繁，你很可能会考虑如何更好地在组件外部管理状态，那么Vuex 将会成为自然而然的选择。 Vuex 是什么？ Vu…
一个基于vue的网页图片浏览插件因为某天我在用电脑逛p站(pixiv)时，发现看图的效果不是那么令人满意，点开一个图片后居然不能放大，上移下移要通过鼠标滚轮，感觉有点反人类，我希望在网页看图时能全屏浏览图片，并且支持图片的放大缩小和拖拽，不知道是不是搜索关键字不对，逛了一圈发现莫得喜欢的轮子，刚好又有些思路而且闲着无聊，于是…
webpack 加载动态图片所谓动态图片指的是接口返回的图片地址，这里的地址指的是本地的图片地址，而非网络图片的url。本地有一个 image 文件夹，存放需要用到的图片。按照接口返回的图片地址比对去加载。 webpack加载图片首先想到的是…
前端工具包之日期格式化我们在开发过程中，总会封装一些公共函数来作为我们的工具来简化代码或者复用代码，为此，我打算整理一下我日常工作中常用的一些封装的工具函数，本篇文章为时间日期的格式化工具函数封装。系列文章 1. 前端工具包之深浅拷贝 2. 前端工具包之日期格式化背景通常开发中我们会遇到各种类别的日期形式如比…
刨根问底：深入研究 JavaScript 全局变量追求进步的同学都关注了“1024译站” 这是1024译站的第 40 篇文章本文的内容比较硬核，我们一起来看下 JavaScript 全局变量的底层机制到底是怎样的。文章会涉及脚本作用域、全局对象等概念。作用域变量的词法作用域（简称作用域）是程序中可以访问它的区域…
TypeScript高级用法详解作为一门强大的静态类型检查工具，如今在许多中大型应用程序以及流行的JS库中均能看到TypeScript的身影。JS作为一门弱类型语言，在我们写代码的过程中稍不留神便会修改掉变量的类型，从而导致一些出乎意料的运行…
Vue数据双向绑定原理和实现Vue实现数据双向绑定主要利用的就是: 数据劫持和发布订阅模式。所谓发布订阅模式就是，定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将…
基于 HTML5 WebGL 构建智能数字化城市 3D 全景自 2011 年我国城镇化率首次突破 50% 以来，《新型城镇化发展规划》将智慧城市列为我国城市发展的三大目标之一，并提出到 2020 年，建成一批特色鲜明的智慧城市。截至现今，全国 95% 的副省级以上城市、76% 的地…
JavaScript中的各种遍历一直想写些总结性的文章，事情太多，无从下手，加上太懒，迟迟没有动笔。一天天过去，日积月累的，心头像被压了一层层的稻草，难受极了。不想太多，一件件地做，每做一件就少一件，尽管杂乱繁重，最终总会清空的。在学习和实践过程中也许会碰到更多的有关遍历的知识，每遇到一点就追加一点，持续更新。现在把能想到的…
升级vue-element-admin，高效开发后台管理系统 vue-element-admin 作为一个后台前端解决方案，它丰富的插件、优雅的解决方案无需多言。然而在企业级中后台产品的开发中，我们最常遇到的需求就是列表页、详情页。 vue-element-admin 的解决方案是直接使用 element-ui 的 el-table/el-form 实现了需求。由于列表页、详情页有很多的需求是相近甚至相同的，在这样的前提…
Vue使用Jest单元测试（学习笔记）环境版本号 node v12.13.1 npm 6.13.1 @vue/cli 4.1.1 vue-jest-demo 常用操作搭建工程 PS C:UsershudcWorkspace测试20191203> vue create vue-jest Vue CLI v4.1.1 ? Please pick a preset: Manually select features ? Check…
webpack5 + webpack-chain 构建一个大型应用系列 2（附 vscode 跟 prettier 配置）继上一篇一步步从零开始用 webpack 搭建一个大型项目之后的第二篇。本文使用了 webpack5 将项目进行了重构，并全程使用的 webpack-chain 来配置 webpack ，每个功能也都是独立文件，可单独使用。因此该项目的配置可以在任何项目中被使用。此项目可实战亦可当成 webpack 手册来学习。我开发这个项目的目的就是无论你是…
CSS实现自适应分隔线的N种方法分割线是网页中比较常见的一类设计了，比如说知乎的更多回答这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应偷偷的看了一下知乎的实现，很显然是用一块白色背景覆盖的，加一点背景就露馅了心想…
Vue电商项目-提升逼格玩转svg哈喽~各位掘友,最近利用工作之余开源了Vue电商项目,高仿某知名O2O买菜平台,整个项目做下来收获还是蛮多的,可以扫描下方二维码体验,本篇是项目的核心知识拆解篇,主要是拆解项目中svg组件封装使用,篇幅较长,顺手点…
34 个今年11月最受欢迎的 JavaScript 库你知道的越多，你不知道的越多点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
手把手教你打造一款轻量级canvas渲染引擎当我们开发一个canvas应用的时候，出于效率的考量，免不了要选择一个渲染引擎（比如PixiJS)或者更强大一点的游戏引擎（比如Cocos Creator、Layabox)。
Webview Vue 网页调试 0x0 前言转入前端的时候，就一直做 Hybrid App 开发，所以从 React Native 到简单的 Mui 、 Api Cloud 都尝试过，除了一些主流的开发方式，基本都有很好的调试工具，像 RN 都会有 ReactNativeDebugger 之类的工具。但由于公司需求，需要简单的 webview 网页开发的时候， RN 显然很笨重了，所以利用 Mui.js 真机框架…
从零开始，Promise 从理解到实现Promise 是一个对象，它代表了一个异步操作的最终完成或者失败。现在它已经成为了 JavaScript 中异步编程的一种重要解决方案。
说说 WebSocket，3 分钟让你全面认识它“WebSocket 是一项先进的技术，它可以在用户的浏览器和服务器之间打开交互式通信会话。通过 WebSocket，您可以向服务器发送消息并实时接收响应，而无需通过传统的轮询服务器的方式来获取服务器上的响应。”
【前端知乎系列】ArrayBuffer 和 Blob 对象本文首发在我的【个人博客】更多丰富的前端学习资料，可以查看我的 Github: 《Leo-JavaScript》，内容涵盖数据结构与算法、HTTP、Hybrid、面试题、React、Angular、TypeScript和Webpack等等。点个 Star 不迷路~
Webpack 一些概念打包工具有多种，实际中 webpack 接触的比较多，目前中文文档跟英文文档有些对不上，其中有些概念比较分散，对此进行集中的整理。
vue源码阅读四：虚拟DOM是如何渲染成真实的DOM的？（上）前面用了两篇文章，讲虚拟 DOM 是如何生成的。终于到了如何将虚拟 DOM 渲染成真实 DOM 的部分了。回顾下之前的 mountComponent 函数，中间有行代码如下： vm._update(vm._render(), hydrating) 复制代码 vm._render() ,我们已经知道是如何生成虚拟 DOM 的了。接下来，我们看看 vm._update 是如何将虚拟 DOM …
了解浏览器是如何执行JS代码的一开始我只想弄明白js在浏览器里面到底是怎么执行的，发现自己需要补补基础，于是打算总结一个文章来补一下基础，有什么不对的地方还请大佬们指正。这篇文章可以让你补补一些计算机基础知识，了解JS代码在浏览器是如何执行的。进程和线程 – 进程是一个工厂，工厂有它自己独立的资源，工厂之间相互独立； – …
干货 | 第十四届 D2 前端技术论坛 20+ 份精彩演讲 PPT 分享12 月 14 日，第十四届 D2 前端技术论坛在杭州圆满举办。来自全国各地的近千名开发者齐聚杭州，聆听 3 大会场、来自 24 位海内外嘉宾的 21 个主题分享。
如何在 React 中优雅的写 CSS看目录结构清晰明了，由于“ CSS 文件分离 != CSS 作用域隔离”这样的机制，如果我们不通过一些工具或规范来解决 CSS 的作用域污染问题，会产生非预期的页面样式渲染结果。
JavaScript中的深拷贝与浅拷贝如果您觉得我的文章有用，欢迎点赞和关注，也欢迎光临我的个人博客 github.com/BokFang 对象拷贝是经常能够遇到的，也是面试的经典题型，接下来我们就聊聊JavaScript中的深拷贝和浅拷贝。浅拷贝首先我们要么明确一点，直接拷贝对象的引用不是浅拷贝。 eg1：拷贝对象的引用 var obj1 = { a:1, b:{c:…
jQuery 操作option 之前写过一篇日志，《 js操作option 》，趁着这次系统重构，怎么看原来的实现方式都不爽。因为页面中使用了jQuery，于是就想用jQuery把原方法重写一下。因此也就有了本篇日志：jQuery操作option。 js清空option 之前清空option ，我的做法是遍历现有option，将其每个子元素都置空即可。现在使用jQuery来实现，我们只…
如何使用webpack打包一个库library经过以上步骤后会生成一个library文件夹，里面包含一个package.json文件。然后简单修改为如下所示：
全网最详bpmn.js教材-自定义contextPad篇 Q: bpmn.js是什么? ️ bpmn.js 是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成. Q: 我为什么要写该系列的教材? ️ 因为公司业务的需要因而要在项目中使用到 bpmn.js ,但是由于 bpmn.js 的开发者是国外友人, 因此国内对这方面的教材很少, 也没有详细的文档. 所以很多使用方式很多坑都得自己…
前端深拷贝和浅拷贝的原理及应用基础数据类型:简单的数据端，基础类型的数据有Number,Null,Boolean,Number and String。这五种基础类型可以按值访问，可以直接操作保存在变量的实际值（文字来源：JavaScript高级程序设计）
Web 视频播放前前后后这应该是目前写的最为完整的关于 Web 视频播放的文章。从简单的 Video 元素到 MSE 直播的应用，作者给出了具体的代码，文章由浅入深，普及现代 Web 播放技术的前前后后。五星推荐阅读。 @Paul Berberian 原文地址: https://medium.com/canal-tech/how-video-streaming-works-on-the-web-an-introducti…
React transaction完全解读在阅读react源码中，发现其中大量用到了transaction（中文翻译为事务）这个写法，所以单独做一下分析。其实在react中transaction的本质，其实算是一种设计模式，它的思路其实很像AOP切面编程:
【webpack配置工程师】系列一（核心概念篇）关于版本，我们讲述的是webpack 4.0版本我希望大家在用webpack前，要搞清楚，我们为什么要用webpack，它存在的意义是什么？ webpack 基础概念 webpack可以把它理解为一款工具，一款帮助我们打包的工具，也可以称之为前端构建工具。简单来说webpack做的事情就是将一些特别复杂且浏览器无法识别东西，通过…
从事 Web 开发需要学习哪些基础知识？本文节选自书籍《Django开发从入门到实践》第二章。本节列出这么多内容不是为了打击初学者的信心，而是让大家在学习过程中有一个清晰的脉络，如果想在Web后端开发这条路上走得更远，需要修炼好自己的内功，这些基础知识是非常重要的。前端知识 …
入门babel，我们需要了解些什么说实话，我从工作开始就一直在接触babel，然而对于babel并没有一个清晰的认识，只知道babel是用于编译javascript，让开发者能使用超前的ES6+语法进行开发。自己配置babel的时候，总是遇到很多困惑，下面我就以bab…
html5不常用标签应用场景作为一个前端开发，在浏览别人家的页面时总是会习惯性的查看他们页面的源码，发现大多数网站的页面，包括我自己写的页面中用到的最多的布局元素无外乎就是div、p、span、ul、dl、ol、li、dt、dd、strong、b，不管…
vue-loader是怎么工作的 vue-loader 是用于webpack的加载器，允许你用叫做 Single-File Components 单文件组件的格式来写Vue组件 <template> <div class="example">{{ msg }}</div> </template> <script> export default { data () { return { msg: ‘Hello world!’ } } } <…
你可能会用的上的一个vue功能组件库，持续完善中… 日常开发使用组件库一般都能满足大部分的需求，不过有些功能组件可能库里并没有，这里开源一些特定项目可能会使用到的组件，希望可以帮助到大家~ 快速上手安装 npm i vue-gn-components 复制代码引入整体引入: import VueGnComponents from "vue-gn-components"; import "vue…
浏览器缓存策略与webpack持久化缓存浏览器通过请求头实现缓存，关键的请求头有cache-control，expires，last-Modified，ETag等。我们从时间和空间两个角度来看浏览器缓存。时间浏览器发送第一次请求：不缓存，服务端根据设定的缓存策略返回相应的header，如：cache-control，expires，last-Modified，ETag。浏览器发送第二次请求： …
JavaScript 引擎 V8 执行流程概述本文主要讲解的是V8的技术，是V8的入门篇，主要目的是了解V8的内部机制，希望对前端，快应用，浏览器，以及nodejs同学有些帮助。这里不涉及到如何编写优秀的前端，只是对JS内部引擎技术的讲解。
如何处理 Web 图片优化？未优化的图片是影响网站性能的主要因素之一，尤其会影响初次加载。取决于图像的分辨率和画质，图片可能占据整个网站流量的 70%.
当你敲完 git commit 命令后，究竟发生了什么？追求进步的同学都关注了“1024译站” 这是1024译站的第 39 篇文章作者：Maxence Poutord 来源：dev.to 翻译：大道至简如今大多数项目都使用 Git 作为版本控制系统，这意味着大多数项目都有一个.git文件夹。但是，你有没有尝试过打开它？我试过一次……然后在…
webpack搭建基本的前端开发环境（二）我们日常使用的前端开发环境应该是怎样的？我们可以尝试着把基本前端开发环境的需求列一下：构建我们发布需要的 HTML、CSS、JS 文件使用 CSS 预处理器来编写样式处理和压缩图片使用 Babel 来支持 ES 新特性本地提供静态服务以方便开发调试上述几项应该可以满足比较简单的前端项目开发环境需求了，…
CSS3滑块菜单菜单动画很酷源码：互联网的那些破事的微博视频
前端安全问题与防御前端安全问题与防御俗语说的:"有制造者，必然有破坏者"，既然有咱们辛勤的开发前端 web 应用，就不免在上线之后存在不坏好意的破坏者通过各种漏洞攻击你的应用，所以无论前后端都不是一堵密不透风的墙，当然咱只会前端哈，本文带领大家一起认识前端存在的安全问题，以及在开发中如何应对和防御。前端安…
【读书笔记】JavaScript面向对象精要（下）写在前面上一篇文章中我们对书的前三章进行了总结整理~ 点击这里获取上一篇文章：:point_right: 【读书笔记】JavaScript面向对象精要（上）这篇文章将整理总结本书的最后三章内容，让我们彻底明白 JavaScript 的面向对象。第四章构造函数和原型对象 4.1 构造函数构造函数是我们用 new 创建对…
初探 web components 通过使用 Custom Elements 创建内联的 CSS 和 JavaScript 的自定义元素。需要说明的是它不是 React， Vue 或者 Angular 的框架的替代方案，它是一个全新的概念。 CustomElementRegistry 对象在 window 全局对象下暴露了 customElements 属性，可以通过此属性访问到 CustomElementRegistry 对象。 CustomElementReg…
重学js系列——对象本“大家”上周坐火车回老家，同行的是搞java的老弟，两个程序猴在一起能干嘛？（:grinning: 别多想，本文讲的虽是对象，但我俩不搞对象，虽是基友，但我俩不搞基:sweat_smile:，哈哈），路上不自觉的讨论交流日常遇到的问题，在交流过程中发现java和js数据结构的不同之处，本文将对数据结构中的对象进行细节的探讨和总…
简单描述 vue 和其他框架的区别现在vue已经是前端主流的框架了，采用MVVM模式，虚拟dom，diff算法，数据双向绑定，提供响应式和组件化的视图组件。将注意力集中保持在核心库。体积小，性能好，生态系统庞大，发展也很不错。相对应的还有React，Angular，Riot，Ember等框架，那么为什么要推荐使用vue呢，他较于其他框架优点是什么呢? 更强大的React跟他…
CSS3各大网站分享按钮带网站Logo小图标源码：互联网的那些破事的微博视频
#馆藏Share#【CSS 平滑阴影生成器】详见：这是一款所见即所得的 CSS 阴影在线生成器。你只需要拖拽相应的 CSS 属性控制条，就能快速生成平滑的阴影效果，同时支持拷贝其源代码，简单又方便。