20190820 前端开发日报

Js高级程序之旅 : 前端架构初体验(一);可能是你见过最完善的微前端解决方案;个人总结的一些写JS代码的基本规范;使用 Flutter for web 构建了 100+ Widget 实时预览示例;Vue异步更新 – nextTick为什么要microtask优先?;8 道高频出现的 Vue 面试题及答案;使用webpack—安装webpack和webpack-dev-server;一个被忽视的 webpack 插件

  1. Js高级程序之旅 : 前端架构初体验(一) 以前自己做的一些Web应用,基本上都是按照非常传统的方式: 服务器端渲染模板; 利用jQuery的ajax进行异步数据交换。 所以首次接触前端架构类的东西,难免有点无从下手。 经过几天的奋战,以及参阅国内外大牛们的各种Tutorial之后,终于拨开迷雾,缕了些头绪,自己也试着从传统的方式过渡(重构)出了所谓的架…
  2. 可能是你见过最完善的微前端解决方案 Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks. — Micro Frontends 前言 TL;DR 想跳过技术细节直接看怎么实践的同学可以拖到文章底部,直接看最后一节。 目前社区有很多关于微前端架构的介绍,…
  3. 个人总结的一些写JS代码的基本规范 平时工作中虽然有eslint这些工具帮助我们规范一下基本的代码,但更多的还是需要我们自身去注重一下代码质量,以下是我个人的一些经验总结笔记,应该还有很多不足和优化的地方,希望大家多多指教哈,多讨论 1.不要用var,能使用const不用let 2.避免隐式转换,使用全等(===)进行判断 3.不要写冗余判断,比如 flag :…
  4. 使用 Flutter for web 构建了 100+ Widget 实时预览示例使用 Flutter 开发已经接近一年时间了,但是在学习 Flutter 一些 Widget 的时候不能像前端那样有能直接在网站上实时看到效果,每次接触到一个新的 Widget 时都需要花费不少时间才能看到效果,所以我基于 Flutter …
  5. Vue异步更新 – nextTick为什么要microtask优先? 相信大家都知道, Vue 可以做到数据驱动视图更新,比如我们就简单写一个事件如下: methods: { tap() { for (let i = 0; i < 10; i++) { this.a = i; } this.b = 666; }, }, 复制代码 当我们触发这个事件,视图中的 a 和 b 肯定会发现一些变化。 那我们思考一…
  6. 8 道高频出现的 Vue 面试题及答案前言 本文讲解 8 道高频出现的 Vue 面试题及答案。 复习前端面试的知识,是为了巩固前端的基础知识,最重要的还是平时的积累! 注意:文章的题与题之间用下划线分隔开,答案仅供参考。 前端硬核面试专题的完整版…
  7. 使用webpack—安装webpack和webpack-dev-server 1.先确保安装了最新版的Node.js和NPM,并已经了解NPM的基本用法 (以下使用cmd命令行进行) 2.安装webpack (1)全局安装 $ npm install webpack -g (1)局部安装 我并不喜欢全局安装这种方式,因为并不是所有的项目都需要webpack的。通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 …
  8. 一个被忽视的 webpack 插件 如今的前端开发,有可能会面对复杂的环境,所以工程化思维几乎是专业前端工程师必备的。让同一套代码,在不同的环境中运行时,如何让它以最优的方式(尽可能小、尽可能快)加载和执行,是我们需要考虑的问题。 假设我们需要在开发环境中输出额外的调试信息,而在线上环境中不输出,我们可以定义环境变量: …
  9. 非常规:VUE 实现特定场景的主题切换 实现页面皮肤切换,常见的方案有几种:替换 css 链接、替换 className、改变 css 原生变量值、使用 less.modifyVars、props 参数下发等;不同的业务场景,我们一般会选择不同的方法来实现目标。最近在公司运营活动平台上的主题功能的实现 ,我们尝试了一种新的解决方案,实现了页面主题的切换,目标是为了提高项目的可维…
  10. Vue响应式原理 – 关于Array的特别处理 之前写过一篇 响应式原理-如何监听Array的变化 ,最近准备给团队同事分享,发现之前看的太粗糙了,因此决定再写一篇详细版~ 一、如何监听数组索引的变化? (1)案例分析 相信初学 Vue 的同学一定踩过这个坑,改变数组的索引,没有触发视图更新。 比如下面这个案例: var vm = new Vue({ data: { items…
  11. 前端工程化 – 图片自动压缩pre-commit 是git hook 众多钩子中的一个,在每次 git commit 前执行,可以是shell等任何可执行的脚本文件,通过返回0 or 1 来表示commit是否通过。在bash中,非零返回值代表失败.
  12. 图解JavaScript 继承 可能有很多人知道实现继承的方法,却对实现继承的原理不明所以。就像我,在不理解实现原理的情况下,就记不住并且不能正确使用这部分知识。一做题或者一面试,就会各种不坚定,各种懵逼树上懵逼果懵逼树下你和我。后来发现,把这继承画一画,对学习这方面的知识帮助很大。于是想记录一下。(吸收了各路知识,转化成了自…
  13. 基于webpack的组件化pc电商首页项目总结 已经开源在 我的github 坑 写这个栏目的目的主要是方便以后自己回头回顾和深入学习一下每一块东西… webpack相关 一.引入iconfont文件 @font-face { /*原来的iconfont.css文件*/ font-family: "iconfont"; src: url("font/iconfont.eot?t=1565168052702"); /* IE9 */ src…
  14. js之this的简单总结 this 是 js 中的关键字,看起来很混乱,但其实很好理解,用网上通用的一句话来说就是: this 的指向在函数定义时确定不了,只有函数指向的时候才能确定 this 到底指向谁,也即是说this的卒中指向的是那个调用他的对象 总结起来就六个字 谁调用,指向谁 例子1 function foo() { var name = "我爱js"…
  15. 从一个日常bug看Vue的列表key及vnode更新策略 之前在做h5活动的时候,遇到了一个关于vue中列表渲染的bug。当然,bug是我自己写的,和vue没有半毛钱关系。不过在解决bug的过程中,对vue的patch diff的过程进行了一番研究。 在探究过程中,涉及到了vue列表渲染的key的研究,以及vue渲染函数及生命周期的执行过程分析。 bug的由来及重现 场景是这样的: 1. 用vue…
  16. Webpack 3 – 打包从优化到放弃 某一天,我突然发现构建项目会经常失败,直接报错: FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed – JavaScript heap out of memory ,这个错误很明显就是内存不足导致的构建失败。由于项目是在CI / CD 上构建的,而在此期间运维又调整了一下资源上限,因此什么原因导致的还得进一步排查,是由于真的内存不足还…
  17. checkValidity等form原生JS验证方法和属性详细介绍 byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8895 本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。 一、先从form内置验证的外部表现说起 说起form内置验证,很多人想到的是设置 required 这样的HTML属性,然后表单提交的时候出现这样的提示效果: …
  18. threejs 学习之 主要内容: 使用 threejs 创建 20×20 的网格,鼠标移动时,方块跟随移动,点击时在网格任意位置放置方块,按 shift 时,删除当前位置方块。 流程如下: 创建网格 创建一个与网格同样尺寸的平面 创建一个方块 mesh_1 与网格同样的尺寸 一个与网格同样的方块 geometry_2 , 不加入 scene 中 三个事件: …
  19. 「2019 JSConf.Hawaii – Brie.Bunge」大规模应用 TypeScript 这是一个由 simviso 团队对 JSConf.Hawaii 中关于 TypeScript 相关话题进行翻译的文档,内容并非直译,其中有一些是笔者自身的思考。分享者为 Brie.Bunge,Airbnb(爱彼迎)高级前端工程师。 现如下,TypeScript 已然兴起,如果各位小伙伴你们公司还未将开发迁移到 TypeScript 下,亦或正在迁移或者已经迁移了,那么…
  20. 使用node.js开发命令行工具(一)创建与发布 在前端工程化的大环境下,合理运用node和npm script,可以大大提高我们的开发效率,那么怎么才能开发一个自己的node工具呢? 准备工作 确保自己有node环境,并且node已经配置到环境变量。没安装的可以到官网下载或者 国内镜像下载 。 第一行node代码 新建一个js文件,比如: hello.js 。 在js文件中键…
  21. React Fiber架构:可控的“调用栈”time slicing(分片) 为了让浏览器保持60fps,因此渲染一帧需要在16.67ms内完成,否则会造成“卡顿”
  22. 你的第一个 Nodejs 模块编译器 – (2) 在前文的 What?Why?之后就是我们最直接的如何实现我们的模块编译器了。 在 Nodejs 中其自带的模块化方法 require 是最常见的一种引入其他模块的方式。我们来简单回顾一下 Nodejs 中如何使用 require 来引入其他模块。 题目:实现一个简单的缓存模块 cache ,实现 get 和 set 方法来获取和设置 key : value…
  23. Git常用套路(04)分支开发前提:常见的分支策略有两种,一种是所有人在一个开发分支上开发,另一个种是每个需求都会从新拉取一个新分支
  24. JavaScript 深拷贝与浅拷贝 对于很多初次接触JavaScript的读者来说,想要实现对象的拷贝/复制,就是单纯的使用赋值语句(=)来实现需求。但是,这样的方式是不全面的,这样的方法对于简单类型的数据来说是没有问题的,但是如果是对于像对象这样的复杂的数据类型来说,这样的实现方式有就会给你带来意想不到的问题。那么,如果不能简单的用赋值语句实…
  25. JS脱机版:图片压缩工具 最近项目中对图片的要求比较高,经常会进行图片压缩和修改分辨率的操作,久而久之就觉得自己写一个吧,于是花了一天的功夫完成了这个脱机版图片压缩工具,无需服务器,本地即可运行。 参考了张鑫旭大佬的两篇文章,链接放在文章的最下方,感兴趣的可以深入了解下。 效果展示 首先看看图片上传的效果: …
  26. JavaScript:作用链、作用域函数对象和其它对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[scope]],由ECMA-262标准第三版定义,该内部属性包含了函数被创建的作用域中对象的集合,这…
  27. JavaScript正则表达式一瞥 正则表达式是一门强大的技术,尤其在处理文本上颇有卓效,本文是在阅读诸多资料后,写给自己的正则入门资料,主要参考的 老姚的《正则迷你书》 ,非常感谢大佬的无私奉献,十分推荐去看原书,本人只是拾人牙慧,另外注入了自己对正则的一些理解,适合入门看 正则表达式语法 正则表达式从匹配形式来说, 要么匹配字…

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

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


关注我

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

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

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