Introduction to how to write a simple and efficient JSON query using function templates_javascript skills

JSON can be said to be the highlight of JavaScript. It can implement the initialization of Object and Array with elegant and concise code. It is also a text-based data definition, which is more semantic than symbol separation and more concise than XML. Therefore, more and more JS developers use it as data transmission and storage.

JS arrays have many useful methods built-in to facilitate our query and filtering of data. For example, we have a bunch of data:

Copy code The code is as follows:

var heroes = [
          // Name============Attack======Defense========Strength====Dexterity=====Intelligence====
                                                         name: 'Ice Room Witch', DP: 38, AP: 1.3, STR: 16, AGI: 16, int: 21},
{name: 'Silent Warlock', DP: 39, AP: 1.1, STR: 17, Agi:16, Int:21},
{name:'Naga Siren', DP:51, AP:6.0, Str:21, Agi:21, Int:18},
{name :'Bounty Hunter', DP:39, AP:4.0, Str:17, Agi:21, Int:16},
                                                                                                 ​18, Agi:22, Int:15},
{name:'Guardian of Light', DP:38, AP:1.1, Str:16, Agi:15, Int:22},
{name: 'Alchemist', DP:49, AP:0.6, Str:25, Agi:11, Int:25}
                                                                                                                     For heroes whose defense is greater than 40 and whose defense is less than 4, we can use Array’s filter method:

Copy code

