Aveon long Chinese Character truncation, key character hiding, custom filter, aveon Filter

Aveon long Chinese Character truncation, key character hiding, custom filter, aveon Filter

About AvalonJS

Aveon is a simple and easy-to-use mini MVVM framework, which was first released on January 15,. It was developed to solve various View presentations of the same business logic. In fact, this problem can also be solved simply by using a general front-end template and jQuery event delegation. However, as the business expands, the code is full of various selectors and event callbacks, making it difficult to maintain them. Therefore, to completely separate the business from the logic, you can only turn to the architecture. I first thought of MVC and tried backbone, but the Code did not fall or rise. Occasionally, when I met Microsoft's WPF, the elegant MVVM architecture immediately attracted me, I think this is the solution I have been pursuing.

MVVM divides all front-end code into two parts. view processing is implemented through binding (angular has a more cool term called instruction ), the business logic is concentrated in the objects called VMS. As long as we operate on VM data, it naturally synchronizes magically to the view. Obviously, all mysteries have their own details. C # is implemented through a statement called the accessors attribute, so does JS have something to do with it. Thanks to God, IE8 first introduced this item (Object. defineProperty). Unfortunately, there is a BUG, but it has driven other browsers to implement it, So IE9 + can use it safely. I have been searching for old IE for a long time. There is no way to implement it using VBScript.

Object. defineProperty or VBS converts an attribute of an Object to a setter and getter. We only need to hijack these two methods and use the Pub/Sub mode to secretly operate the view. To commemorate WPF's guidance, I named this project in the early WPF development code aveon. It can really let front-end staff break away from DOM and come to the paradise of Data!

Digress:

Recently, I took over a project and used the mvvm framework avron at the front end. For those who have been familiar with angularjs before, I always feel that avron is still "too" lightweight (not comments)

What's more about the endorsement of aveon on the internet is: domestically made, small size, escaping from dom operations, easy to use, and compatible with ie6; disadvantages: "However, aveon also has its own disadvantage-low visibility", er, I want to be quiet .....

The jquery transition dependency selector and complicated dom operations are thrown out, but the ajax and animation effects of avron have to be expected by other controls. In fact, they are often used together with jquery, but jquery is inseparable. It's a tragedy... angular is very difficult to get started with, ng is difficult to get started, ng ecosystem is good, powerful, documentation and translation are complete, the Community is mature and active, there are a lot of third-party plug-ins for official plug-ins.

Performance problems, in order to balance development efficiency and performance, this is only a choice problem. Those who have used ng will not worry about any performance issues. The following statement can still be found in aveon: "NOTE: The three branches are stable but not compatible with each other. We recommend that you use 2.0 directly ."

The above is just an endorsement of those texts. avron is also a good framework and has been optimizing and improving and absorbing the advantages of those well-known MVVM frameworks, such as version 2.0, four filters are added, and the command also enters the to do list.

I hope anyone who has used angular will say, "Oh, good!

Share two simple filters: Hide key characters and truncate characters. You can also migrate to ng. There will be good filters later, and we will add them here

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

Hide key characters

You may need to hide some key information on some front-end pages (if you really want to hide it, you still need the backend to process it), you can use it:

/*** Hide the key code in the string. The default value of the hidden character is '*'. For example, hide the mobile phone number. The card number is 1890000000-189 ***** 0000; {str | hide_code (3,4 ,'*')}} * @ param str * @ param pos start position * @ param length Replace number of characters * @ param newChar replace character/string * @ returns {*} */aveon. 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 truncation (truncated by character, two Chinese characters-Simplified Version)

The truncate filter of the original aveon is intercepted by Chinese and English characters. The filter is improved to take Chinese characters for two characters, one English character for interception.

/*** Truncatex (4 ,'... ')} * @ param str * @ param length, New String length (based on English characters, one Chinese Character occupies two characters), including the number of truncation characters * @ param truncation, the field * @ returns {returns the new string} */aveon. filters. truncatex = function (str, length, truncation) {var chinese_pattern =/[\ u4E00-\ u9FA5] | [\ uFE30-\ uFFA0]/gi; // [\ u4E00-\ u9FA5] indicates Chinese characters, and [\ uFE30-\ uFFA0] indicates full-width str = str | ""; length = length | 30; truncation = typeof trun Cation = "string "? Truncation: "..."; var chineseIn = function (s) {return chinese_pattern.exec (s )? True: false ;}; var calcSize = function (source) {var strTemp = source. replace (chinese_pattern, "aa"); return strTemp. length ;}; 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 series of knowledge about aveon Chinese long character truncation, key character hiding, and custom filters. I hope it will help you, if you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!