现代 CSS

JavaScript

JavaScript中的颜色转换

图解CSS系列的《CSS 颜色》一文中介绍了CSS中颜色的使用。到目前为止,给Web元素设置颜色的方式有很多种,比如使用颜色名称定义颜色、使用#RGB(或#RRGGBB)、#RGBA(或#RRGGBBAA)、hsl()(或hsla())、hwb()lab()lch()等。在CSS的颜色规范的第四版本中的第十五节中,专门介绍了在JavaScript中如何实现颜色不同空间域的转换。在Web的开发中,有的时候难免离不开使用JavaScript来操作颜色,接下来在这篇文章中,我们主要和大家一起来聊聊JavaScript中颜色空间的转换应该如何实现。

学习React应该具备的JavaScript基础知识

React是众多主流JavaScript框架之一,如果想要较好的掌握React,那么对于JavaScript方面的知识还是非常重要的。但在很多开发者眼里反而顾此失彼,觉得掌握了JavaScript框架就可以无敌,事实上并非如此,至少Web发展至今,HTML、CSS和JavaScript还是Web三大基石。只有更好的掌握这些基础,在平时的工作中才能游刃有余。在接下来的内容中,我们就来一起探讨一下,在学习React的时候,应该具备哪些JavaScript相关的知识,这样才能更有助于我们更好的掌握React。

React中CSS Modules的使用

最近项目开始换React的工程,感觉好多东西都得重新开始,特别在撸CSS的时候。说实话和Vue的工程相比,体感差完了。在Vue的工程中除了Modules之外还可以使用CSS的作用域scoped的概念。用久了Vue的同学,在这方面的感觉爽死了,但是突然切到React的工程体系之下,这方面的感觉突然不要不要。拿个实例来说吧(可能我做得不到位),组件的CSS是全局的,有时覆盖起来,除了蛋疼之外,而费时,费成本。

使用JavaScript的一些小技巧

任何一门技术在实际中都会有一些属于自己的小技巧。同样的,在使用JavaScript时也有一些自己的小技巧,只不过很多时候有可能容易被大家忽略。而在互联网上,时不时的有很多同行朋友会总结(或收集)一些这方面的小技巧。作为一位JavaScript的菜鸟级的同学,更应该要留意这些小技巧,因为这些小技巧可以在实际业务的开发中帮助我们解决问题,而且会很容易的解决问题。在这篇文章中,会整理一些大家熟悉或不熟悉的有关于JavaScript的小技巧。

如何通过JavaScript API处理CSS

很多场景我们是需要借助JavaScript相关的API来帮助我们处理Web页面中的CSS。CSSOM(CSS Object Model)中提供了一些JavaScript的API处理CSS。除此之外,还可以通过JavaScript来操作DOM元素中的attribute样式和类来操作CSS。由于JSX和无数JavaScript框架等概念的出现,使得JavaScript API与DOM交互变得越来越流行,但是对CSS使用类似的技术似乎变得没有那么多人关注。当然, CSS-in-JS解决方案是存在的,但是最流行的方案都是基于编译的,在生产中输出CSS时不需要任何额外的运行时。这当然对性能有好处,因为使用CSS API可能会导至额外的重游,这使得它和使用DOM API一样需要。但这并不是我们想要的。如果我告诉您,您不仅可以操作DOM元素的样式和CSS类,而且还可以创建完整的样式,就像使用HTML和JavaScript一样,那会怎么样呢?

JavaScript数组的那些事儿

JavaScript中的数组是其中重要的一部分,它提供了很多种操作数组的方法。当涉及到遍历一个数组、查找元素、排序或任何你想要的东西时,JavaScript都可能有一个数组方法可提供给我们使用。然而,尽管它们都很有用,但其中一些知识点仍然不那么为人所知和使用。在这篇文章中将会介绍一些方法,让你在使用数组的时候变得更轻易。甚至可以将接下来的内容当作是JavaScript数组方法的使用指南。

如何使用JavaScript操作CSS颜色

Web颜色是Web应用程序或页面中不可或缺的一部分,对于CSS处理颜色总是非常的简单和单一。但很多时候我们需要一些特殊的效果,比如随机色等。那么我们就需要借助JavaScript来完成。在学习如何使用JavaScript操作CSS颜色之前,我们需要对CSS如何设置颜色有一个基本的了解。CSS设置颜色模式有多种,最为常见的模型有:RGBHSL。我们先来看一下这两种颜色模式。

如何使用JavaScript构建模态框插件

作为一位Web开发人员而言,模态框(Modal)并不会陌生。就我个人而言,我更为熟悉的是怎么通过CSS来编写一个模态框以及怎么通过CSS给模态框添加一些动效。正好最近工作中也和Modal框杠上了。另外想更好的设计一个模态框用来满足业务需求的普遍性和实用性,甚至是达到可配置性。所以一直在探究模态框相关的知识,同时正好看到了@Ken Wheeler的教程,对于我这样的菜鸟,能很好的了角如何使用原生的JavaScript来构建一个可用的模态框插件,另外为以后如何使用Vue构建更为灵活的模态框组件打下坚实的基础。如果你对该文章感兴趣,或者你也正在加强JavaScript的学习和实战,欢迎继续往下阅读,或许对你有所帮助。

聊聊《重学前端》

这两天票圈被@Winter大大在极客时间平台推出的《重学前端》刷屏了,而且在微信群和知乎上都有相关讨论。讨论中各种声音都有,可算是热闹了。今天我也凑个热闹,来聊聊我对这个课程的看法。

FLIP技术给Web布局带来的变化

用户界面是最直观的呈现给用户,而其中动画在这方面又扮演着重要的角色。正如@Nick Babich所说:动画将用户界面带入生活。而且,UI动画在用户体验方面也是重要的一环。特别是移动端开发的同学更清楚这一点。移动应用中的UI动画是体验的核心部分之一,而不是事后的想法。可是呢?事实上我们经常遇到的Web运用程序或App只是从一个视图跳到另一个视图,并没有给用户足够多的时间来处理当前环境中刚刚发生的事情。同时,很多同学都认为,动画通常在用户体验方面仅仅是锦上添花,并且被认为是不必要的、过渡的或太复杂的,无法实现的,也是因为这些原因,UI动画在很多Web应用中被忽略了。更糟糕的是,缺乏意义的动画会给自己产品体验方面带来损害。

页面

返回顶部