【99JS】之二：路徑自動調整



上一篇,99給你們介紹了使用js控制「:nth-child()」的方法，今天99繼續給你們介紹一個使用js自動調整路徑的相關介紹，但願你們喜歡。

目標： 路徑自動調整

需求是這樣的:在javascript 開發中，經常會碰到相對路徑與絕對路徑的問題。而javascript模塊化開發（補充javascript模塊化http://www.cnblogs.com/muguaworld/archive/2011/11/27/2265356.html）。常見的實現方式就是把js文件按需載入，在載入的過程當中也會遇到路徑問題。好比咱們有路徑/workspace/wwwroot/module1；咱們須要加載 wwwroot下面的a.js文件，跟wwwroot下面module2的b.js文件，熟悉linux的同窗就會知道 當目錄/workspace/wwwroot/module1，咱們輸入 ../a.js 便可以拿到文件，此時的路徑爲/workspace/wwwroot/a.js，咱們輸入../module2/b.js 此時的路徑爲/workspace/wwwroot/module2/b.js而javascript語言是瀏覽器端語言，除了現代瀏覽器未實現徹底的fileapi外，他是不能操縱任何文件的。

補充 fileapi 跟 javascript安全策略 (沙箱策略)

1. 沙箱策略http://hi.baidu.com/meklrdoxtkbkyzd/item/c2480ad3f64e0848fa57684e

2. 同源策略http://baike.baidu.com/view/3747010.htm

html5file api

1. https://developer.mozilla.org/en-US/docs/DOM/File_API

2. https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

以及我寫的fileapi的一個小應用：上傳後預覽http://99jty.com/?p=856

扯了那麼多，咱們來抽象成需求

1. 設str = 'aa/bb/cc' 設用戶輸入user = '../dd.js';

2. 則返回 aa/bb/dd.js

思路1

咱們分析一下路徑的組成

aa/bb/cc ../dd.js > aa/bb/dd.js
aa/bb/cc ../../dd.js > aa/dd.js

能夠很清楚的看到：str的總長度- ..的個數 就是str須要保留的路徑。那麼咱們只須要統計下 ../的個數就是了。。。

實現1：

function adjustPath(str, user) {
  var strArr = str.split("/"),
  userArr = user.split("../");  var sl = strArr.length,
  ul = userArr.length;  var s = "";  var l = sl - ul;  if (l < 0)    throw new Error('未找到文件！')    for (var i = 0; i < l; i++) {
      console.log(i, strArr[i]);
      s += strArr[i] + "/";
    }  return s + userArr[userArr.length - 1];
}var str = 'aaa/bbb/ccc/'console.log(adjustPath(str, '../../../../dd.js'))

split方法是很是有用的一個東東，能夠把字符串轉成數組,另外 join方法是他的逆運算。這裏給你們講個技巧：

當涉及 字符串單字符，或者有規律的分隔符的字符串，嘗試用split切分紅數組，會好處理不少。關於字符串與數組的一系列方法。。屬於js核心中的核心，但願背熟。。。http://www.w3cschool.cn/js_reference.html

第二個要講的是throw new Error 這個命令。

在程序設計中，很重要的一點就是「容錯性」， 也就是程序是否可以在遇到錯誤的時候進行相應的處理。咱們能夠觀察到，當..數量太多，就不會找到文件了，這時候進行下一步操做，會嚴重影響程序的返回結果。因此咱們if判斷一下， 若出現問題，則拋個錯。 在java開發中這應該是常常用的吧~其餘其實也不用講了，第一個思路比較簡單。

思路2

涉及字符串的大部分問題均可以用正則表達式直接解決。這裏咱們要利用一個正則表達式的小技巧 吐泡泡- -

var d = [1, 2, 3, 4, 5];var b = 'abcakjabjsaabadab';var nstr = b.replace(/ab/g, function (a) {
  console.log(a);  return d.pop() ? "" : 'hahah';
})

先解釋一下吧replace方法是string對象的方法，能夠替換字符串或者正則。而替換的時候能夠傳入一個參數function 這個function頗有意思，它的參數包含被前面正則所「匹配」的部分。 詳細的話，能夠見replace的參考http://www.w3school.com.cn/js/jsref_replace.asp,跟我寫的 function傳參~http://99jty.com/?p=470

另外補充下 正則表達式也推薦看看這一篇:http://www.cnblogs.com/rubylouvre/archive/2010/03/09/1681222.html。正美的大做，基本把咱們經常使用的都歸納了。咱們回到函數，以上函數返回的結果頗有意思，返回了四個ab (顯然是b匹配上四個ab字符串).可是呢，d變成了1。。。。這是腫麼回事呢。。我認爲，每匹配一次，都會執行replace裏面傳的function函數一次，所以d就pop的沒了。。。我把這個函數叫作。。正則吐泡泡。。。那這個與咱們那個題目有啥關係呢。。。。聰明的人應該想到了，首先把字符串弄成數組形式

aa/bb/cc > [aa,bb,cc]

每次發現一個../咱們就刪掉字符串末尾的一項。好比 ../dd.js 那麼 刪掉後變爲 [aa,bb] 以後組合起來就是咱們想要的答案了~

實現：

function adjustPath(str, user){
  var patharr = str.replace(/\/$/,"").split("\/");
  console.log(str.replace(/\/$/,"").split("\/"));  var nstr = user.replace(/\.\.\//g,function(a){console.log(a);  return patharr.pop() ? "" : a;
});
  console.log(nstr,patharr);  return patharr.length ? patharr.join("/")+"/"+nstr : nstr;
}
console.log('aa/bb/cc','../dd.js')

以上函數呢可能正則你們會看得比較暈。這裏稍微解釋下：

1. \符號是轉義的意思。當須要匹配的內容包含

2. ^ $ . * + ? = ! : | \ / ( ) [ ] { } 時，須要用 \ 轉義。

好比咱們想匹配 ../ 會發現三個都須要轉義。。那麼就要寫成 \.\.\/而每一個正則表達式是由一個// 包裹起來的，咱們包裹起來 /\.\.\//在函數中，還寫了一個 patharr.pop() ? "" : a 他是javascript的三目表達式。其實很簡單：a?b:c的意思是:

if(a){b}else{c}

今天的你整明白了嗎？要是沒有整明白咱們能夠一塊兒探討。以後補充其餘的方法！！！！！！！！！！！！歡迎本專欄相關更新。

如需轉載，煩請註明出處：http://www.w3cplus.com/js/99js-automatic-adjustment-path.html