Avalon Chinese long character interception, key character hiding, custom filter _javascript Tips

About AVALONJS

Avalon is a simple and easy-to-use MVVM framework that was first published in 2012.09.15 and developed to address the various views rendered by the same business logic. In fact, this problem can also simply use the General front-end template plus jquery event delegate, but as the business expands, the code is full of various selector and event callback, difficult to maintain. Therefore, the complete separation of business and logic, you can only turn to the architecture. Initially thought of is MVC, tried backbone, but the code does not fall, the occasional opportunity to encounter Microsoft's WPF, elegant MVVM architecture immediately attracted me, I think this is the solution I have been pursuing.

MVVM completely divides all the front-end code into two parts, the processing of the view is implemented by binding (angular has a more cool noun called instruction), and business logic is concentrated in a single object called a VM. As long as we manipulate the VM's data, it magically synchronizes to the view naturally. Obviously all mysteries have its inside, C # is through a statement called accessor properties, then JS also has no corresponding things. Thank God, IE8 first introduced this thing (Object.defineproperty), unfortunately there are bugs, but driven by other browsers to implement it, ie9+ can safely use it. For old IE, I looked for a long time, there is no way to use VBScript to achieve.

The function of a object.defineproperty or VBS is to convert a property of an object to a setter and getter, as long as we hijack the two methods and manipulate the view secretly through the pub/sub mode. To commemorate the guidelines for WPF, I named this project in WPF's initial development code, Avalon. It can really get the front end people out of Dom's misery and into the data paradise!

Digression:

Recently took over a project, the front-end using Avalon this MVVM framework, for the previous contact with Angularjs people, the total feeling Avalon or "too" light (not a compliment)

Online for Avalon endorsement of the No outside is said: domestic, small size, fled the DOM operation, the difficulty of getting started, compatible with IE6; The disadvantage is: "However, Avalon also has its own disadvantage-low visibility", er, I want to quietly ...

Slot jquery Transition-dependent selector, complex DOM operations, but Avalon Ajax and animation effects have to rely on other controls, in fact, is often used with jquery, slot jquery, but also inseparable from jquery, really tragic ... Said angular very difficult to start, Ng difficult to start a good, Ng ecological, powerful, document and translation complete, community mature active, the official plug-in Third-party Plug-ins a lot of.

Performance problems, this is only a matter of choice in order to balance development efficiency and performance. People who have used Ng are not worried about performance problems. slot angular version compatibility. But Avalon or the statement: "Note: The above three branches are relatively stable, but not very compatible with each other." It is recommended to use 2.0 directly. ”

The above is just spit slot those copywriting endorsement, Avalon also calculate a good framework, also has been in optimizing and absorbing the advantages of the well-known MVVM framework, such as version 2.0, add 4 array of filters, instructions also entered to do list.

Hope that one day used angular people again to use Avalon after will say: Ouch, good oh!

Share two very simple filters: Hide key characters and character truncation. You can also migrate to NG. Later, there are good filters, but also to this side add

Keyword:avalon, custom, filter, Chinese, long character, truncated, truncated, truncate, hidden characters, angular

Hide key characters

You might want to hide some key information on some pages on the front end (if you really want to hide it or you need the backend to handle it), you can use:

/**
* Hidden string key code, hidden word Fummer think ' * '
* For example, hidden mobile phone number, card number: 1890000000-189****0000; {{Str|hide_code (3,4, ' * ')}}
* @param str
* @param pos start position
* @param length replacement character number
* @param Newchar replaced character/string
* @returns {*}
*/
   
    avalon.filters.hide_code = function (str, pos, length, Newchar) {
pos = pos | | 0;
Length = Length | | 0;
Newchar = Newchar | | '*';
if (pos < 0 | | | | length <= 0 | | pos + length > Str.length) {return
str;
}
var repstr = "";
for (var i = 0; i < length; i++) {
repstr + = Newchar;
}
Return Str.slice (0, POS) + Repstr + str.slice (pos + length, str.length);
}
   

Long character truncated (cut by character, two characters in Chinese-improved edition)

The original Avalon of the Truncate filter, is in accordance with both English and Chinese characters to intercept. The filter is improved to two characters in English a character for interception

/** * For long strings truncated to the length of characters intercepted, Chinese accounted for two characters; {{Str|truncatex (4, ' ... ')} * @param str * @param length, new string lengths (one Chinese for two characters in English), number of characters containing truncation * @param truncation, The field at the end of the new string * @returns {returns the new string} */Avalon.filters.truncatex = function (str, length, truncation) {var chinese_pattern =/[ \u4e00-\u9fa5]|
[\ufe30-\uffa0]/gi; [\u4e00-\u9fa5] denotes Chinese characters, [\ufe30-\uffa0] means full-width str = str | |
" "; Length = Length | |
30; truncation = typeof truncation = = "string"?
Truncation: "...";
var Chinesein = function (s) {return chinese_pattern.exec (s)? True:false;};
var calcsize = function (source) {var strtemp = Source.replace (Chinese_pattern, "AA"); var recursion = function (source, length) {if calcsize (source) <= Length | | (!chinesein (source)) {return source;}
else {return recursion (Source.slice (0, source.length-1), length);};
var slicelength = length-truncation.length; return calcsize (str) > length? Recursion (Str.slice (0, Slicelength), slicelength) + truncation:string (StR); }

The above is a small set to introduce the Avalon Chinese long character interception, key characters hidden, custom filter related knowledge, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!