js.path.join()

path.join()#

1
const path = require('path');
2

3
const STATIC_DIR = path.join("/app","/app1/app2/")
4

5
console.log(STATIC_DIR);
6

7
const filePath = path.join(STATIC_DIR, "app.ejs/.");
8

9
console.log(filePath);

跟进到 join() ,输入的参数是一个数组

1
[
2
  "/app/app1/app2/",
3
  "app.ejs/.",
4
]

这是 join() 的实现

1
join(...args) {
2
    // 先判断数组长度是否为0 直接返回
3
if (args.length === 0)
4
  return '.';
5
  // 写一个空数组
6
const path = [];
7
    // 对传入的参数进行逐步解析
8
for (let i = 0; i < args.length; ++i) {
9
  const arg = args[i];
10

11
  validateString(arg, 'path');
12
  if (arg.length > 0) {
13
    path.push(arg);
14
  }
15
}
16

17
if (path.length === 0)
18
  return '.';
19

20
return posix.normalize(ArrayPrototypeJoin(path, '/'));
21
}

走到 validateString() ，跟进后跳转到这

这我没搞懂，应该是一个简单判断，继续走就是判断传入的 arg 是不是字符串

第二轮

走到这个地方,可以看到 arg = "app.ejs/."

第二轮进行完，得到 path 数组

1
[
2
  "/app/app1/app2/",
3
  "app.ejs/.",
4
]

关键部分

1
    return posix.normalize(ArrayPrototypeJoin(path, '/'));

跟进后发现path 变成

1
"/app/app1/app2//app.ejs/."

可能是ArrayPrototypeJoin(path, '/') 的处理，不知道怎么会多一个 /

下面是 normalize()

1
normalize(path) {
2
validateString(path, 'path');
3

4
if (path.length === 0)
5
  return '.';
6
    // 绝对路径 true
7
const isAbsolute =
8
  StringPrototypeCharCodeAt(path, 0) === CHAR_FORWARD_SLASH;
9
    // 判断末尾是不是有分隔符 / false
10
const trailingSeparator =
11
  StringPrototypeCharCodeAt(path, path.length - 1) === CHAR_FORWARD_SLASH;
12

13
// Normalize the path
14
path = normalizeString(path, !isAbsolute, '/', isPosixPathSeparator);
15

16
if (path.length === 0) {
17
  if (isAbsolute)
18
    return '/';
19
  return trailingSeparator ? './' : '.';
20
}
21
if (trailingSeparator)
22
  path += '/';
23

24
return isAbsolute ? `/${path}` : path;
25
},

1
function normalizeString(path, allowAboveRoot, separator, isPathSeparator) {
2
let res = '';
3
let lastSegmentLength = 0;
4
let lastSlash = -1;
5
let dots = 0;
6
let code = 0;
7

8
for (let i = 0; i <= path.length; ++i) {
9
if (i < path.length)
10
  code = StringPrototypeCharCodeAt(path, i);
11
else if (isPathSeparator(code))
12
  break;
13
else
14
  code = CHAR_FORWARD_SLASH;
15

16
if (isPathSeparator(code)) {
17

18
  if (lastSlash === i - 1 || dots === 1) {
19
    // NOOP
20
  }
21
  else if (dots === 2) {
22
    if (res.length < 2 || lastSegmentLength !== 2 ||
23
        StringPrototypeCharCodeAt(res, res.length - 1) !== CHAR_DOT ||
24
        StringPrototypeCharCodeAt(res, res.length - 2) !== CHAR_DOT) {
25
      if (res.length > 2) {
26
        const lastSlashIndex = res.length - lastSegmentLength - 1;
27
        if (lastSlashIndex === -1) {
28
          res = '';
29
          lastSegmentLength = 0;
30
        } else {
31
          res = StringPrototypeSlice(res, 0, lastSlashIndex);
32
          lastSegmentLength =
33
            res.length - 1 - StringPrototypeLastIndexOf(res, separator);
34
        }
35
        lastSlash = i;
36
        dots = 0;
37
        continue;
38
      }
39
      else if (res.length !== 0) {
40
        res = '';
41
        lastSegmentLength = 0;
42
        lastSlash = i;
43
        dots = 0;
44
        continue;
45
      }
46
    }
47
    if (allowAboveRoot) {
48
      res += res.length > 0 ? `${separator}..` : '..';
49
      lastSegmentLength = 2;
50
    }
51
  }
52
  else {
53
    if (res.length > 0)
54
      res += `${separator}${StringPrototypeSlice(path, lastSlash + 1, i)}`;
55
    else
56
      res = StringPrototypeSlice(path, lastSlash + 1, i);
57
    lastSegmentLength = i - lastSlash - 1;
58
  }
59
  lastSlash = i;
60
  dots = 0;
61
}
62
  else if (code === CHAR_DOT && dots !== -1) {
63
    ++dots;
64
}
65
  else {
66
    dots = -1;
67
}
68
}
69
return res;
70
}

主要是下面那个循环处理，如果连续遇到两个 //

比如，app/app1//app2/1.txt 有如下处理

1
if (lastSlash === i - 1 || dots === 1)
2
//直接跳出整个判断处理，然后
3
lastSlash = i;
4
dots = 0;
5
//点数重置，上一个分隔符的位置更新，所以字符串切片拼接路径时，不会导致连续两个分隔符出现。

字符串切片有两种情况,

一种是如果没有积累 res ，刚开头就直接从上一个分隔符的后一位开始，一直到分隔符前的都切片拼接到res

/app/app1

进行到第二个/ 的时候把 app 拼接到 res

1
if (res.length > 0)
2
  res += `${separator}${StringPrototypeSlice(path, lastSlash + 1, i)}`;
3
else
4
  res = StringPrototypeSlice(path, lastSlash + 1, i);

对点的处理，如果分隔符后第一位不是点，赋值 dots = -1，应该是按照文件的后缀.来处理的，

1
 else if (code === CHAR_DOT && dots !== -1) {
2
      ++dots;

否则当成. ..来处理

最后，到最后一位字符时，因为i >= path.length会进入else分支

1
if (i < path.length)
2
  code = StringPrototypeCharCodeAt(path, i);
3
else if (isPathSeparator(code))
4
  break;
5
else
6
  code = CHAR_FORWARD_SLASH;

然后因为 code = 分隔符的 ascii，重置 lashslash dots ，自此 for 循环结束，会发现是没有把最后的 /.拼接到 res 的，所以走出来的 res 就是

1
res = "app/app1/app2//app.ejs"

回到 normalize() 函数

1
path = normalizeString(path, !isAbsolute, '/', isPosixPathSeparator);
2

3
if (path.length === 0) {
4
  if (isAbsolute)
5
    return '/';
6
  return trailingSeparator ? './' : '.';
7
}
8
if (trailingSeparator)
9
  path += '/';
10

11
return isAbsolute ? `/${path}` : path;

此时，因为isAbsolute trailingSeparator前面已经判断好了， true false

1
 path = "app/app1/app2/app.ejs"

直接返回

1
`/${path}`

即返回 /app/app1/app2/app.ejs

/app/a.ejs/ 不会被处理成 /app/a.ejs 因为 normalizing() 处理前判断了最后一位是不是分隔符，如果 true ，normalizing() 处理完不带的最后一位分隔符会在这加上。

1
if (trailingSeparator)
2
path += '/';