葡萄城技术团队博客

TypeScript自定义工具类型实用指南：5个提升开发效率的技巧 本文分享了5个实用的TypeScript自定义工具类型，帮助开发者解决常见的类型安全问题。1）Process工具类型优雅处理异步状态流转，避免多条件判断；2）Result类型统一API响应格式，明确区分成功/失败/取消状态；3）Brand类型通过品牌化标识防止原始类型滥用。这些工具类型能显著提升代码健壮性，减少潜在错误，并提供React等场景下的额外优势。通过自定义类型工具，开发者可以构建更适合业务需求的类型系统，提高开发效率和代码质量。

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。引言Node.js中的一个重要概念是依赖关系管理。本文就将带大家了解依赖管理的各种模式以及Node.js如何加载依赖。Node.js编写模块化代码非常简单，我们可以使用单个js文件非模块化的编写所有应用程序的内容。在这里你可能会问，模块（module）是什么，它又有什么作用。大型项目的实施之中，会有很多分工协作，为了可以让分工更加方便和顺利，我们可以将编写好的代码封装起来，重复使用或者提供给第三方使用。在.

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。原文参考：https://www.sitepoint.com/vue-3-reactivity-system/在上节中我们对Vue2和Vue3中的响应式系统做了对比，带大家了解了响应式系统的工作原理，今天我们来进一步探索Vue3中的响应式系统API，为了让大家更好的理解和学习，将方法分组进行归纳。基本方法第一组包括控制数据响应的最基本方法ref接受一个原始值或一个普通对象，然后返回一个响应且可变的re.

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。响应式系统（Reactivity systems）是现代前端框架的关键部分之一。应用系统的的高度交互性、动态性和响应能力全靠它支持。每个Web开发人员而言都应该了解这一系统的功能和实践操作。原理响应系统是一种使自动使数据源（模型）与数据表示（视图）层自动保持同步的机制。每次模型更改时，都会重新渲染视图。以一个简单的Markdown编辑器为例。通常编辑器有两个窗格：一个窗格用于编写Markdown代码（用于修.

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。在文章的开始我们需要了解什么是缓存？缓存是预先根据数据列表准备一些重要数据。没有缓存的话，系统的吞吐量就取决于存储速度最慢的数据，因此保持应用程序高性能的一个重要优化就是缓存。web应用程序中有两项很重要的工作，分别是文件和视频Blob的缓存和快速访问页面模板。而在NodeJS中，非异步功能操作的延迟会决定系统什么时候为其他客户端提供服务，尽管操作系统有自己的文件缓存机制，但是同一个服务器中有多个web应用程.

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。今天，我们给大家带来的是一个基于vue3的开源项目：电动车电池范围计算器。这是一个workshop，通过完成该项目，我们可以直观的感受到vue3的强大，了解一些项目最佳实践。项目的背景是当前备受关注的电动车。经历了近6年的发展，电动车在市场上得到大规模普及，从“大玩具”变为未来交通的基石。项目以电动车行业最受关注的续航能力为例，使用vue3技术构建一个电池范围计算器，来展示用Vue.js制作仪表盘的开发方式和体.

四两拨千斤——你不知道的VScode编码TypeScript的技巧创建自定义代码段自定义TypeScript格式易重构性强重命名现有符号抽象的构建简化功能签名保存文件后自动操作CodeLens计数器阅读拓展总结：如果你体验过JAVA这种强类型语言带来的便利，包括其丰富的类型变量、抽象与接口，转而使用JavaScript一定会觉得不够满意。尤其是JavaScript声明的变量Number可以轻而易举的分配给String，IDE如何执行任何类型的IntelliSense都让人十分困扰。面对这个技术障碍，我们

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。原文参考：https://blog.bitsrc.io/vscode-automations-for-frontend-developers-6c66a6f36bc6编程是复杂的。在保证高生产力和代码质量的同时，有许多最优的方案需要记住，有许多准则需要遵循，还有许多"已知问题"需要避免。现代开发过程如果没有自动化完成的工作，还是比较困难的。在本文中，我就将为大家介绍一些可以为前端开发人员提高开...

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。原文出处：https://www.freecodecamp.org/news/learn-modern-javascript/在过去几年里，JavaScript有很多的更新。如果你想提升写代码的能力，这些更新将会对你有非常大的帮助。对于程序员来说，了解这门语言的最新发展是非常重要的。它能使你跟上最新趋势，提高代码质量，在工作中出类拔萃，从而进一步提升你的薪资待遇。特别地，如果你想学习像React..

