About AvalonJS
avalon is a simple and easy-to-use mini MVVM framework. It was first published on 2012.09.15 and was developed to solve the existence of various views of the same business logic. In fact, this problem can actually be solved simply by using general front-end templates and jQuery event delegation, but as the business expands, the code is full of various selectors and event callbacks, which are difficult to maintain. Therefore, completely separating business from logic can only rely on architecture. The first thing I thought of was MVC. I tried backbone, but the code did not fall but rose. It was a very occasional opportunity. When I encountered Microsoft's WPF, the elegant MVVM architecture immediately attracted me. I think this is the solution I have always pursued.
MVVM completely divides all front-end code into two parts, and the processing of the view is implemented through binding (angular has a cooler noun called instructions), and the business logic is concentrated in objects called VMs. As long as we operate the VM's data, it will naturally and magically synchronize to the view. Obviously all mysteries have their own inside information. C# is implemented through a statement called accessor attributes, so does JS have any corresponding things. Thank God, IE8 first introduced this thing (Object.defineProperty), but unfortunately there is a bug, but it has led other browsers to implement it, so IE9+ can use it safely. I have been looking for old-fashioned IE for a long time, but I really couldn't do it, so I used VBScript to implement it.
The function of Object.defineProperty or VBS is to convert a certain property of the object to a setter and getter. We only need to hijack these two methods and can secretly operate the view through the Pub/Sub mode. To commemorate WPF's guidance, I named this project after WPF's original development code name avalon. It can really help front-end personnel get out of the sea of suffering of DOM and come to the paradise of data!
Off topic:
Recently, I took over a project and the front end uses the MVVM framework of avalon. For people who have been exposed to angularjs, it always feels that avalon is still "too" lightweight (not a compliment)
The online endorsement of avalon is nothing more than: domestically made, small in size, escapes dom operation, is low in operation, and is compatible with ie6; the disadvantage is: "However, avalon also has its own disadvantages - it is less well-known", uh, I want to be quiet...
I complained that jquery transition depends on selectors and complicated dom operations, but Avalon's ajax and animation effects still have to rely on other controls. In fact, they are often used with jquery. I complained that jquery is inseparable from jquery. It's really a tragedy... It's very difficult to get started with angular, it's a low difficulty in getting started with ng, it's a good ecology, powerful functions, complete documents and translations, mature and active community, and a lot of official plug-ins and third-party plug-ins.
Performance issues, in order to balance development efficiency and performance, this is just a matter of choice. People who have used ng will not worry about performance issues and complain about angular version compatibility. But Avalon still made a statement like this: "Note: The above three branches are relatively stable, but they are not compatible with each other. It is recommended to use 2.0 directly."
The above is just to complain about the endorsement of copywriting. Avalon is also a good framework, and has been optimizing, improving and absorbing the advantages of those well-known MVVM frameworks. For example, 2.0 version has added 4 array filters, and the instructions have also entered the to do list.
I hope that when anyone who has used angular comes to use avalon one day, they will say: Oh, it’s not bad!
Share two very simple filters: Hide keywords and character truncation. It can also be migrated to ng. There are also good filters later, and I will add them to it.
keyword:avalon, custom, filter, Chinese, long characters, truncated, truncate, hidden characters, angular
Hide keywords
You may need to hide some key information on some pages of the front end (if you really want to hide it, you still need to handle it in the back end), then you can use:
/*** The key code in the hidden string, the hidden characters are default to '*'** For example, the hidden mobile phone number is: 1890000000 - 189****0000; {{str|hide_code(3,4,'*')}}* @param str* @param pos Start position* @param length Number of characters replaced* @param newChar Replaced characters/strings* @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 truncation (sliced by character, Chinese account for two characters - improved version)
The original avalon truncate filter was intercepted according to the fact that both Chinese and English occupy one character. This filter is improved to intercept two characters in Chinese and one character in English for intercepting
/*** Truncate long strings, cut in character length, Chinese occupies two characters; {{str|truncatex(4,'...')}}* @param str* @param length, new string length (calculated according to English characters, one Chinese occupies two characters), number of characters containing truncation* @param truncation, field at the end of the new string* @returns {return new string}*/avalon.filters.truncatex = function (str, length, truncation) {var chinese_pattern = /[/u4E00-/u9FA5]|[/uFE30-/uFFA0]/gi;// [/u4E00-/u9FA5] represents Chinese characters, [/uFE30-/uFFA0] represents 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");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 the relevant knowledge about Avalon Chinese long character interception, keyword character hiding, and custom filters introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!