20180122 前端开发周报

移动端弹性滑动以及Vue记录滑动位置;js异步发展简史;由变量提升谈谈 JavaScript Execution Context;从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理;ES6的7个实用技巧;javascript 最长公共子序列;自己动手写一个 SimpleVue;实例化vue发生了什么?(详解vue生命周期)

  1. 移动端弹性滑动以及vue记录滑动位置 -webkit-overflow-scrolling介绍 -webkit-overflow-scrolling: auto | touch; auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止touch:滚动回弹效果,当手指从触摸屏上
  2. js异步发展简史 什么是异步? 所谓异步,简单来说就是异步任务(不会马上就完成的任务);但是js不会等待你这个任务完成,而是直接执行下边的任务;等到你上边的任务完成之后才会去执行相应的逻辑。比如js读取文件就是异步的过程。 异步编程的语法目标,就是怎样让它更像同步编程 1、回调函数 场景: 读取一个文件 let fs = r...
  3. 由变量提升谈谈 JavaScript Execution Context JavaScript不同于其他语言,存在变量提升,如下面代码例子: console.log(x) var x = 'hello world'; 这段代码不会报错,会输出 undefined。这就是所谓的变量提升,但具体细节JS引擎是怎么处理的,还需要理解JS的
  4. 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正。 ----------超长文+多图预警,需要花费不少时间。---------- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏览器多进程、浏览器内...
  5. ES6的7个实用技巧7 Hacks for ES6 Developers Hack #1 交换元素 利用数组解构来实现值的互换 {代码...} Hack #2 调试 我们经常使用console.log()来进行调试,试试console.table()也无妨。 {代码...} Hack #3 单条语句 ES6时代,操...
  6. javascript 最长公共子序列最长公共子序列(Longest Common Subsequence LCS)是从给定的两个序列X和Y中取出尽可能多的一部分字符,按照它们在原序列排列的先后次序排列得到。LCS问题的算法用途广泛,如在软件不同版本的管理中,用LCS算法...
  7. 自己动手写一个 SimpleVue 最近看到一句话很有感触 —— 有人问 35 岁之后你还会在写代码吗?各种中年程序员的言论充斥的耳朵,好像中年就不该写代码了,但是我想说,若干年以后,有人问你闲来无事你会干什么,我想我会说,写代码,我想这个答案就够了,年龄不是你不爱的理由。 理论基础 双向绑定是 MVVM 框架最核心之处,那么双向绑定的核心是...
  8. 实例化vue发生了什么?(详解vue生命周期)实例化vue发生了什么?(详解vue生命周期) {代码...} 我在Github上建立了一个存放vue笔记的仓库,以后会陆续更新一些知识和项目中遇到的坑,有兴趣的同学可以去看看哈(欢迎star)! 传送门 实例化一个Vue {代码...} 1....
  9. 2018 最值得关注的 JavaScript 趋势 如果你在过去的 2017 年有过一连串的规划,那么这篇文章适合你。 2017 年发生了很多事情,我们一直在 X-Team 中仔细观察,并想着如何让 2018 更加富有激情和创新。 你也可以利用这篇文章来帮助你完善 2018 的计划或者让你做出更有创意的计划。 React vs. Vue.js 我们直接上好东西吧:不...
  10. CSS Gird 布局 指南 CSS Grid Layout 原文地址: https://css-tricks.com/snippets/css/complete-guide-grid/ 简介 CSS网格布局是一个二维的基于网格的布局系统, 其目的在于完全改变我们设计基于网络的用户界面
  11. Ajax 数据异步交互 #1.ajax简介 AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 #2.AJAX 实例 查询提示 <!DOCTYPE html> <html> <head&gt...
  12. 年终跳槽小结-前端篇年底了,又将迎来一波跳槽小高峰。 算下来工作也两年半了,最终还是决定换个环境继续折腾。跳槽的目的无疑是为了更好的发展以及更高的薪酬。然而我并不打算讨论这些“政治问题”,而是想回顾下这些年来,自己在技术...
  13. 回顾 2017,展望 2018 JavaScript 发展趋势 原文出处 The Top JavaScript Trends to Watch in 2018 – Hacker Noon 如果2017年你被项目折磨的死去活来,那么这篇文章就是为你准备的。 你可以把本文作为一个指南,为2018规划您的学习计划。 React vs. Vue.js 没有多少人相信Vue将成...
  14. 程序员装X必备—19个JS简写技巧,让你写代码速度翻倍 代码精炼是每个有追求的程序所向往的,本文总结了19个JavaScript的简写技术,其中包括三元操作符、短路求值简写方式、声明变量简写方法等等,希望对你有帮助。
  15. HTML 5.2 有哪些新内容? 原文地址:What’s New in HTML 5.2? 原文作者:bitsofco 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:lsvih 校对者:Raoul1996, 吃土小2叉 HTML 5.2 有哪些
  16. 良好的HTML编码风格 首发于fxm5547的博客 HTML编码规范 1 前言 HTML作为描述网页结构的超文本标记语言,在百度一直有着广泛的应用。本文档的目标是使HTML代码风格保持一致,容易被理解和被维护。 2 代码风格 使用 2 个空格做为一个缩进层级,不允许使用 4 个空格
  17. 如何用 React 实现滚动动画简评:滚动动画让组件向下滚动时出现在页面上。这篇文章是介绍如何使用 React 和 css3 做到这一点。 这里将通过构建一个简单的例子来学习这个滚动动画。 首先构建 Header 组件。 {代码...} 添加样式。 {代码...} ...
  18. 我的Promise秘密初探之小试牛刀前端开发中,相信很多读者都使用过AJAX,这种比较:ox: 逼的异步处理方式,确实在一定程度上方便和简化了我们的某些需求,但有时候也会遇到在一个操作中,会需要多个异步请求的情况,在以往的处理中,比如笔者就曾做过2个及多个AJAX层层嵌套着处理的方式,这种方式,在当时看上去也可以满足一般的需求,但看着别扭,总...
  19. JavaScript 知识点串烧——对象 说到JavaScript,我们就总是会提到对象,说到对象我们就会提到原型继承,这是我们接触JavaScript时经常会遇到的,尤其是在面试中我们也是会经常遇到。一般知道对象,理解原型看起来是足够够了,但是有一些小细节的问题,我想我们还是要注意的,下面我们就来说说。 对象的常见创建方法 new Object() 实现对象的继承...
  20. 前端每周清单第 48 期:Slack Webpack 构建优化,CSS 命名规范与用户追踪,Vue.js 单元测试 前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID: frontshow),及时获取前端每周清单。 新闻热点 国内国外,前
  21. 我们编写 React 组件的最佳实践刚接触 React 的时候,在一个又一个的教程上面看到很多种编写组件的函数,尽管那时候 React 框架已经相当成熟,但是并没有一个固定的规则去规范我们去写代码。 在过去的一年里,我们在不断的完善我们的做法,直到...
  22. 饼图?我选D3.js~ D3是什么? Data-Driven Documents(数据驱动文档)的简称。 一个用来使用web标准做数据可视化的JavaScript库。强大的可视化,动态交互和数据驱动的DOM操作方法完美结合,让我们绘制图表库更自由。 技能? JavaScript
  23. css中的浮动和BFC 写了两篇,发现自己给自己挖了好多坑,现在得一点点慢慢填了。这次还是继续写一篇css的内容,来看一下浮动和BFC这两个概念。 浮动float float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围
  24. vue-cli之webpack3构建全面提速优化 前言 伴随着vue的全球化,各种vue的组件框架越来越完善,从早期的element-ui到vux,iview等越来越多高质量的项目,使用vue进行前端构建已然是一件工程化,模块化,敏捷化的事情 在这其中,相信很多人都会选择官方的vue-cli初始化工程模板,然
  25. 手把手教你webpack如何打包才能输出最优生产文件前言 webpack打包大多数前端工程师们都已经用过,然后今天我想和大家分享的是webpack如何打包才能输出最优生产环境文件,主要针对两种人群:未自己手把手配置过webpack的人、配置过webpack但是不熟悉或者不知所以...
  26. vue-piczoom:基于vue2.x的电商图片放大镜插件 最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的vue插件,于是自己撸了一个,分享一下。小白第一次分享,各位大神莫见笑。 vue-piczoom A picture magnifier
  27. 解读 Vue 的模板编译 Vue 的 template 是如何编译成真正的 HTML 并做到双向绑定等等特殊功能的呢?这篇文章会给你一个答案。
  28. 基于JS快速生成各种网格布局工具Grid介绍 作者:云荒杯倾 写在前面 这两天了解了一下css的grid布局,发现确实很好用。看了几篇博客,了解了它的几个常用属性后,可以快速生成一个网格布局。相较于传统的float、定位等显得更成体系,更规范,不需要一些hack做法。 虽然grid
  29. 如何继承Date对象?由一道题彻底弄懂JS继承前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正。 ----------长文+多图预警,需要花费一定时间---------- 故事是从一次实际需求中开始的。。。 某天,某人向我寻求了一次帮助,要协助写...
  30. Babel 配置技巧 当下,每个写 JavaScript 的猿可能都在或多或少地使用 Babel。借助 Babel,我们可以使用最新的 ECMAScript 特性,而不用太关注浏览器支持。Babel 在背后进行了许多复杂的转换,我们要做的,就是写配置文件,告诉 Babel 我们想要什么。下面就来看看一些配置技巧吧。 在 .babelrc 中使用 JS All Babel API opti...
  31. CSS Grid 系列(下)-使用Grid布局构建网站首页by Chris House 译者:若愚老师想要更好的阅读体验可在饥人谷技术博客 查看原文要看懂这篇文章,推荐先简单过一遍姊妹篇 CSS Grid 系列(上)-Grid布局完整指南 当我开始一个项目,并开始计划如何布局主页时,我的...
  32. JavaScript (a == 1 && a == 2 && a == 3) 可能为 true 吗?
  33. 超简单入门Vuex小示例 本文旨在通过一个简单的例子,练习vuex的几个常用方法,使初学者以最快的速度跑起来一个vue + vuex的示例。 学习vuex需要你知道vue的一些基础知识和用法。相信点开本文的同学都具备这个基础。 另外对vuex已经比较熟悉的大佬可以忽略本文。 生成基于vue的项目 基于vue-cli脚手架生成一个vue项目 常用npm命令: ...
  34. iOS 下 JavaScript 实现复制功能 1. 背景 最近要实现一个小需求:ios APP下,用户点击一个按钮,系统自动复制一段文本到系统剪贴板。通过查资料发现,iOS 出于安全性的考虑,对 Clipboard API 的使用有诸多限制。但是在 iOS 10 及以上版本中,可以通过 hack 的方式来实现该功能。 2. 方案 主要参考的是 SO 上的这个答案 ,在 iOS 10 及以上...
  35. [中文] Bootstrap 4 正式发布 Bootstrap 4 2018.01.18 经过我们多年的努力, Bootstrap 4 终于来了!整个团队和我已经无法用语言描述对这个版本发布的喜悦之情,但是我会尽力去表达的。 感谢所有人,特别是团队成员,以及所有在 pull reques
  36. 前端数据监控到底在监控什么? 原文地址 前端数据监控一般分为性能数据监控和线上异常监控。本文对这两块数据的监控原理和方法进行整理说明。 性能数据 统计方案 代码监控 将监控代码注入到页面中,手动计算时间差或者使用浏览器API进行数据统计。 工具监控 不将统计代码注入到页面中,一般借助虚拟机对...

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

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

原文:20180122 前端开发周报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20180122.html)