The code is as follows: var match = heroes.filter(function(e) {                                                                                                                     .

Compared with manually writing loop judgments, the filter method provides us with great convenience. But it is based on function callbacks, so you must write a function every time you use it, which is very cumbersome for simple queries, and the efficiency of using callbacks is also greatly reduced. But there is no way to do this. If you want to be simple, you must sacrifice a certain amount of performance. How perfect it would be if we could use simpler statements than this and fully enjoy the efficiency of code expansion.

First imagine, if the above code can be written like this, and
the query speed is the same as the handwritten traversal judgment
:

Copy the code

The code is as follows:

var match = heroes.select('@DP>40 AND @AP It looks a bit like SQL, even the syntax has been changed? Wouldn't this mean that we would have to write a lot of script engine functions such as lexical analysis, semantic interpretation, etc. It would be impossible to handle even thousands of lines of code, and the efficiency would definitely be worse. . . If you think it's that complicated, then you haven't deeply understood the essence of the script. All scripting languages ​​have interfaces for dynamically interpreting code at runtime, such as execute() of VBS; eval(), new Function() of JS, and even create a <script> to dynamically write code. </script>

Obviously, if another language can be translated into js code, then it can be directly handed over to the host for execution!

For example, for the characters in the select above, we simply replace "@" with "e." and "AND" with "&&", so it becomes a legal js expression that can be handed over to eval. implement.

So what we have to do is to translate the original statement into a js statement for execution. And in order to improve efficiency, the translated js expression is inlined into a context environment to generate an executable function body, instead of relying on callbacks for judgment in each traversal.

So, function templates will come in handy.

Introduction to function templates

In C, there are such things as macros and class templates, which can allow some calculations to be completed during the compilation phase, greatly improving the performance of the runtime code. Although the script is not compiled in the strict sense, it will be parsed and fully optimized the first time it is executed. This is a point of competition between current mainstream browsers. Therefore, we need to embed the repeated eval code into the template function provided in advance: a function that is ready and only needs expression calculation:

Copy code

The code is as follows:

/**
* Template: tmplCount
* Function: Count the number of expressions matching $express in the arr array
*/
function tmplCount(arr) {
var count = 0;

for(var i = 0; i var e = arr[i];

if($express) {
🎜>The above is a template function that traverses the parameters arr [] and count the number matching $express. Except for the expressions within if(...), everything else is ready. The character $express can also be replaced by other identifiers, as long as it does not conflict with other characters in the function.

When we need to instantiate, we first convert the function into string format through tmplCount.toString(), then replace $express with the expression we want, and finally eval this string of characters to get a Function type Variables, an instance of a template function is generated!


Let’s give a simple demonstration:

Copy the code
The code is as follows:

/** * Function: createInstance * Parameters: exp * A js expression string, used to replace the $express of the tmplCount template * Return:

* Returns a Function, template tmplCount Example

*/
function createInstance(exp)
{
// Replace the expression in the template
var code = tmplCount.toString()
.replace ('$express', exp);

// Prevent anonymous functions from directly eval reporting errors
var fn = eval('0,' code);

// Return template instance


// Test parameters
var student = [
{name: 'Jane', age: 14}, {name: 'Jack', age: 20},

{name: 'Adam', age: 18}
];

// demo1

var f1 = createInstance('e.age alert(f1(student)); //1

// demo2
var f2 = createInstance('e.name!="Jack" && e.age>=14');
alert(f2(student)); //2

Note that among the parameters of createInstance(), there is an object called e, which is defined in the tmplCount template and refers to the specific element during traversal. The returned f1 and f2 are two instances of the tmplCount template. The final called f1 and f2 functions have already embedded our expression statements, just like we have written two functions with the same function in advance, so the expressions are run directly during traversal without callbacks or anything, which is efficient. Significant improvement.

In fact, to put it bluntly, tmplCount exists only to provide the string of this function, and it itself will never be called. In fact, the definition in the form of a string is the same, but writing it in a function is more intuitive and convenient for testing.

It is worth noting that if the script needs compression optimization later, the tmplCount template must not be involved, otherwise the corresponding "e." and "$express" may change.

JSON basic query function

Now that we have introduced the use and implementation of function templates, let’s look back at the previous JSON query language. We only need to translate sql-like statements into js expressions and generate a function template instance. For the same statement, we can cache it to avoid translation every time.

First we implement the query template:

Copy the code

The code is as follows:

var __proto = Object.prototype;

//
// Template: __tmpl
// Parameters: $C
// Description: Record and return the set of elements matching $C in the _list object
//
var __tmpl = function(_list) {
var _ret = [];
var _i = -1;

for(var _k in _list) {
var _e = _list[_k];

if(_e && _e != __proto[_k]) {
if ($C)
                                                                                                                                                                         
}.toString();

Then start writing the select method of Object:

Copy code

The code is as follows: // // select method implementation

//

var __cache = {};

__proto.select = function(exp) {
If(!exp)
return [];

var fn = __cache[exp];

try { if(!fn) {

var code = __interpret(exp); //Interpret expression

code = __tmpl.replace('$C' , code); //Application Go to template

                      fn = __cache[exp] = __compile(code);                                                                                                                                                                       
          return fn(this);                                                                                                                                                                     }
}

The __cache table implements the cache of query statements. For repeated queries, performance can be greatly improved.

Copy code


The code is as follows:

function __compile() {

return eval(' 0,' arguments[0]); } The reason why __compile is written separately in an empty function is to have as clean a context as possible when eval is executed. __interpret is the top priority of the entire system and is responsible for translating query statements into js statements. Its implementation is a matter of opinion, but keep it as simple as possible and don't over-analyze the syntax.

View specific code:
jsonselect.rar

For demonstration purposes, only some basic functions are currently implemented. In the future, you can also add LIKE, BETWEEN, ORDER BY and other commonly used functions.

Demo

Copy code

The code is as follows:

var Heros = [
// name ===================== Power === agile == ===Intelligence====
{name:'Icehouse Witch', DP:38, AP:1.3, Str:16, Agi:16, Int:21},
{name:'Silent Warlock ', DP:39, AP:1.1, Str:17, Agi:16, Int:21},
                                                                                    21, Int:18},
{name:'Bounty Hunter', DP:39, AP:4.0, Str:17, Agi:21, Int:16},
{name:'Venomancer' ', DP:45, AP:3.1, Str:18, Agi:22, Int:15},
{name:'Guardian of Light', DP:38, AP:1.1, Str:16, Agi:15 , Int:22},
                                                                                                                                                                                                     ;

Copy code The code is as follows: // Query: strength,

whose agility exceeds 20 // Result: Naga Siren

var match = heroes.select('@Str>20 AND @Agi>20');

// Query:
ending in "Scholar" // Result: Silence Warlock, Venomancer, Alchemist var match = heroes.select('right(@name,1)="Shi" ');

// Query:
with more than 500 health // Result: Alchemist

var match = heroes.select('100 @Str*19 > 500');