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

【2019 前端进阶之路】深入 Vue 响应式原理，活捉一个 MVVM（超详细）；element-ui 通用表单封装及VUE JSX应用；记一次用vue做的活动页；揭秘前端存储；前端性能优化不完全手册；Javascript之Object.defineProperty方法；对js陀螺仪的认知理解；Chrome 75 将原生支持图片懒加载

【2019 前端进阶之路】深入 Vue 响应式原理，活捉一个 MVVM（超详细）作为 Vue 面试中的必考题之一，Vue 的响应式原理，想必用过 Vue 的同学都不会陌生，Vue 官方文档对响应式要注意的问题也都做了详细的说明。但是对于刚接触或者了解不多的同学来说，可能还会感到困惑：为什么不能检测到对象属性的添加或删除？为什么不支持通过索引设置数组成员？相信看完本期文章，你一定会豁然开朗…
element-ui 通用表单封装及VUE JSX应用一般在做后台OA的时候会发现表单重复代码比较多，且逻辑基本一样，每次新加一个表单都需要拷贝基本一致的代码结构，然后只是简单地修改对应的字段进行开发二、预期结果提取重复的表单逻辑形成通用的组件，通过约定的JSON数据结构配置生成表单 1、使用方法 <common-form :form-option="formOption&quot…
记一次用vue做的活动页最近，公司的PR提了一个需求自动获取七天新上传的并且审核通过的商品做成固定的链接的一个活动页面。当时想了一想就用vue做了，感觉效果还行，在这分享一下我是如何做的希望对大家有一点点帮助。
揭秘前端存储最近在项目中使用了部分的前端存储，之前只有一些简单的了解，今天就趁这个机会把前端存储进行深入研究一番。写在开始前端存储的好处：方便网页的加载，避免了在发送请求收到响应前页面的空白期。也可以在非强制性要求实时最新数据时减少向服务端的请求，加快渲染速度。在网络不佳或无网络时仍有离…
前端性能优化不完全手册3.浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;
Javascript之Object.defineProperty方法 ES5的Object中有一个方法：Object.defineProperty,这个方法可以直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象 (摘自MDN)。 1.基本语法 Object.defineProperty(obj, prop, descriptor) 复制代码其中： obj: （必需, Object）即将在其上定义属性的目标对象 prop: …
对js陀螺仪的认知理解监听 deviceorientation window.addEventListener("deviceorientation", handleOrientation, true); 复制代码 event中包含以下几个值属性描述 type 事件的类型。 bubbles 事件是否正常起泡 cancelable 该活…
《喜大普奔！Chrome 75 将原生支持图片懒加载》4 月 6 日，Google 的 Chrome & Web 平台工程经理 Addy Osmani 在个人博客发文，介绍到 <img> 和 <iframe> 的 loading 将新增一个属性：lazy。
通过几个问题深入分析Vue中的diff原理在使用Vue渲染“可删减”的列表时，错误的使用index作为key，导致列表视图出现错乱。点击查看问题复现步骤：右侧有两行，在第一行的Input里输入1，在第二行Input里输入2，然后点第一行的“×“删除第一行期待结果：删除第一行后，应该变成“请输入 dog 的个数：2” 实际结果：删除第一行后，变成了“请…
迁移iOS API到前端并实现前后端分离（非Node.js）封装使用ES5的写法。ES6 class不支持私有属性，不少浏览器暂时不支持ES6语法，虽然有babel，还是很容易搞成和IE8以下不兼容，不采用。 function A(){ var privateAttr = ‘a’ /*使用私有属性的公有方法必须在构造函数中声明。为了减少内存的损耗，可以在构造函数中声明get/set方法或者在prototype中实…
《第五届中国CSSConf开发者大会》参会总结对于我来讲，虽然做前端那么多年，但对 CSS 的探索非常少，很多 CSS 知识还是在毕业之前积累下来。揣着一本《精通CSS:高级Web标准解决方案(第二版)》（现在出第三版了，这是我在 CSS 道路上的启蒙书）在前端路上…
你猜一个 TCP 连接上面能发多少个 HTTP 请求一道经典的面试题是从 URL 在浏览器被被输入到页面展现的过程中发生了什么，大多数回答都是说请求响应之后 DOM 怎么被构建，被绘制出来。但是你有没有想过，收到的 HTML 如果包含几十个图片标签，这些图片是以什么方式、什么顺序、建立了多少连接、使用什么协议被下载下来的呢？要搞懂这个问题，我们需要先解决下…
**超详细的**10种排序算法原理及 JS 实现
深入理解前端性能监控在同样的网络环境下，有两个同样能满足你的需求的网站，一个唰的一下就加载出来了，另一个白屏转圈转了半天内容才出来，如果让你选择，你会用哪一个？
vue.js实现一个会动的简历(包含底部导航功能，编辑功能)首先要分析打字的原理实现，假设我们定义一个字符串str,它等于一长串注释加CSS代码，并且我们看到，当css代码写完一个分号的时候，它写的样式就会生效。我们知道要想让一段CSS代码在页面生效，只需要将其放在一对…
如何优化我们的代码（vue项目）作为一个前端，可能绝大多数的时间都是在写的业务代码，可能时间一长，大家会觉得乏味、没意思等等，但是其实就算只是写业务代码，我们也依然能够找到有兴趣的点，说的简单一点就是代码优化，不仅仅局限在业务逻辑这块，像是代码复用、效率等等都是我们可以加以改进的地方，学会在业务代码中找到不足，总结经验，这样日…
奇思妙想之用JS给图片加口令 *本文原创作者：w2sfoot，本文属于FreeBuf原创奖励计划，未经许可禁止转载本文展示一种用JS给图片加口令的方法，可以将任意图片转化为html，输入正确的口令才能打开查看图片。效果如下：效果说明 1.它最终只有一个文件。并非一张图片和一个html，不是在html中引用图片，而是将图片放入了html。 2….
vue项目封装icon 在项目中常遇到使用图标的地方，找了许多解决方式，最终还是选择了iconfont图标作为常用图标库。但是在实际开发当中，使用iconfont提供的开发方式有诸多不便的地方。例如当需要新增一个图标是，需要更新在线链接，然后再将项目当中的链接替换。接下来记录一次如何在vue中封装icon，更高效的使用icon。本篇文章…
996icu 的 webpack 插件 README.md 一个帮助 webpack 拥有假期，拒绝 996，拒绝 ICU，提高工作效率的 webpack 插件当然，他也帮助开发者早点下班这个插件在非工作时间将使 webpack 拒绝编译打包使用 npm i webpack-plugin-nns-icu…
javascript性能提升之路在平时工作做项目的过程中我们有时候会遇到页面加载很久才加载出来的情况，这样严重影响了用户的体验效果。虽然说有时候可能是因为网络问题，但有些时候确实是前端代码没有足够优化导致的。所以通过查阅相关资料并实践后，总结出如下知识点来提升性能。有什么写得不对的地方还希望各路大神指出并加以指点。 1、数据访…
为你的 JavaScript 代码日志着色在使用 JavaScript 开发项目，可借助 console.log 来打印日志，以便捷分析问题；但，当接触相对比较项目，纯黑色的日志输出，就会使得其作用大大削弱；虽然 info ， wran 、 error 等方法会区别颜色输出，但各自皆有其职责，不便挪来加以滥用；此时，就需求扩展些方法，来为你的 JavaScript 代码日志…
不是后端也应该知道的 web 服务、子服务、服务的部署 web 服务是什么 1. 定义我们先来看一个很通俗的定义，来自于wiki。 A web service is a service offered by an electronic device to another electronic device, communicating with each other via the World Wide Web. Web service 指的是，一个平台通过 web 向其…
前端面试之JavaScript（一）这三个函数都会改变this的指向，call和apply更适用于在函数运行时改变this；而bind会返回一个新的函数，新函数的this由bind传入的参数决定，所以bind更适用于返回一个新函数，这个函数在将来才会执行，比如DOM添加事件。 // call Function.prototype.myCall = function (ctx = window, …arg) { if (typeof this !=…
JS 中的 this 和 arguments 在 JavaScript 中，函数有两种调用方式： function sum(x, y) { return x + y } // 第一种方式 sum(1, 2) // 3 // 第二种方式 sum.call(undefined, 1, 2) // 3 复制代码第一种方式是常用的方法调用函数，第二种是使用 call() 方法调用函数，在使用后者调用函数时，第一个参数便是 this 值。 …
前端面试题:你知道websocket吗? 传统轮询(Traditional Polling) 当前Web应用中较常见的一种持续通信方式，通常采取 setInterval 或者 setTimeout 实现。例如如果我们想要定时获取并刷新页面上的数据，可以结合Ajax写出如下实现： setInterval(function() { $.get("/path/to/server", function(data, status) { console.log(d…
2019 年 Vue 生态圈调查：92% 的开发者将继续用 Vue 2018 年，Vue 在前端圈大火，它的性能也变得越来越稳定，很多初创公司和中小型企业终于意识到了 Vue 的强大威力和巨大价值，同时，Vue 也开始走向大型企业。最近，国外一机构 Monterail 对 Vue 生态圈做了一个调查报告，该报告是在 2018 年 11 月和 12 月进行的，主要是软件开发者，更重要的是，本报告也获得尤雨溪本…
基于 three.js 的 3D 粒子动效实现作者：个推web前端开发工程师梁神一、背景粒子特效是为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块，原理是将无数的单个粒子组合使其呈现出固定形态，借由控制器、脚本来控制其整体或单个的运动，模拟出现真实的效果。three.js是用JavaScript编写的WebGL的第三方库，three.js提供了丰富的API…
JavaScript实现选项卡效果慕课网上JavaScript进阶课最后一个编程挑战，自己也是边做边搜，希望通过最后这个自己的总结加深对节点获取方法的了解。效果分析之HTML结构整个结构由上至下分为两部分，标题块使用列表的方式来做，内容快使用盒子模型。其中，内容块中的内容为了实现换行效果，采用了 <br> ，其实这里每一行用 <p> …
【我在GitHub上找到了北大的计算机课程资料】继上次猿妹在GitHub上找到了中科大的计算机课程资源，昨日，猿妹又在GitHub上找到了北京大学的课程资料。详见
前端面试题 | JS部分（附带答案）目前在找工作，所以各方收集了一堆面试题。其实刷面试题的过程也能更新自己对知识的认识，所以也提醒自己多看多理解。如果对下面题目有更深理解，会实时更新。遇到新题目，也会不定时更新。希望能帮助到部分朋友～一、各种函数方法定义及区别 1. typeof运算符和instanceof运算符以及isPrototypeOf()方法的区别 ty…
我怎样用Node.js自动完成工作的慢慢的花在这些任务上的时间会越来越多。我在 2016 年时在一家网络游戏公司工作时，类似的工作很多。当时我在为游戏构建可配置的模板，这项工作也许很有价值，但是由于要重新设置皮肤，我必须把大约70％的时间消…
【Vue 实践】增加简历市场及 WebSocket 通知-02 最近终于收到一个面试通知：面试官：巴拉巴巴…… 我：巴拉巴拉…… 面试官：你用过 WebSocket 吗？我：Emma……以前了解过，但是没有使用过，不过我近期准备给自己做的简历增加一个市场，当有用户新增简历推送时，在浏览简历市场的用户就可以收到提示。实现效果预览在线源码地址 …
我的前端规范系列-前端专属的目录结构[解决项目中的钉子户]其实该目录结构完全没问题,按职能划分结构非常清晰,api放api,静态资源放assets里等等。但是前端目录结构,笔者认为应该对于页面和组件继续细分。
前端练级攻略(第二部分)在第二部分，我们将重点学习 JavaScript 作为一种独立的语言，如何向界面添加交互性，JavaScript 设计和架构模式，以及如何构建网络应用程序。
Webpack4+Babel7+ES6兼容IE8 前阵子重构了一个挺有意思的项目，是一个基于浏览器环境的数据采集sdk。公司各个产品的前端页面中都嵌入了这个sdk，用于采集用户的行为数据，上传到公司的大数据平台，为后续的运营决策分析提供数据支撑。笔者接手这个项目的时候，前任开发者已经把功能都写差不多了。唯一需要做的就是做下模块化拆分和代码规范，以便…
探索JavaScript的this机制白的不能再白的小白，通过各种渠道学习到了this，和大家分享，有什么错误的话还望指出，共同学习进步。觉得好的话还望点个小赞，为继续坚持写文章增加动力。正文我在想写这篇文章的时候，我是无从下手的。因为我自己也同样说不清在JavaScript中this到底是什么？我们都知道在一些强类型语言中（像java）对this有一…
#前端技术#【常用的前端开发资源推荐】详见：本篇作者整理了一些常用的前端开发资源，涉及 CSS/JS 技巧与文章，正则表达式语法，图片素材与工具，各类视频自学网站等。（作者：yuxiaoxia28）个人整理的一些常用前端开发资源，有事没事多看看，日后不断更新 css技巧 Flex布局阮一峰巧用margin/padding的百分比值实现高度自适应最全Html与CSS布局技巧 h5开发 css小技巧移…
「Vue实战」武装你的项目本文项目基于Vue-Cli3，想知道如何正确搭建请看我之前的文章：「Vue实践」项目升级vue-cli3的正确姿势 1. 接口模块处理 1.1 axios 二次封装很基础的部分，已封装好的请跳过。这里的封装是依据 JWT import axios from ‘axios’ import router from ‘../router’ import {MessageBox, Message} …
JavaScript中的执行上下文和堆栈是什么在这篇文章中，将深入研究JavaScript最基本的部分之一，即执行上下文。在这篇文章的最后，你应该更清楚地理解解释器要做什么，为什么在声明一些函数/变量之前可以使用它们，以及它们的值是如何确定的。什么是执行上下文当JavaScript代码运行时，执行代码的环境是相当重要的。一般有以下三种情况：全局代码…
从零开始开发一个react脚手架（三）开始之前再说一下垫片和presets。前几天突发疑问，create-react-app是怎么做的垫片，因为很多语法或者API不一定兼容所有浏览器，所以需要有垫片(polyfill)去帮我们做兼容。我一开始以为会在entry引入@babel/poly…
ES6+ 常用语法整理箭头函数 {代码…} 扩展运算符 {代码…} 变量声明 {代码…} ES6+ 对于书写来说提供了极大的方便，可能有些地方不那么好理解，多练习就好！
安心学习，重学前端之（js基础篇（1））感觉最近IT圈子有点嗨啊，996.icu大火，也是我们it从业者的心声，活着!=活着。其实无论是在公司，还是回家，技术都融入了我自己的生活吧，只是资本家的操作，不予评论，安心做技术。话扯远了，言归正传，这个文档，是一个分享自己重新学习前端的笔记，这些本来是纸质版的笔记，现在贴出来，分享给大家，篇幅较长 …
对javascript闭包的理解在工作中在很多情况下都会用到闭包，但是当别人问起闭包到底是什么时，总是觉得说不出个所以然来，所以这次准备把闭包这个知识点好好的梳理一遍，以加深对闭包的理解。而且很多时候我们也容易将匿名函数跟闭包弄混，所以在此区分一下。写得不对的地方欢迎各位大神指出。 1、什么是闭包？含义：有权访问…
D3.js上手——折线图折线图是数据统计中经常会用到的图表，用于二维数据的展示，本文将使用D3上手制作一个简单的折线图确定数据表格数据是一家店铺一年的销售量月份销售量(件) 1月 454 2月 628 3月 756 4月 632 …
浅析JavaScript的事件循环机制众所周知，JavaScript的一大特点就是单线程，也就是会按顺序执行代码，同一时间只能做一件事。为什么JavaScript会被设计成单线程？ JavaScript的诞生，一开始是为了解决浏览器用户交互的问题，以及用来操作DOM，基于这个原因，JavaScript被设计成单线程，否则会带来复杂的同步问题。为什么JavaScript需要异步？ …
react hooks 全面转换攻略(一) react本篇之useState,useEffect其中 state 是他的值, setState 是用来设置值的函数, initialState 是初始值
【面试篇】寒冬求职季之你必须要懂的原生JS(上)互联网寒冬之际，各大公司都缩减了HC，甚至是采取了“裁员”措施，在这样的大环境之下，想要获得一份更好的工作，必然需要付出更多的努力。
从源码看Vue的响应式原理前段时间把 vue 源码抽时间看了一遍，耐心点看再结合网上各种分析文章还是比较容易看明白的，没太大问题，唯一的问题就是看完即忘当然了，也不是说啥都不记得了，大概流程以及架构这些东西还是能留下个印象的，对于 Vue 的构建算是有了个整体认知，只是具体到代码级别的细节很难记住多少，不过也情有…
基于promise /A+规范手写promise promise是一个类，是现在比较常用的一个异步解决方案，用来解决之前异步编程的回调地狱问题常见的几种异步编程方法回掉函数事件监听发布订阅 promise generator(一般不用) async、await（es8语法） promise和回调函数对比 promise版 let api = new Promise((resolve,reject)=&g…
发布了头条文章：《2019 年 Vue 生态圈调查：92% 的开发者将继续用 Vue》
使用webpack构建多页应用随着react, vue, angular 三大前端框架在前端领域地位的稳固，SPA应用正在被应用到越来越多的项目之中。然而在某些特殊的应用场景之中，则需要使用到传统的多页应用。在使用webpack进行项目工程化构建时，也需要…
手写简易Promise 首先，我是一名大四前端小白，如果以下内容有错误或值得改进的地方，还请各位大佬多多指点哈（疯狂吐槽） Promise相信大家肯定相当熟悉，但对于像我刚入门的小白来说，想完全理解Promise的内部原理还是挺困难的。 Promise 对象拥有很强大的功能，它允许你为异步操作的成功和失败分别绑定相应的处理方法。这…
帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）作为一名前端工程师，必须搞懂JS中的 prototype 、 __proto__ 与 constructor 属性，相信很多初学者对这些属性存在许多困惑，容易把它们混淆，本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点， __proto__ 属性的两边是各由两个下划线构成（这里为了方便大家看清，在两下划线之间加入了一个空格： _ _p…
web Audio简单学习随着浏览器的越发强大，用浏览器自带的api操作音频已经不是难事了。我们来使用web audio api简单地处理下音频资源。简介在学习web audio api之前，先了解三个概念：音频源，也就是音频输入，可以是直接从设备输入的音频，也可以是远程获取的音频文件。处理节点，分析器和处理器，比如音调节点，音量节点…
JavaScript 内功心法——数据类型原始类型：undefined，null，boolean，string，number，symbol 原始类型是没有函数可以调用的，比如 undefined.toString() 。但是很多人就会有疑问为什么 ‘1’.toString() 可以转换，其实这种情况 ‘1’ 已经被强制转换了，调用的是 String 类型的 toString 方法，其实 String 类型是对象类型。其实…
Vue 路由知识点归纳总结最近做项目才发现，我确实对 vue-router 太不熟悉了，都只了解个简单用法就开始搞了，本来很简单的问题，都搞不清楚。现在重新看一遍文档，重新梳理一下。
关于 JavaScript 的原型你应该知道的所有事情原文地址大多数时候， JavaScript 原型让刚开始学习 JavaScript 的人困惑——尤其是有 C++ 或者 Java 背景的人。在 JavaScript 中，相较于 C++ 和 Java，继承有一些不同的作用。JavaScript 继承是众所周知的 “原型继承”。当你在 JavaScript 中遇到类时，事情就变得有点困难了。新的语法 class 看起…
Vue组件之间通信，父到子，子到父，非父子组件之间数据传递梳理1、子组件在props中创建一个属性，用以接收父组件传过来的值2、父组件中注册子组件3、在子组件标签中添加子组件props中创建的属性4、把需要传给子组件的值赋给该属性
vuepress部署静态网站踩坑指南2. 实现方式初始化项目-》写好yml->在gitlab配置好ci-》完成我的docker（我的docker其实只是初始化了node的环境）（docker的实现在另一个文章补充）-》push代码到gitlab->gitlab ci自动构建项目发布dist…
css魔法——左边竖条的实现方法问题描述：在只使用一个标签的情况下实现左边竖线通用标签与样式如下：html: <div class=”div1″>实现左边竖线</div> css: {代码…} 方法一：使用border .div1 { border-left: 5px solid red;} 方法…
JavaScript 之函数式编程应用的迭代使程序变得越来越复杂，那么程序员很有必要创造一个结构良好、可读性好、重用性高和可维护性高的代码。
可能是最被误用的 HTTP 响应头之一 Cache-Control: must-revalidate 在 HTTP 客户端（浏览器或者缓存服务器）上，如果某个 URL 对应的缓存过期了，客户端会再次向该 URL 发送一个条件请求（带有If-Modified-Since/If-None-Match请求头），如果服务端（缓存服务器或者源站）返回的状态码是304（没有响应体），则客户端会根据该304响应所包含的一些响应头（Date、Last-Modified、Cache-Contr…
Vue中后台鉴权的另一种思路 – 动态路由的实现与优化借用大佬的一张图，侵权立删前言在今年年初在掘金发布了一篇文章记一次Vue动态渲染路由的实现，现在代码经过不断的Review 现在完全优化了之前的实现方法，代码量减少很多，逻辑更加简单，同时也更加稳定 demo已经部署到github，欢迎体验~~ vue-element-asyncLogin ，你的start是我的动力! 鉴权-前端…
【Git入门看这一篇就够了！】版本控制是一种记录一个或若干文件内容变化，以便将来查阅特定版本修订情况的系统。除了项目源代码，你可以对任何类型的文件进行版本控制。详见（来自：JavaGuide）
对前端跨域方案的认知总结 1、首先肯定是两个域之间的通信 2、重点要记住脚本这两个字最近的一个项目中，做一个公用的后台的壳子（多个后台/域名），然后呢我团队里面的一个小美女做的时候发现一个问题：在这个域名下请求同一个接口这个项目内请求没问题，然而这个壳子中请求的却是无权限访问复制代码示例图如下这…
js 中的Generator 函数首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依…
webpack4生产环境和开发环境的对比近期一直在看webpack4的文档，于是给自己做了这个总结，对比一下生产环境和开发环境的区别。开发环境在项目开发过程中，我们关注的是能否追溯到代码的错误来源，能够及时刷新页面让我们看到代码的实际效果，因此webpack针对开发特点提供了几个插件。 source-map webpack会将代码打包至一个文件中，一旦发生错…
GitHub 上的各大高校资料以及国外公开课视频 2019 第 37 篇文章，总第 61 篇文章本文大约 1800 字，阅读大约需要 5 分钟最近发现兴起了一股在 Github 上大学的潮流，目前可以选择的大学包括清华、北大、上海交通大学、中国科学技术大学、中山大学，然后今天还发现还可以选择上国外的名牌大学，包括斯坦福、麻省理工等。 …
通过 git bisect 快速定位大型工程中的问题本文介绍了如何通过git bisect来快速定位大型工程中所存在的问题上篇文章回顾：公有云运维福利-开源监控小工具：Open-Falcon插件cloud-mon 背景在开发测试一个重IO操作的应用场景时，我们发现SSD的随机混合读写的数值，在 linux 4.9.2内核上和在linux 4.8….
JS中的继承与原型链在面向对象编程中，类之间的共享是通过继承实现的，而在JavaScript中万物皆对象，并没有类的概念(ES6中类仅仅是一个语法糖)，对象之间的共享是通过一个叫做原型的东西实现的。对于原型我们通过 ]、proto 以及 prototype 这三个概念理解其实现继承的思路。 ] 在 ECMAScript 标准中规定…
JavaScript实现经典排序算法先看一下各个算法的时间复杂度和空间复杂度说明：时间复杂度：指的是一个算法执行所耗费的时间空间复杂度指：运行完一个程序所需内存的大小稳定指：如果a=b,a在b的前面，排序后a仍然在b的前面不稳定指：如果a=b，a在b的前面，排序后可能会交换位置下面主要通过文字和动图介绍冒泡排序、选择排序、快…