20191205 前端开发日报

使用 JS 来动态操作 css ,你知道几种方法?;前端API层架构,也许你做得还不够;天了噜,为什么外链css要放在头部,js要放在尾部?;性能分析(一)前戏:用 rollup 打包一个 js-sdk;宋小菜团队基于 Egg 的 Nodejs 的服务框架架构实践;前端自主导出excel、通过js调用后端接口下载表格文件(GET和POST方法);JavaScript 事件循环机制 学习笔记;Vue 3.x 响应式原理——ref源码分析

  1. 使用 JS 来动态操作 css ,你知道几种方法?JavaScript 可以说是交互之王,它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集,更加丰富界面交互的可操作性。这类 API 的例子包括WebGL API、Canvas API、DOM API,还有一组不太为人所知的 CSS API。
  2. 前端API层架构,也许你做得还不够上午好,今天为大家分享下个人对于前端API层架构的一点经验和看法。架构设计是一条永远走不完的路,没有最好,只有更好。这个道理适用于软件设计的各个场景,前端API层的设计也不例外,如果您觉得在调用接口时还…
  3. 天了噜,为什么外链css要放在头部,js要放在尾部? 我们最开始学前端的时候都会看到教程在处理外部css,js的时候会将css放在header中,js放在body的最后。为什么要这样子处理,今天参考一些资料好好分析下。 为什么外链css为什么要放头部? 首先整个页面展示给用户会经过html 的解析与渲染过程。 而外链css无论放在html的任何位置都不影响html的解析,但是影响html…
  4. 性能分析(一)前戏:用 rollup 打包一个 js-sdk 在开启这个篇章之前,我决定先开一篇来讲一下 rollup ,毕竟干活嘛,前戏要足。 做一个抉择, rollup vs webpack webpack 于 2012 年由 Tobias Koppers 创立,旨在解决现有工具无法解决的难题:构建复杂的单页应用程序(SPA)。特别是两个功能对后期产生了很大的影响: Code-splitting,通过代码拆分,可…
  5. 宋小菜团队基于 Egg 的 Nodejs 的服务框架架构实践 Node 的工具化价值自不多言,而服务化价值需要长期探索,小菜前端在服务化路上依然是小学生,目前的尝试是是 Cross 框架,尝到了一些甜头。 我想,几乎没有前端工程师会对 Node 不感兴趣,但用它适合干哪些事情,每个人的答案都不同了,比如小菜前端,我们对于 Node 的深度尝试,可以在这里找到答案:《技…
  6. 前端自主导出excel、通过js调用后端接口下载表格文件(GET和POST方法) npm install sw_react_plug –save-dev; npm install; import { ExportExcel } from ‘sw_react_plug <ExportExcel fileName=xxx数据报表 column={columns} dataSource={data} /> 特别提醒: 这样直接引用会render一次就会加载从而下载,所以需要我们通过条件判断进而加载。eg: 1. 初始化int:status为0; 2. 点…
  7. JavaScript 事件循环机制 学习笔记 概念: 进程是CPU资源分配的最小单位 线程是CPU调度得最小单位 浏览器内核 浏览器默认有三个进程: 一. 浏览器主进程(Browser进程) 作用: 负责浏览器界面显示,用户交互(前进、后退,关闭等) 负责各个页面的管理,如创建和销毁其它进程 将Render进程中得到的内存中的bitmap,绘制…
  8. JS面试点-作用域(全局&局部作用域/ 作用域链) 什么是作用域 作用域是可访问变量的集合。 在 JavaScript 中, 对象和函数同样也是变量。 在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。 分为 全局作用域/局部作用域(函数作用域与块级作用域) 全局作用域: 全局作用域贯穿整个 javascript 文档,在所有函数声明或者大括…
  9. JS面试点-浅拷贝和深拷贝 前言 在 JavaScript 中,我们将数据分为 基本数据类型(原始值) 与 引用类型 基本数据类型的值是按值访问的,基本类型的值是不可变的 引用类型的值是按引用访问的,引用类型的值是动态可变的 var zxx = 100; var zxx1 = 100; console.log(zxx === zxx1) // true var zxx2 = {a: 1, b: 2}; var zxx3 = {…
  10. 现代前端库开发指南系列(一):融入现代前端生态本系列文章主要介绍如何在现代前端生态下,创建一个工业级别的库。近几年来,前端工程化、模块化、组件化的大潮铺天盖地而来,在解决以往的架构痛点之余,却又产生了信息过载的问题;我希望通过分享自己的经验,…
  11. 一文学会 Node.js 中的流用 Dominic Tarr 的话来说:“流是 Node 中最好的,也是最容易被误解的想法。”即使是 Redux 的创建者和 React.js 的核心团队成员 Dan Abramov 也害怕 Node 流。
  12. 为Vue添加简单的Store 前言 没错,我又来水文章了,Vue的简单Store其实比React的简单Store更早就制作好了并已用在了XK-Editor@1.3.0上,只是没有写到博客上而已,这次正好写了React的简单Store,顺便就把Vue的也补上。至于为什么要用Store或者为什么不用Vuex,其实和React的差不多,这里就不说了,如果不了解可以移步上一篇 为React添加简…
  13. 你可能不知道的15个 Git 命令Git 有时可能会令人生畏。因为有太多的命令和细节需要学习。不过虽然文档的内容很多,但阅读起来还是很轻松的。一旦你克服了最初不堪重负的感觉,就会感觉到有明显进展。以下是你可能还不知道的 15 个 Git 命令的…
  14. 微软发布新版本开源工具集 PowerToys,入选 GitHub Trending 日榜12 月 3 日,微软在 GitHub 上将开源软件工具集 PowerToys 更新到了 0.14 版本,继续针对工具集中的全窗口管理器 FancyZones 与批量重命名文件工具 PowerRename 进行改进及修复错误。PowerToys 项目也入选了 GitH…
  15. 通过事例重温一下 JS 中 常见的15 种数组操作 数组是 JS 中广泛使用的数据结构。数组对象提供了大量有用的方法,如array. forEach()、array.map()等来操作数组。 在实战中,我经常对数组可能的操作和相应采用哪个更好的方法不知所措,所以本文就列出 15 种常用数据方法,重温加强记忆一下。 1. 数组的遍历 1.1 for…of 循环 for…of 循环遍历数组项,比如…
  16. Go Http Client 连接优化 背景:由于之前项目采用了请求外部服务使用了http短链接形式,随着用户流量的增长!公司公网带宽SNAT连接数飙升!已经达到最高规格已经无法升级了!是时候需要优化了? 怎么优化 HTTP长连接(持久化连接) 长连接的优点: 1、减少CPU及内存的使用,因为不需要经常的建立及关闭…
  17. 基于vue-cli3创建libs库 前言:当我写这篇博客之前我想过这些问题,是否你也被困扰过呢? 1:当你有自己觉得写的好的组件,是不是有一种想存下来,方便下一次使用的情况? 2:是不是大多数时候都是使用cv大法?from "a" to "b" to “c” to anyWhere….. 3:是不是你的的组件跟你npm install下来的有很大区别? 4:…
  18. Node.js 项目 TypeScript 改造指南 前言 如果你有一个 Node.js 项目,并想使用 TypeScript 进行改造,那本文对你或许会有帮助。 TypeScript 越来越火,本文不讲为什么要使用 TypeScript,也不讲基本概念。本文讲的是如何将一个旧的 Node.js 项目使用 TypeScript 进行改造,包括目录结构调整、TypeScript-ESLint 配置、tsconfig 配置、调…
  19. JavaScript中,5个解构有趣的用途   1. 交换变量 通常交换两个变量的方法需要一个额外的临时变量,来看看例子: temp是一个临时变量,它先保存a的值。然后把b的值赋值给a,接着将temp值赋给 b。 如果使用解构的方式会更简单,不需要什么鬼的 temp 变量。 = 是解构赋值,右边,创建了一个数组 ,即…
  20. vue单元测试第一篇:单元测试介绍和基本使用 有利于我们提前隐藏的"bug": 我们一般开发完成后和后端联调时,只会把大体流程跑通,这样就把压力交给QA,但是通过接口把每种情况都测试到是很麻烦到,加入如果QA有漏测情况,就会在线上埋下隐藏的bug。 对于新加的需求,我们可能对之前已有逻辑不是特别清楚,这样我们新加逻辑时,就可以通过单元…
  21. 前端常用的 59 个工具类【持续更新】前端开发有时会处理一部分后台返回的数据,或者根据数据判断做一些处理; 这个时候就非常有必要将一些常用的工具类封装起来; 本文根据常用的一些工具类封装了 59 个方法,当然还有很多用的较少前期没有录入,后期持续…
  22. AJAX原理及常见面试题AJAX 即 Asynchronous Javascript And XML(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
  23. 详谈CommonJS模块化 模块化其实很早就在很多高级语言中如 Java 、 Ruby 、 Python 出现了,甚至在 C 语言都有类似的模块化,比如 include 语句引入头文件,各种库等等。而在前端中,JavaScript作为主要语言,它设计之初并没有实现模块化。随着Web的发展,JavaScript地位越来越高,同时也出现了以下主要问题: 代码难以维护 作用域…
  24. Node.js中使用HMAC进行hash加密 HMAC 是密钥相关的哈希运算消息认证码(Hash-based Message Authentication Code)的缩写。它的过程是把消息M和密钥s作为输入,使用 hash 算法生成一个定长的消息摘要。 HMAC 目前在 IPSec 和其他网络协议(如 SSL )中得以广泛应用。在 nodejs 中已经提供了 crypto 模块,不需要额外安装 npm 包。 我们以…
  25. GitHub 长期被中国人“霸榜”?看完榜单我呆了…作为「技术行业观察者」的我,平时经常会逛 GitHub 找选题,最近我又在上面发现了很多宝藏…或者叫大宝箱…
  26. git工作原理及提交规范【干货】官方解释:Git(读音为/gɪt/。)是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
  27. 前端 JavaScript 错误异常处理指北 在前端的 JavaScript 开发中,发现开发者对于错误异常的处理普遍都比较简单粗暴,如果应用程序中缺少有效的错误处理和容错机制,代码的健壮性就无从谈起。 本文整理出了一些常见的错误异常处理的场景,旨在为前端的 JavaScript 错误异常处理提供一些基础的指导。 Error 对象 先来简单介绍一下 JavaScript 中的 Error…
  28. 如何编写可维护的javascript 当你纠结于可维护性和性能两者的取舍时,不要犹豫,优先可维护性。代码可维护性带来的好处远远要比提高那点可以忽略不计的性能要好得多。 理解运行时和编译时(理解 require 和 import) require 是 CommonJS 的语法,它是一个函数,返回值为一个对象。require 会加载这个对象,但不会立刻执行它,这种加载称为“运行时…
  29. git工作开发总结【干货】官方解释:Git(读音为/gɪt/。)是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
  30. 浅谈webscoket原理及其应用 WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。 在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。 WebSocket 解决了什么问题: 在不使用 WebSocket…
  31. vue项目中极验验证的使用使用vue、react的项目获取数据、上传数据、注册、登陆等都是通过接口来完成的,接口很容易被人恶意调用,最容易被人恶意调用的接口就是注册、登陆类的接口,为了防止接口被恶意调用很多公司开发了出了很多的人机…
  32. 如何用webpack优化moment.js的体积 本篇为转译, 原出处 。 当你在代码中写了 var moment = require(‘moment’) 然后再用webpack打包, 打出来的包会比你想象中的大很多,因为打包结果包含了各地的local文件. 解决方案是下面的两个webpack插件,任选其一: IgnorePlugin ContextReplacementPlugin 方案一:使用 IgnorePlugin 插件 …
  33. 攻略前端面试官(一):JS的数据类型和内存机制浅析 介绍:一些知识点相关的面试题和答案 使用姿势:看答案前先尝试回答,看完后把答案收起来检验成果~ 问:JS有哪些数据类型 答:JS有 七 种数据类型,分别是Number、String、Boolean、Null、Undefined、Symbol、Object。其中Object是引用数据类型,其他都是值类型(基本数据类型)。引用数据类型又细…
  34. 这是一篇关于JavaScript原型知识的还债帖 本人从事前端开发的工作三年有余,我要向你坦白,时至今日我对JS原型仍然是一知半解,当年的校招面试关于JS原型都是“临时抱佛脚”,死记硬背混过去鸟~ ~。 在日后工作中,我已熟练的使用 Function 去封装类,使用 mixin 去丰富类,使用 new 去实例化我钟意的对象(单身狗的悲哀),然而却忘了它们背后蕴含的原理。 痛…

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

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


关注我

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

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

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