前端HTML模板解析引擎 domTemplate.js

• 授权协议: Apache
• 开发语言: JavaScript
• 操作系统: 跨平台
• 软件首页: https://gitee.com/parki/domTemplate
• 软件文档: http://parky18.github.io/demo/

软件介绍

一个非侵入式、不会破坏原来静态页面结构、可被浏览器正确显示的、格式良好的前端HTML模板引擎。彻底实现前后端分离，让后端专注业务的处理。

传统MVC开发模式，V层使用服务器端渲染。美工设计好静态HTML文件，交给后端工程师，需要转换成Jsp、Freemarker、Velocity等动态模板文件。这种模式有几个缺点

1、动态模板文件不能被浏览器解释、必须要运行在服务器中才能显示出效果
2、动态效果和静态效果分别存在不同文件，美工和后端工程师需要分别维护各自页面文件，其中一方需要修改页面，都需要通知另一方进行修改
3、页面数据不能分块加载、获取跨域数据比较麻烦

domTemplate.js 模板引擎是通过在标签中添加自定义属性，实现动态模板功能，当没有引入domTemplate脚本， 则自定义标签属性不会被浏览器解析，不会破坏原有静态效果，当引入domTemplate脚本，模板引擎回去解析这些标签属性， 并加载数据进行动态渲染。 下图：对比服务器页面渲染和使用domTemplate前端引擎开发流程

服务器端模板解析	domTemplate前端解析

用法

导入jquery.js或者zepto.js和domTemplate.js

$(function () {
 $.domTemplate.init(options);
//可以通过selector指定根节点，默认根节点是body,表示从body开始，渲染整个页面 
 });

或者解析某一个html片段。

$('selector').domTemplate(options);
//渲染数据是通过h-model 自动去获取数据，也可以通过data指定全局数据

if条件标签

 
xxx
 
其他内容
 


switch条件标签

 
 
 

 

each遍历标签

 
遍历List例子
 


李小璐



 

自定义标签

 $.domTemplate.registerTag('tagName',function(ctx,name,exp){ }); //tagName 是自定义标签名称，用时要加上前缀，如定义'test'标签，用时h-test="" 

用法

  

参数


	

		

			
Name
			
Type
			
Default
			
Description
		
	
	

		

			
ctx
			
Context
			
 
			
上下文，一般会用到 ctx.options、渲染表达式函数：ctx.compile(exp)和模板渲染函数：ctx.tpl(exp)
		
		

			
name
			
string
			
 
			
标签名称
		
		

			
exp
			
string
			
 
			
标签值
		
	


 

 

自定义函数

可以通过$.domTemplate.registerHelper('functionName',function)添加自定义函数，实例:

 
xxx1
 

渲染结果

 
2016-05-30 11:20:42
 

自定义函数示例

 $.domTemplate.registerHelper('toPrefix', function (value) { return 'test:'+value; }); 

用法

 
xxx1
 

渲染结果

 
test:lala@163.com
 

 

Demo http://parky18.github.io/demo/

    

        

                                

                



            
                

                

                        

                

                    
                
            
                        

                

                    

                        
 的码云指数为 
                        
超过  的项目
                    
                    

                        

                    
                
            
            
        
    
        

                    软件首页
                            软件文档
                            源码下载
                            



        

        
加载中
    

        

                                                                              
评论(0)


    

        
        
暂无评论
    
    

        

                

            

            
            
            

                

                    插入表情
                                        

                        

                            

                                {{ emoji.type }}
                            
                            

                                

                                    

                                        

                                    
                                
                            
                        
                    
                    插入软件
                
                

                

                     发表评论
                
            
        

        
 
    



    
删除一条评论
    

        
评论删除后，数据将无法恢复
    
    

        
取消
        
确定
    


    

本文地址：https://codercto.com/soft/d/12960.html