- 博客(437)
- 资源 (9)
- 收藏
- 关注
RSS订阅原创 Web3.0技术栈简介
L4：技术栈顶层，参与者主要是普通用户（如同今天普通用户在浏览器前端和网页互动一样）用户们在这一层可以和单个或多个区块链（应用等）互动。协议可扩展的用户界面（"像浏览器一样"），用户用来直接与区块链互动的程序，而不需要知道如何让编程和实现细节：案例有Status、MetaMask或MyCrypto。L3：人类可读语言和库的层，在这一层，开发人员和程序员们可以适当抽象，并进行程序开发。这一层包括可扩展协议的API和语言 -：有各种语言可以用来开发应用程序，如Solidity和Vyper（E.....
2021-12-14 13:57:47
20429
原创 深入浅出FE（十七）输入URL之后发生了什么
React早期的优化都是停留于JS层面（vdom的 create/diff），诸如减少组件的复杂度（Stateless），减少向下diff的规模(SCU)，减少diff的成本(immutable.js)，当然，也有例外，比如针对老式的IE的LazyDOMTree。 到React16，则升级到浏览器渲染机制层面, 在patch上取得了突破。众所周知，浏览器是单线程。想象一下，如果有两个线程，一...
2021-09-22 10:16:13
363
原创 CSS3 @Media 媒体查询
/*大型屏幕pc 超大屏*/ @media screen and (min-width:1200px){ #content { color: #f00; background: #000; } } /*1200>=pc>=992 大屏，字体红色，背景黑色*/ @media screen and (min-width:992...
2021-09-22 10:10:29
629
原创 Spring Boot 系列学习教程
Spring Boot 是由 Pivotal 团队提供的全新框架，其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程。1、Spring Boot 中文索引2、youtube springDeveloper3、推荐博客纯洁的微笑-Spring Boot系列文章 林祥纤-从零开始学Spring Boot Mkyong-Spring Boot教程（国外） baeldung-Spring Boot教程（国外） liaokailin的专栏-Spring Boot实战 cat
2021-08-21 20:51:44
233
翻译 WebContainers简介：在浏览器中原生运行Node.js（译文）
本篇文章来自StackBlitzblog-埃里克·西蒙斯2021 年 5 月 20 日嗨！我们是StackBlitz，一个专门为网络开发量身定制的在线IDE。在本周的谷歌I/O主题演讲中，你可能会看到我们偷看。今天，我们很高兴地宣布一项新技术，我们一直在与Next.js和Google的团队合作。几年前，我们意识到网络正在走向一个关键的转折点。WebAssembly和新功能API的出现似乎使编写一个功能强大的基于WebAssembly的操作系统成为可能，完全在浏览器中运行Node.js。..
2021-08-16 23:05:10
2300
原创 深入浅出FE（十六）深入浅出YAML
YAML 并不是一种新奇的语言，YAML 首次发表于 2001 年，距离现在已经过去差不多 20 个年头。YAML 虽然不如 JSON、XML 之类的语言流行，应用也没有那么广泛，但是 YAML 也有它的优势。一、简介YAML是一种较为人性化的数据序列化语言，可以配合目前大多数编程语言使用。YAML 的语法比较简洁直观，特点是使用空格来表达层次结构，其最大优势在于数据结构方面的表达，所以 YAML 更多应用于编写配置文件，其文件一般以.yml为后缀。YAML目前的官方全称为 “YAM...
2020-12-28 10:47:04
410
转载 深入浅出FE（十五）深入浅出React全家桶单元测试
转载自Web 前端单元测试到底要怎么写？看这一篇就够了随着 Web 应用的复杂程度越来越高，很多公司越来越重视前端单元测试。我们看到的大多数教程都会讲单元测试的重要性、一些有代表性的测试框架 api 怎么使用，但在实际项目中单元测试要怎么下手？测试用例应该包含哪些具体内容呢？本文从一个真实的应用场景出发，从设计模式、代码结构来分析单元测试应该包含哪些内容，具体测试用例怎么写，希望看到的童鞋都能有所收获。完整的代码内容在这里（各位童鞋觉得好帮忙去给个哈）。项目用到的技术框架该项目采用...
2020-11-29 16:39:39
440
原创 深入浅出FE（十四）深入浅出websocket
引言Websocket是一个持久化的协议 协议分为ws（80端口）协议 和wss（443端口）协议。WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久
2020-11-29 15:42:46
782
原创 深入浅出FE（十三）前端nexus3 Yarn离线部署npm仓库
网上的很多教程都是服务器可以连接外网的前提下撰写的，但看过无数教程还没有一个专门针对服务器离线环境如何部署一个npm仓库。一、前提：服务器离线、仓库离线二、nexus3 npm仓库搭建Nexus Repository Manager 中添加 npm如果点击：这里有三个类型的npm选项：附上某歌翻译：Proxying npm Registries为了减少开发人员和CI服务器的重复下载量并提高下载速度，您应该对托管在https://registry....
2020-08-02 13:51:50
2721
2
原创 深入浅出FE（十二）浅析websocket
目录一、为什么要有websocket？二、关于websocket三、websocket的请求响应过程四、为什么WebSocket连接可以实现全双工通信而HTTP连接不行呢？五、WebSocket 的用法六、服务端的实现七、websocket的踩坑一、为什么要有websocket？websocket的出现是为了弥补http协议服务端无法向客户端主动推送消息。所以以前实现这种场景都是通过用轮询或者Comet。轮询是指浏览器通过JavaScript启动一个定时器，然后以固.
2020-06-22 23:26:52
335
原创 深入浅出FE（十一）报表系统调研
报表系统开发初探2020.6.7总体思路1、自研 使用web端可拖拽特性直接生成线上报表，优点是自定义样式，缺点是维护和开发工作量较大。2、开源系统二次开发 （1）基于BIRT报表或者iReport + JasperReports组合开发。优点是开发和操作较简单，缺点是不支持复杂报表和权限控制，维护性较差。 （2）基于Airbnb 的 Superset，Redash，Metabase等框架做二次开发。优点是界面设计友好，缺点是扩展性较差。3、付费 如帆软和思迈特报表系统，优点是支持丰富的
2020-06-09 22:25:48
464
原创 深入浅出FE（十）Serverless初探
目录一、Serverless 简介二、Serverless 的主要特点1、事件驱动三、Serverless 服务中的前端解决方案架构图框架（Framework）Web IDE命令行工具四、基于 Serverless 的前端开发模式五、Serverless 的应用场景WEB 及移动后端消息处理对象存储文件处理物联网运维及集成六、参考资料一、Serverless 简介根据 CNCF 的定义，Serverless 是指构建和运行不需要服务器管理的
2020-05-31 20:22:16
465
原创 深入浅出FE（九）DNS和HTTP劫持问题
一、DNS劫持和HTTP劫持DNS劫持表象：你输入一个google.com网址，出来的是百度的页面HTTP劫持表象：访问着github的页面，右下角出现了一个格格不入的广告弹窗如何判断所用的dns 有没有受到劫持，最简单的测试办法：用nslookup 去查询一个不存在的域名，如果返回一个IP，通过浏览打开这个IP会发现是一个广告页，那么这个DNS 已经被劫持了，如果返回** serve...
2020-05-26 11:19:01
621
转载 前端开发人员的十个安全建议，做了以后老板给你点赞（转载）
“前端外文精选”公众号翻译来源：https://levelup.gitconnected.com/作者：Matt MaribojocWeb安全是前端开发人员经常忽略的主题。当我们评估网站的质量时，我们通常会查看性能，SEO友好性和可访问性等指标，而网站抵御恶意攻击的能力却常常被忽略。即使敏感的用户数据存储在服务器端，后端开发人员也必须采取重要措施来保护服务器，但最终，保护数据的责任在后...
2020-05-26 11:08:44
446
原创 webpck深入浅出教程（四）如何写一个plugin
一、什么是plugin？在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决loader无法实现的其他事。二、plugin和loader的区别是什么...
2020-04-19 21:37:11
553
原创 深入浅出FE（八）微前端初探
一. 什么是微前端？Techniques, strategies and recipes for building amodern web appwithmultiple teamsusingdifferent JavaScript frameworks. — Micro Frontends微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法...
2020-04-19 21:11:32
526
原创 webpck深入浅出教程（三）webpack源码分析
webpack入口文件：执行npm命令后，查看node_modules\.bin目录下是否存在webpack.sh或者webpack.cmd文件，如果存在就执行，如果不存在就抛出错误。webpack实际入口文件是：node_modules\webpack\bin\webpack.js一、分析入口文件webpack.js#!/usr/bin/env node// @ts-i...
2020-04-05 14:53:54
546
原创 给定宽度，不用height画出正方形
body{width:100%;font-size:0;text-align:center;}div{display:inline-block;width:20%;position:relative;&:before{content:"";...
2020-03-29 01:28:20
572
原创 CSS（九）垂直居中详解
一般情况下有的需要问水平居中和垂直居中.常见的水平居中和垂直居中有：水平居中：行内元素： text-align: center; 块级元素：margin: 0 auto; absolute+ transform; flex+ justify-content: center;垂直居中：line-height: height; absolute+ transform; fl...
2020-03-28 17:11:59
956
原创 深入浅出FE（七）对象的深浅拷贝
对象的拷贝在js中比较重要，因为js不同与C++等，没有指针操作，基本类型都是没有引用的，只有对象和函数才有引用，这就造成当我们在拷贝一个对象时，可能会有深浅拷贝之分。浅拷贝的意思就是只复制引用（指针），而未复制真正的值。而深拷贝则是改变对象的引用，深拷贝形成的新对象和原来的对象有不一样的地址。比如一个对象的定义如下：var a = { b: 3}这时这个对象只有一层，...
2020-03-27 00:14:08
445
原创 深入浅出FE（六）React性能优化指南
1.使用纯组件pureCommponent如果 React 组件为相同的状态和 props 渲染相同的输出，则可以将其视为纯组件。对于像 this 的类组件来说，React 提供了 PureComponent 基类。扩展 React.PureComponent 类的类组件被视为纯组件。React.PureComponent中以浅层对比 prop 和 state 的方式来实现了该函数...
2020-03-26 22:45:40
541
原创 CSS（八）三栏布局详解
三栏布局，顾名思义就是两边固定，中间自适应。以下一些为公共代码：<!DOCTYPE html><html lang="en"><head> <style> .left { } .right { } .main { } </style></head>...
2020-03-23 00:07:40
277
原创 HTTP常见状态码总结
目录1XX2XX3XX4XX5XX1XX1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码。代码 说明100 (继续) 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。101 (切换协议) 请求者已要求服务器切换协议，服务器已确认并准备切换。2XX2xx (成功)表示成功处理了请求的状态代码。代码 说明...
2020-03-21 21:42:59
259
原创 深入浅出FE（五）Object.prototype
目录1. 定义2. 原理3. 用法4. 拓展4.1instanceof4.2 ES6 class5. 参考资料1. 定义Object.prototype属性表示Object的原型对象。2. 原理准确的说：所有的原型对象都是Object构造函数创建的，Object.prototype除外；所有函数都是Function的实例，包括Function...
2020-03-08 11:53:24
576
原创 深入浅出FE（四）闭包
1.定义1.1 为什么要用闭包？因为局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。1.2 闭包什么是闭包，不同的人会有不同的理解，不同的书中答案都不尽相同...《JavaScript高级程序设计》这样描述：闭包是指有权访问另一个函数作用域中的变量的函数；《JavaScript权威指南》这样描述...
2020-02-26 00:44:16
331
原创 深入浅出FE（三）跨域Cross-Origin
目录1. 跨域是什么2. 为什么有跨域2.1 防止csrf攻击2.2 防止xss攻击3. 跨域解决方案？3.1jsonp3.2 "跨域资源共享"（Cross-origin resource sharing）CROS3.3 document.domain + iframe跨域3.4window.name + iframe3.5 location.ha...
2020-02-17 23:02:16
753
1
原创 深入浅出FE（二）call/apply和bind
一、定义1、callcall()方法使用一个指定的this值和单独给出的一个或多个参数来调用一个函数。fuction.call(thisArg, arg1, arg2, ...)参数：thisArg可选的。在function函数运行时使用的this值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为null或undef...
2020-02-10 23:13:11
248
原创 深入浅出FE（一）promise对象
一、定义ECMA-262（ES6）给出的定义是：A Promise is an object that is used as a placeholder for the eventual results of a deferred (and possibly asynchronous) computation.翻译成中文就是：Promise对象是用来作为延迟（包含异步）运算的最终结...
2020-02-09 22:13:14
259
原创 webpck深入浅出教程（二）如何写一个loader
从官网我们知道，loader的特性主要有：链式传递，按照配置时相反的顺序链式执行； 基于 Node 环境，拥有 较高权限，比如文件的增删查改； 可同步也可异步。 支持option选项loader的编写原则:单一原则: 每个 Loader 只做一件事； 链式调用: Webpack 会按顺序链式调用每个 Loader； 统一原则: 遵循 Webpack 制定的设计规则和结构，输入与...
2020-01-12 22:11:03
251
原创 webpck深入浅出教程（一）
本系列教程基于你已经对webpack有一定的了解，本教程是create-react-app，基于webpack eject的，如果你不知道webpack eject的，请先了解eject。「webpack官网」本质上，webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(de...
2020-01-12 22:08:57
357
原创 2019年总结
2019年过去了，感觉今年做的不够多。在过去的一年，作为一名前端工程师，盘点一下去年的输入及输出：input1.书籍：技术书籍《深入浅出nodejs》《你不知道的javascript》上中下三册《javascript高级程序设计》《javascript设计模式与开发实践》非技术书籍《原则》《当下的启蒙》《有限和无限的游戏》《刻意练习》《最重要...
2020-01-09 21:41:51
173
原创 CSS（七）两栏布局详解
这是一个系列的文章，你也可以查看其他文章：0、CSS-预热篇1、CSS（一）详解position2、CSS（二）transform3、CSS（三）flex布局（flex弹性布局详解）4、CSS（四）详解Grid布局5、CSS（五）CSS动画-transition简介6、CSS（六）CSS动画-animation简介7、CSS(七)两栏布局详解两栏布局是非常...
2020-01-05 23:05:43
556
原创 JS（二十）Service Worker
背景service worker要解决的问题是用户丢失网络连接，换句话说使用service worker后，当用户在离线状态也可以获得很好的用户体验。基本概念Service worker是一个注册在指定源和路径下的事件驱动worker。它采用JavaScript控制关联的页面或者网站，拦截并修改访问和资源请求，细粒度地缓存资源。你可以完全控制应用在特定情形（最常见的情形是网络不可用）下...
2019-11-21 23:29:38
1573
原创 CSS（六）CSS动画-animation简介
这是一个系列的文章，你也可以查看其他文章：0、CSS-预热篇1、CSS（一）详解position2、CSS（二）transform3、CSS（三）flex布局（flex弹性布局详解）4、CSS（四）详解Grid布局5、CSS（五）CSS动画-transition简介6、CSS（六）CSS动画-animation简介7、CSS(七)两栏布局详解一、概念CSS ...
2019-10-17 23:47:01
691
原创 CSS（五）CSS动画-transition简介
这是一个系列的文章，你也可以查看其他文章：0、CSS-预热篇1、CSS（一）详解position2、CSS（二）transform3、CSS（三）flex布局（flex弹性布局详解）4、CSS（四）详解Grid布局5、CSS（五）CSS动画-transition简介6、CSS（六）CSS动画-animation简介7、CSS(七)两栏布局详解一、概念一个状态...
2019-10-17 23:27:49
716
原创 CSS（四）详解Grid布局
这是一个系列的文章，你也可以查看其他文章：0、CSS-预热篇1、CSS（一）详解position2、CSS（二）transform3、CSS（三）flex布局（flex弹性布局详解）4、CSS（四）详解Grid布局5、CSS（五）CSS动画-transition简介6、CSS（六）CSS动画-animation简介7、CSS(七)两栏布局详解Grid布局又叫做...
2019-08-17 21:20:54
1287
原创 CSS（三）flex布局（flex弹性布局详解）
这是一个系列的文章，你也可以查看其他文章：0、CSS-预热篇1、CSS（一）详解position2、CSS（二）transform3、CSS（三）flex布局（flex弹性布局详解）4、CSS（四）详解Grid布局5、CSS（五）CSS动画-transition简介6、CSS（六）CSS动画-animation简介7、CSS(七)两栏布局详解早期CSS三大难题包...
2019-08-11 20:28:35
14321
2
原创 CSS（零）-预热篇
这是一个系列的文章，你也可以查看其他文章：0、CSS-预热篇1、CSS（一）详解position2、CSS（二）transform3、CSS（三）flex布局（flex弹性布局详解）4、CSS（四）详解Grid布局5、CSS（五）CSS动画-transition简介6、CSS（六）CSS动画-animation简介7、CSS(七)两栏布局详解最近听了winter...
2019-08-10 21:52:43
518
原创 CSS（二）transform详解
这是一个系列的文章，你也可以查看其他文章：0、CSS-预热篇1、CSS（一）详解position2、CSS（二）transform3、CSS（三）flex布局（flex弹性布局详解）4、CSS（四）详解Grid布局5、CSS（五）CSS动画-transition简介6、CSS（六）CSS动画-animation简介7、CSS(七)两栏布局详解transform ...
2019-08-01 10:48:14
4057
原创 npm错误解决
1、Error: Please install mysql2 package manually网上很多说的都是错误的，其实只要执行这句就能解决这个问题。npm install mysql2 --save
2019-07-30 20:41:24
1690
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人