使用JavaScript实现node.js中的path.join方法


Posted in Javascript onAugust 12, 2018

Node.JS中的 path.join 非常方便,能直接按相对或绝对合并路径,使用: path.join([path1], [path2], [...]),有时侯前端也需要这种方法,如何实现呢?

其实直接从 node.js 的 path.js 拿到源码加工一下就可以了:

1. 将 const 等 es6 属性改为 var,以便前端浏览器兼容
2. 添加一个判断路戏分隔符的变量 sep,即左斜杠还是右斜杠,以第一个路戏分隔符为准
3. 将引用的变量和函数放到一个文件里就可以了:

Path 的源码: https://github.com/nodejs/node/blob/master/lib/path.js

var CHAR_FORWARD_SLASH = 47
var CHAR_BACKWARD_SLASH = 92
var CHAR_DOT = 46
function isPathSeparator(code) {
 return code === CHAR_FORWARD_SLASH || code === CHAR_BACKWARD_SLASH;
}
function isPosixPathSeparator(code) {
 return code === CHAR_FORWARD_SLASH;
}
function normalize(path) {
 if (path.length === 0)
  return '.';
 var isAbsolute = path.charCodeAt(0) === CHAR_FORWARD_SLASH;
 var trailingSeparator =
  path.charCodeAt(path.length - 1) === CHAR_FORWARD_SLASH;
 // Normalize the path
 path = normalizeString(path, !isAbsolute, '/', isPosixPathSeparator);
 if (path.length === 0 && !isAbsolute)
  path = '.';
 if (path.length > 0 && trailingSeparator)
  path += '/';
 if (isAbsolute)
  return '/' + path;
 return path;
}
function normalizeString(path, allowAboveRoot, separator, isPathSeparator) {
 var res = '';
 var lastSegmentLength = 0;
 var lastSlash = -1;
 var dots = 0;
 var code;
 for (var i = 0; i <= path.length; ++i) {
  if (i < path.length)
   code = path.charCodeAt(i);
  else if (isPathSeparator(code))
   break;
  else
   code = CHAR_FORWARD_SLASH;
  if (isPathSeparator(code)) {
   if (lastSlash === i - 1 || dots === 1) {
    // NOOP
   } else if (lastSlash !== i - 1 && dots === 2) {
    if (res.length < 2 || lastSegmentLength !== 2 ||
      res.charCodeAt(res.length - 1) !== CHAR_DOT ||
      res.charCodeAt(res.length - 2) !== CHAR_DOT) {
     if (res.length > 2) {
      const lastSlashIndex = res.lastIndexOf(separator);
      if (lastSlashIndex !== res.length - 1) {
       if (lastSlashIndex === -1) {
        res = '';
        lastSegmentLength = 0;
       } else {
        res = res.slice(0, lastSlashIndex);
        lastSegmentLength = res.length - 1 - res.lastIndexOf(separator);
       }
       lastSlash = i;
       dots = 0;
       continue;
      }
     } else if (res.length === 2 || res.length === 1) {
      res = '';
      lastSegmentLength = 0;
      lastSlash = i;
      dots = 0;
      continue;
     }
    }
    if (allowAboveRoot) {
     if (res.length > 0)
      res += `${separator}..`;
     else
      res = '..';
     lastSegmentLength = 2;
    }
   } else {
    if (res.length > 0)
     res += separator + path.slice(lastSlash + 1, i);
    else
     res = path.slice(lastSlash + 1, i);
    lastSegmentLength = i - lastSlash - 1;
   }
   lastSlash = i;
   dots = 0;
  } else if (code === CHAR_DOT && dots !== -1) {
   ++dots;
  } else {
   dots = -1;
  }
 }
 return res;
}
function join() {
 if (arguments.length === 0)
  return '.';
 var sep = arguments[0].indexOf('/') > -1 ? '/' : '\\'
 var joined;
 var firstPart;
 for (var i = 0; i < arguments.length; ++i) {
  var arg = arguments[i];
  if (arg.length > 0) {
   if (joined === undefined)
    joined = firstPart = arg;
   else
    joined += sep + arg;
  }
 }
 if (joined === undefined)
  return '.';
 var needsReplace = true;
 var slashCount = 0;
 if (isPathSeparator(firstPart.charCodeAt(0))) {
  ++slashCount;
  var firstLen = firstPart.length;
  if (firstLen > 1) {
   if (isPathSeparator(firstPart.charCodeAt(1))) {
    ++slashCount;
    if (firstLen > 2) {
     if (isPathSeparator(firstPart.charCodeAt(2)))
      ++slashCount;
     else {
      // We matched a UNC path in the first part
      needsReplace = false;
     }
    }
   }
  }
 }
 if (needsReplace) {
  // Find any more consecutive slashes we need to replace
  for (; slashCount < joined.length; ++slashCount) {
   if (!isPathSeparator(joined.charCodeAt(slashCount)))
    break;
  }
  // Replace the slashes if needed
  if (slashCount >= 2)
   joined = sep + joined.slice(slashCount);
 }
 return normalize(joined);
}

使用:

join('../var/www', '../abc')
> "../var/abc"
join('../var/www', '\abc')
../var/www/abc

总结

以上所述是小编给大家介绍的使用JavaScript实现node.js中的path.join方法,希望对大家有所帮助,如果对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js Map List 遍历使用示例
Jul 10 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
Vue页面骨架屏的实现方法
May 22 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 #Javascript
Vue实现左右菜单联动实现代码
Aug 12 #Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 #Javascript
vue实现商品加减计算总价的实例代码
Aug 12 #Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 #Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 #Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 #Javascript
You might like
php设计模式 Visitor 访问者模式
2011/06/28 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
newxtree.js代码
2007/03/13 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
Python中使用中文的方法
2011/02/19 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
Python 如何对文件目录操作
2020/07/10 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
财务管理专业毕业生求职信
2014/06/02 职场文书
办公室个人总结
2015/02/28 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
高温慰问简报
2015/07/21 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
工厂无线对讲系统解决方案
2022/02/18 无线电
字节飞书面试promise.all实现示例
2022/06/16 Javascript