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

vue中created与mounted区别；前端要知道的 HTTPS；js 数组对象深拷贝；页面可视化搭建工具技术要点；一看就懂之webpack基础配置；前端最强面经汇总；谈谈Web应用中的图片优化技巧及反思；当你自己封装 Vue 组件库时会用到的知识点

vue中created与mounted区别关于vue.js中的生命周期，如果不是有特别的需求，一般在项目开发过程中更多的使用created和mounted，所以在本文中主要讲解created与mounted在开发中的主要使用区别。
前端要知道的 HTTPS 点击上方“做工程师不做码农”，并“置顶公众号” 第一时间接收我的最新文章 01 — 概述 HTTPS（HTTP Secure）是一种构建在 SSL 或 TLS 上的HTTP协议。简单的说，HTTPS 就是 HTTP 的安全版本。SSL（Secure Sockets Layer）以及继任者 TLS（Trans…
js 数组对象深拷贝
《页面可视化搭建工具技术要点》页面可视化搭建工具, 是互联网公司中常见的运营工具, 实现了运营人员快速生成和发布页面, 提升页面上线效率; 且无需开发人员介入, 节省开发人力。（by 陈韩杰）
一看就懂之webpack基础配置本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有…
前端最强面经汇总花了很长时间整理的前端面试资源，喜欢请大家不要吝啬star~ 持续更新中…… 项目地址 [链接] 面试秘籍中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(上) 前端面试 – 收藏集 – 掘金 2万5千字大厂面经面…
谈谈Web应用中的图片优化技巧及反思对于大多数前端工程师来说，图片就是UI设计师(或者自己)切好的图，你要做的只是把图片丢进项目中，然后用以链接的方式呈现在页面上，而且我们也经常把精力放在项目的打包优化构建上，如何分包，如何抽取第三方库….
当你自己封装 Vue 组件库时会用到的知识点源码在 https://github.com/xiaodun/sf-feed 函数式组件 <TagConvert tag=”span” age=”9″ sex=”man”>12312</TagConvert> 生成的DOM如下 <span age=”9″ sex=”man”>12312</span> 内部实现是这样的，用到自定义组件上，意义就大了 <script> …
从零自己编写一个React框架【中高级前端杀手锏级别技能】想要自己实现一个React简易版框架，并不是非常难。但是你需要先了解下面这些知识点如果你能阅读以下的文章，那么会更轻松的阅读本文章：
如何面试大厂 Web 前端？（沟通软技能总结）最近面了很多大厂的web前端岗位，都被刷了，在决定入职前，手里拿了几分待遇差不多的offer，后期的面试越来越顺，自己思考和总结了一下，原来面试也有好多技巧和方法可循，希望这些方法可以帮助到为找工作而且苦恼的你，可能每个人的方法不一样，不过至少可以提供一些参考。先说明一下我的基本情况，93年生…
前端面试每日3+1——第116天今天的知识点 (2019.08.10) —— 第116天 [html] 页面布局中的结构与表现分离，那么什么是结构？什么是表现呢？ [css] 怎么自定义鼠标指针的图案？ [js] 如何使用js来截图？怎样截可见区域和整个页面？ [软技能] 对…
为何现代 Web 开发如此复杂？我是现代 Web 开发的忠实粉丝，我认为它称得上是一种“魔法”——但所有的魔法都有其优点和不足：如果你能熟练使用 Web 开发的一系列神奇工具（Babel、bundler、watcher 等！），就能打造出快速、强大而令人愉悦的开发流程；如果你不熟悉 Web 开发的这些神奇工具就会寸步难行；想要搞清楚这些魔法的工作机制…
JavaScript中神奇的+ 今天又看到一个JavaScript的骚操作： (‘b’ + ‘a’ + + ‘a’ + ‘a’).toLowerCase() // =>"banana" 理解这一发的关键在于理解 + + ‘a’ 是什么意思。我们一看到 + 可能下意识就认为是做加法 , 却很容易忽略它也可能是正号 . 所以这里两个加号的意义其实是不同的，第一个加号表示加法 ,而第…
一些前端LeetCode题目集合及视频讲解另外针对一些题目，也录制了一些讲解视频。以备自己以后查看。视频放到b站了，有需要的前端小伙伴自行去观看吧。
vue.config.js 配置项{代码…}
javascript之闭包七（闭包的应用场景）原生的setTimeout传递的第一个函数不能带参数,通过闭包可以实现传参效果 setTimeout(function(param){ alert(param) },1000) //通过闭包可以实现传参效果 function func(param){ return function(){ alert(param) } } var f1 = func(1); setTimeout(f1,1…
22道JavaScript高频手写面试题 JavaScript笔试部分点击关注本获取文档最新更新,并可以领取配套于本指南的《前端面试手册》以及最标准的简历模板 . 实现防抖函数（debounce）防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。那么与节流函数的区别直接看这个动画实现即可。手写简化版: // …
零基础教你搭建Vue项目今天我要讲一下我的第一个vue脚手架项目的搭建。可能很多人会想， vue脚手架有什么可说的呢，一个vue init命令就完事了。话虽如此，可是一个完整的项目不应该只有命令。话不多说，直接正文吧。第一步，安装node环境下载一个node安装包，然后安装到电脑上就ok了，如果弄得版本过低， window系统上就需要重新下…
前端20个真正灵魂拷问，吃透这些你就是中级前端工程师【上篇】网上参差不弃的面试题，本文由浅入深，让你在做面试官的时候，能够辨别出面试者是不是真的有点东西，也能让你去面试中级前端工程师更有底气。但是切记把背诵面试题当成了你的唯一求职方向
2019js基础面试题整理复习由于最近快要秋招，想巩固一下js基础知识，整理了一下网上的面试题，以下包括css、js和html 复习整理 html 1.html5有什么新特性？ {代码…} 新增用于绘画的<canvas>元素用于媒介回放的video和audio元…
前端十大经典算法非线性时间比较类排序：通过比较来决定元素间的相对次序，由于其时间复杂度不能突破O(nlogn)，因此称为非线性时间比较类排序。线性时间非比较类排序：不通过比较来决定元素间的相对次序，它可以突破基于比较排序…
我在做前端构建过程中的思考 “抛弃偏见，我相信 Cloud IDE 一定是未来，而面向 Web 的架构一定是当务之急。”
Vue 3.0 前瞻，体验 Vue Function API最近 Vue 官方公布了 Vue 3.0 最重要的RFC：Function-based component API，并发布了兼容 Vue 2.0 版本的 plugin：vue-function-api，可用于提前体验 Vue 3.0 版本的 Function-based component API。笔者出于学习…
[vue源码][nextTick]原理以及源码解析 nextTick Vue中的 nextTick 涉及到Vue中DOM的异步更新，感觉很有意思，特意了解了一下。其中关于 nextTick 的源码涉及到不少知识， nextTick 是 Vue 的一个核心实现，在介绍 Vue 的 nextTick 之前，为了方便大家理解，我先简单介绍一下 JS 的运行机制。 JS 运行机制 JS 执行是单线程的，它是基于事件循环的。事件循…
你所不知道的 CSS 负值技巧与细节写本文的起因是，一天在群里有同学说误打误撞下，使用负的 outline-offset 实现了加号。嗯？好奇的我马上也动手尝试了下，到底是如何使用负的 outline-offset 实现加号呢？
一周 GitHub 开源项目推荐：滴滴、美团、bilibili、去哪儿网…… 一周 GitHub 开源项目推荐点击链接或图片即可阅读喜欢请分享到朋友圈哦 AoE：滴滴开源的终端侧 AI 集成运行时环境 AoE (AI on Edge) 是一个终端侧 AI 集成运行时环境 (IRE)。以 “稳定性、易用性、安全性” 为设计原则，帮助开发者将不同框架的深度学习算法轻松部署到终…
JavaScript进阶系列之数组去重（一）比较暴力的解法 let array = function unique(array) { // res用来存储结果 let res = === res ) { …
三刷红宝书之 JavaScript 的引用类型正如标题所说，这是我第三次翻开红宝书也就是《 JavaScript 高级程序设计第三版》，不得不说，虽然书有一些年份，很多知识点也不适合现代的前端开发，但是对于想要掌握 JavaScript 基础的前端新手，亦或是像我一样想找回曾经遗忘在记忆角落的那些碎片知识，这本书依旧非常的适合，不愧被成为 "JavaScript 圣经&quot…
Vue 导航守卫(路由的生命周期) "导航"表示路由正在发生改变 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中，他们分为三种：全局的 router.beforeEach router.beforeResolve router.afterEach 单个路由独享的 beforeEnter …
JavaScript执行上下文、作用域和闭包先简单说一下在JS中栈、队列和堆分别都是干什么的？在JS中我们所说的执行上下文栈就是图中的stack，执行的时候首先是全局上下文入栈，然后各种函数上下文入栈，当函数全部执行完之后，最后全局执行上下文出栈，图中的heap就是用于存储对象这种复杂的数据类型。Queue就是异步执行队列，用来存储我们在代码中书写的异步…
Vue异步组件探究之前在回顾自己写的一个后台管理项目时，发现用到了Vue的异步组件。而之前恰好在研究vue的源码，顺便分析下异步组件的加载和执行过程。异步组件是什么？异步，是相对于同步而言的。我们在使用Vue时，使用到的组件大多为同步组件。在vue实例第一次执行渲染的过程中，已经生成了组件构造器。而异步组件则是在用到该组…
从异步概念到callback回调函数到promise javascript语言的执行环境的’单线程’的. 所谓’单线程’，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。 (实际上我认为计算机从微观上讲都是单线程的，因为一台机器在同一时间只能做一件事情。然而从宏观上讲，在我们人的对时间的感知范围内，认为机器…
基于websocket单台机器支持百万连接分布式聊天(IM)系统基于websocket单台机器支持百万连接分布式聊天(IM)系统本文将介绍如何实现一个基于websocket分布式聊天(IM)系统。使用golang实现websocket通讯，单机可以支持百万连接，使用gin框架、nginx负载、可以水平部署、程序内部相互通讯、使用grpc通讯协议。本文内容比较长，如果直接想clone项目体验直接进入,文本从介…
Vue页面转Pdf实践作者：颜亦浠@毛豆前端这一次我们来聊聊如何把页面转换成Pdf文件，经常会有这种场景，一些合同、协议等的页面需要进行下载，而且需要和页面保持一致，那么最好的方式就是直接把页面转换成相应的格式就好了，目前基本上就是Doc和Pdf这2种比较流行，我们就以Vue写的页面为例来看看如何转成Pdf文件。模块依赖主要依…
Vue 项目性能优化 — 实践指南（网上最全 / 详细） Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分，我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。…
模型适配器：后端数据与前端数据的桥梁 README.md model-adapter 模型适配器: 后端数据与前端数据的桥梁专注于解决前端那些老生常谈的问题(没碰到过算你赢), 如果你遇到过以下场景, 请试用一下嵌套数据: 哎呀~报错了; 哦~访问 xxx 为空了啊空…
巨树：基于 ztree 封装的 Vue 树形组件，轻松实现海量数据的高性能渲染 README.md vue-giant-tree 巨树：基于ztree封装的Vue树形组件，轻松实现海量数据的高性能渲染。为什么需要vue-giant-tree Vue的数据监听机制决定了在大数据量场景下的渲染性能非常低下，基于Vue实现的常规树组件几乎无…
CSS :not伪类可能错误的认识伪类是目前唯一一个可以大规模放心使用的逻辑伪类，非常有用，优点也很突出，但是其中也不乏一些会让人踩坑的地方，本文主要介绍这几个可能错误认识的地方。
JavaScript：Array.splice 与 Array.slice 如何区分splice | BrE splʌɪs, AmE splaɪs |A.transitive verb①(join by interweaving the strands) 绞接 jiǎojiē ‹rope(s)›▸ to splice sth to sth把某物与某物捻接起来▸ to splice two things together绞接两样东西▸ to…
自制数字滚动JS插件分享 jquery.numscroll.js是一款jQuery数字滚动累加动画插件，使用该插件可以快速的制作出炫酷的数字累计动画特效下载地址 github.com/chaorenzeng… 效果展示快速使用 1.引入jquery 和 jquery.numscroll.js <script src="js/jquery-1.10.2.min.js" type="text/javascript" …
56 道高频 JavaScript 与 ES6+ 的面试题及答案前言本文讲解 56 道 JavaScript 和 ES6+ 面试题的内容。复习前端面试的知识，是为了巩固前端的基础知识，最重要的还是平时的积累！注意：文章的题与题之间用下划线分隔开，答案仅供参考。前端硬核面试专题的…
前端插件之 Datatables 使用（下）工欲善其事，必先利其器本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件，上一篇文章介绍了Datatables插件的基本使用，这一篇文章作为上一篇的延续，会介绍Databases的一些高级用法，例如从不同的数据源获取数据、修改数据最终呈现方式、操作Dom改变页面功能、开启服务端数据处理等 …
webpack优化篇对于js，tree-shaking 贯穿整个依赖树，检查被使用的依赖，移除无用的依赖。对于css,purifycss-webpack未使用的css不会被打包进来 1.2 避免重复引入 1.2.1 externals (1)使用变量或外部引用来引入模块，如果两个模块有公共部分，比如jquery，可以避免重复下载。只需在入口.html文件中，使用script引入即可。 (2…
在 Flutter 中使用 WebView 本文示例代码可在微信公众号「01二进制」后台回复「WebView」查看下载前言我们知道在开发 Native App 时经常会有打开网页的需求，可供的选择通常只有两种：在 App 内部打开网页通过调用系统自带浏览器打开网页以「微信」举例…
Vue原理解析（六）：全面深入理解响应式原理-对象篇上一篇： Vue原理解析（五）：彻底搞懂虚拟Dom到真实Dom的生成过程 vue 之所以能数据驱动视图发生改变的关键，就是响应式系统了。其实数据响应式根据数据类型区分，对象和数组它们的实现会有所不同，而且如果只是为了说明响应式原理而说，但不是从整体流程出发，不在 vue 组件化的整体流程中找到响应式原理的位置，…
Deno 与 Node.js 有什么不同？什么是 Deno？它与 Node.js 有什么不同？
react知识点整理50问（未完待续）react会将传入的参数对象和组件的当前状态合并，根据新的状态构建新的react元素树，计算react新树和老树的差异，根据差异最小化对界面进行最小化渲染
Vue CLI3搭建项目实战操作最近公司来了个新项目，之前Vue项目都是用Vue CLI2搭建的，现在准备用Vue CLI3搭建，谨以此文记录实战过程，如果觉得此文对您有帮助，帮忙点个赞，谢谢。持续更新中………… 一、安装Vue CLI3 npm uninstall vue-cli -g npm install -g @vue/cli vue –version 二、搭建Vue项目新建文件夹，注意文件名字最好不…
Webpack发布策略前一篇文章 Webapck基础搭建我们了解了一下 Webpack 的基本配置,已经可以使用它简单的搭建一个打包环境。但是，Webpack 的功能不仅仅就这么简单，不然也不会成为前端最流行的模块化打包工具
no-vnc 与 node.js 实现 web 远程桌面VNC（Virtual Network Computing），为一种使用RFB协议的屏幕画面分享及远程操作软件。此软件借由网络，可发送键盘与鼠标的动作及即时的屏幕画面。
21个让React 开发更高效更有趣的工具为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！下列工具中的重要性与排序无关。 1.Webpack Bundle Analyzer 有没有想过你的应用程序的哪些包或哪部…
你理解错误的Vue nextTick 使用过Vue的小伙伴们都知道，Vue里的nextTick可以获取到更新后的DOM, 今天我就来讲解下nextTick里面究竟做了什么？开始讲解前，我们需要知道了解一个概念，那就是Event Loop Event Loop Event Loop翻译过来就是事件循环 , 一个Event Loop会包括一个或多个task队列，持续线程会从队列中取出最早进入队列的任务进…
简单理解梯度下降算法及js实现看了很多文章，梯度下降算法描述都比较艰涩难懂比如说: 目标函数f(θ)关于参数θ的梯度将是损失函数（loss function）上升最快的方向。然后会推导出下面这个公式。
精读 Nodejs V12 Node12 与以往的版本不同，带来了许多重大升级，包括更多 V8 特性，Http 解析速度的提升，启动速度的提升，更好的诊断报告、内置堆分析工具，ESM 模块的更新等。
论一个低配版 Web 实时通信库是如何实现的（EventSource 篇）前情提要话说上回说到！那WebSocket大侠,巧借http之内力，破了敌阵的双工鸳鸯锁，终于突出重围。然而玄难未了，此时web森林中飞出一只银头红缨枪，划破夜色。 “莫非!?” websocket大侠喃喃念道，”你，你莫不是就是那个手使单向追魂枪的。。。” “正是在下！”，那人厉声喝道。只见那胸前的纹章铭刻着几个洋文—— …
前端也能玩硬件：在ESP32上运行JavaScript 只想要可执行固件的请直接下载： github.com/nodemcujs/n… 本文的主要目的是描述如何让 ESP32 芯片运行 JavaScript，并且让 web 前端开发人员也能玩转硬件。作者之前是 web 前端开发工程师，所以文章会尽量站在 web 前端开发工程师的角度，抛开底层的硬件知识，去掉一些目前不需要关心的，将重点放在软件上。尽管这…
React Developers的10个超实用神奇工具React是一个用于构建用户界面的JavaScript库。但是，很多人都不知道，其实有非常多的有助于我们更好地使用React，提升用户开发体验的优秀工具。
javascript之闭包六（闭包的作用与注意事项）闭包：内部函数保存到外部当内部函数被保存到外部时，将会生成闭包。闭包会导致原有作用域链不释放，造成内存泄漏（内存占用）一）闭包的作用实现公有变量： eg：函数累加器可以做缓存（存储结构）：eg:eater 可以实现封装，属性私有化：eg:new Person(); 模块化开发，防止污染全局变量二…
【Cute-Webpack】Webpack4 入门手册（共 18 章）最近和部门老大，一起在研究团队【EFT – 前端新手村】的建设，目的在于：帮助新人快速了解和融入公司团队，帮助零基础新人学习和入门前端开发并且达到公司业务开发水平。
Node.JS 识别图片类型通过切文件名称后缀来获得图片格式的方式是不准确的，因为文件后缀是可以被强行更改的，这样一个.gif 图片也可以被保存成.jpg,