Web 优化 ——— 添加骨架屏

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

阅读全文

单向列表拼接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
# 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
# Write a function to find the longest common prefix string amongst an array of strings.

# If there is no common prefix, return an empty string "".

# Example 1:
# Input: ["flower", "flow", "flight"]
# Output: "fl"

# Example 2:
# Input: ["dog", "racecar", "car"]
# Output: ""
# Explanation: There is no common prefix among the input strings.

# Note:
# All given inputs are in lowercase letters a-z.

# 来源:力扣(LeetCode)
# 链接:https: // leetcode-cn.com/problems/longest-common-prefix

class Solution:
def longestCommonPrefix(self, strs) -> str:
if not strs:
return ''
r = []
for item in zip(*strs): # 将 str 转换为二维矩阵式,遍历每个单元
# 若二维矩阵式每一项用 set 方式去重,三个都为重复的话,长度将为 1,此时 str 中每个元素该位置的值相同,将 true 添加到结果集合中
r.append(len(set(item)) == 1)
# 用于解决全部字符串相等时的情况,在后面加个 0,可以截取整个数组
r += [0]
# r.index(0) 表示相同字符串的截取位置,res 则为最长公共前缀
res = strs[0][:r.index(0)]
return res

def __init__(self, arr):
for item in ex:
print(self.longestCommonPrefix(item))

ex = [["dog", "racecar", "car"], ["flower", "flow", "flight"], []]
Solution(ex)

阅读全文

回文数判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
# 判断一个整数是否是回文数。回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数。

# 示例 1:
# 输入: 121
# 输出: true

# 示例 2:
# 输入: -121
# 输出: false
# 解释: 从左向右读, 为 - 121 。 从右向左读, 为 121 - 。因此它不是一个回文数。

# 示例 3:
# 输入: 10
# 输出: false
# 解释: 从右向左读, 为 01 。因此它不是一个回文数。

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


class Solution:
def isPalindrome(self, x: int) -> bool:
# x 若是 0 或者负数,返回 false
if (x < 0 or (int(x % 10 == 0) and x != 0)):
return False
# 初始化翻转数字
reverse = 0
# 若原始数字 x 大于从后面开始翻转的数字,说明已经翻转了后半部分,翻转阶段完成
while (x > reverse):
reverse = int(reverse * 10) + int(x % 10)
x = int(x / 10)
print('x:', x)
print('reverse', reverse)
# 若翻转的后半部分数字 reverse 等于前半部分数字,返回 true,否则返回 false,利用 int 向上取整的特性,当 x 为奇数时,去掉最后一位
return x == reverse or x == int(reverse/10)

x = Solution()
arr = [121, -121, 10]
for item in arr:
print(x.isPalindrome(item))

阅读全文

括号匹配

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
# 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效。

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

# 示例 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_())

阅读全文

反转整数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
# 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转。

# 示例 1:
# 输入: 123
# 输出: 321

# 示例 2:
# 输入: -123
# 输出: -321

# 示例 3:
# 输入: 120
# 输出: 21
# 注意:

# 假设我们的环境只能存储得下 32 位的有符号整数,则其数值范围为 [−231, 231 − 1]。请根据这个假设,如果反转后整数溢出那么就返回 0。

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

class Solution:
def reverse(self, x):
INT_MAX = 2**31
INT_MIN = -2**31
cur = 0
while x != 0:
if (x < 0):
pop = int(x % -10)
else:
pop = int(x % 10)
if cur > INT_MAX / 10 or (cur == INT_MAX / 10 and pop > 7):
return 0
if cur < INT_MIN / 10 or (cur == INT_MIN / 10 and pop < -8):
return 0
cur = cur * 10 + pop
x = int(x/10)
return cur

def _init_(self):
print(res.reverse(-123))
return self.reverse(-123)

res = Solution()
res._init_()

阅读全文

找出数组中相加等于目标值的两个元素下标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 你可以假设每种输入只会对应一个答案。但是,你不能重复利用这个数组中同样的元素。

# 示例:
# 给定 nums = [2, 7, 11, 15], target = 9
# 因为 nums[0] + nums[1] = 2 + 7 = 9
# 所以返回 [0, 1]

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

class Solution:
def twoSum(self, nums, target):
hashmap = {}
for i, val in enumerate(nums):
complement = target - val
if complement in hashmap:
return [hashmap[complement], i]
hashmap[val] = i
def _init_(self):
return self.twoSum([2, 7, 11, 15], 22)

x = Solution()
print(x))

阅读全文

下拉列表的实现

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

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

阅读全文

Canvas 画动态路径

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

一、参数列表

阅读全文

Npm 常用命令

1、安装

1
2
3
4
5
6
7
npm i <package>

npm i <package> -g

npm i <package> --save-dev

npm install @myco/my-package

阅读全文