闲话js前端框架(5)——再看自己一年前设计的微型渲染引擎

2024-02-23 13:18

本文主要是介绍闲话js前端框架(5)——再看自己一年前设计的微型渲染引擎,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

闲话js前端框架

前端人员=美工+设计+代码+测试
——题记

专题文章:

一、从avalonjs的模板说起
二、庞大的angularjs
三、再也不想碰DOM
四、组件化?有没有后端的事?
五、再看自己一年前设计的微型渲染引擎
六、在浏览器标准上做文章
七、抛开浏览器,构建应用容器
八、为何Flash、银光和Java都在网页端一蹶不振

本文属 西风逍遥游 原创, 转载请注明出处: 西风世界 http://blog.csdn.net/xfxyy_sxfancy

五、再看自己一年前设计的微型渲染引擎

在做了一年网站期间,我主要是以一个后端的身份在工作,有时是php,有时JavaEE,还有python,最常见的工作就是,写一个接口,将接口获得的数据判断一下异常,然后修改格式存入数据库中。

而我做前端的工作,屈指可数,就偶尔用下avalon,有时用下angularjs,其他的几乎没动过。但我在初学前端的时候,却做过一个现在我看来都是天方夜谭的设计,我制作了一个小型渲染引擎,我给他起名ntml(即将崩坏的html)。

需要引入jQuery的引擎

说这货是个引擎我也是无奈了。

首先,只有一个js类,手动导出符号,还没写闭包。使用前还需要提前引入jQuery。。。
我真想说这货是一个jQuery插件 - -!但他连插件都不算!

引入jQuery的原因其实很简单,从当时直到现在,我都不会封装跨平台的ajax函数!还有xml解析函数!

引擎的功能呢?

说起来挺好玩,一共200多行js代码,又引入了别人的一个库,实现了这个功能,将这样的代码:

<?xml version="1.0" encoding="utf-8" ?> 
<ntml>
<nt-container nt-var=''><nt-layout-8-4><a-left><nt-article><a-title>关于nt语法的一些介绍</a-title><a-content>下面我们来简要介绍一下ntml这种标记式语言。</a-content></nt-article></a-left><a-right><nt-loginform><params action='#' method='get' /></nt-loginform></a-right></nt-layout-8-4>
</nt-container>
</ntml>

渲染成这个样子:

这里写图片描述

有没有觉得很有趣?

不过功能确实不多,也就仅仅是这样一个功能,甚至连什么事件绑定啊,都没有做。
当然,这里所展示的代码并不完全,他的工作原理实际上是将xml中声明的标签,依次替换为template下预先写好的模板。对应需要有嵌套的部分,也用属性指定好每个对应的模板标签就可以了。

ntml语法规范

所有需要被ntml解析的标签前,可以加上’nt-‘,用来被解释器识别。’nt-‘是标准ntml组件库的前缀,你也可以自己规定名称前缀。
eg.

  <nt-login_form class='col-xs-12 col-xs-4'></nt-login_form>

nt对象下面的子对象,所有加’nta-‘前缀的,认为是nt语法中的属性
eg.

  <nt-article class='col-xs-12 col-xs-8'><a-title>关于nt语法的一些介绍</a-title><a-date>2014-8-10</a-date><a-content>下面我们来简要介绍一下ntml这种标记式语言。<nt-ad class='col-xs-12 col-xs-8'></nt-ad></a-content></nt-article>

nt对象中的params标签下的属性会被解释为声明,内容会被解释为content
eg.

  <nt-article class='col-xs-12 col-xs-8'><params title='关于nt语法的一些介绍'date='2014-8-10' >下面我们来简要介绍一下ntml这种标记式语言。<nt-ad class='col-xs-12 col-xs-8'></nt-ad></a-params></nt-article>

nt对象中非nta前缀的标签也会被解释为content
eg.

  <nt-article class='col-xs-12 col-xs-8'><a-params title='关于nt语法的一些介绍'date='2014-8-10' />下面我们来简要介绍一下ntml这种标记式语言。<nt-ad class='col-xs-12 col-xs-8'></nt-ad></nt-article>

