项目模块化原则
1、组件划分为业务组件和 UI 组件
2、按照先业务后功能的方式去颗粒化组件
3、数据驱动,业务操作在业务组件里完成
4、UI组件不参与业务,不处理业务逻辑,只做展示之用
5、公共的组件、接口、css,抽离出来,不掺杂在业务逻辑里
1、组件划分为业务组件和 UI 组件
2、按照先业务后功能的方式去颗粒化组件
3、数据驱动,业务操作在业务组件里完成
4、UI组件不参与业务,不处理业务逻辑,只做展示之用
5、公共的组件、接口、css,抽离出来,不掺杂在业务逻辑里
开发遇到了个问题,项目在本地编译得好好的,在 ci 上编译一直报错,说是找不到路径,本地看了好多遍路径都是对的,感觉是玄学。
想了想没做什么操作,就是看不习惯之前的命名方式,好几个单词写在一起,想统一成驼峰命名法,于是把两个文件夹的两 a 个单词开头写成了大写字母~
后来发现就是这个在 win 系统下手动改文件名由大写改为小写的锅,因为在 win 系统中是大小写不区分的,导致在 git push 的时候,push 上去的文件还是那个全是小写字母的,所以会一直报找不到路径的错误。但是如果文件一开始就是驼峰命名法,就不存在这个问题了,因为提交上去的就是新的文件。
忙完一段时间,发布了一版之后,习惯性的放下手头一些需求,去整理之前的项目,看看存在什么问题,是否有可优化的空间。发现我写的页面存在一个很大的问题,那就是多分辨率适配的问题。之前一直用着响应式的理念,根据页面调整布局,但是发现与产品的需求相悖,他们希望看到的是所有分辨率的显示屏显示的效果一致。
使用 react hooks 搭建一个电影 App,该 demo 属于一个极简版,参考自一个外国哥们写的 《How to build a movie search app using React Hooks》,文章的核心围绕用 react hook 搭建一个电影 App 的关键步骤展开,没有多余的描述,代码可以开箱即用,欢迎食用。
在开发中,我们经常会用到雪碧图,有时候 UI 可能给了很多小图,没有给到雪碧图,为了减少请求,我们会选择自己去在线生成或 ps,但是这样太繁琐了,能不能我们用一个函数实现呢?网上很多方案是借助 webpack 实现这个功能的,但是我想能不能简单点,于是就有了这个 demo,目前该 demo 可以合成雪碧图导出,但是没有导出对应的坐标 json 文件,后期再完善,先这样。
摘要:
最近做网页优化,发现页面会有一段白屏时间,给人的体验就是网页会有一闪而出的感觉,也就是我们常说的闪屏,查了一些资料,发现实现思路都是异曲同工的,就是在页面节点还没加载之前,先插一段静态网页,节点加载了再去掉这段静态代码,显示数据渲染出来界面。一般需要加骨架屏的界面,是一些动态加载数据的界面,因为数据没出来,会有一段比较长的白屏时间会给用户网加载慢的感觉。加了骨架屏,用会觉得网页加载比较快,属于一种视觉欺骗的手段吧。
# Merge two sorted linked lists and return it as a new list. The new list should be made by splicing together the nodes of the first two lists. |
# 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效。 |
用别人的组件总有各种不可控的问题,而且不好维护,还是造轮子比较舒畅。
下拉列表是工作中经常用到的一个功能,点击按钮,显示下拉列表,点击列表中的项目显示对应的值到按钮中,这是下拉列表的常用交互。这里的一个比较有意思的点就是如何在点击别的地方时关闭列表。我采用的方法是监听组件最外层的 blur 事件,当该组件失去焦点时,关闭列表。由于按钮用的是 div 实现,默认 div 是没有 blur 事件的,这里添加一个 tabindex 属性, blur 就有效了。
这个函数是一个用于画 canvas 路径的,也就是把 canvas 画线的过程演示出来的一个东东。采用的是纯 js 和 canvas 描绘方法。当然前提是得有路径的点集,不然画不了。