- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在为一个个人项目构建一个解析器,我希望在实现最初的目标后将其开源。我在动态构建 DOM 时遇到了一些递归调用问题。我根本不想使用任何框架来执行此操作。
基本上,我的代码生成器从 Javascript 数组构建 DOM 字符串来表示 DOM,并使用对象来模拟元素本身。
var example = [{elm: 'div',
class: 'fadeIn',
inner: 'Hello!'}]
会产生
<div class="fadeIn">Hello!</div>
还有
var module = [{elm: 'div',
class: 'background-yellow',
inner: example
}]
会产生
<div class="background-yellow">
<div class="fadeIn">Hello!</div>
</div>
我下面的代码相对较好地生成了第一个示例,尽管我已经记录了一些内容以使其完整(例如自闭合标签)。我正在努力解决的部分是代表嵌套节点的嵌套对象。我的目标是递归地执行此操作,但请随意使用迭代方法 - 如果您能提供帮助,我该评判谁:)
// Start with a single node
var testDom = [{
elm: 'button',
inner: 'click me!',
class: 'test-elm',
onclick: 'javascript:alert("woot!");',
}]
var nestedTest = [{
elm: 'div',
inner: testDom
}]
// Define
class parser {
// This is the parser for JSML
constructor(stdIn) {
this.output = '';
this.parse(stdIn);
return this.output;
}
generateAttributeKeyValueString(key, value) {
return `${key}='${value}'`;
}
generateDom(vNode, nestedOpenTag, nestedCloseTag) {
var self = this,
elmStart = `<${vNode.elm}`,
elmEnd = `</${vNode.elm}>`,
elmAttrs = '',
elmContent;
function parseInput(vNode, key) {
// if (!vNode.hasOwnProperty(key)) return;
var value = vNode[key];
// custom types conditons depending on the key and value of the nodes contents
var isActualInnerValueChildContents = (key === 'inner' && typeof value !== 'object');
var isChildrenContentArr = (key === 'inner' && Array.isArray(value));
var isAttributeKeyValuePair = (key !== 'elm' && key !== 'inner');
if (isActualInnerValueChildContents) elmContent = value;
else if (isAttributeKeyValuePair) elmAttrs += self.generateAttributeKeyValueString(key, value); // Otherwise its an attribute and value pair and should be added to the node string
else if (isChildrenContentArr) {
// Array of nested child nodes.
elmStart += ` ${elmAttrs}>`;
self.generateDom(value, elmStart, elmEnd)
}
}
for (var key in vNode) parseInput(vNode, key);
elmStart += ` ${elmAttrs}>`; // Close off the html elements start tag now that all possible attributes have been written
if (nestedOpenTag && nestedCloseTag) this.output = nestedOpenTag + this.output + nestedCloseTag;
else this.output = elmStart + elmContent + elmEnd;
}
parse(input) {
var self = this;
input.forEach((vNode) => {
self.generateDom(vNode);
});
}
}
parser.execute = function(vDom) {
document.getElementsByTagName('html')[0].innerHTML += vDom.output;
return vDom;
}
// Call
console.log(parser.execute(new parser(testDom)).output);
这是一个 link显示在单个节点上运行的代码。
预先感谢任何可以提供帮助的人。
最佳答案
我发现了一些事情:
当您获得inner
时值只是纯文本,您可以将元素的内容 ( elmContent
) 设置为该文本
当您获得inner
时value 是另一个元素,我的理解是您想要获取该元素的解析版本,并将该元素的内容设置为结果文本。
要获取另一个元素的解析版本,您可以定期解析它并执行 parser.execute(new parser(<element>)).output
所以在 generateDom
,只需设置 elmContent
至parser.execute(new parser(value)).output
当value
是另一个元素,就像您将其设置为 value
一样当value
是常规文本。而不是这样做:
if (isChildrenContentArr) {
// Array of nested child nodes.
elmStart += ` ${elmAttrs}>`;
self.generateDom(value, elmStart, elmEnd)
}
这样做:
if (isChildrenContentArr) {
// Array of nested child nodes.
elmContent = parser.execute(new parser(value)).output
}
你甚至不需要考虑递归。请记住,您将元素内容设置为 value
, 已解析
generateDOM
的最后两个参数从未使用过,因此请像这样删除它们:
generateDom(vNode) { ...
应用上述修复将使您的某些元素正常工作,其中 inner
内容只是一个子元素,如
var nestedTest = [{
elm: 'div',
inner: testDom
}]
但在其他情况下,它是一个数组,例如
var app = [{
elm: 'body',
inner: [
header,
content,
footer
]
}]
我注意到的另一件事是所有这些元素都在数组中。我认为你假设数组变平,所以像
[ [element1], [element2], [element3] ]
变成了
[element1, element2, element3]
但是,这在 javascript 中不会发生,您最终会得到一个包含其他数组的数组。因此,当您应用上述代码和value
时是一组元素,而不仅仅是一个元素,它不起作用。
首先,您可能应该删除元素周围的所有数组,因此像这样的元素
var app = [{
elm: 'body',
inner: [
header,
content,
footer
]
}]
变成了
var app = {
elm: 'body',
inner: [
header,
content,
footer
]
}
(请注意定义周围缺少 [...]
)
要允许您的解析器解析这些内容,只需更改 parse
在您的 parser
中运行至:
parse(input) {
var self = this;
self.generateDom(input);
}
然后,处理 value
的情况为一个元素时,单独为多个元素时;分配 value
时在parseInput
,添加isSingleChildContent
做:
var value = vNode[key],
// custom types conditons depending on the key and value of the nodes contents
isActualInnerValueChildContents = (key === 'inner' && typeof value === 'string'),
isChildrenContentArr = (key === 'inner' && Array.isArray(value)),
isSingleChildContent = (key === 'inner' && !isChildrenContentArr && (typeof value === 'object')),
isAttributeKeyValuePair = (key !== 'elm' && key !== 'inner');
注意如何 isActualInnerValueChildContents
如果 value
则为真是一个字符串,而不仅仅是任何非对象值。 isChildrenContentArr
如果 value
则为真是一个数组,就像以前一样。和isSingleChildContent
,新测试,如果 value
则为真。是一个对象而不是数组,它将是单个元素(已删除所有元素变量周围的 [...]
)。
现在,如果 inner
value
是单个元素,elmContent
将是解析的元素( parser.execute(new parser(value)).output
)。但如果它是多个值,则必须枚举每个值并将其结果添加到 elmContent
,像这样:
//Array of multiple child nodes
elmContent = "";
value.forEach((subValue) => {
elmContent += parser.execute(new parser(subValue)).output;
});
<小时/>
这是最终的代码片段。这应该适用于您的所有元素(不过我只测试了几个):
/** JSML - Javascript markup language
Benifits over traditional HTML:
1) Remove 1 of 3 languages you must know in order to work on the front end of websites (HTML), drastically reducing the complexity of web development
2) HTML is not flexible, JSML is as flexible as can be
3) Much tinier syntax compared to HTML, each DOM node is represented by a simple JSON object the DOM is an array no closing tags needed either
4) Dynamically manipulate elements with no extra frameworks needed - just use plain JS
5) Framework and platform independant, works with 100% client side and server side libraries out there (it doesnt change anything other than your development process).
6) Completely manage DOM elements by name instead of selector (very powerful)
Major milestones remaining for v1
1) Recursive algorithm (right now only generates a single layer of non-nested nodes)
2) Handling for - seperated data-attributes (camelCase to hyphen-case)
3) Consistancy between sever and client event assignment
4) Handling for self closing tags
**/
// Input (language syntax example for static and dynamic)
// Static vNode with dynamic contents
var navigation = {
elm: 'navigation',
inner: menuItems(),
class: 'navigation'
}
// Example of managing the element without explicitly describing the selector more than one time
function sampleMethodBinding(){
alert();
}
// Dynamically created vNodes
function menuItems() {
var items = []
var data = [{
elm: 'a',
inner: 'Click here!'
}, {
elm: 'a',
inner: 'here too!'
}]
data.forEach(function(itemData, idx) {items.push({
elm: itemData.elm,
href: '/page' + idx + '.html',
inner: 'Nav item #' + idx,
})});
return items;
}
var header = {
elm: 'header',
inner: navigation,
class: 'header'
}
var content = {
elm: 'body',
inner: 'This is the content area!!!',
class: 'content'
}
var footer = {
elm: 'footer',
inner: navigation,
class: 'footer'
}
// This is the virtual DOM parent
var app = {
elm: 'body',
inner: [
header,
content,
footer
]
}
// Start with a single node
var testDom = {
elm: 'button',
inner: 'click me!',
class: 'test-elm',
onclick: 'javascript:alert("woot!");',
}
var nestedTest = {
elm: 'div',
inner: testDom
}
// Define
class parser {
// This is the parser for JSML
constructor(stdIn) {
this.output = '';
this.parse(stdIn);
return this.output;
}
generateAttributeKeyValueString(key, value) {
return `${key}='${value}'`;
}
generateDom(vNode) {
var self = this,
elmStart = `<${vNode.elm}`,
elmEnd = `</${vNode.elm}>`,
elmAttrs = '',
elmContent;
function parseInput(vNode, key) {
if (!vNode.hasOwnProperty(key)) return;
var value = vNode[key],
// custom types conditons depending on the key and value of the nodes contents
isActualInnerValueChildContents = (key === 'inner' && typeof value === 'string'),
isChildrenContentArr = (key === 'inner' && Array.isArray(value)),
isSingleChildContent = (key === 'inner' && !isChildrenContentArr && (typeof value === 'object')),
isAttributeKeyValuePair = (key !== 'elm' && key !== 'inner');
if (isActualInnerValueChildContents) elmContent = value;
else if (isAttributeKeyValuePair) elmAttrs += self.generateAttributeKeyValueString(key, value); // Otherwise its an attribute and value pair and should be added to the node string
else if (isChildrenContentArr) {
//Array of multiple child nodes
elmContent = "";
value.forEach(function(subValue) {
elmContent += parser.execute(new parser(subValue)).output;
});
} else if (isSingleChildContent) {
// Just one child node
elmContent = parser.execute(new parser(value)).output;
}
}
for (var key in vNode) parseInput(vNode, key);
elmStart += ` ${elmAttrs}>`; // Close off the html elements start tag now that all possible attributes have been written
this.output = elmStart + elmContent + elmEnd;
}
parse(input) {
var self = this;
self.generateDom(input);
}
}
parser.execute = function(vDom) {
document.getElementsByTagName('html')[0].innerHTML += vDom.output;
return vDom;
}
// Call
document.innerHtml = parser.execute(new parser(app)).output;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
关于javascript - 构建 ES6 解析器和字符串生成器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38625343/
我在使用 gradle 构建一个特定应用程序时遇到问题。该应用程序可以用 eclipse 编译和构建,它在平板电脑上运行良好。当我尝试使用 Gradle 构建它时,“compileDebugJava”
我有一个 C 程序,是一位离开的开发人员留给我的。我试图弄清楚他到底在做什么,并将软件重新安排成更合乎逻辑的东西,这样我就可以更轻松地构建它。我正在使用 CMake 构建,而他使用的是 Make。 有
我刚开始阅读“Pro Spring MVC with web flow”,它附带了一个我想遵循的代码示例。 我要什么 - 我想像书中那样构建应用程序,使用 Gradle 有什么问题 - 我没用过 Gr
我希望有人已经这样做了。我正在尝试为我的一个 angular 2 项目在 teamcity 中建立一个连续的构建。在做了一些研究之后,我按照以下步骤操作: 构建步骤 1:为 teamcity 安装 j
我有一个旧的 ASP.Net 网站解决方案,看起来像: 当我在 Visual Studio 中构建解决方案时,我得到以下输出: ------ Build started: Project: C:\..
我使用 gulp-usref、gulp-if、gulp-uglify、gulp-csso 和 gulp-file-include 来构建我的应用程序。除了 HTML 保持原样外,构建中的一切都运行良好
我正在使用 ionic2 开发内部移动应用程序。我可以通过以下方式成功构建 ios: ionic build ios and ionic build ios --prod 但当我这样做时,它一直失败
我是一位经验丰富的 .NET/C# 开发人员,但对这里的几乎所有技术/库(包括 SQL/DB 工作)都是新手。 我正在开发一个具有 Azure/Entity Framework .NET 后端和可移植
我正在使用 VS 2008。我可以使用 IDE 成功编译我的解决方案。但是,当我尝试使用 devenv.com 构建它时,它失败并提示“错误:找不到项目输出组'(无法确定名称)的输出”。该组、其配置或
版本: ember.js 2.7,ember-data 2.7 ember-cli 2.9.1//同样适用于 ember-cli 2.7 node 6.9.1, npm 3.10.9//也适用于 no
我第一次修补 AzureDevops,设置一些 CI 任务。 我有一个公共(public)存储库(开源)和一个包含 3 个 F# 项目的解决方案(.sln)。该解决方案在 Windows/Mac/Li
目前 5.1.5 版本或 STLPort CVS 存储库似乎仍不支持 VS2008。如果有人已经完成了这项工作,那么如果可能的话,分享会很有用:) 同样,了解 VS2005 或 2008 x64 构建
我有一个 Python 2.7 项目,到目前为止一直使用 gfortran 和 MinGW 来构建扩展。我使用 MinGW,因为它似乎支持 Fortran 代码中的写入语句和可分配数组,而 MSVC
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题? Update the question所以它是on-topic对于堆栈溢出。 9年前关闭。 Improve this que
我想知道为什么在 Zimbra Wiki 中只列出了构建过程的特定平台。这意味着不可能在其他 Linux 发行版上构建 Zimbra? Zimbra 社区选择一个特殊的 Linux 发行版来构建 Zi
我将在 Swift 中构建一个 CLI 工具。我用这个命令创建了项目 swift package init --type executable当我构建我的项目并解析 时读取别名 Xcode 中的参数并
我想为添加到 docker 镜像的文件设置文件权限。我有这个简单的 Dockerfile: FROM ubuntu:utopic WORKDIR /app RUN groupadd -g 1000 b
当我使用 clBuildProgram在我的 OpenCl 代码中,它失败并显示错误代码 -11,没有任何日志信息。 这是我的代码的样子: ret = clBuildProgram(program
我有一个底部导航栏,它有一个列表页面,该页面使用状态块。 class _MainPageState extends State { int _index = 0; @override Wi
我在本地计算机上使用Jenkins(Jenkins URL未通过Internet公开,但该计算机上已启用Internet。) 我进行了以下配置更改: 在Jenkins工具上安装了Git和Github插
我是一名优秀的程序员,十分优秀!