如果同时存在多个content位置的内容的话,会被从上到下依次添加

nt组件模板的开发
nt解析器会将最外层的标签解释为div,所以不必再增加嵌套div。
eg.

  <? xml version="1.0" encoding="utf-8" ?> <div style='align-center;'><h1>{{#title}}</h1><h5>{{#date}}</h5></div><p>{{#content}}  </p>

我们使用artTemplate模板引擎,建议将模板编译成js代码,使用TmodJS工具。

遗憾

这个渲染引擎最大的问题既不是效率问题,又不是功能问题,而是模板引擎的选用上。当时并不怎么了解前端,选用了一款静态引擎进行渲染。这就造成了一个问题,这个引擎估计比较适合用在后端。。。
也就是说,本来是想开发一个易用的前端引擎,却不慎做成了nodejs用的后端引擎- -!

总结教训

当初的设计确实是有很多问题的,但我希望这个设计能为之后的考虑做铺路的打算。这个项目的初衷是用模块化的xml来解决组件化难题,但却受能力所限,写出来的渲染器并不好用。得到两点经验,其一,DOM操作的封装要优于简单的文本格式化;其二,组件化要有js的支撑才能灵活,想要简单通过模拟后端工作的方式,既不能改善结构,又不能让其具有相应的灵活性。

什么样的框架是理想的?

我一直觉得应该有一种方式,让网站模块化工作,首先,虚拟DOM是一个好想法,但我不大喜欢React的复杂,我希望还是用动态模板的哪种简单方式操作DOM。
既然要大规模组件化,就要让组件十分好写,我个人反感复杂的组件编写阅读,希望找到一种方式能够简单的声明组件,无需js,就能引入组件,我希望通过约定配置,将组件化做的更方便。

想看看完整的情况

Github仓库地址: https://github.com/sunxfancy/ntml
欢迎前来fork和提意见,拿来改着玩神马的都可以。
~~(>_<)~~ ,发布已经一年了,一个看的也没有,忽然发现没写Readme!
只能怪我那时太年轻

这篇关于闲话js前端框架(5)——再看自己一年前设计的微型渲染引擎的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/738760

相关文章

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,:本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可

GSON框架下将百度天气JSON数据转JavaBean

《GSON框架下将百度天气JSON数据转JavaBean》这篇文章主要为大家详细介绍了如何在GSON框架下实现将百度天气JSON数据转JavaBean,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录前言一、百度天气jsON1、请求参数2、返回参数3、属性映射二、GSON属性映射实战1、类对象映

Python利用PySpark和Kafka实现流处理引擎构建指南

《Python利用PySpark和Kafka实现流处理引擎构建指南》本文将深入解剖基于Python的实时处理黄金组合:Kafka(分布式消息队列)与PySpark(分布式计算引擎)的化学反应,并构建一... 目录引言:数据洪流时代的生存法则第一章 Kafka:数据世界的中央神经系统消息引擎核心设计哲学高吞吐

解决若依微服务框架启动报错的问题

《解决若依微服务框架启动报错的问题》Invalidboundstatement错误通常由MyBatis映射文件未正确加载或Nacos配置未读取导致,需检查XML的namespace与方法ID是否匹配,... 目录ruoyi-system模块报错报错详情nacos文件目录总结ruoyi-systnGLNYpe

基于Python Playwright进行前端性能测试的脚本实现

《基于PythonPlaywright进行前端性能测试的脚本实现》在当今Web应用开发中,性能优化是提升用户体验的关键因素之一,本文将介绍如何使用Playwright构建一个自动化性能测试工具,希望... 目录引言工具概述整体架构核心实现解析1. 浏览器初始化2. 性能数据收集3. 资源分析4. 关键性能指

Mysql中设计数据表的过程解析

《Mysql中设计数据表的过程解析》数据库约束通过NOTNULL、UNIQUE、DEFAULT、主键和外键等规则保障数据完整性,自动校验数据,减少人工错误,提升数据一致性和业务逻辑严谨性,本文介绍My... 目录1.引言2.NOT NULL——制定某列不可以存储NULL值2.UNIQUE——保证某一列的每一