Question

我会立刻开始说我不是程序员，但我喜欢逛逛和学习。这就是我所拥有的：

1）网址格式如下：http://site.com/#!/show/me/stuff/1-12/

2）jQuery分页脚本，输出可用页数。每个号码都是href="#pageNumber"

的链接

3）绑定到所有分页链接的jQuery脚本。功能代码如下。

基本上，我的目标是在我的网址中将1-12替换为正确的值，例如，如果我选择第2页。

这是我煮熟的东西，但非常难看：

var pageId = this.href.split("#")[1]; 
// this gets the number from the pagination link (i.e.,
// http://site.com/#2 becomes 2)

var url = location.hash.split("/");
var url = url[url.length-2];
// this is my way of extracting "1-12" from the URL :)

var showFrom = parseFloat(url.split("-")[0]); // 1
var showTo = parseFloat(url.split("-")[1]); // 12
var itemsPerPage= (showTo-showFrom)+1; // 12
var newShowTo = (itemsPerPage*pageId); // 24
var newShowFrom = (itemsPerPage*pageId)-itemsPerPage+1; // 13
var newUrl = newShowFrom+"-"+newShowTo; // 13-24

location.hash = location.hash.replace(url, newUrl);
// http://site.com/#!/show/me/stuff/1-12/ now becomes
// http://site.com/#!/show/me/stuff/13-24/

如何以更少的步骤使这更优雅？

Answer 1

你的代码并不那么难看 - 变量名称是不言自明的，我可以向你保证，我们所有人都看到了更糟糕的东西。

无论如何，这是一种使用正则表达式执行相同操作的方法：

var pageId = this.href.split("#")[1];   
var pattern = /\/(\d+)-(\d+)\/?$/;
location.hash = location.hash.replace(pattern, function(_, showFrom_str, showTo_str){
    var showFrom = parseInt(showFrom_str, 10);
    var showTo   = parseInt(showTo_str, 10);
    var itemsPerPage = showTo - showFrom + 1;
    return '/' + ((itemsPerPage * pageId) - itemsPerPage + 1) + '-' + (itemsPerPage * pageId) + '/';
});

工作原理：

模式：斜杠\/，后跟一个或多个+数字\d，后跟连字符-，后跟另一个数字序列(\d+)，后跟可选的?斜杠\/，后跟字符串$的结尾。

替换：我们可以将替换函数传递给replace方法，以便替换文本取决于替换文本。函数的第一个参数是整个匹配（"/1-12/"），我们忽略它（_是“忽略这个”的约定。）

下一个参数对应于正则表达式中捕获的模式 - 用括号括起来的东西。在您的情况下，参数是范围的开始和结束的数字的字符串表示。

然后我使用与你相同的逻辑，除了

我使用parseInt而不是parseFloat。（不要忘记基础的第二个参数，或者“08”可以咬你）
我使用较少的中间变量。

最后，所有正则表达式都摆脱了字符串拆分并简化了代码。但是，在实际情况中，我可能会尝试考虑一个更强大的解决方案，它不依赖于URL上的脆弱字符串操作。

需要帮助使用正则表达式使代码更优雅

1 个答案: