能力说明:
掌握HTML5与CSS3的核心技术,掌握前端主流语言和开发框架JavaScript、jQuery和Ajax的基本知识,具备搭建动态交互网页的基本能力。
暂时未有相关云产品技术能力~
技术改变生活、研发构建未来、细节铸造品质!
PIPE,翻译为管道。Angular 管道是编写可以在HTML组件中声明的显示值转换的方法。Angular 管道之前在 AngularJS 中被称为过滤器,从 Angular 2开始就被称为管道。管道将数据作为输入并将其转换为所需的输出。
模板引擎是Web应用中用来生成动态HTML的一个途径, 负责将数据模型与HTML模板结合起来(即模板渲染),生成最终的HTML。 编写HTML模板的语法称为模板语法,模板语法的表达能力和可扩展性决定了模板引擎的易用性。本文将介绍在重构管理控制台中使用到的Angular的模板引擎ng-template。
错误处理是编写代码经常遇见的并且必须处理的需求,很多时候处理异常的逻辑是为了避免程序的崩溃,之前《浅谈前端异常监控平台实现方案》介绍过异常跟踪,本文将简单介绍Angular处理异常的方式。
HTML是超文本标记语言,它能够轻松地为网页创建元素,可以使用标签、属性、添加脚本等等。同时 HTML 比想象的更有用,在有些场景下可以不需要 JavaScript。今天跟大家分享9个不需要 JavaScript 能够实现的小功能。
JavaScript 是一个灵活性很强的语言,有很多和其他语言不一样的特性,本文分享7 个日常开发中可以用到的 JavaScript 编码技巧,享受其优雅编程的快感。更多的编码技巧可以参阅《18个JavaScript代码的小技巧》和《24 个 Javascript 代码优化技巧》。
表格,是用来展示记录集常用的标签,现如今各种终端设备,大分辨率、小分辨率等等,让表格展现数据变得不那么直观,如表头被滚动条操作移除可视范围导致查看数据不够友好。说到表格数据查看的方便性,大家首先想到的应该是Excel。没错,这里跟大家分享一个操作便捷且直观的响应式表格制作方式,以后在项目中或许能够用上,当然现在很多框架都实现了这样的效果。
文本溢出截断是一个比较常见的场景,如新闻列表页、微博列表、商品列表等,溢出截断主要是为了保证界面的整齐。在《前端开发需要知道的 10 个 CSS 技巧》中有提到过多行文本溢出的处理,本文总结一些优雅的处理文本溢出截断的方法。
个人觉得 CSS 是每个前端开发人员都必须掌握的基础,以完成相应的交互和终端设备的响应。在项目开发中,有些容易被忽略的小问题带来项目后期的胶水代码。本文总结一些项目开发中CSS的10个小技巧。
微前端是前端web开发的趋势,微服务允许你将后端分解成更小的部分,受此启发,微前端允许你独立构建、测试和部署前端应用。根据你选择的微前端框架,你甚至可以让多个微前端应用——用React、Angular、Vue或其他工具编写的——在同一个大应用中无扰共存!之前在这里《认识微前端:一种用于前端 Web 开发的微服务》大概介绍了一下。
现代前端开发相比以前来说幸福很多了,过去为了兼容IE、火狐等浏览器环境焦头烂额,为了减少代码加速文件的加载尽可能的编写原生 JavaScript,能不用插件就不用(插件由于要考虑通用性,会增加很多兼容代码)。这一切变化首要功能应该要给谷歌浏览器提供的开源核心,360浏览器为中国用户普及高级浏览器的努力,网络提速政策的实时。
在 REST API 设计理念里面对于资源的具体操作使用 HTTP 动词(方法),昨天在《API端点/资源命名最佳实践》介绍了端点的命名,今天来介绍在 REST API 设计中经常用到的HTTP方法,这些方法类似于字母表很常用。开发人员通常只使用 GET、PUT 、DELETE 或 POST,HTTP 官方介绍了 39 个 HTTP 请求方法及每个方法适合的场景。在本文中,介绍在REST API设计中常用的HTTP请求方法和特性。
ECMAScript 6.0(以下简称 ES6)是 Javascript 语言的下一代标准,正式发布与2015年6月。它的目标,是使得Javascript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
有很多理由来驱动深思熟虑地命名 API 端点,为 API 端点选择合理的名称可以极大地平滑新开发人员的学习曲线,帮助他们直观地知道要寻找什么以及在哪里找到它,也能极大的降低开发人员之间的沟通成本。本文将介绍API端点命名的实用规范,关于REST的设计准则,可以参阅《9个REST API设计的基本准则》,在开始讨论API命名实践之前,先聊下 REST 的资源命名准则。
一个严重的误解是 REST 的 API 必须是基于 CRUD 的,这两者之间没有任何的联系,都只是API设计风格的一种方式而已。本文还将介绍基于 REST 的 API 的几种实现规则。
API 风格是一个备受争议的话题,大多数开发者都熟悉 REST 与 GraphQL 的争论,更不用说其他风格了。本文将介绍常见的8种不同的API风格。
学习一门语言的一种非常有效的方法就是阅读该编程语言开发的优秀开源项目的源代码。 Vuejs是最好的Javascript开源项目之一。
Docker Hub 是Docker的Github,是 Docker 官方维护了一个公共仓库。上面包括很多现成的镜像,如 Apache、PHP、Node.js、Python、MySQL 或 MongoDB等,不需要自己的制作镜像。当然你有可以自己制作镜像推送到仓库。
本文主要介绍如何快速创建nodejs插件并发布到npm上。npm是一个让JavaScript程序员分享和复用代码的工具,我们不仅可以install别人的插件,也可以publish自己的代码。
苹果开发者大会(WWDC)2021将于北京时间6月8日至12日线上召开。本次活动最受期待的是iOS 15、iPadOS 15、macOS 12、watchOS 8和tvOS 15这五大操作系统的升级。
之前有在《读 2020 年 Javascript 趋势报告展望 ES2020》介绍了主流的前端库,本文就来看看JavaScript框架之间的终极性能之战
和其他编程语言一样,JavaScript 有自己的数据类型,如数字、字符串、数组、对象等。而对象在JavaScript中是一种非常重要的数据类型,它们有很多有用的方法,在平常项目开发中可以使用这些方法容易地处理对象。本文介绍6个在项目中用得上的方法,趁此机会加深其使用方法。
【摘要】Node.js的异步编程方式有效提高了应用性能,然而回调地狱却让人望而生畏,Promise让我们告别回调函数;在实践过程中,却发现Promise并不完美;技术进步是无止境的,后来有了Async/Await,让我们能够写出阻塞式的异步处理代码,然而对于一些流程控制方面还是很难写出优雅的代码。async.js的出现,能够写出简单清晰的异步流程控制代码。本文主要介绍项目中的常用方法。
映射(Map)是 ECMAScript 6 规范中引入的一种数据结构。这是一种存储键值对列表很方便的方法,类似于其他编程语言中的词典或者哈希表。
到目前为止,已经使用了预构建的 Docker 镜像,例如MySQL、Vue、Nginx和WordPress。都比较实用,本节来介绍在容器中开发NodeJs应用程序。
在专栏《面向WEB开发人员的Docker》介绍了容器在开发过程中的使用,虽然整个专栏还未完成,想必现有的内容可以大概了解清楚容器的概念,能够做什么。
对于Web应用来说,前端越来越大,后端越来越不重要。现代 Web 应用程序 80%-90% 的代码为前端代码,后端代码非常少。可以想象,现在大多数新的web应用程序都面临着类似的情况。
前端,现代前端分工变得越来越细致,页面制作、JavaScript框架设计、组件插件、交互设计、工程化脚手架等,项目中前端的占比也越来越高,继而出现了BFF (Back-end for Front-end 服务于前端的后端),这一切的助力离不开各大浏览器厂商的厮杀。
在过去的几年中,JavaScript语言进行了多次更新。为了跟上技术更新的脚步,时刻保持一颗学习的心。趁着休息的时间学习熟悉一下数组的includes、reduce的使用。
通常情况下,在项目开发过程中涉及的API设计是采用REST API的模式,但并没有制定一个严格的、可理解的、可扩展的规范,从长远来看,随着项目的不断迭代,特别的在赶工期的情况下,REST API就会出现偏移。因此建议在项目初期就建立严格的API设计规范。
用JavaScript编写复杂的条件总是有可能创建一些相当混乱的代码,很长列表的if/else语句或switch会使代码变得臃肿。那么如何去优化很多if/else或者switch的代码呢?同时需要避免过多使用if/else或者switch。对象字面量能够帮忙我们写出易读的代码,本文就跟大家分享一下。
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。也就是说,ES6就是ES2015。本文着重介绍ES2015新增内容之一:Object.assign。在文章最后也介绍ECMAScript的发展历程。
上一期,介绍了使用docker部署开发wordpress,本期来介绍更加贴近前端开发的Docker使用。现在很多前端项目都使用vue,发布的时候将文件生成到默认的 dist 文件夹,本文将展示vue项目发布部署到Docker容器,文章涉及的命令都是基于配置好了docker环境,如果没有安装部署Docker,可以参阅《面向WEB开发的Docker(三):安装Docker》。
前面介绍了Docker的一些基本知识和使用,对于新技术或者新系统想去尝试运行起来,Docker是一个最佳的选择,上手容易,抛弃也容易,如果系统或者应用运行起来后不需要了可以直接删除即可,对宿主机没有任何的影响,也不会受到宿主机环境的干扰。本文将分享如何使用Docker构建WordPress环境,并运行起来。
在过去十年中,REST已经成为Web API的设计标准,提供了一些很棒的想法,例如无状态服务器和对资源的结构化访问,可以去这里详细了解REST API。但是,REST API已经显示出太不灵活,无法满足访问客户端快速变化的需求。
在本文中,将来学习如何使用Docker CLI和Docker compose启动MySQL容器。
对于大多数开发人员而言,监控应用程序的性能并不是一个陌生的概念。在某些情况下,我们必须自己进行一些性能调试。通常,当出现影响用户体验或影响成本的大问题时,就需要去监控应用程序的性能。同时我们也需要话时间去查看应用在不同场景下的表现情况。
Docker可以安装在Linux,macOS或Windows 10上。Docker Engine可通过Docker Desktop在各种Linux平台安装Docker, macOS安装Docker和Windows 10上安装Docker以静态二进制安装的形式使用。更多Docker安装指南可以参照官方文档介绍【Docker官方网站】,下面简单总结一下安装过程。
什么是Docker容器?有什么的特点:轻量,在一台机器上运行的多个Docker容器可以共享这台机器的操作系统内核;它们能够迅速启动,只需占用很少的计算和内存资源。镜像是通过文件系统层进行构造的,并共享一些公共文件。这样就能尽量降低磁盘用量,并能更快地下载镜像。
Docker的优势很容易让Web开发人员所忽略。对于开发运维来说,它被认为太过技术性、没有必要。术语可能难以理解。教程从来没有解释如何在开发过程中使用Docker。在这里带大家一起来感受Docker在WEB开发中应用。
Node.js被设计用来做快速高效的网络I/O。它的事件驱动流使其成为一种智能代理的理想选择,通常作为后端系统和前端之间的粘合剂。Node的设计初衷就是为了实现这一目的,但与此同时,它已成功用于构建传统的Web应用程序:一个HTTP服务器,提供为HTML页面或JSON消息响应,并使用数据库存储数据。
异常捕获是改善软件质量的跟踪手段之一,常见的方式是记录日志,从日志分析异常问题进而跟进。对于前端项目来说,异常可能是后端接口数据导致,可能是前端本身业务逻辑问题导致,不管是什么导致的异常,只要能够精准的捕获到就能够分析出问题所在。可能有小伙说有测试阶段,全面的测试机制的确能够降低异常的出现,但是测试大部份情况是在非生产环境上进行的,覆盖面有限。
在现在的软件架构中,前后端分离是很普遍的软件架构,让前端更加专注于UI逻辑渲染,后台专注于数据业务逻辑,而前后端数据交互的方式就是通过API接口。
在 Javascript 中数组的迭代最常用的两个函数:forEach和map。可能很多人认为这两个函数在工作方式上是相同的,它们都进行迭代并输出数组的每一项。本文就来介绍一下forEach和map的差异,并因此加深对两个函数的理解。
Javascript 在过去一年里整体上在设法向前发展。得益于像可选链(Optional Chaining)和空值合并运算符(Nullish Coalescing)这样的新特性,语言本身在不断改进,而 TypeScript 的广泛使用将静态类型化普及到了一个新的高度。
GraphQL是一种通过强类型查询语言构建api的新方法。GraphQL于2015年由Facebook发布,目前正迅速获得关注,并被Twitter和Github等其他大型公司所采用,之前写过一篇《浅谈NodeJS搭建GraphQL API服务》只是简单介绍构建API。在本文中,我们将介绍如何使用Apollo Server在Node.js中设置GraphQL服务器。
GraphQL是一种通过强类型查询语言构建api的新方法。GraphQL于2015年由Facebook发布,目前正迅速获得关注,并被Twitter和Github等其他大型公司所采用。GraphQL API设计理念是有别于REST API,简单了解可以看看这篇文章《GraphQL与REST:两种API架构》
前端开发者虽然大部分时间都在做页面制作、交互设计及性能优化等与客户端工作,而实际上交互设计不单单是客户端的交互,还必须实现数据上的交互,即数据通讯。WEB上的数据通讯基本上都是以HTTP的形式来实现的,因此对于前端开发者来说就必须对HTTP有足够的认识,HTTP头信息基本都可以通过Firebug的控制台来查看。
蜡笔(Crayon)管理模板,是一个学习性质的管理模板,借此机会学习一些最新的前端框架,也希望有一些志同道合的小伙伴加入,从中学习提高自己的技能。为什么叫蜡笔,蜡笔可以为画填上色彩,寓意点缀美好生活和职业生涯。
映射(Map)是 ECMAScript 6 规范中引入的一种数据结构。这是一种存储键值对列表很方便的方法,类似于其他编程语言中的词典或者哈希表。让我们一起来看一下映射这种数据结构。
对于前端工程师来说,call、apply算是常用的函数方法,允许通过函数和在函数调用中指定this的指向。那么这两个方法到底有什么区别呢?本文将详细介绍这两个方法,顺便加深对其理解。