20190616 前端开发周报-前端开发博客

2020 年你应该知道的 8 种前端 JavaScript 趋势和工具；细说Sonar之——前端接入篇；前端进阶之setTimeout 倒计时为什么会出现误差？；玩转 JavaScript 面试：何为闭包？；JavaScript编辑器，你在用哪个？；ES6 —项目综合实战（完结篇）；2019年，Flutter 和 React Native 谁主沉浮?；vuecli3 vant rem 移动端框架方案

2020 年你应该知道的 8 种前端 JavaScript 趋势和工具前端开发人员和技术人员的数量逐年增加，而整个生态系统渴望实现标准化。新技术和工具的出现已经改变了游戏规则。可以肯定地说，总体趋势将是 UI 标准化、基于组件的模块化和组合，这将影响从样式到测试甚至状态管理的所有方面，并在总体上实现更好的模块化。 JavaScript 世界日新月异。前端开发（和 web 开发）的…
细说Sonar之——前端接入篇
前端进阶之setTimeout 倒计时为什么会出现误差？讲到线程，那么肯定也得说一下进程。其实在本质上，两个名词都是 CPU 工作时间片的一个描述。进程(process)指的是CPU 在运行指令及加载和保存上下文所需的时间，放在应用上是指计算机中已运行的程序。线程(thread)是操作系统能够进行运算的最小单位。它被包含在进程之中，描述了执行一段指令所需的时间。…
玩转 JavaScript 面试：何为闭包？原文地址 Medium – Master the JavaScript Interview: What is a Closure? 坦白的讲，不掌握闭包这个知识点的话你是不会在 JavaScript 这条路上走太远的。你不仅要掌握闭包的机制是什么，还要知道闭包的重要性在哪，同时能轻松的写出几个可行的闭包用例。闭包在 JavaScript 中经常用来进行对象数据私有化，在事件…
JavaScript编辑器，你在用哪个？对于JavaScript程序员来说，目前有很多很棒的工具可供选择。本文将会讨论10个优秀的支持JavaScript，HTML5和CSS开发，并且可以使用Markdown进行文档编写的文本编辑器。为什么使用编辑器而不是IDE进行JavaScript编程?原因就是速度快。编辑器和IDE之间的本质区别在于：IDE不但可以调试，并且可以对代码进行概要分析…
ES6 —项目综合实战（完结篇）最好的学习方法就是实践，所以这节课结合实际项目，来更好的理解和掌握ES6的用途和使用场景，达到灵活运用的目的。
2019年，Flutter 和 React Native 谁主沉浮?本文是帮助你了解这两个应用程序开发框架区别指南。咱们知道，几年前开发和维护iOS和Android的应用程序曾经是一项艰巨的任务(独立的代码库|独立的开发团队|开发成本也忒高)。
vuecli3 vant rem 移动端框架方案描述基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装，构建手机端模板脚手架帮你做好的配置有 vuecli3.0 多环境开发 axios封装 rem适配方案生产环境cdn优化首屏加速 babel低版本浏览器兼容环境发布脚本 … 可以上手直接写代码多环境开发之前写过一个多…
一次和前端的相互甩锅的问题记录我们在APP上有个功能，需要获取用户当前定位，然后当用户关闭了GPS后，没有获取到用户定位，会触发一个bug,弹窗内容如下。
Javascript中数组方法reduce的妙用之处 Javascript数组方法中，相比 map 、 filter 、 forEach 等常用的迭代方法， reduce 常常被我们所忽略，今天一起来探究一下 reduce 在我们实战开发当中，能有哪些妙用之处，下面从 reduce 语法开始介绍。语法 array.reduce(function(accumulator, arrayElement, currentIndex, arr), initialValue) 若传入初始值…
[PPT] 尤雨溪：State of Vue 今天有去参加第三届Vue.js开发者大会吗？没去参加的童鞋可以先睹@尤大关于Vue的PPT。本PPT由@尤雨溪授权分享。 …
webpack4的30个步骤打造优化到极致的react开发环境，如约而至上一篇记录了一下webpack4使用的一些基础使用小技巧,确实没有想到能收获这么大的反响,还是非常感谢各位的错爱，没有看过的关于webpack4的14个知识点,童叟无欺这一篇文章将react和webpack4进行结合,集webpack的优势于一身,从0开始构建一个强大的react开发环境本篇所有代码线上代码 react-webpack4-cook ,翻译过…
如何使用Nodejs爬虫看漫画追完动画，刚见到波波，战车这是咋了，啥是镇魂曲啊，怎么就完了，要等周六啊啊啊啊啊啊啊，act3附体，小嘴就像抹了蜜…… ヽ(。>д<)ｐ于是想到看漫画版，但网页体验较差，一次只能看一页，一页只有一张图，还不能存缓。 ╮(╯_╰)╭ 行吧，没缓存，我自己做。大致看了下该页面的结构，做的不错，结构清…
生日之际，记录自己前端拼搏之路~ 时间过得真快！！！生日之际，从大学到现在，自己学习并实践过认为比较有用的技术点，也是常见面试考点… 加油:muscle: 前端学习记录 Html5 对WEB标准以及W3C的理解与认识 Html5新特性与语义化行内元素与块级元素渐进增强与优雅降级的理解及区别 cookie、sessionStor…
2019年前端笔试题什么是web标准？WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML…
谈谈前端代码规范管理戳蓝字「高级前端进阶」关注我们哦！作者：于是乎来源：前端小苑规范的代码是一个程序员基本的职业素养。首先，统一风格的代码可以提高代码的可读性，易于代码review，从而促进团队成员更好的合作。其次，使用lint工具进行代码规范，可以避免出现低级bug，提高代码质量，也更利于项目的维护。 …
开发中常用的25个Javascript单行代码要将变量强制转换为布尔值而不更改其值： const myBoolean = !! myVariable; !!null // false !!undefined // false !!false // false !!ture // ture !!"" // false !!"string" // true !!0 // false !!1 // true !!{} // true !![] // true 复制代码 2.基于某个条件为对象设置属性要使用sp…
2019年5月GitHub上最热门的JavaScript开源项目 5月份GitHub上最热门的JavaScript项目出炉了，下面我们一起盘点一下： 1.leetcode https://github.com/azl397985856/leetcode Star 8965 leetcode 题解，本仓库目前分为四个部分：第一个部分是 leetcode 经典题目的解析，包括思路，关键点和具体的代码实现。第二部分是对于数据结构…
重学Es6 Promise Promise 是异步编程的一种解决方案，比传统的回调更加合理而其人强大。 Promise，简单来说，是一个容器，里面存放着某个未来才会结束的事件的结果。Promise是一个对象，用来获取异步操作的消息。 Promise有以下两个特点： 1 对象状态不受外界影响。有三种状态：Pending（进行中），Fulfilled（已成功），Rejected（…
JavaScript 线性代数：线性变换与矩阵本文是“JavaScript 线性代数”教程的一部分。矩阵是一种由 m 行 n 列实数组成的“矩形”数组。比如，一个 3×2 的矩阵如下所示： Matrix类的构造器（constructor）接收若干行元素作为参数。我们可以通过指定行号取出矩阵中的一行，然后再通过指定列号取出一个特定的元素。下面直接看代码： class Matr…
vue通信方法EventBus的实现 vue通信方式有很多，项目中用的比较多的的有 pros、vuex、$emit/$on 这3种，还有 provide/inject (适合高阶组件)、 $attrs和$listeners (适合高阶组件)以及 $parent/$child/ref、eventBus 等这3种方式。很多时候我们都是只会使用api，而懂得原理以及实现，但我就觉得懂得原理以及实现跟一个只会调用api的开发人员…
还在手动获取618叠猫猫的瞄币？复制这段js自动获取商品页找猫猫的瞄币
react + koa2打造点餐系统第一次写文章，用作个人记录和分享交流，不好之处还请谅解。因本人喜爱吃都城(健康)，在公司叫的外卖都是都城，然后越来越多人跟着我点，而且每次都是我去统计人数，每个人点餐详情，我都是通过企业微信最后汇总…
RN 通信原理（for 前端）随着后起之秀 Flutter 的火热，RN 渐渐失去光环。站在客户端原生跨平台的角度来看，Flutter 的确更胜一筹，但是如果要加上 Web，实现 iOS、Android、Web(小程序）三端统一，RN 方案依然是最佳方案。即使有一天 RN 退出历史的舞台，它带来 JavaScript 与 Native 交互的思想依然会流传下去。小程序就是一个很好的代表作…
【2019年5月GitHub上最热门的开源项目】又到了为大家盘点5月份GitHub最热门的开源项目的时候了，一起来看看你都知道哪些，或者有哪些你已经在使用的了。详见
JS 里的数据类型转换之前的博客介绍了JS中的各种数据类型，那么在js当中，不同的数据类型怎么相互转换呢，以下是常见的不同数据类型转换的用法。任意类型转字符串 x.toString() (1).toString() // ‘1’ true.toString() // ‘true’ null.toString() // 报错 undefined.toString() // 报错 ({}).toString() // "[objec…
初学NodeJS（三）在nodeJS中有模块的概念，类似于C语言中的头文件，都是函数库。灵活运用模块可以非常便捷的操作后端操作前端。而在nodeJS中引入模块要使用require();这里举例几个常用的模块。
基于 HTML5 WebGL 的 3D 智慧隧道漫游巡检前言这次为大家展示的是通过HT for Web 灵活的图型化编辑工具打造的智慧隧道监控系统。通过 HTML5 技术实现了桌面和移动端的跨平台性，同时现实了可视化运维。这次主要跟大家分享里面的漫游巡检功能，完美进行第一人称视角体验整体结构环境，酷似游戏一样给人一种真实的感受，比平面更加直观，随意游离与虚…
8 个实用的 JavaScript 技巧每种编程语言都它独特的技巧。其中很多都是为开发人员所熟知的，但其中一些相当的 hackish。在这边篇文章中，我将向你展示一些我觉得有用的技巧。其中一些我在实践中使用过，而另一些则是解决老问题的新方法。Enjoy！ 1. 确保数组的长度不知道你是否遇见过这样的情况，在处理网格结构的时候，如果原始数据每行的长度…
如何将 Web 主页性能提升十倍以上？最近，我们将 Universe.com 主页的性能提升了十倍以上。在本文中，我们将解析实现这一重大改进的具体技术手段。但在开始之前，让我们先对网络性能的重要意义进行一番论证（博文末尾提供相关案例研究链接）：用户体验: 糟糕的性能可能导致响应失败，从 UI 与 UX 的角度来看，这可能会引发用户的沮丧情绪。 …
JavaScript 的简洁之道如果你关注代码本身和代码的编写方式，而不是只关心它是否能工作，那么你写代码是有一定的水准。专业开发人员将为未来的自己和“其他人”编写代码，而不仅仅只编写当前能工作就行的代码。
Node.js官方文档：到底什么是阻塞(Blocking)与非阻塞(Non-Blocking)？译者按：Node.js文档阅读系列之一。原文: Overview of Blocking vs Non-Blocking 译者:Fundebug 为了保证可读性，本文采用意译而非直译。这篇博客将介绍Node.js的阻塞(Blocking)与非阻塞(Non-Blocking)。我会提到Event Loop与libuv，但是不了解它们也不会影响阅读。读者只需要有一定的JavaScript…
使用CSS创建一个炫酷的球体动画效果我最近看到了一个纯CSS实现的球体动画效果：经过研究上面的效果实现起来大致可以分为五个步骤，下面就来一一介绍。 1.使用Jade和SCSS生成一个圆圈创建一个圆圈的第一步是生成所有组成圆圈的粒子。有了Jade，我…
Web隐藏术在Web页面或Web应用程序的开发中，有些元素是需要被隐藏起来。让一个元素隐藏起来的实现方案会有很多种，比如说在《图片替换文本CSS方法》一文中所聊的图片替代文本的方案都适合于元素的隐藏，只不过每种不同的技术方案实现的原理和最终呈现给用户的渲染方式会有所不同。如果你是一个有情怀的前端开发者的话，在开发应用…
酷炫的 HTML5 网页 PPT 一般演讲、培训等场合，我们都离不开 PPT，那么如何做出一款与众不同而有充满科技感的 PPT 呢？这时候，我们可以尝试一下在线 PPT。一、选择在线 PPT 的几大原因 1.省去了上传下载的麻烦； 2.降低了客户端对 PPT 软件的依赖； 3.随时更新，更灵活； 4.同屏播放，全场互动，增加用户体验…
使用JavaScript将Excel转换为JSON JSON是码农们常用的数据格式，轻且方便，而直接手敲JSON却是比较麻烦和令人心情崩溃的（因为重复的东西很多），所以很多码农可能会和我一样，选择用Excel去输入数据，然后再想办法转换成JSON格式。今天教大家使用JS 将 Excel 转为 JSON的方法。 1.新建HTML文件 <html lang="en"> <title> …
前端的打包工具本文当时写在本地，发现换电脑很不是方便，在这里记录下。 :pray: 前端的打包工具打包工具可以更好的管理 html ， css ， javascript ，使用可以锦上添花，不使用也没关系。 1. 前言 1.1 前端前端三剑客：结构层 html ，表现层 css ，行为层 javascript 。 html 好比是房子的地基， css 和 javas…
用 Vue 开发自己的 Chrome 扩展程序浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务，例如阻止广告，管理密码，组织标签，改变网页的外观和行为等等。
一个基于vuepress默认主题开发的主题-vuepress-theme-reform 项目地址： vuepress-theme-reform 效果展示：我的博客此主题继承至vuepress的默认主题，添加功能有标签页改造，主页改造，博客分类及展示，gitalk集成及gitalk自动化配置，最新google Analytics集成等。使用 npm install vuepress-theme-reform -D # or yarn add vuepress-theme-reform 复制代码然后在…
前端答疑-对象引用-vue共享数据源的三种方式事情发生在上周（2019-06-06）团队技术分享的时候。起因在于一个问题：vue 中多个组件如何使用同一个变量，我们叫这个变量为 baseConfig 吧。说实话我没想到那么多人不理解其中的知识。今天我整理一下发出来。
开发Vue插件四种方式在日常开发中，可能只需要一两个插件就可以完成对系统开发需要。如果引入整个组件库，最后打包项目体积比较大。例如 element-ui 中的 message 提示组件等。下面会在 vuejs 官网提供的插件建议，根据四种方法开发四类不同的 vuejs 插件插件插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有…
JavaScript混淆安全加固在安全攻防战场中，前端代码都是公开的，那么对前端进行加密有意义吗？可能大部分人的回答是，毫无意义，不要自创加密算法，直接用HTTPS吧。但事实上，即使不了解密码学，也应知道是有意义的，因为加密前和解密后…
如何，以及何时使用CSS多列布局当我们把注意力都放在 CSS Grid 布局和 CSS Flexbox 布局的时候，经常忽略了另一种布局方法。在本文中，我将介绍多列布局 – 通常称为 multicol 或者 “CSS Columns” 。通过这篇文章，你了解到使用 columns 的最佳…
typescript 高级技巧用了一段时间的 typescript 之后，深感中大型项目中 typescript 的必要性，它能够提前在编译期避免许多 bug，如很恶心的拼写问题。而越来越多的 package 也开始使用 ts，学习 ts 已是势在必行。
前端实现axios以表单方式上传文件，优化上传速度最近在开发过程中，遇到的需要是需要上传高清图片，必须原图上传。由于在移动端应用，上传网络问题有很大的坑。当初的方案是直接采用将文件转化为 base64 ，再进行上传，由于文件转化为 base64 后，文件大小会增加30%。又导致上传压力，影响用户体验。最终采取了以 formData 形式进行上传，也就是 File 上传文件。以这种…
在Vue中用canvas实现二维码和图片合成海报在项目中经常会遇到需要将不同的二维码放到一张通用图片上，提供用户下载简单来说，就是利用canvas将同等比例的二维码在图片上叠加，生成海报
vue的事件冒泡先说冒泡，我们都知道水中有气泡的时候，气泡会从水底往上升，由深往浅的。但是水在上升的过程中会经历不同的深度的水。那么我们再来解释一下什么是事件冒泡，如果属性浏览器原理的同学就知道，页面是由文档流（…
前端面试准备—Vue篇本文主要从下边几个方面复习Vue知识点： 1. MVC && MVVM 2. 数据双向绑定 3. Vue的生命周期 4. 虚拟dom的实现原理 5. vue-router 6. Proxy 7. vuex复制代码 MVC && MVVM M — model层，代表数据模型 V — view层，代表视图层，UI展示 C — control层，控制层，处理复杂的业务逻辑 VM– vi…
JS 数据类型，数据类型的判断，类型转换参考文章： js 深拷贝 vs 浅拷贝 JavaScript 数据类型和数据结构 — MDN InterviewMap -yck 数据类型 JS中分为七种数据类型，七种内置类型又分为两大类型： 6种基本类型和 Object 1.基本类型基本类型主要是： Undefined 、 Boolean 、 String 、 Number 、 Null 、 Symbol (ECMAScri…
node.js url模块 url模块目前提供三个方法url.parse(),url.format(),url.resolve(); url.parse(urlStr, , ) 接口作用:解析一个url地址,返回一个url对象参数:第一个参数 url地址字符串,第二个参数为布尔值,默认false,当值为true,返回的url对象中query属性返回的是一个对象,第三个参数为布尔值,默认false,如果设为 …
【前端帮帮忙】第10期浅析类数组对象简单来说，和数组类似，拥有 length 属性，可以通过索引来访问或设置里面的元素，但是不能使用数组的方法。看个例子： arr ; // => "dazhi" 复制代码这里的 arr 一定是一个数组吗？不一定，也可能是一个对象。 let arr = { 0: ‘dazhi’ } console.log(arr ); // dazhi 复制代码再来…
深入认知 JavaScript 本文当时写在本地，发现换电脑很不是方便，在这里记录下。深入认知 Javascript :zero: 前言关于 Javascript，平时我们仅仅做到了使用，但是真的理解为什么这么使用吗？这里详细介绍一些我们常用的 Javascript 语法。 :one: 关键字 what: 在Javascript 关键字是有很多的，而普通的关键字基本没有太多的难…
webpack4大结局：加入腾讯IM配置策略，实现前端工程化环境极致优化webpack，打包所有的资源不知道不觉，webpack已经偷偷更新到4.34版本了,本人决定，这是今年最后一篇写webpack的文章，除非它更新到版本5，本人今年剩下的时间都会放在Golang和二进制数据操作以及后端的生态上在…
Vue 改变数据，页面不刷新的问题最近在用 element-ui 开发一个网站，使用 table 组件时，发现修改完数据，有时候会延迟一两秒，页面才会发生变化。看了一下代码，发现修改数据的代码是这样的
TypeScript 学习总结基础数据类型（一）写在前面：因为typescript文档个人感觉并不友善(概念过于杂乱，示例代码有错误~)。所以个人学习笔记总结，并不涉及typescript各种历史和一些什么javascript超集啊之类的介绍。想学习typescript的朋友可以快速扫两眼，入个门~ 基础数据类型: 首先typescript的十二种基础数据类型：布尔类型（boolean）数字类型…
使用Web Audio API实现简单的音频可视化之前刚好看到Web Audio API方面的内容，因此用了相关api做了个音频可视化的页面。实现：音频播放/暂停音频声量控制音频立体声控制音频频率可视化音频切换预备知识 Web Audio API中一个关键的对象就是音频上下文(AudioContext) ，可以类比canvas context，在AudioContext我们进行相关的…
sortable.js——Vue 数据更新问题在一个需求中，我需要实现一个拖拽的功能，其中我使用了 sortable.js 去实现，但我发现我拖拽之后的数据并没有渲染在页面上。简而言之，举个例子，原先的数组是，拖拽之后，变成了，但在视图上并没有显现，这不经让我疑惑不解，开始了以下问题的探索，在此记录一下 Vue 的数组更新问题看到…
JS笔记(21): NODE 基于V8引擎（谷歌浏览器的引擎）渲染JS的工具或者环境安装node（到node官网http://nodejs.cn/下载即可）把js代码放到node环境中执行 2) NODE安装完之后 npm（node Package Managernode模块管理器） node xxx.js 3) 如何在NODE中渲染和解析JS REPL模式： Read-Evaluate-Print-Loop 输入-求值-输出-…
Vuex学习（1）官方：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。个人理解：Vuex是管理应用程序的全局数据状态，这样任意组件都可以进行操作、修改、获取全局数据。二、创建vuexdemo项目实例 vue/cli3.x命令： vue cre…
package.json 中你还不清楚的 browser，module，main 字段优先级前端开发中使用到 npm 包那可算是家常便饭，而使用到 npm 包总免不了接触到 package.json 包配置文件。