Javascript viewtemplate 2.0

Source: Internet
Author: User

Recently, based on the actual problems in the project, the original template has been adjusted to fix the BUG in the case of complex nesting.

The data is divided into three parts for storage.
This. _ tmp_cache = {}
Cache, set through $ cache {value, key}

This. params = {}
All parameters, including callbackObj + custom Parameters

This. self_params = {}
Custom Parameters


(Note: callbackObj is a data layer object, but sometimes you may want to add your own parameters on the basis. If the custom parameter has the same name as callbackObj, it will overwrite callbackObj)

For example
Javascript code
Var data = {
Name: "cc ",
Desc: "dddddd ",
Deschtml: "<a href =''> ddddd </a> ",
Href: "Who am I ",
Playtime: 100,
Today: '2017-09-05 01:00:00 ',
}

 

Javascript code
// Str3 is the Template
Var t = new Template (str3 ,{
// Custom attributes
Category: "haha ",
// User-Defined Functions
Sum: function (){
// All arguments are strings and must be converted by yourself.
Return eval ([]. slice. apply (arguments). join ("+ "))
}
});

 

$ {Name} is displayed as cc
Note: all others (for example, $ trim, $ date, $ f _, $ encode) use this interface.
Implementation: Search directly from this. params or this. _ tmp_cache. If it is found, data is returned. Otherwise, the output is as is (name rather than cc)

$ Trim {desc} is displayed as dddd
Description: trim function. Remove spaces on both sides.

$ Trim {deschtml, html} is displayed as dddd
Note: The label is cleared and only the content is displayed. The second parameter can only be 'html'

$ Encode {href} is displayed as % E6 % 88% E6 % 91% AF % E8 % B0 % 81
Description: equivalent to the encodeURIComponent function.

$ Time {playtime} is displayed as 00:01:40
Note: The calculation data will be converted to the hour: minute: Second format.
Exception:
Error (lib. TemplateNew. evaluate): time format is incorrect ") incorrect Data format

$ Date {today, yy mm dd hh_mm_ss} is displayed as 2011 09 05 01_00_00
Description: format the time.
YYYY/YY, MM, DD, hh, mm minutes, ss seconds
Exception:
Error (lib. TemplateNew. evaluate): date format is incorrect the first parameter is incorrectly formatted.
Error (lib. TemplateNew. evaluate): date format argument [1] is null second parameter format incorrect

$ Fixed {asdjfkajskldjflk, 2} is displayed
Note: data does not contain asdjfkajskldjflk, and it will be output directly as it is (asdjfkajskldjflk). The second parameter determines how many characters to intercept, equivalent to a monthly substring.

$ Fixed {asdjfkajskldjflk} is displayed as asdjfkajskldjflk
: Equivalent to $ {asdjfkajskldjflk}. Is Fault Tolerance used for this processing? We recommend that you use $ {..}

$ Pick {1, 2, yes, no} is displayed as not
Description: equivalent to 1 = 2? Yes: No

$ Pick {1 <2, yes, no} is displayed as Yes
Description: equivalent to eval ("1 <2 ")? Yes: No

$ Pick {1 <2, correct} is displayed as correct
Description: equivalent to eval ("1 <2 ")? Yes :""
Exception:
Error (lib. TemplateNew. evaluate): the parameter num is incorrect parameter count is incorrect


$ Cache {http://www.xxxx.com? Name =$ {name} & desc = $ trim {desc}, url} is not displayed
Note: $ cache does not return any characters, but what does this function do? Suppose you have the following requirements:

"<A href = 'HTTP: // www.xxxx.com? Name =$ {name} & desc = $ trim {desc} '> address 1 </a>"
"<A href = 'HTTP: // www.xxxx.com? Name =$ {name} & desc = $ trim {desc} '> address 2 </a>"

If there are N such connections, do you need to write N and it is not convenient to replace them? solution:

$ Cache {http://www.xxxx.com? Name =$ {name} & desc = $ trim {desc}, url} is not displayed, but this. _ tmp_cache ['url'] = 'HTTP: // www.xxxx.com? Name = cc & desc = dddddd'

"<A href = '$ {url}'> address 1 </a>" displayed as "<a href = 'HTTP: // www.xxxx.com? Name = cc & desc = dddddd'> address 1 </a>"
"<A href = '$ {url}'> address 2 </a>" displayed as "<a href = 'HTTP: // www.xxxx.com? Name = cc & desc = dddddd'> address 2 </a>"

Note:
"<A href = '$ {url}'> address 1 </a>" displayed as "<a href = 'url'> address 1 </a>"

$ Cache {http://www.xxxx.com? Name =$ {name} & desc = $ trim {desc}, url} is not displayed, but this. _ tmp_cache ['url'] = 'HTTP: // www.xxxx.com? Name = cc & desc = dddddd'

"<A href = '$ {url}'> address 2 </a>" displayed as "<a href = 'HTTP: // www.xxxx.com? Name = cc & desc = dddddd'> address 2 </a>"

The template is dynamically executed, so $ cache must be placed at the beginning. For example, before undefined, the variable is output as is, so the first line outputs the 'url' character instead of the address.


The preceding example shows that the template also supports nesting (6 layers in depth)
$ Cache {$ pick {, $ {category}, $ {name}, imgsrc} is not displayed, but this. _ tmp_cache ['imgsrc'] = 'cc'


$ F_sum {12, 23, 45} is displayed as 80
Note: sum is the name of a custom function. It can also be another one, but the prefix must be $ f _. It is mainly used when the above function does not meet the requirements.
Implementation: this in the sum function points to the template and has the following attributes:
Arguments is the parameter
This. params is equivalent to data + custom parameters.
This. get (value) is equivalent to $ {}
This. encode (value) is equivalent to $ encode {}
This. trim (value) is equivalent to $ trim {}
This. trimHTML (value) is equivalent to $ trim {value, html}
This. fixed (value, len) is equivalent to $ fixed {value, len}
This. date_format (date, format) is equivalent to $ {date, format}
This. time_format (time) is equivalent to $ time {time}
Exception:
Error (lib. TemplateNew. evaluate): function "+ f_name +" is not exists function name does not exist


Author: "jj7j7jj"
 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.