Javascript 少分拣机
Posted
技术标签:
【中文标题】Javascript 少分拣机【英文标题】：Javascript Less Sorter 【发布时间】：2018-04-21 16:42:41 【问题描述】：问题：
我想为自己制作一个较少排序的脚本。当我在 textarea 中输入 Less Code 并单击按钮时，p#result 应该会输出排序后的 Less Code。
Less 代码应该这样排序：
Mixins（都以“.mx”开头）
属性（按字母顺序排序）
这是我目前得到的：
index.html:
<head>
<script src="jquery.min.js"></script>
</head>
<textarea id="input" style="width: 600px; height: 300px; resize: none;">
</textarea>
<p id="result" style="max-width: 600px; word-wrap: break-word;"></p>
<button>Sort</button>
<script src="jquery.sorter.js"></script>
jquery.sorter.js：
var result = "",
mixins = "",
properties = "";
$("button").on("click", function ()
var textarea = $('#input').val().split('\n');
function checkLine(position)
var index;
for (index = position; index < textarea.length; ++index)
var line = textarea[index].trim();
if (line.includes("") === true)
result = result + mixins + "<br>" + properties + line + "<br>";
mixins = "";
properties = "";
checkLine(index + 1);
else if (line.includes("") === true)
result = result + mixins + properties + line + "<br>";
mixins = "";
properties = "";
break;
else if (line.includes(".mx") === true)
mixins = mixins + line + "<br>";
else if (line.includes(":") === true)
properties = properties + line + "<br>";
else
result = result + "<br>";
console.log(index + ": " + mixins + " " + properties);
checkLine(0);
$("p#result").append(result);
$("button").hide();
);
如果我输入这个：
.frame
color: blue;
background-color: white;
.mx-hello(white);
.framesecond
font-size: 12px;
background: green;
.mx-test(white);
我至少应该得到这个输出：（我还没有想到排序机制...：D）
.frame
.mx-hello(white);
color: blue;
background-color: white;
.framesecond
.mx-test(white);
font-size: 12px;
background: green;
但我得到了这个输出：
.frame
.mx-hello(white);
color: blue;
background-color: white;
.framesecond
.mx-test(white);
font-size: 12px;
background: green;
.mx-test(white);
font-size: 12px;
background: green;
.mx-hello(white);
color: blue;
background-color: white;
.framesecond
.mx-test(white);
font-size: 12px;
background: green;
.mx-test(white);
font-size: 12px;
background: green;
背景 - 故事：
我在一家网络开发公司工作。我的 Less 代码总是看起来有点乱，但我们有指导如何格式化我们的代码。如果我完成了一个项目，我总是一小时一小时地坐在那里，只是重新安排更少的代码。然后我心想：“我的问题必须有一个更简单的解决方案！”。所以我用谷歌搜索和谷歌搜索并没有真正奏效。然后我决定自己尝试一下，这就是我在这里的原因！
希望您能理解我的问题，如果有不清楚的地方请告诉我，以便我编辑我的问题！ （我不太擅长 javascript，因此感谢您的帮助！:D）
【问题讨论】：
有什么东西阻止你使用排序功能吗？ 这是什么功能？ 好的，我会写一个解释它的答案。 其实，没关系。我将只是 link to MDN 并保留它。 为什么不使用stylint --fix
【参考方案1】：
我看了看是否可以解决这个问题。看看这个：
Codepen：https://codepen.io/huppys/pen/VrbxLd?editors=1010
我用一些正则表达式替换了string.includes("something")，以便能够过滤一些不同类型的较少表达式。
Plus：属性得到排序。找到一个属性后，描述该属性的字符串被推入一个数组。在将找到的属性添加到输出字符串之前，它们会被排序。
旁注：您使用什么 IDE 或编辑器来编写 LESS 代码？可能它可以自己处理语法排序？
【讨论】：
我使用 Eclipse...你知道 Eclipse 中的一个特性吗...？ 我对 Eclipse 不太熟悉，但我发现的是 SO: How do I modify Eclipse Code Formatting 和专用的 Less plugin for Eclipse。这可能会对你有所帮助。 非常感谢！你的 Codepen sn-p 也很好用！以上是关于Javascript 少分拣机的主要内容，如果未能解决你的问题，请参考以下文章
将外部和内部 javascript 文件组合成尽可能少的资源？