想作那种简单的可以使编辑或者是网页合成人员就能够使用的可视化标签展示模板,一开始想的是挺简单的,可是真正上手的时候才知道这东西的麻烦,毕竟要实现这个不但要在技术上解决,还要在理解上解决越简单越好。
1,可视化展示标签,这是面临的第一个问题,如何可视化展示呢?还得实时的展示标签?
2,标签的分类,常用标签分为什么类呢?是不是要分区块标签、列表、导航、字段等?是不是还要把基本的语句,if、for等的基本语句也定义上?
3,标签的嵌套循环,所有的展示信息,都存在基础数据标签调用展示字段标签内容,展示的时候会有判断及再次循环展示等。
4,字段标签的属性,比如这个文字我要显示二个字,这个日期我要换个方式展示,这个数字我要换成其它的格式展示,这个图片大小我要切一下图(后端也可以切但是展示的时候也会有一些特殊情况是否要切图)等等情况。
5,标签的循环嵌套,这个跟3是有区别的,就是数据展示的html内容是可以在不同的地方使用的,可以循环使用。
6,是否存在在不同的区块中同时使用的值或者是判断语句呢?是否需要定义全局变量的标签呢?
等等一些情况,都可以影响标签的扩展性及灵活性,是否够灵活,是否能够更好的扩展其它的属性,这就是一个前端的代码与后端的解决(标签除了前端要展示和灵活外,还需要后端去解析运行这个标签)。
所以要作到后端录入的数据,与前端展示的结合,所以我又给数据模型(后端的录入数据结构)与前端展示之间搭建一个桥梁,让其能够更好的通过数据模型的相关字段类型更好的反映到前端的展示字段属性上。
先不说后端如何解析实现,先去实现前端的灵活及可视化,因为前端能够解析和可视化展示的时候。后端会比前端更好实现一些,但也存在一个要考虑的问题就是同一模型数据的嵌套调用,同字段名的时候值的作用域范围的问题。就相当于又写书了一个代码解析器。如何去更高效的去解析前端标签也更安全的递归和循环。
前端可视化。
标签上的右键,和标签的可视化选择(并且标签语句不能修改和删除里面的东西,只能可视化操作)。
1,如何实现可视化展示?
2,如何实现可视化选中?
3,如何能够实时的可视化选中。
以上三个问题就是刚开始作的需要解决的问题,当然后面还增加了一些其它的,那都是迭代和优化的问题。
1,可视化展示,就相当于去分析代码里面的这个系统的自定义标签。这个能够一些正则相关的功能就可以去实现。并且实现了之后能够textarea(透明背景)加上pre标签结合展示出后面的可视化展示。
2,获得光标的位置判断是否是在标签范围内当然也要判断删除、回退、上下能够控制光标的功能的键,去判断光标的位置是否在标签范围内。
3,这个一开始是全部html去匹配,当然效率肯定不好,后面修改了根据一些键盘按钮情况,看这些键盘及鼠标操作是否影响多少行,只针对行进行匹配操作。
以上就是最基础的标签可视化展示的时候,简单的思考的东西,可能真作起来没有说的这么简单,并且我以上也没有上什么代码。只是当时的一个简单的想法和思路。