20180908 前端开发日报

Vue 高版本中一些新特性的使用;「译」JS 引擎核心: 原型优化;[译文] 如何在 JavaScript 中更好地使用数组;用微前端的方式搭建类单页应用;HTTPie 官方文档中文翻译版;如何保障前端项目的代码质量;React Components之间的通信方式了解下;编写更优雅的 JavaScript 代码(长期更新)

  1. Vue 高版本中一些新特性的使用 一、深度作用选择器( >>> ) 严格来说,这个应该是vue-loader的功能。”vue-loader”: “^12.2.0” 在项目开发中,如果业务比较复杂,特别像中台或B端功能页面都不可避免的会用到第三方组件库,产品有时会想对这些组件进行一些UI方面的定制。如果这些组件采用的是有作用域的CSS,父组件想要定…
  2. 「译」JS 引擎核心: 原型优化 本系列主要介绍那些 JS 引擎中用到的核心设计。本文的作者是 V8 引擎的开发者Benedikt andMathias ,但不用担心,这些内容是适用于各大 JS 引擎的。作为一个 JS 开发者,深入了解 JS 引擎的工作原理可以有助于你去解读自己代码的一些性能特征。 在上一篇文章中(原文,译文),我们讨论了 JS 引擎是如何使用 Shapes…
  3. [译文] 如何在 JavaScript 中更好地使用数组 原文链接:Here's how you can make better use of JavaScript arrays 本文短小精悍,我保证。在过去的数个月里,我注意到在我审阅的 pull request 中有四个(关于数组使用的)错误经常出现。同时,我自
  4. 用微前端的方式搭建类单页应用 前言 微前端 由ThoughtWorks 2016年提出,将后端微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。 美团已经是一家拥有几万人规模的大型互联网公司,提升整体效率至关重要,这需要很多内部和外部的管理系统来支撑。由于这些系统之间存在大量的连通和交互诉求,因…
  5. HTTPie 官方文档中文翻译版 HTTPie 是一个命令行 HTTP 客户端。目标是让 CLI 与 Web services 的交互尽可能的更友好。它提供了一个简单的http命令,可以让我们用简单自然的表述发送任意 HTTP 请求,并且可以输出带代码高亮的结果。HTTPie 可以使用在测试、调试以及通用的与 HTTP 交互场景 主要功能特性 自然而且简单的命令…
  6. 如何保障前端项目的代码质量 对于中大型前端项目,项目规范与代码质量尤为重要。当功能需求变更或需要重构时,随心所欲的(糟糕的)代码可能带来比重新开发还麻烦的问题。 1 前端项目代码中的常见问题 1.1 凌乱的书写风格,阅读体验差 这个问题不用作过多阐述,想必接手过他人代码的同学,多少都有些
  7. React Components之间的通信方式了解下 先来几个术语: 官方 我的说法 对应代码 React element React元素 let element=<span>A爆了</span> Component 组件 class App extends React.
  8. 编写更优雅的 JavaScript 代码(长期更新) 优先 ES6 新特性写法 熟练使用 ES6 新特性可以优化代码,更加简洁,代码对比 // 箭头函数 function foo(){ console.log(‘hello world’) } const foo = () => console.log(‘hello world’) // 数组去重 const formatArray = arr => // 数组合并 const newArr = […arr1, …arr2, ‘v…
  9. javascript中字符串常用方法字符串是存储字符的变量,字符串类型的变量在声明的时候,需要放在一对英文的双引号或单引号内,引号内的文本可以写任意字符,如下:
  10. 前端要凉?微软开源Sketch2Code,草图秒变代码 策划编辑 | Natalie 作者 | 微软 ML 博客团队 译者 | 无明 编辑 | Vincent 用户界面设计过程涉及大量创造性的迭代工作。这个过程通常从在白板或白纸上画草图开始,设计师和工程师分享他们的想法,尽力表达出潜在的客户场景或工作流程。当他们在
  11. 想跳槽?还是先看看这些Github面试项目吧】每月我们都会盘点GitHub上的热门开源项目,其中不乏有许多关于面试的开源项目,本文我们将盘点几个开源项目,希望对你们有所帮助。详见 ​​​
  12. 【前端芝士树】如何对元素块实现垂直居中?【前端芝士树】如何对元素块实现垂直居中? 1/利用Flex布局来实现极速居中 The HTML {代码…} The CSS {代码…} 2/利用CSS和JS实现固定长宽容器的极速居中 The HTML {代码…} Horizontal and vertical centeri…
  13. 原生JS实现轮播图——第二章动画实现 在第一章中,已经实现了基本的静态页面的展示,展示效果如下图: 实现轮播图的第二步,就是利用JS实现一系列的动画效果,例如在不进行任何操作的情况下图片循环滚动、点击左右箭头图片向右或者向左滚动、点击底部提示的圆点展示区显示相应的图片。现在我们分为四步来实现所述功能。 图片自动循环滚动 …
  14. 手把手教会使用react开发日历组件提前需要准备好react脚手架开发环境,由于react已经不支持在页面内部通过jsx.transform来转义,我们就自己大了个简易的开发环境
  15. 《你不知道的JS上》笔记编译发生在代码执行前几微秒,简单来说就是js在执行前要进行编译,编译过程发生在代码执行前几微妙,甚至更短。
  16. 关于保障前端项目代码质量的思考 对于中大型前端项目,项目规范与代码质量尤为重要。当功能需求变更或需要重构时,随心所欲的(糟糕的)代码可能带来比重新开发还麻烦的问题。 1 前端项目代码中的常见问题 1.1 凌乱的书写风格,阅读体验差 这个问题不用作过多阐述,想必接手过他
  17. JavaScript客户端检测(判断引擎、浏览器、平台等) 客户端检测是一种补救措施,也是一种行之有效的开发策略。主要用来规避或者突破不同浏览器之间的差异。 完整的判断当前引擎、浏览器、平台的检测代码,请参考client.js 目录 能力检测 怪癖检测
  18. css将两个元素水平对齐,兼容IE8有人会说css实现这种水平对齐要兼容ie8还不简单吗?使用float: left,或者display: inline-block,不就可以了吗?是的,最常用的最简单方式就是上面这两种,但还有一种方式也可以实现,那就是使用display: table-…
  19. 试用 vue-admin-template 写一个自己的dashboard 其实自己还是比较热衷于基于CLI的dashboard,也有心去做一些尝试,比如 用 Nodejs CLI 的方式实现一个TODO应用 – 简书 ,后续也会继续增加新想法到这个里面。但是我今天意识到一个问题,基于CLI的DashBoard的使用场景更适合类似Todo,以及一些快速信息查询和处理(比如我需要快速知道团队的工作进度和工作内容,我并不想…
  20. 前端面试题系列 – 继承大概会用一个系列,讲一下面试过程中经常会问的一些问题,以及我觉得应该可以怎么回答。 当然,我的回答也并不是标准答案,只是我自己的一些理解,也欢迎其他人发表自己的想法。 作为本系列的第一篇文章,就先讲…
  21. 浅谈 TypeScript – 索引类型查询和索引访问 如果你曾经看到如 K extends keyof T 这样的代码,那么你可以阅读下去,看一看我们是如何去理解这样的事情。 interface IPipe { name: string; id: number; } const o: IPipe
  22. 前端每日实战:128# 视频演示如何用纯 CSS 创作一个“女神来了,快让路”的动画效果预览 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 [链接] 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 [链接] …
  23. 微信小游戏和白鹭引擎开发实践》本文按照作者调研和开发顺序初步介绍和理解了微信小游戏和白鹭引擎,并产出了基于白鹭引擎的应用初始化程序egret-wechat-start。 (by 子慕大诗人) ​​​
  24. JStorm 到 Flink 在今日头条的迁移实践 本文将为大家展示字节跳动公司怎么把Storm从J storm迁移到Flink的整个过程以及后续的计划。你可以借此了解字节跳动公司引入Flink的背景以及Flink集群的构建过程。字节跳动公司是如何兼容以前的Jstorm作业以及基于Flink做一个任务管理平台的呢?本文将一一为你揭开这些神秘的面纱。 本文内容如下: …
  25. Vuejs 配合 mint-ui 开发移动端web 这是一个比较着急的事情(两天时间,写一个带视频播放、图片浏览、图文混排列表、上拉刷新、滚动刷新等等的单页),一开始同事使用传统H5+JS+CSS的方式,我担心进度,就硬着头皮上vuejs,为什么说硬着头皮上,原因是这是第二次在项目中使用vuejs,第一次使用的经历并不太好,主要是vuejs在低版本android端的适配确实让人…
  26. 个人理解Vue和React区别 监听数据变化的实现原理不同 Vue 通过 getter/setter 以及一些函数的劫持,能精确知道数据变化,不需要特别的优化就能达到很好的性能 React 默认是通过比较引用的方式进行的,如果不优化(PureComponent/shouldComponentUpdate)可能导致大量不必要的VDOM的重新渲染 为什么 React 不精确监听数据变化…
  27. Nuxt中如何使用Vuex-Store异步获取数据 Nuxt是一个基于Vue.js的通用型框架,它集成了使用Vue开发的绝大数组件/框架。 长话短说如何在Vuex-store中获取异步数据呢? 在Nuxt中由于集合了Vuex还有其他的一些配置,大大的方便了我们使用Vuex;在Nuxt官方文档中写到: 在这里笔者为了方便使用了模块的方式去使用store; 1.1 首先现在store目录下新建…
  28. React源码分析与实现(三):实操DOM Diff 原文链接:Nealyang PersonalBlog 由于源码中diff算法掺杂了太多别的功能模块,并且dom diff相对于之前的代码实现来说还是有些麻烦的,尤其是列表对比的算法,所以这里我们单独拿出来说他实现 前言 众所周知,React中最为人称赞的
  29. 开发自己的react-native组件并发布到npm 写在前面 在做react-native开发的时候,我们经常会找到一些第三方组件,并且通过npm install的方式很方便的安装使用。在使用的同时,你是否想过,我们自己应该如何开发并发布一个组件呢?不管是给自己的多个项目共用,或者开源给到别人用,这都是
  30. React专题:操作DOM 本文是『horseshoe·React专题』系列文章之一,后续会有更多专题推出 来我的 GitHub repo 阅读完整的专题文章 来我的 个人博客 获得无与伦比的阅读体验 React存在的意义就是状态与UI分离,使开发者不知有DOM,无论魏晋。 不过有些状
  31. GitHub上传项目教程1.首先你需要一个github账号 [链接] 2.使用git需要先安装git工具,这里给出下载地址,下载后一路直接安装即可: [链接] 3.创建个新项目 4.填下项目资料,完毕后点击 5.复制项目地址 6.接下来就到本地操作了,首先…
  32. 浅谈 TypeScript – 优雅的使用奇技淫巧 这篇文章会介绍一些如何优雅的使用 TypeScript 的奇技淫巧,如果你也有更多的使用技巧不妨评论留言,持续更新; 可选型 如果你能看见 ? 那么在 TypeScript 的世界中,它的表述是可能也许,因此在处理这段逻辑时需要用到 if,如:
  33. 读 VuePress(二):使用 Webpack-chain 链式生成 webpack 配置 vuepress 有三套 webpack 配置:基础配置、dev 配置、build 配置,看似和普通的一个前端项目也没什么差别,但它使用 webpack-chain 生成配置而不是传统的写死配置。 相关源码见 createBaseConfig.js 、 createClientConfig 、 createServerConfig 。 webpack-chain 简介 链式包装器 引入 webpack-chain 后,我…
  34. Keepalived & LVS 搭建高可用的Web服务在本文中,我将会讲述如何在Centos 7下基于Keepalived和LVS技术,实现Web服务的高可用和负载均衡,我们的目标拓扑结构如下图所示

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

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


关注我

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

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

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