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

前端中台系统常见问题剖析与解决方案；判断浏览器是否支持 webp 的几种解决方法；JavaScript进阶之手写Promise；JavaScript的数据类型及判断；前端框架VUE的基础使用；如何使用 Node.js 构建一个命令行应用（CLI）；JavaScript 基础：原型链；JS模块的构建以及对应的打包工具

前端中台系统常见问题剖析与解决方案干货高能预警，此文章信息量巨大，大部分内容为对现状问题的思考和现有技术的论证。感兴趣的朋友可以先收藏，然后慢慢研读。此文凝结了我在中台领域所有的思考和探索，相信读完此文，能够让你对中台领域的常见业务场景和解决方法有着全新的认知。此文转载请注明出处。在2019年5月11日的那个周末，我在FD…
判断浏览器是否支持 webp 的几种解决方法我们都知道，WebP 是 Google 推出的 WebP 图片格式，它是一种支持有损压缩和无损压缩的图片文件格式，根据Google测试，相同的图片，WebP 格式的图片均能比 PNG，JPG 格式的图片节约不少体积，但是其兼容性不是很…
JavaScript进阶之手写Promise Promise是当前ES6语法中的异步解决方案，本文从基本概念开始，层层分析，一步一步手写实现Promise，希望能和大家一起彻底掌握Promise。概述 Promise是异步编程的一种解决方案，跟传统回调函数来实现异步相比，其设计更合理，代码更易懂。Promise是"美颜后"的异步解决方案. 在ES6中，其写进了语言标准…
JavaScript的数据类型及判断最近自己回归基础看了下javascript的相关知识点，想着看都看了，写出来记录下足迹也是一件好事，遂记录～还有还有，哪位大佬有广州前端开发工程师的机会推荐一下吗，简历可以戳 blog下的resume.png ，我请你吃糖:candy::smile: 在 javascript 中有两种类型，一种是基本数据类型，一种是引用类型。基本类型…
前端框架VUE的基础使用 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 2、基础使用 1、安装no…
如何使用 Node.js 构建一个命令行应用（CLI）原文地址： How to build a CLI with Node.js 原文作者：dkundel 译文出自：掘金翻译计划本文永久链接： github.com/xitu/gold-m… 译者： EmilyQiRabbit 校对者： suhanyujie Node.js 内建的命令行应用（CLI）让你能够在使用其庞大的生态系统的同时自动化地执行重复性的任…
JavaScript 基础：原型链当谈到继承时，JavaScript 只有一种结构：对象。每个实例对象（ object ）都有一个私有属性（称之为 __proto__ ）指向它的构造函数的原型对象（ prototype ）。该原型对象也有一个自己的原型对象( __proto__ ) ，层层向上直到一个对象的原型对象为 null 。根据定义， null 没有原型，并作为这个原型链中的最后一个环节。…
JS模块的构建以及对应的打包工具译者：前端小智原文： medium.freecodecamp.org/javascript-… 这是专门探索 JavaScript 及其所构建的组件的系列文章的第 20 篇。想阅读更多优质文章请猛戳GitHub博客 ,一年百来篇优质文章等着你！如果你是 JavaScript 的新手，一些像 “module bundlers vs module loaders”、“Webpack vs Browserify” 和 …
【前端帮帮忙】第7期关于节流(throttle)和防抖(debounce)的理解防止用户高频率的触发事件，刚好这个事件又需要处理大量的计算和渲染而带来的性能问题。应用场景 onscroll onresize mousemove touchmove … 示例这边我们以 onscroll 来写个例子，加深理解。比如有这样一个场景：我们需要判断浏览器滚动条滚动到底部的时候去动态加载一些数据，可能…
Javascript随机获取数组中不重复的n个元素最近有一个需求，从一组试题中随机获取5道题用于用户复习，获取到的5道试题应该每次是随机的而且不重复的。代码实现: 实现方式1 大多数人的写法，从数组中取数据，放入新的数组，取完一个数据从原始数组中删除数据，在放入新数组的时候判断是否已出现过。 function getTenNum(n) { var reslut = []; va…
《你不知道的Javascript–上卷学习总结》（原型） 1、Javascript中的对象有一个特殊的 ]内置属性，其实就是对于其他对象的引用。几乎所有的对象在创建时 ] 属性都会被赋予一个非空的值。 2、当我们获取一个对象的值的时候，首先会执行默认的 ]操作来说，如果无法在对象本身找到需要的属性，就会继续访问对象的 ]链 3、所有普…
javascript数组常用函数与实战总结在node.js后端开发过程中，数组这种数据类型（Object类型）再常见不过，本文主要介绍数组的一些常见函数，以及在实战开发过程中能更好的操作数组的 lodash包。函数介绍向数组末尾添加值 push 说明：向数组的末尾添加一个或多个元素，并返回新的长度代码： let array= ; let arrayChange=array.push…
Vue CLI 3 项目构建基础 # 查看 node 版本 node -v # 查看 npm 版本 npm -v 二、脚手架vue-cli # 安装 Vue CLI 3.x npm i -g @vue/cli 安装完 vue-cli 后，我们在你想要创建的项目目录地址下执行构建命令 # my-project 是你的项目名称 vue create my-project 目录结构 ├── …
前端能力中台化之路：Fusion Design 成长史值得学习、思考。
从原生JS实现jQuery的一个API中体会其设计思想根据统计，全世界大约有80~90%的网站直接或间接地使用了jQuery，鉴于它如此流行，所以每一位前端工程师都应该了解和学习它。那如何才能快速理解jQuery呢？读源代码又太繁琐，所以这里利用原生JS来实现jQuery中的addClass这个API，通过实现此过程来体会jQuery的设计思想，力求简单易懂。封装函数 function addClass(…
vue2之简易的pc端短信验证码的问题 <提示语部分不要在意（非重点部分）> 简单说下布局(采用的是 vue的element ui的ui框架 )进行布局操作的子组件模板部分如下（code部分是很基础的） <template> <div class="forget"> <el-dialog title="修改新密码" :visible.sync="dialog.visible&q…
【看完这篇文章，我奶奶都懂了https的原理】全文=> 　Http存在的问题上过网的朋友都知道，网络是非常不安全的。尤其是公共场所很多免费的wifi，或许只是攻击者的一个诱饵。还有大家平时喜欢用的万能钥匙，等等。那我们平时上网可能会存在哪些风险呢？ 1. 泄密，个人隐私、账户密码等信息可能会被盗取。 2. 篡改，收到的数据…
Vue之项目整合与优化使用 webpack 构建过 Vue 项目的同学应该知道 alias 的作用，我们可以使用它将复杂的文件路径定义成一个变量来访问。在不使用 alias 的项目中，我们引入文件的时候通常会去计算被引入文件对于引入它的文件的相对路径，比如像这样 import HelloWorld from ‘../../../../HelloWorld.vue’ 一旦相对层…
Vue多页路由与模板解析 1. 跳转在配置路由前，首先我们要明确一点就是，多页应用中的每个单页都是相互隔离的，即如果你想从 page1 下的路由跳到 page2 下的路由，你无法使用 vue-router 中的方法进行跳转，需要使用原生方法： location.href 或 location.replace 此外为了能够清晰的分辨路由属于哪个单页，我们应该给每个单页路由添加前…
Vue CLI3之pages 构建多页应用首先我们可以把多页应用理解为由多个单页构成的应用，而何谓多个单页呢？其实你可以把一个单页看成是一个 html 文件，那么多个单页便是多个 html 文件，多页应用便是由多个 html 组成的应用，如下图所示既然多页应用拥有多个 html ，那么同样其应该拥有多个独立的入口文件、组件、路由、 vuex 等。没错，说简…
第二天：在Flask Web应用中使用模板通过学习第二天的内容，你将会对模板有所了解，并且知道为什么要使用模板，以及使用模板有什么好处。这一天的学习内容涉及到的代码都会托管到github上，猫姐再次强调，在学习本课内容时一定要自己尝试手敲代码，…
React造轮系列：Layout 组件思路本文是React造轮系列第三篇。 1.React 造轮子系列：Icon 组件思路 2.React造轮系列：对话框组件 – Dialog 思路想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！初始化 Layout 参考 And Design ,…
用CSS Grid Shepherd技术对数据进行排序[每日前端夜话0x7B] 每日前端夜话 0x7B 每日前端夜话，陪你聊前端。每天晚上18:00准时推送。正文共：1740 字预计阅读时间： 6 分钟翻译：疯狂的技术宅来源： css-tricks 牧羊人很擅长照顾他们的羊群，为牧群带来秩序和结构。即使有几百只毛茸茸的动物，牧羊人仍然会在一天结束时将它们悉数带回农场。 …
Node.js 日志记录指南原文地址： A Guide to Node.js Logging 原文作者：dkundel 译文出自：掘金翻译计划本文永久链接： github.com/xitu/gold-m… 译者： fireairforce 当你开始使用 JavaScript 开始时，你应该学会的第一件事就是如何通过 console.log() 将事物记录到控制台。如果你搜索如何调试 JavaScript ，…
Cloudflare 的 HTTP/2 优化策略 Cloudflare针对HTTP/2优先级的进一步优化，将网页控制权尽可能地交给网站所有者，可根据具体需求与场景，定制化网页加载优先级策略，提供更快速，更优质的用户Web访问与交互体验。文 / Patrick Meenan 译 / John 原文 https://blog.cloudflare.com/better-http-2-prioritiz…
编写优雅的 JavaScript 代码：最佳实践： https://devinduct.com/blogpost/22/javascript-clean-code-best-practices 有没有似曾相识如果你对于代码，除了关注是否能准确的执行业务逻辑，还关心代码本身是怎么写的，是否易读，那么你应该会关注如何写出干净优雅的代码。作为专业的工程师，除了保证自己的代码没有bug，能正确的完成业务逻…
JavaScript 基础：柯里化在计算机科学中，柯里化（英语：Currying），又译为卡瑞化或加里化，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。这是 wiki 百科的解释。简单来说，柯里化就是帮你消化一部分参数的函数。来张图吧～本来计算 a + b + c…
Vue API 盲点解析 performance API 是 Vue 全局配置 API 中的一个，我们可以使用它来进行网页性能的追踪，我们可以在入口文件中添加 if (process.env.NODE_ENV !== ‘production’) { Vue.config.performance = true; } 来开启这一功能，该 API（2.2.0 新增）功能只适用于开发模式和支持 performance.mark API 的…
Vue之合理划分容器组件与展示组件如果要将 Vue 组件按照职能划分，我们可以将其分为两种类型：容器组件和展示组件。容器组件和展示组件的概念来自于 Redux 文档，那么首先什么是容器组件呢？顾名思义，它是一个容器性质的组件，我们可以把它理解为最外层的父组件，也就是最顶层的组件，一般我们把它放置在 views 文件夹下，其功能主要用于做数据提取…
Vue之学会编写可复用性模块在 Vue 项目中，每一个页面都可以看作是由大大小小的模块构成的，即便是一行代码、一个函数、一个组件都可以看作是一个个自由的模块。那么提高代码的复用性的关键便在于编写可复用的模块，也就是编写可复用的代码、函数和组件等封装成一个函数除了使用变量的赋值缓存使用来解决数据的重复读取外，我们在开发过程…
使用“变量种子计数器”扩展 CSS 动画更多可能性 “有些 CSS 属性，例如 background-image 渐变不能使用 CSS animation 动画，那有没有什么办法可以让渐变支持设置动画呢？本文就将介绍我最近研究的一个小成果，可以实现 background-image 渐变的动画效果。”
Vue编码技巧与规范在很多情况下，我们经常会遇到循环判断执行赋值操作的场景，一般我们都会使用 if 及 switch 的条件判断，如果符合则执行赋值，不符合则进入下个判断，比如 let name = ‘lisi’; let age = 18; if (name === ‘zhangsan’) { age = 21; } else if (name === ‘lisi’) { age = 18; } else if (name === ‘w…