能力说明:
掌握HTML5与CSS3的核心技术,掌握前端主流语言和开发框架JavaScript、jQuery和Ajax的基本知识,具备搭建动态交互网页的基本能力。
暂时未有相关云产品技术能力~
技术改变生活、研发构建未来、细节铸造品质!
在项目开发过程中,会发现有一些代码反复需要,这些大部分是有第三方的脚本库来解决,有时不想为了一个功能安装一整个库,因此建议平时开发过程中将常用的函数封装成一个公共库。本文将带总结一下项目开发过程中可以用得到的函数。
在HTML5之前,应用程序数据只能存储在 cookie 中,并且会包含在每个服务器请求中。与 cookie 不同,浏览器本地存储限制要大得多(至少5MB),并且信息不会被传输到服务器。本文将要介绍的本地存储包括:localStorage、Web SQL Database、IndexedDB。
从 JavaScript 数组中删除空元素看似很简单,由于 JavaScript 的语言的特殊性,对于空的理解有不同意义。在本文中,将通过如何从 JavaScript 数组中删除空元素,总结一下 JavaScript 中空值和假值的知识点。
理解纯函数和非纯函数是向更清晰、更基于角色和可测试的代码的简单过渡。在这篇文章中,将通过查看一个简单的体重指数(BMI)计算器来探索纯函数和非纯函数,该计算器通过一些简单的身高和体重输入因素来估算“健康体重”。
纯函数是函数式编程的基础,之前在优雅编码的文章中提到过,多写纯函数,本文来简单介绍一下纯函数和非纯函数的概念和区别。
Node.js v17.0.0,是 JavaScript 运行时的最新主要版本,上个月刚发布,它将取代运行时当前发行版中的 V16。 V16 现在有望在 2021 年 10 月 26 日升级到长期支持 (LTS) 频道。
过去陆陆续续总结了一些有助项目开发效率和开发技能的代码片段,一方面加深对 Javascript 语法的理解,一方面对代码进行归档。本文对专栏《碎片时间学习Javascript代码》做一个精选的总结。
根据 Stack Overflow 的 2021 年开发者调查、NPM 趋势和 StateOfJS、前端、后端和测试的最佳 JavaScript 框架是 React.js、Angular、Vue.js、jQuery、Express js 等。本文将分享前端开发中四种广泛应用(即 React、Node、Angular 和 Vuejs)的和不太流利的 JavaScript 框架(Ember)的学习图谱。
解构赋值语法是一种 JavaScript 表达式,通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。这种语法是 ECMAscript 6 规范引入了一种新语法,可以更轻松地从数组和对象中获取值。
React 是一个很棒的库,可以创建令人振奋的 Web 应用程序,目前很多互联网公司使用 React 作为前端开发框架。与 Angular 和 Vue 相比,它是最没有主见的开发框架,因为,应用程序的构建和结构的选择是由开发人员决定的。这对于成熟的开发团队来说,是一种有利的方法,但对于新手开发人员、学习者和 React 世界的新手来说则不是。有些选择很容易,有些则不然,它可能因项目的类型和规模而有所不同。
在 JavaScript 的世界里,简洁的代码 == 更好,本文将通过项目开发设计的知识点整理一些可能涉及的 16 个JavaScript代码片段。
图像是网站或者WEB应用重要的组成部分,随着现在终端设备及5G的普及,用户对于图像的要求越来越高,为了提供更加速度体验,可以对图像进行优化。
性能优化是应用程序开发必须的工作之一,其目的之一为用户提供极致的速度体验,本文总结 WEB 应用或者网站可以快速实操的经验。
全屏 UI 设计有助于通过消除干扰来保持用户与内容的专注互动。因此,可以看到在现代 Web 应用程序中越来越多地使用全屏 UI,这都得益于浏览器的发展。在过去Web 应用要支持丝滑全屏还是有一定的复杂度,如借助 Flash 等等。在本文中,通过一个简单的全屏功能来展示 JavaScript 全屏 API 功能的使用。
FullScreen API允许页面上的一个元素有一个全屏视图,通常情况下,会在不同的图形或媒体资源(例如视频或图像)中看到这一点,但实际上可以让页面上的任何元素都具有全屏视图。
在 VUE 项目开发中,大部分需求会涉及API数据交互,为了保证项目效率,前端通常需要一个 API 服务器来确保前端开发进度,这就是所谓的 Mock 服务。网络上有许多类型的 Mock 工具,使用不同的方法解决同一个问题。
前面在《Node.js 日志最佳实践指南》介绍了关于日志的最佳实现指南,本文将使用 Winston 库来构建一个简单的日志功能。
在 JavaScript 开发过程中,很多时候使用 console.log 来调试程序,算是比较常用的一个方法。
在 JavaScript 中关于空值的定义会应项目的不同而不同,通常在与后台接口对接的时候,判断数据是否存在需要判断空字符串 ""、null、undefined。本文带大家再复习一下 null 和 undefined 。
文件上传,算是项目开发中比较常见的需求,本文将展示如何构建一个多文件断点续传组件,可以同时处理多个文件,并可以在出现异常或者网络中断的情况下恢复上传,可以手动暂停和恢复文件的上传。文章内容涉及前端和后端,算是一个小型的全栈项目,项目将使用 NodeJs、Express、Busboy 和 XMLHttpRequest,并使用自己开发的脚手架 generator-norm 来构建项目。
Ember.js 是一个基于MVVM模型的开源框架,该框架主要用于创建复杂的多页面应用程序。它最大的特点是:持续推出最新的特性,并不会丢弃任何旧功能。
DOM,即文档对象模型,前端开发工程师必学的基础知识,趁着假期,顺便复习一下。在本文将介绍如何在 HTML 文档中选择元素、如何创建元素、如何更改内联 CSS 样式以及如何监听事件。
在项目开发过程中,总觉得有更好的方式来组织代码,通过代码片段,间接的学习一些代码组织技巧。阅读开源代码,是开阔编码思维最快捷的方式,如果觉得内容能够带来点帮助,可以查看专栏《碎片时间学习JavaScript代码》其他内容,又或者有用到的需求片段,不妨在留言区留言。
在过去,一个简单的文本编辑器就足以让开发人员创建和管理大部分项目。但从那以后,WEB发生了翻天覆地的变化,如今,即使是一个相当简单的项目,通常也会有成百上千个带有复杂嵌套依赖关系的脚本,如果没有自动化工具,这些脚本根本无法有序的管理,这时就需要包管理器。
每天学习10个实用JavaScript代码片段,加深对 JavaScript 语法的理解,积累代码优化经验,新的内容来了,学习阅读代码是提高编码技能的最佳方式。如果觉得内容能够带来点帮助,可以查看专栏《碎片时间学习JavaScript代码》其他内容,又或者有用到的需求片段,不妨在留言区留言。
如果从未在前端使用过 SVG,那么就错过了很多改善性体验,如果不知道如何使用 SVG 制作动画,那么将错过更多。本文开始制作第一个 SVG 图形,为其添加动画。
reduce 方法在数组的每个元素上执行提供的回调函数迭代器。它传入前一个元素计算的返回值,结果是单个值,它是在数组的所有元素上运行迭代器的结果。
WEB 动画世界已经变成了一个庞大的工具和技术丛林,像 GSAP 和 Framer Motion 以及 React Spring 这样的库如雨后春笋般涌现,帮助WEB项目开发向 DOM 添加动作。
过去 WEB 需要实现交互动画效果是使用 flash 、javascript、Gif,近年来随着 flash 的淘汰,javascript 和 CSS 功能的增强,使得现代 WEB 应用的交互越来越丰富。借此总结一下 CSS 交互动画实现的基础,关键的知识点是 keyframes ,文章涉及的代码示例效果可以点击查看动画效果。
现代互联网时代,打开一个Web平台,是留下还是离开,只需要 1 分钟,因此前端的性能优化至关重要。
作为开发人员,经常使用 Web API 来轻松实现复杂的功能,或者创建它们来抽象复杂性。Web API 允许服务之间进行对话,分享信息到朋友圈或显示地图等操作。
浏览器允许 JavaScript 脚本读写剪贴板,自动复制或粘贴内容,而这一切都是通过 navigator clipboard 的API来实现的。剪贴板可以用于存储数据并在应用程序内部或应用程序之间使用的临时空间。这些操作的 API 都是异步操作并返回一个 promise。
渐进式 Web 应用程序 (PWA) 可能是现代移动应用程序开发的主流技术之一。这个技术工具结合了本地应用程序和web应用程序的功能。使用现代api来提供可靠性和可安装性,同时使用单一代码库访问任何人、任何地点、任何设备。PWA 在web开发中正在兴起,大大小小的公司都在利用这一强大的技术。本文将介绍PWA及通过代码开始一个基本的应用。
service worker 是现代web开发的关键部分,在最近几年获得了关注,这都要归功于 PWA(渐进式 Web 应用程序) 的流行。service worker 通过向典型的 Web 应用程序添加后台同步、离线渲染和推送通知等功能,缩小了本机应用程序和 Web 应用程序之间的差距,主要任务之一是充当代理。
QUIC协议是一个新的通讯协议,基于 UDP 的传输协议并希望最终取代所有基于TCP的HTTP请求。熟悉 UDP 的人都应该清楚为什么要使用 QUIC。UDP 是的特点是不可靠、数据包经常丢失、重新排序、重复等等。UDP 不包括任何更高级别协议(如 HTTP)严格要求的 TCP 的可靠性和顺序保证,这就是 QUIC 的用武之地。
随着消费者期望的提高,API 性能从未像今天这样重要。众所周知,如果网页加载时间超过 3 秒,超过半数的网络用户会放弃继续浏览网页。
Promise 对象是 ECMAScript 6 中新增的对象,主要将 JavaScript 中的异步处理对象和处理规则进行了规范化。前面介绍了《Promise.any() 原理解析及使用指南》、《Promise.all() 原理解析及使用指南》和《Promise.allSettled() 原理解析及使用指南》
Promise 对象是ECMAScript 6中新增的对象,主要将 JavaScript 中的异步处理对象和处理规则进行了规范化。前面介绍了《Promise.any() 原理解析及使用指南》和《Promise.all() 原理解析及使用指南》,本文继续来介绍 Promise 另一个方法 Promise.allSettled(promises) ,返回一个在所有给定的 promise 都已经 fulfilled 或 rejected 后的 promise ,并带有一个对象数组,每个对象表示对应的promise 结果。
Promise 对象是ECMAScript 6中新增的对象,主要将 JavaScript 中的异步处理对象和处理规则进行了规范化。前面介绍了《Promise.any() 原理解析及使用指南》,本文来介绍另一个方法 Promise.all(promises) ,能够一次并行处理多个 promise,并且只返回一个 promise 实例, 那个输入的所有 promise 的 resolve 回调的结果是一个数组。
Promise.any(promises) 是 ES2021 新增的特性,它能够并行运行 promise,并解析为 promises 列表中第一个成功解析的 promise 的值。需要注意的是 Promise.any() 方法依然是实验性的,尚未被所有的浏览器完全支持。
从头开始创建令人印象深刻且引人入胜的跨平台游戏,本教程将学习如何剖析制作成功游戏的元素,以及如何开发游戏设计,循环和用户输入、动画、地图、碰撞检测和AI、数学、游戏物理等方面的实践技能。
Node.js 默认单进程运行,对于32位系统最高可以使用 512MB 内存,对于64位最高可以使用 1GB 内存。对于多核CPU的计算机来说,这样做效率很低,因为只有一个核在运行,其他核都在闲置,pm2 利用的 node 原生的 cluster 模块可以顺利解决该问题。
WebAssembly(缩写为 Wasm)是一种用于基于堆栈的虚拟机的二进制指令格式, Wasm 被设计为编程语言的可移植编译目标,支持在 Web 上部署客户端和服务器应用程序,它可能会终结所知道的互联网上的隐私和安全。
Math.random() 将生成一个介于0(包括)和 1(不包括)之间的伪随机浮点数(带有小数的数),随机数并不意味着总是得到一个唯一的数字,它会在一段时间后产生相同的数字。这里的间隔很长,所以可能不会得到两次相同的数。
Cron 是一款类Unix的操作系统下的基于时间的任务管理系统,Cron 用于操作系统(CentOS)周期性执行程序或者脚本。例如有一个程序,想要每天凌晨 2 点执行,或者需要每周备份一次文件,类似这些事情可以通过一个由 cron 执行的脚本来完成。
每天学习10个实用JavaScript代码片段,加深对 Javascript 语法的理解,积累代码优化经验,第六天来了,本文代码片段包括生成随机数、数字加密、四舍五入、文件扩展名、变量数字转换。如果觉得内容能够带来点帮助,可以查看专栏《碎片时间学习Javascript代码》其他内容,又或者有用到的需求片段,不妨在留言区留言。
每天学习10个实用Javascript代码片段,加深对 Javascript 语法的理解,积累代码优化经验,第五天终于来了,如果觉得内容能够带来点帮助,可以查看专栏《碎片时间学习Javascript代码》其他内容,又或者有用到的需求片段,不妨在留言区留言。
回想过去,CSS 需要兼容各种版本的浏览器,那种在效果和可用之间痛苦选择的经历记忆犹新。现在的 CSS 能够做很多事情,而对于浏览器的兼容性只需考虑主流的,并且大部分主流的浏览器都支持最新 CSS 特性。本文来总结一下CSS中数学函数之min、max、calc、clamp。
选择对 API 请求的正确响应有助于保护应用程序,并能够提高项目开发效率。虽然表面上看起来可能并非如此,但每一条不必要的信息都使攻击者更容易了解如何获得访问权限。另一方面,每一个缺失的信息都会让 API 的使用者更难理解对 HTTP 请求的响应。
最近打算对个人博客进行优化,主要涉及两个方面,文章编辑器和代码展示分享模块,因此就需要考虑选择什么样的在线编辑器,顺道总结一下在线代码编辑及分享一些可能用得上的优秀代码编辑器。