本文由葡萄城技术团队原创并首发转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。与多数面向对象的开发语言有所不同，虽然JavaScript没有引入类似类的概念（ES6已经引入了class语法糖），但它仍然能够大量的使用对象，那么如何将所有对象联系起来就成了问题。于是就有了本文中我们要讲到的原型和原型链的概念。原型和原型链作为深入学习JavaScript最重要的概念之一，如果掌握它了后，弄清楚例如：JavaScript的继承，new关键字的原来、封..

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。原文出处：https://blog.bitsrc.io/top-5-javascript-frameworks-past-present-and-future-8b6fda39de02随着信息技术领域的发展，企业对于JavaScript的需求变得十分广泛，为了让前端编码更快更高效，一系列前端JavaScript框架就此诞生。前端框架的设计初衷是为脚本编程语言提供出色的支持，让代码重复可用。简而言之，..

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。原文出处：https://blog.bitsrc.io/sessionstorage-and-localstorage-a-ux-security-comparison-a05c486413e0作为Web开发人员，在 Web浏览器中存储数据以改善用户体验和提升Web应用程序性能是非常常见的。在大多数情况下，可供我们使用就是LocalStorage和SessionStorage。本文中，我们将会从安..

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。原文出处：https://medium.com/swlh/what-is-typescript-bf333e23f259从历史上看，JavaScript已经成为了在Internet上编写网页和应用程序脚本语言的主要语言。但是否能通过JavaScript创建大型复杂Web应用系统呢？可能那么容易。不过值得庆幸的是，我们还有一个解决方案TypeScript。在过去的几年中，TypeScript的受..

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。原文出处：https://blog.bitsrc.io/es2020-has-been-finalized-here-is-what-im-excited-about-414959bc2f7f最近这几年，随着JavaScript及前端领域的持续迅猛发展，尤其是在2015年ES6发布后，这个发展的进程也变得越来越快起来。许多新功能也将计划包含在ES2020版本中。前段时间，我们得到了关于ES2020..

本文由葡萄城技术团队原创并首发转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。一名开发者或设计师通常可以在一秒内指出优秀的设计，但对于糟糕的设计只需最多半秒就能指出。所以，糟糕的设计往往总是能受到更多人的关注。网上就有那么一批网友致力于收集这些设计，下面列出网友收集的一部分让大家先看一看：一个没有任何标示的楼梯(图片来源于网络)一个在龙头水嘴下方的开关(图片来源于网络)一个并不透明的刻度标...

本文由葡萄城技术团队原创并首发转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。Excel是我们办公中常用的工具 ，它几乎能为我们处理大部分数据，友好的交互界面、丰富的公式函数和易于上手的图表为我们在数据统计方面提供了不小的帮助，但经过一段时期运行，就会出现下面的情况：这样多分枝的混乱状况就会难以保证文档的安全性及...

本文由葡萄城技术团队于优快云翻译并首发转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。如果我们自己编写从URL中分析和提取元素的代码，那么有可能会比较痛苦和麻烦。程序员作为这个社会中最“懒”的群体之一，无休止的重复造轮子必然是令人难以容忍的，所以大多数浏览器的标准库中都已经内置了URL对象。那么现在，有了它，我们就可以将URL字符串...

本文由葡萄城技术团队于优快云翻译并首发转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。JavaScript最初是为Web应用程序创建的。但是随着前端技术的发展，大多数开发人员更喜欢使用基于JavaScript的框架。它简化了你的代码以及使你能完成更多全栈工作，您几乎可以在任何框架中使用JavaScript。使用什么类型的框架决定了创建应用...

Google Chrome在招来了FireFox，FireBug的项目组领导人John J. Barton后，Chrome Dev Tools也变的越来越好用，越来越方便了。本文根据Google I/O上对Chrome Dev Tools的介绍(http://www.youtube.com/watch?v=N8SS-rUEZPg),和相关PPT：http://chrome-devtools-io2

前言最近一直重构项目的前端代码，也参考了各种前端代码的最佳实践，目的是让前端的HTML,CSS,Javacript代码更符合标准，有更好的性能，更好的可维护性，尝到了重构后的甜头，也萌生了写这个系列博客的念头。前端代码有其固有的灵活性，这就导致了目前前端代码非常混乱的局面，本系列文章希望能起到抛砖引玉的作用，让更多的人重视前端代码的质量，编写更标准的前端代码。本系列文章共有三篇，分别讨论H

上一篇《前端代码标准最佳实践：javascript》发表后，大家讨论还是很热烈，从侧面体现了前端工程师对写标准的前端代码的重视程度很高。这些最佳标准实践并不是那个权威组织发布的，而是由大量的前端工程师们在实践过程中的经验总结，目的在于提高代码的可读性，可维护性和性能。那么接着上一篇，我们再来谈谈CSS代码的一些标准实践。1，命名和其他语言规范一样，css的命名也讲究命名要有意义，命名要

Web前端代码中，HTML是根本，CSS和JavaScript也是围绕着既有的HTML结构来构建，所以良好的HTML代码结构，除了提高了HTML代码的可读性，可维护性和执行性能之外，也可以让相对应的CSS和JavaScript代码更好的构建。距前面两篇探讨JavaScript（前端代码标准最佳实践：JavaScript篇）和CSS（前端代码标准最佳实践：CSS篇）之后，我们今天来探讨Web前端HT

Visual Studio 一直以来是开发微软旗下应用的利器，只要是开发微软相关的应用无论是Windows程序，WPF，Asp.Net，WinRT Surface，WindowsPhone 等微软旗下的应用都可以使用Visual Studio 来开发。如果您已经非常习惯了Visual Studio 的UI和操作，是不是有时候也想使用Visual Studio 像DreamWeaver 一样来开发纯

预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措。Mozilla 官方发布数据，通过预加载器技术网页的加载性能提升了19%，Chrome测试了 Alexa 排名前2000名网站，性能有20%的提升。它并不是一门新技术，有人认为只有 Chrome 才具备这个功能。也有人认为它是有史以来提升浏览器性能最有效的方法。如果你第一次接触预加载器，也许心中已经有了无数个问号。什么是预加载器？它是如何提升浏览器性能的？

位图，亦称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。然而，如果从稍远的位置观看它，位图图像的颜色和形状又显得是连续的。提到SVG，我想大多数人的第一印象是矢量缩放。是的，SVG是制作Logo、图标及按钮的理想选择。和

今天 ,Web 组件已经从本质上改变了HTML。初次接触时，它看起来像一个全新的技术。Web组件最初的目的是使开发人员拥有扩展浏览器标签的能力，可以自由的进行定制组件。面对新的技术，你可能会觉得无从下手。那这篇文章将为你揭开Web组件神秘的面纱。如果你已经熟知HTML标签和DOM编程，已经拥有了大量可用的Web组件，那么你已经是Web组件专家了。

使用过 AngularJS 的朋友应该最感兴趣的是它的指令。现今市场上的前端框架也只有AngularJS 拥有自定义指令的功能，并且AngularJS 是目前唯一提供Web应用可复用能力的框架。目前有很多JavaScript 产品提供插件给Web开发人员。例如， Bootstrap 就是当前比较流行的提供样式和JavaScript插件的前端开发工具包。但是开发人员在使用Booostrap中的插件时， 必须切换到JavaScript 模式来写 jQuery 代码来激活插件虽然jQuery 代码写起来十分简

AngularJS是Google推出的一款Web应用开发框架。它提供了一系列兼容性良好并且可扩展的服务，包括数据绑定、DOM操作、MVC设计模式和模块加载等。本文专注于AngularJS 指令的使用，在我们进入主题之前，我们将快速浏览AngularJS的基本用法。

又到了一年一度的毕业季了，青春散场，却等待下一场开幕。在求职大军中，IT行业的程序员、码农是工科类大学生的热门选择之一，尤其是近几年Web的如火如荼，更是吸引了成千上万的程序员投身其中追求自己的梦想，这篇文章以Web面试官的经历整理而成，希望能对你有所帮助。 jQuery是什么？  jQuery是javascript编写一个可重用的JavaScript库。不使用JQuery设置UI文本的Jav

基于前面2篇博客：程序员Web面试之jQuery程序员Web面试之JSON您已经可以顺利进入Web开发的大门。但是要动手干，还需要了解一些已有的前端框架、UI套件，即要站在巨人肩膀上而不是从轮子开始造汽车. 下面就Web开发用到的前端框架、UI套件、UI插件一一列举(排名不分先后）：jQuery UIjQuery UI以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包

上周Wijmo 2014 V2版本刚刚发布(下载地址),  有网友下载后发现仅仅使用了40个Widgets的一小部分，还需要加载全部的jquery.wijmo-pro.all.3.20142.45.min.js包？ 即对仅使用部分的Widget，有无办法优化而提高网络性能呢。答案是肯定的，有办法。其中针对这种情况，使用Require.JS再合适不过了，实际上Wijmo 2013年已经开始支持R

几个月之前我接到一个新的开发任务，要在一个旧的Web页面上面增添一些新的功能。在开发的过程中发现旧的代码中有很多常见的不合适的写法，结合这些问题，如何写出更好的，更规范的，更可维护的代码，就是这篇文章要阐述的内容。

创建一个MVC的工程，在Startup.Auth.cs文件中，我们能看到这样的一些代码。这其实是微软已经帮我们实现好的三方登录的接口，我们只需要创建相应的开发者账号，并在其中配置好跟我们应用程序相关的一些信息，获取到应用程序的Id跟密码，填到上面相应的接口中，即可实现相应账号的三方登录。

从事前端开发到目前为止已经有4年多的时间了，从一个小菜鸟一路依靠自学，到目前总算一个老菜鸟了。当然了，从事前端的工作，是免不了要对产品以及用户体验有些许了解的。最近谈论起这方面的内容，就按照自己的想法，对UX相关的内容做个总结。大家可多多评论一起探讨。先说一下几个概念（职位）：PM：Product Manager 的简写，即产品经理，就是企业中专门负责产品管理的职位，产品经理负责调查并根据用户的需

Web开发人员，需要长时间使用浏览器，尽管Windows10 Edge浏览器启动非常快速，且支持110多种设备，Edge支持基于JS 扩展，但也删除了很多旧功能像Active-X等插件。多数情况下，插件不仅可以解决一些安全问题，而且能够有效的解决浏览器负载问题。会在Chrome中每新打开一个标签页，插件都会自行运行，生成新的插件实例。这就意味着如果你打开10个标签页，并且浏览器有10个插件，那么就

在本文中，将继续介绍在 WebStorm 中开发，去实现App的功能需求。 就像盖房子一样，第一步需要把整个工程的页面结构先勾勒出来，先让各个页面流转起来，然后再去细化每个页面。 所有工程代码放在了 https://github.com/zhangsichu/DeliveryApp 同时上篇文章中创建的初始化工程，也Tag了 TheInitialProject，您可以使用 Git checkout

阅读本文之前，分享大家一张图片，看图会发现JavaScript开发需求最高，占比达到42.84%，因此掌握JavaScript语言好工作就不愁啦，工欲善其事必先利其器，那么选择IDE来开发是至关重要的，本文指出常用的几款JavaScript IDE，分析其优缺点，如有不完善的请大家补充

Background sync是Google新推出的Web API，可延迟用户行为，直到用户网络连接稳定。这样有助于保证用户想要发送的数据就是实际发送的数据。

在第一天学习了HTML5的一些非常重要的基本知识，今天将进行更深层学习首先来回顾第一天学习的内容，第一天学习了新标签，新控件，验证功能，应用缓存等内容。第2天将学习如何使用Canvas 和使用SVG 实现功能 Lab1—— 使用CanvasCanvas 是指定了长度和宽度的矩形画布，我们将使用新的HTML5 JavaScript，可使用HTML5 JS API 来画出各种图形。初始化1. 创建HT

本节又带了一些常用的，却很难理解的问题，本节从文件上传功能的实现引出了线程使用，介绍了线程饥饿的解决方法，异常处理方法，了解RouteTable自定义路径 。系列文章七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递七天学会ASP.NET MVC (三)——ASP.Net MVC 数据处理七天学会ASP