github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: 优化变量命名

pull/2763/head
sight 2025-07-18 11:39:53 +08:00
parent affab3c21c
commit fe4d092e66
1 changed files with 44 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/modules/code.js
View File

@ -50,8 +50,8 @@ layui.define(['lay', 'util', 'element', 'tabs', 'form'], function(exports){
highlightLine: { // 行高亮 highlightLine: { // 行高亮
// 聚焦 // 聚焦
focus: { focus: {
range: '', // 高亮范围，不可全局设置值 range: '', // 高亮范围，不可全局设置值 '1,3-5,8'
comment: false, // 是否解析注释，性能敏感不可全局开启 [!code name:<lines>] comment: false, // 是否解析注释，性能敏感不可全局开启 [!code type:<lines>]
classActiveLine: 'layui-code-line-has-focus', // 添加到高亮行上的类 classActiveLine: 'layui-code-line-has-focus', // 添加到高亮行上的类
classActivePre: 'layui-code-has-focused-lines' // 有高亮行时向根元素添加的类 classActivePre: 'layui-code-has-focused-lines' // 有高亮行时向根元素添加的类
}, },
@ -87,7 +87,8 @@ layui.define(['lay', 'util', 'element', 'tabs', 'form'], function(exports){
// '1,3-5,8' -> [1,3,4,5,8] // '1,3-5,8' -> [1,3,4,5,8]
var parseHighlightedLines = function(rangeStr){ var parseHighlightedLines = function(rangeStr){
var lineArray = $.map(rangeStr.split(','), function(v){ if (typeof rangeStr !== 'string') return [];
var lines = $.map(rangeStr.split(','), function(v){
var range = v.split('-'); var range = v.split('-');
var start = parseInt(range[0], 10); var start = parseInt(range[0], 10);
var end = parseInt(range[1], 10); var end = parseInt(range[1], 10);
@ -95,65 +96,67 @@ layui.define(['lay', 'util', 'element', 'tabs', 'form'], function(exports){
? $.map(new Array(end - start + 1), function(_, index){ return start + index }) ? $.map(new Array(end - start + 1), function(_, index){ return start + index })
: start ? start : undefined : start ? start : undefined
}) })
return lineArray.length ? lineArray : undefined return lines;
} }
// 引用自 shiki // 引用自 https://github.com/innocenzi/shiki-processor/blob/efa20624be415c866cc8e350d1ada886b6b5cd52/src/utils/create-range-processor.ts#L7
var hightLineRE = /(?:\/\/|\/\*{1,2}) *\[!code ([\w+-]+)(?::(\d+))?] *(?:\*{1,2}\/)?/; // 添加了 HTML 注释支持，用来处理预览场景
var preprocessHighlightLine = function (highlightLineOptions, lines) { var highlightLineRegex = /(?:\/\/|\/\*{1,2}|<!--|&lt;!--) *\[!code ([\w+-]+)(?::(\d+))?] *(?:\*{1,2}\/|-->|--&gt;)?/;
var preprocessHighlightLine = function (highlightLineOptions, codeLines) {
var hasHighlightLine = false; var hasHighlightLine = false;
var needParseComment = false; var needParseComment = false;
var lineClassMap = {}; var lineClassMap = Object.create(null);
var preClassMap = {}; var preClassMap = Object.create(null);
var updateLineClassMap = function (lineNumber, className) { var updateLineClassMap = function (lineNumber, className) {
if (!lineClassMap[lineNumber]) { if (!lineClassMap[lineNumber]) {
lineClassMap[lineNumber] = []; lineClassMap[lineNumber] = [CONST.ELEM_LINE];
} }
lineClassMap[lineNumber].push(className); lineClassMap[lineNumber].push(className);
} }
$.each(highlightLineOptions, function (name, hlOpts) { // 收集高亮行 className
if (hlOpts.range) { $.each(highlightLineOptions, function (type, opts) {
var hLines = parseHighlightedLines(hlOpts.range); if (opts.range) {
if (hLines.length > 0) { var highlightLines = parseHighlightedLines(opts.range);
if (highlightLines.length > 0) {
hasHighlightLine = true; hasHighlightLine = true;
if (hlOpts.classActivePre) { if (opts.classActivePre) {
preClassMap[hlOpts.classActivePre] = true; preClassMap[opts.classActivePre] = true;
} }
$.each(hLines, function (i, lineNumber) { $.each(highlightLines, function (i, lineNumber) {
updateLineClassMap(lineNumber, hlOpts.classActiveLine); updateLineClassMap(lineNumber, opts.classActiveLine);
}); });
} }
} }
if (hlOpts.comment) { if (opts.comment) {
needParseComment = true; needParseComment = true;
} }
}); });
// 解析行高亮注释并收集 className
if (needParseComment) { if (needParseComment) {
// 解析注释中的高亮行 $.each(codeLines, function (i, line) {
$.each(lines, function (i, line) { var match = line.match(highlightLineRegex);
var matched = line.match(hightLineRE); if (match && match[1] && lay.hasOwn(highlightLineOptions, match[1])) {
if (matched && matched[1] && lay.hasOwn(highlightLineOptions, matched[1])) { var opts = highlightLineOptions[match[1]];
var hlOpts = highlightLineOptions[matched[1]];
hasHighlightLine = true; hasHighlightLine = true;
if (hlOpts.classActivePre) { if (opts.classActivePre) {
preClassMap[hlOpts.classActivePre] = true; preClassMap[opts.classActivePre] = true;
} }
// 要高亮的行数 // 高亮的行数
var lines = parseInt(matched[2], 10) var lines = parseInt(match[2], 10)
if (matched[2] && lines && lines > 1) { if (match[2] && lines && lines > 1) {
var startLine = i + 1; var startLine = i + 1;
var endLine = startLine + lines - 1; var endLine = startLine + lines - 1;
var hLines = parseHighlightedLines(startLine + '-' + endLine); var highlightLines = parseHighlightedLines(startLine + '-' + endLine);
if (hLines.length > 0) { if (highlightLines.length > 0) {
$.each(hLines, function (i, lineNumber) { $.each(highlightLines, function (i, lineNumber) {
updateLineClassMap(lineNumber, hlOpts.classActiveLine); updateLineClassMap(lineNumber, opts.classActiveLine);
}); });
} }
}else{ }else{
updateLineClassMap(i + 1, hlOpts.classActiveLine); updateLineClassMap(i + 1, opts.classActiveLine);
} }
} }
}); });
@ -248,13 +251,13 @@ layui.define(['lay', 'util', 'element', 'tabs', 'form'], function(exports){
var lines = String(html).split(/\r?\n/g); var lines = String(html).split(/\r?\n/g);
// 预处理行高亮 // 预处理行高亮
var hl = preprocessHighlightLine(options.highlightLine, lines); var highlightLineInfo = preprocessHighlightLine(options.highlightLine, lines);
// 包裹 code 行结构 // 包裹 code 行结构
html = $.map(lines, function(line, num) { html = $.map(lines, function(line, num) {
var lineClass = (hl.hasHighlightLine && hl.lineClassMap[num + 1] && hl.lineClassMap[num + 1].length) var lineClass = (highlightLineInfo.hasHighlightLine && highlightLineInfo.lineClassMap[num + 1])
? [CONST.ELEM_LINE].concat(hl.lineClassMap[num + 1]).join(' ') ? highlightLineInfo.lineClassMap[num + 1].join(' ')
: CONST.ELEM_LINE; : CONST.ELEM_LINE;
return [ return [
'<div class="'+ lineClass + '">', '<div class="'+ lineClass + '">',
( (
@ -265,14 +268,14 @@ layui.define(['lay', 'util', 'element', 'tabs', 'form'], function(exports){
].join('') : '' ].join('') : ''
), ),
'<div class="layui-code-line-content">', '<div class="layui-code-line-content">',
(hl.needParseComment ? line.replace(hightLineRE, '') : line) || ' ', (highlightLineInfo.needParseComment ? line.replace(highlightLineRegex, '') : line) || ' ',
'</div>', '</div>',
'</div>' '</div>'
].join(''); ].join('');
}); });
if(hl.preClass){ if(highlightLineInfo.preClass){
othis.addClass(hl.preClass) othis.addClass(highlightLineInfo.preClass)
} }
return { return {