20190831 前端开发日报

Vue插槽,你想了解的都在这里;Vue — 使用Mixins;React、Vue在IE的兼容问题;一文彻底理解 JS原型链;javaScript自带的深拷贝;JS数组基本操作——数组遍历到底有多少种方式?;Vue从甜小白到皮大佬系列(四) 自定义指令;Vue基础篇:父子组件间的数据传递

  1. Vue插槽,你想了解的都在这里 插槽将 <slot></slot> 作为子组件承载分发的载体,简单的用法如下 10.1.1 基础用法 var child = { template: `<div class="child"><slot></slot></div>` } var vm = new Vue({ el: ‘#app’, components: { child }, template: `<div id="app&qu…
  2. Vue — 使用Mixins 当你的项目越来越大,你可能会发现在相似的组件里一遍又一遍的在复制粘贴相同的代码段(data,method,watcher等)。当然,你也可以把这些独立文件(指相似的组件)写成一个组件,然后用props来定制它,但是使用太多的props很容易导致混乱。为了避免这个问题,大多数人仅仅还是继续选择添加重复的代码,尽管感觉有更好的…
  3. React、Vue在IE的兼容问题 近期项目需要兼容IE 重大的任务留到我的肩上 左翻翻右找找 小问题难倒英雄汉 解决了一些后抓紧写篇总结 避免各位和我一样 脑袋抓爆 头发掉一地 Vue在IE10中无法获取父元素 原始 let parent = this.$el.parentElement 解决 这玩意还能咋解决 用原生呗 class、id 都行 let parent = document.getEl…
  4. 一文彻底理解 JS原型链 前言: JS原型是面试时候极为重要一个知识点,很多小伙伴都说知道,看过,却只能答出一二,真正能够讲清楚的很少,希望这边文章能够帮助正在学习JS原型的小伙伴们。 一、 构造函数,原型对象以及实例对象之间的关系           1 构造函数(constructor)中有 prototype 属性, …
  5. javaScript自带的深拷贝 译注:通过引用调用可能有点绕,你就当做"用引用作为参数调用"。 JavaScript通过引用传递所有的东西。如果你不知道这句话的意思,那么看下这个例子: function mutate(obj) { obj.a = true; } const obj = {a: false}; mutate(obj) console.log(obj.a); // true 复制代码 函数 mutate 更改了作为参…
  6. JS数组基本操作——数组遍历到底有多少种方式?源于一次面试,一起面试的同事问面试者的一个问题:数组遍历有哪些方式?想来数组操作是平时开发中的常用技能,面试者吞吞吐吐大概就说出了两种方式吧,最后就淘汰掉啦(面试者是个很认真的妹纸,面试都在简单做…
  7. Vue从甜小白到皮大佬系列(四) 自定义指令 啥事指令? Vue从甜小白到皮大佬系列(二) v-指令 指令的钩子函数参数 啥是自定义指令? 在前端开发领域,以前的通用框架是jQuery,jQuery以及基于jQuery构建的通用组件形成了一个庞大的生产系统。现在的通用框架是Angular、React和Vue,每个框架都需要基于自身构建新的组件库,自定义指令好就好在:原先的那些…
  8. Vue基础篇:父子组件间的数据传递 父组件向子组件传递数据:通过属性传递数据;子组件接收数据:通过props <!DOCTYPE html> <html> <head> <title>组件</title> <script type="text/javascript" src="./vue-dev.js"></script> </head> <body> <div id=&…
  9. 从零开始搭建 Vue 脚手架工具(一) 在实际的开发过程中,从零开始建立项目的结构是一件让人头疼的事情,所以各种各样的脚手架工具应运而生。它们功能丰富,但最核心的功能都是能够快速搭建一个完整的项目的结构,开发者只需要在生成的项目结构的基础上进行开发即可,非常简单高效。 接下来就让我们一来看看一个脚手架是如何从0开始搭建的吧。 整体架构…
  10. 当Koa遇上Typescript的时候 最近在做运营侧中台项目的重构,目前的选型是 koa2+typescript。在实际生产中,切实体会到了 typescript 类型带来的好处。 本文来自「心谭博客」的 《当Koa遇上Typescript的时候》 ,更多文章放在了 Github 欢迎交流和Star 为了更形象说明 typescript 的优势,还是先来看一个场景吧: BUG 现场 作为…
  11. vue-cli 3.0脚手架,从入门到放弃(三) ps: huilderx 和vscode 都有自己的快速启动,省了自己手动输入。 启动命令: npm run serve 上面是vscode的 快捷启动,编译完成会生成可访问地址,就是那 蓝色的地址。↑ 将其复制到浏览器。 这个时候会出现这个页面,那么问题来了,为什么访问 localhost:8080 会打开这个页面。如果你能想…
  12. UC 百亿级 PV 的前端监控平台实践 前言 Web承载的业务越来越复杂,用户对于Web的体验要求也越来越高,Web性能的优劣对业务收益也有着非常直接的影响。UC在移动Web领域深耕十年,线上业务大量承载在Web上;本文主要介绍UC百亿级PV前端监控平台,岳鹰全景监控平台的实践历程,阅读时长 10 分钟。 背景 为什么要打造前端监控系统? …
  13. 前端小纠结-axios.js的实战经验 原文地址 总结一下使用 Axios.js 的遇到的注意事项,如有不对欢迎指正。 本文不是一篇分析源码的文章,如果需要看源码解析看这里 axios实例应用及源码剖析 – xhr篇 (走心教程) ,写的非常不错。 axios.js的流程图 先放张图镇楼,后续的问题需要多看看这张图。 axios.js版本问题 之前没有注…
  14. 论一个前端工程师如何快速学习,成长。准备自己的35岁 【-原创精读】前端工程师这个岗位,真的是反人性的 我们来思考一个问题: 一个6年左右经验的前端工程师: 前面两年在用jQuery 期间一直在用React-native(一步一步踩坑过来的那种) 最近两年还在写微信小程序 下面一个2年经验…
  15. 前端页面svg优化webpack+svg-sprite-loader+vue(二) 衔接上一篇文章,这一篇继续写我在那个项目的优化,大图的svg我通过了img src引入了项目,可是还有很多小的svg图标需要引入,如果在用img 引入 过多的网络请求造成不不必要的浪费,于是我有又开始作死了 svg-sprite-loader 因为我这个项目是 自己搭建的 webpack 使用的是vue框架,所以我很自然的想到 svg-sprite-loa…
  16. 在 Web 级集群中动态调整 Pod 资源限制不知道大家有没有过这样的经历,当我们拥有了一套 Kubernetes 集群,然后开始部署应用的时候,我们应该给容器分配多少资源呢?很难说。由于 Kubernetes 自己的机制,我们可以理解容器的资源实质上是一个静态的配…
  17. Vue基础篇:动态组件components和v-once指令 <!DOCTYPE html> <html> <head> <title>动态组件</title> <script type="text/javascript" src="./vue-dev.js"></script> </head> <body> <div id="app"> <child-one v-if="type==’child-one’&…
  18. 基于Vue CLI3 搭建五脏俱全的移动端H5应用 之前开发vue项目,一直是自己搭建脚手架,并没有使用配套的Vue-CLI。一、是3.0之前的CLI无明显优势,配置繁琐;二、是觉得自己从零配置项目可控性更强。 Vue-CLI 3.0 于去年8月份就已发布,却一直没去了解。近日,有新Vue H5项目开发,就想着用Vue CLI3.0脚手架构建项目。并记录一下构建使用过程。 使用脚手架最好的…
  19. es6学习–块级作用域绑定在函数作用域或全局作用域中通过var声明的变量,无论实际声明位置在哪里,都会被当成在当前作用域顶部声明的变量,这就是提升机制。
  20. Vue基础篇: 组件参数校验与非props属性 子组件如何对组件进行约束 父组件通过属性的方式对子组件传递内容数据,而子组件通过props的方式对数据进行接收,这时,子组件可以组件中的props传参的规则,设定属性的数据类型: 单一数据类型的参数校验 如: 指定content必须为字符串 <div id="app"> <child content="hell…
  21. javaScript中this的指向 this => 调用其所在函数对象,而且距离谁近指向谁(常规对象,原型链,getter & setter都适用); 构造函数 this => 被新创建的对象 DOM事件 this => 触发事件的元素 内联事件 bind/call & apply 全局环境 在全局环境下,this 始终指向全局对象(window), 无论是否严格模式; console.log(th…
  22. Swoole学习之网络通信引擎Web服务(四)Http服务器只需要关注请求响应即可,所以只需要监听一个onRequest事件。当有新的Http请求进入就会触发此事件。事件回调函数有2个参数,一个是$request对象,包含了请求的相关信息,如GET/POST请求的数据。
  23. 移动端 Web 最佳实践 README.md mobile-web-best-practice 移动端 web 最佳实践,基于 vue-cli3 搭建的 typescript 项目,可以用于 hybrid 应用或者纯 webapp 开发。以下大部分内容同样适用于 react 等前端框架。 在线体验 体验平台 …
  24. 胜者是 Stream:NodeJS 读取大数据集合几种方法的性能比较(第二部分) 如果你一直在关注我的文章,你应该会看到我几周前发布的一篇博客,这篇博客讨论了使用 Node.js 来读取大型数据集的各种方法。 令我惊讶的是,这篇博客受到了很多读者的喜爱 – 这个主题(对于我来说)似乎在很多其他的帖子、博客或者论坛上已经讨论过了,但是无论如何,它都吸引了很多人的关注。所以,感谢所有花时间…
  25. 聊聊JS DOM变化的监听检测与应用 byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8925 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 JS DOM变化的检测从上往下,从今往古有下面3-5种方法。 一、自定义元素声明周期与DOM变化检测 当我们使用ES6的基础创建自定义元素(Custom Element…
  26. 稍微学一下Vuex原理 博客原文 介绍 Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 。 这种集中管理应用状态的模式相比父子组件通信来说,使数据的通信更方便,状态的更改也更加直观。 Bus 肯定有不少同学在写 Vue 时使用过 new Vue() 创建 bus 进行数据通信。 import Vue from ‘vue’; const bus = new Vue();…
  27. 用 Cesium JS 加载建筑 3dTiles 随着现代浏览器的普及,在 WebGIS 应用中,越来越多的场合需要对城市建筑模型进行展示,目前较流行的解决方案有: Cesium 的 3DTiles Mapbox-gl 的 vector source 根据 height 拉伸 ArcGIS 本文讨论 Cesium 的 3DTiles,什么是 3DTiles https://github.com/AnalyticalGraph…
  28. 老板,vue又双叒叕出bug了,dom总是获取不到。 详解Vue异步更新和nextTick 工作中,用vue开发,经常会碰到用数据驱动dom,然后操作dom却没有效果的情况。如果有用到tab切换加上echarts展示,肯定是气的想砸桌子。下面来谈谈vue中dom的刷新。 什么是DOM异步更新? 所谓异步更新,就是vue中用数据去驱动dom,数据变化了,DOM却不会立即的更新,而是在下一个Tick中更新dom。当然,vue中手动操作…
  29. 从今天开始,成为一名了不起的 JavaScript 工程师 一部站在工程师角度,帮助前端工程师提升能力和视野的书上架了! 点击下方阅读原文可直接查看详情

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流