20190412 前端开发日报-前端开发博客

前端性能优化不完全手册；【2019 前端进阶之路】深入 Vue 响应式原理，活捉一个 MVVM（超详细）；Javascript之Object.defineProperty方法；揭秘前端存储；对js陀螺仪的认知理解；迁移iOS API到前端并实现前后端分离（非Node.js）；Chrome 75 将原生支持图片懒加载；记一次用vue做的活动页

前端性能优化不完全手册3.浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;
【2019 前端进阶之路】深入 Vue 响应式原理，活捉一个 MVVM（超详细）作为 Vue 面试中的必考题之一，Vue 的响应式原理，想必用过 Vue 的同学都不会陌生，Vue 官方文档对响应式要注意的问题也都做了详细的说明。但是对于刚接触或者了解不多的同学来说，可能还会感到困惑：为什么不能检测到对象属性的添加或删除？为什么不支持通过索引设置数组成员？相信看完本期文章，你一定会豁然开朗…
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 该活…
迁移iOS API到前端并实现前后端分离（非Node.js）封装使用ES5的写法。ES6 class不支持私有属性，不少浏览器暂时不支持ES6语法，虽然有babel，还是很容易搞成和IE8以下不兼容，不采用。 function A(){ var privateAttr = ‘a’ /*使用私有属性的公有方法必须在构造函数中声明。为了减少内存的损耗，可以在构造函数中声明get/set方法或者在prototype中实…
《喜大普奔！Chrome 75 将原生支持图片懒加载》4 月 6 日，Google 的 Chrome & Web 平台工程经理 Addy Osmani 在个人博客发文，介绍到 <img> 和 <iframe> 的 loading 将新增一个属性：lazy。
记一次用vue做的活动页最近，公司的PR提了一个需求自动获取七天新上传的并且审核通过的商品做成固定的链接的一个活动页面。当时想了一想就用vue做了，感觉效果还行，在这分享一下我是如何做的希望对大家有一点点帮助。
element-ui 通用表单封装及VUE JSX应用一般在做后台OA的时候会发现表单重复代码比较多，且逻辑基本一样，每次新加一个表单都需要拷贝基本一致的代码结构，然后只是简单地修改对应的字段进行开发二、预期结果提取重复的表单逻辑形成通用的组件，通过约定的JSON数据结构配置生成表单 1、使用方法 <common-form :form-option="formOption&quot…
《第五届中国CSSConf开发者大会》参会总结对于我来讲，虽然做前端那么多年，但对 CSS 的探索非常少，很多 CSS 知识还是在毕业之前积累下来。揣着一本《精通CSS:高级Web标准解决方案(第二版)》（现在出第三版了，这是我在 CSS 道路上的启蒙书）在前端路上…
通过几个问题深入分析Vue中的diff原理在使用Vue渲染“可删减”的列表时，错误的使用index作为key，导致列表视图出现错乱。点击查看问题复现步骤：右侧有两行，在第一行的Input里输入1，在第二行Input里输入2，然后点第一行的“×“删除第一行期待结果：删除第一行后，应该变成“请输入 dog 的个数：2” 实际结果：删除第一行后，变成了“请…
前端面试之JavaScript（一）这三个函数都会改变this的指向，call和apply更适用于在函数运行时改变this；而bind会返回一个新的函数，新函数的this由bind传入的参数决定，所以bind更适用于返回一个新函数，这个函数在将来才会执行，比如DOM添加事件。 // call Function.prototype.myCall = function (ctx = window, …arg) { if (typeof this !=…
前端面试题:你知道websocket吗? 传统轮询(Traditional Polling) 当前Web应用中较常见的一种持续通信方式，通常采取 setInterval 或者 setTimeout 实现。例如如果我们想要定时获取并刷新页面上的数据，可以结合Ajax写出如下实现： setInterval(function() { $.get("/path/to/server", function(data, status) { console.log(d…
ES6+ 常用语法整理箭头函数 {代码…} 扩展运算符 {代码…} 变量声明 {代码…} ES6+ 对于书写来说提供了极大的方便，可能有些地方不那么好理解，多练习就好！
从源码看Vue的响应式原理前段时间把 vue 源码抽时间看了一遍，耐心点看再结合网上各种分析文章还是比较容易看明白的，没太大问题，唯一的问题就是看完即忘当然了，也不是说啥都不记得了，大概流程以及架构这些东西还是能留下个印象的，对于 Vue 的构建算是有了个整体认知，只是具体到代码级别的细节很难记住多少，不过也情有…
手写简易Promise 首先，我是一名大四前端小白，如果以下内容有错误或值得改进的地方，还请各位大佬多多指点哈（疯狂吐槽） Promise相信大家肯定相当熟悉，但对于像我刚入门的小白来说，想完全理解Promise的内部原理还是挺困难的。 Promise 对象拥有很强大的功能，它允许你为异步操作的成功和失败分别绑定相应的处理方法。这…
JavaScript 内功心法——数据类型原始类型：undefined，null，boolean，string，number，symbol 原始类型是没有函数可以调用的，比如 undefined.toString() 。但是很多人就会有疑问为什么 ‘1’.toString() 可以转换，其实这种情况 ‘1’ 已经被强制转换了，调用的是 String 类型的 toString 方法，其实 String 类型是对象类型。其实…
对前端跨域方案的认知总结 1、首先肯定是两个域之间的通信 2、重点要记住脚本这两个字最近的一个项目中，做一个公用的后台的壳子（多个后台/域名），然后呢我团队里面的一个小美女做的时候发现一个问题：在这个域名下请求同一个接口这个项目内请求没问题，然而这个壳子中请求的却是无权限访问复制代码示例图如下这…
【Git入门看这一篇就够了！】版本控制是一种记录一个或若干文件内容变化，以便将来查阅特定版本修订情况的系统。除了项目源代码，你可以对任何类型的文件进行版本控制。详见（来自：JavaGuide）
JS知识总结之DOM操作文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。先来看看下面代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"…
实现Promise的first等各种变体本篇文章主要是想通过ES6中Promise提供的几个方法，来实现诸如first、last、none、any等各种变体方法！
Vue 折腾记 – (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件这次的后台管理系统项目选型用了 Vue 来作为主技术栈；因为前端时间用过 React 来写过项目(用了 antd )，感觉很棒棒。这次就排除了 Element UI ,而采用了 Ant Design Vue ; 分析整个项目原型后，发现又可以抽离类似之前的 React表格搜索组件 React 折腾记 – (6) 基于React 16.x+ Antd 3.封装的一个声…
你真的理解javascript中的预编译么？ 1、javascript是一种解释型语言，例如C、Java等强类型语言中的编译阶段，它是没有这个步骤的，因此，javascript中有了类似于强类型语言编译阶段的步骤—预编译，同时，我们需要知道，js引擎不是逐行的解释代码，而是按照代码块解释，即，以<script></script>标签为块，进行解释，另外…
ES6入门之变量的解构赋值数组的解构赋值基本用法 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为结构。在ES6之前想要为变量赋值，只能指定其值，如下： {代码…} 而在ES6中可以写成这样，如下： {代码…} 值…
vue+vuex+json-seiver实现数据展示+分页 2.接口信息: 二丶项目环境 Mockjs:生成模拟数据(含中文名,以及地址) json-server:模拟后端接口 webpack-dev-server:开启服务器环境+接口代理 jquery:使用jquery的ajax拉取数据 vue+vuex:vuex负责数据交互,vue渲染页面 iviewui:ui组件,方便布局搭建开发环境 1.基本环境 Vue…
开发者头条联合主办：NJSD Global 2019 正式开放注册第五届NJSD全球软件大会今年有什么？三个圈，划重点全面覆盖技术领域今年大会背景音乐的指定曲目 BGM《star sky》 ♪ 听了之后您是否感受了到大会的盛大？ NJSD Global 2019 …
如何在 React Native 应用程序中保持动画以 60 FPS 运行来源 | 愿码(ChainDesk.CN)内容编辑愿码Slogan | 连接每个程序员的故事网站 | http://chaindesk.cn 愿码愿景 | 打造全学科IT系统免费课程，助力小白用户、初级工程师0成本免费系统学习、低成本进阶，帮助BAT一线资…
Webpack源码基础-Tapable从使用Hook到源码解析当我第一次看webpack源码的时候，会被其中跳转频繁的源码所迷惑，很多地方不断点甚至找不到头绪，因为plugin是事件系统，。这一切都是因为没有先去了解webpack的依赖库Tapable。 Tapble是webpack在打包过程中，控制打包在什么阶段调用Plugin的库，是一个典型的观察者模式的实现，但实际又比这复杂。为了能让读者最快了…
聊天室应用开发实践（二）：实现基于 Web 的聊天室在上一篇内容中，作者 monkeyHi 已经分享了声网Agora 信令 SDk 的基本使用，可实现的场景，并分析了服务器端 Demo 的接口原理。这一篇，作者将带大家进行简单的实践，实现一个基于 Web 的简单的聊天室雏形。本文首发于 RTC 开发者社区，可以点击这里与作者交流。基于Agora已经发布的 Web 版 Demo，只要简单配…
一个关于JS解决数组相乘问题数组相乘，顾名思义就是将多个数组的每一元素乘（组合）起来。它的结果以几何数级增长，初次遇到此类问题时，常常使人头皮发麻，我们现在以js的角度来解决这个问题。从实例出发众所周知，女孩出门前一般需要经过精心打扮，那么假设你有一个女朋友，她有着3顶帽子，5件衣服，5条裤子，3双鞋子，2只口红，4个包包，2…
【React深入】从Mixin到HOC再到Hook前端发展速度非常之快，页面和组件变得越来越复杂，如何更好的实现状态逻辑复用一直都是应用程序中重要的一部分，这直接关系着应用程序的质量以及维护的难易程度。