点击刷新
在.net平台工作一年有余，最喜欢的应属Linq特性
在几个移动端web小项目过程中，前端需要对json对象集合进行比较复杂的操作，为提高开发效率，引入了LINQ to Javascript,该项目地址：http://jslinq.codeplex.com/
LINQ to JavaScript代码不到两百行，可读性很好，今天来对它的源代码进行下分析
Linq to JavaScript使用示例
var myList = [ {FirstName:"Chris",LastName:"Pearson"}, {FirstName:"Kate",LastName:"Johnson"}, {FirstName:"Josh",LastName:"Sutherland"}, {FirstName:"John",LastName:"Ronald"}, {FirstName:"Steve",LastName:"Pinkerton"} ]; var exampleArray = JSLINQ(myList) .Where(function(item){ return item.FirstName == "Chris"; }) .OrderBy(function(item) { return item.FirstName; }) .Select(function(item){ return item.FirstName; });
Linq to JavaScript整体架构
(function() { JSLINQ = window.JSLINQ = function(dataItems) { return new JSLINQ.fn.init(dataItems); }; JSLINQ.fn = JSLINQ.prototype = { init: function(dataItems) { this.items = dataItems; }, Where: function(clause) { ... }, ...
} JSLINQ.fn.init.prototype = JSLINQ.fn; })();
这个结构的关键点有
- 最外层用一个匿名函数(function(){}))()构造块级作用域
- 不采用new JSLINQ().Where()方式，而是将JSLINQ()作为一个工厂方法，返回init()函数的实例对象
- 为了在init()函数的实例对象上继续调用JSLINQ原型对象的方法，将JSLINQ.fn.init.prototype指向JSLINQ.fn,也即JSLINQ.prototype
- 通过这一操作，调用new JSLINQ().Where()时，首先可以在init()函数的实例对象中查询，未找到后在init.prototype中查询，未找到，继续沿原型链向上查找，在JSLINQ.prototype上找到Where方法
- 如果没有这一操作，调用new JSLINQ().Where()时，将会提示Where方法未被定义
观察Linq to JavaScript整体结构会发现，其结构与JQuery的非常相似
(function( window, undefined ) { var jQuery = (function() { // 构建jQuery对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } // jQuery对象原型 jQuery.fn = jQuery.prototype = { constructor: jQuery, init: function( selector, context, rootjQuery ) { } }; // Give the init function the jQuery prototype for later instantiation jQuery.fn.init.prototype = jQuery.fn; // 到这里，jQuery对象构造完成，后边的代码都是对jQuery或jQuery对象的扩展 return jQuery; })(); window.jQuery = window.$ = jQuery; })(window);
LINQ to JavaScript详细分析
//构造块级作用域 (function() { //工厂方法，返回init()的实例对象 JSLINQ = window.JSLINQ = function(dataItems) { return new JSLINQ.fn.init(dataItems); }; JSLINQ.fn = JSLINQ.prototype = { init: function(dataItems) { this.items = dataItems; } //clause是一个函数表达式 Where: function(clause) { var item; //创建本地数组，存储返回值 var newArray = new Array(); // The clause was passed in as a Method that return a Boolean for (var index = 0; index < this.items.length; index++) { //将元素传入函数 if (clause(this.items[index], index)) { newArray[newArray.length] = this.items[index]; } } //将结果数组传入JSLINQ()，创建新的init()对象实例，以便可以链式调用 return new JSLINQ(newArray); }, Select: function(clause) { var item; var newArray = new Array(); // The clause was passed in as a Method that returns a Value for (var i = 0; i < this.items.length; i++) { if (clause(this.items[i])) { newArray[newArray.length] = clause(this.items[i]); } } return new JSLINQ(newArray); } ... JSLINQ.fn.init.prototype = JSLINQ.fn; } })();
更多
从LINQ to JavaScript使用示例中可以看到，Where(),Select()等方法中仅支持匿名函数的方式
而在.net3.0之后，LINQ的Where等扩展方法中，已经可以使用便捷的lambda表达式
如果你希望在javascript中也使用lambda表达式语法书写linq，可以关注LINQ for JavaScript，这是另一个提供linq支持的javascript库，项目地址http://linqjs.codeplex.com/
LINQ for JavaScript调用示例
var jsonArray = [ { "user": { "id": 100, "screen_name": "d_linq" }, "text": "to objects" }, { "user": { "id": 130, "screen_name": "c_bill" }, "text": "g" }, { "user": { "id": 155, "screen_name": "b_mskk" }, "text": "kabushiki kaisha" }, { "user": { "id": 301, "screen_name": "a_xbox" }, "text": "halo reach" } ] // ["b_mskk:kabushiki kaisha", "c_bill:g", "d_linq:to objects"] var queryResult = Enumerable.From(jsonArray) .Where(function (x) { return x.user.id < 200 }) .OrderBy(function (x) { return x.user.screen_name }) .Select(function (x) { return x.user.screen_name + ':' + x.text }) .ToArray(); // shortcut! string lambda selector var queryResult2 = Enumerable.From(jsonArray) .Where("$.user.id < 200") .OrderBy("$.user.screen_name") .Select("$.user.screen_name + ':' + $.text") .ToArray();
© 著作权归作者所有
举报
发表评论
0/200
