项目模块化原则

1、组件划分为业务组件和 UI 组件

2、按照先业务后功能的方式去颗粒化组件

3、数据驱动,业务操作在业务组件里完成

4、UI组件不参与业务,不处理业务逻辑,只做展示之用

5、公共的组件、接口、css,抽离出来,不掺杂在业务逻辑里

阅读全文

文件命名为什么提倡用英文小写字母而不用大写字母

开发遇到了个问题,项目在本地编译得好好的,在 ci 上编译一直报错,说是找不到路径,本地看了好多遍路径都是对的,感觉是玄学。

想了想没做什么操作,就是看不习惯之前的命名方式,好几个单词写在一起,想统一成驼峰命名法,于是把两个文件夹的两 a 个单词开头写成了大写字母~

后来发现就是这个在 win 系统下手动改文件名由大写改为小写的锅,因为在 win 系统中是大小写不区分的,导致在 git push 的时候,push 上去的文件还是那个全是小写字母的,所以会一直报找不到路径的错误。但是如果文件一开始就是驼峰命名法,就不存在这个问题了,因为提交上去的就是新的文件。

阅读全文

说说网页自适应和响应式布局

忙完一段时间,发布了一版之后,习惯性的放下手头一些需求,去整理之前的项目,看看存在什么问题,是否有可优化的空间。发现我写的页面存在一个很大的问题,那就是多分辨率适配的问题。之前一直用着响应式的理念,根据页面调整布局,但是发现与产品的需求相悖,他们希望看到的是所有分辨率的显示屏显示的效果一致。

阅读全文

React Hooks 创建电影 App

使用 react hooks 搭建一个电影 App,该 demo 属于一个极简版,参考自一个外国哥们写的 《How to build a movie search app using React Hooks》,文章的核心围绕用 react hook 搭建一个电影 App 的关键步骤展开,没有多余的描述,代码可以开箱即用,欢迎食用。

阅读全文

Canvas 绘制雪碧图导出

在开发中,我们经常会用到雪碧图,有时候 UI 可能给了很多小图,没有给到雪碧图,为了减少请求,我们会选择自己去在线生成或 ps,但是这样太繁琐了,能不能我们用一个函数实现呢?网上很多方案是借助 webpack 实现这个功能的,但是我想能不能简单点,于是就有了这个 demo,目前该 demo 可以合成雪碧图导出,但是没有导出对应的坐标 json 文件,后期再完善,先这样。

阅读全文

Web 优化 ——— 添加骨架屏

摘要:
最近做网页优化,发现页面会有一段白屏时间,给人的体验就是网页会有一闪而出的感觉,也就是我们常说的闪屏,查了一些资料,发现实现思路都是异曲同工的,就是在页面节点还没加载之前,先插一段静态网页,节点加载了再去掉这段静态代码,显示数据渲染出来界面。一般需要加骨架屏的界面,是一些动态加载数据的界面,因为数据没出来,会有一段比较长的白屏时间会给用户网加载慢的感觉。加了骨架屏,用会觉得网页加载比较快,属于一种视觉欺骗的手段吧。

阅读全文

单向列表拼接

# 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.

# Example:
# Input: 1 -> 2 -> 4, 1 -> 3 -> 4
# Output: 1 -> 1 -> 2 -> 3 -> 4 -> 4

# 来源:力扣(LeetCode)
# 链接:https: // leetcode-cn.com/problems/merge-two-sorted-lists

# Definition for singly-linked list.

class ListNode:
def __init__(self, x):
self.val = x
self.next = None

class Solution:
def mergeTwoLists(self, l1, l2):
prehead = ListNode(-1)

prev = prehead
while l1 and l2:
if l1.val <= l2.val:
prev.next = l1
l1 = l1.next
else:
prev.next = l2
l2 = l2.next
prev = prev.next
prev.next = l1 if l1 is not None else l2

return prehead.next

def __init__(self, arr1, arr2):
n1 = ListNode(arr1[0])
x1 = ListNode(arr2[0])
self.mergeTwoLists(n1, x1)
print(self.mergeTwoLists(n1, x1).val)

Solution([1, 2, 4], [1, 3, 4])

阅读全文

括号匹配

# 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效。

# 有效字符串需满足:
# 左括号必须用相同类型的右括号闭合。
# 左括号必须以正确的顺序闭合。
# 注意空字符串可被认为是有效字符串。

# 示例 1:
# 输入: "()"
# 输出: true

# 示例 2:
# 输入: "()[]{}"
# 输出: true

# 示例 3:
# 输入: "(]"
# 输出: false

# 示例 4:
# 输入: "([)]"
# 输出: false

# 示例 5:
# 输入: "{[]}"
# 输出: true

# 来源:力扣(LeetCode)
# 链接:https: // leetcode-cn.com/problems/valid-parentheses


class Solution:
def isValid(self, s):
# 简洁但是效率低
# while '{}' in s or '()' in s or '[]' in s:
# s = s.replace('{}', '')
# s = s.replace('[]', '')
# s = s.replace('()', '')
# return s == ''
stack = [] # 初始化栈
mapping = {')': '(', ']': '[', '}': '{'} # 字典存储所有的匹配类型
for char in s: # 遍历字符串
if (char in mapping): # 当前字符为闭合符号时
top_element = stack.pop() if stack else '#' # 栈顶元素出栈
if mapping[char] != top_element: # 没有匹配的类型,返回 false
return False
else:
stack.append(char) # 开括号存储到栈里
return not stack

def _init_(self):
return self.isValid("([)]")

res = Solution()
print(res._init_())

阅读全文

下拉列表的实现

用别人的组件总有各种不可控的问题,而且不好维护,还是造轮子比较舒畅。

下拉列表是工作中经常用到的一个功能,点击按钮,显示下拉列表,点击列表中的项目显示对应的值到按钮中,这是下拉列表的常用交互。这里的一个比较有意思的点就是如何在点击别的地方时关闭列表。我采用的方法是监听组件最外层的 blur 事件,当该组件失去焦点时,关闭列表。由于按钮用的是 div 实现,默认 div 是没有 blur 事件的,这里添加一个 tabindex 属性, blur 就有效了。

阅读全文

Canvas 画动态路径

这个函数是一个用于画 canvas 路径的,也就是把 canvas 画线的过程演示出来的一个东东。采用的是纯 js 和 canvas 描绘方法。当然前提是得有路径的点集,不然画不了。

阅读全文