实现函数,类似jQuery链式调用.

 1 var origin = [
 2     {id:1,title:‘title1‘},
 3     {id:2,title:‘abcd‘},
 4     {id:3,title:‘title2‘},
 5     {id:4,title:‘efg‘}
 6 ];
 7
 8 var find = function(data){
 9     // your code here
10 }
11
12 var result = find(origin).where({‘title‘:/\d$/}).order(‘id‘,‘desc‘); //desc 非递增
13 console.log(result);  //  [{id:3,title:‘title2‘},{id:1,title:‘title1‘}]

写了10分钟左右:随便A了一下

var origin = [
    {id: 1, title: ‘title1‘},
    {id: 2, title: ‘abcd‘},
    {id: 3, title: ‘title2‘},
    {id: 4, title: ‘efg‘}
];

var find = function (data) {
    // your code here
    function jquery(data) {

        this.where = function (obj) {

            var arr = [];
            var self = this;
            var key = Object.keys(obj)[0];
            var temp = self.data;

            for (var j = 0; j < temp.length; j++) {

                if (obj[key].test(temp[j][key])) {

                    arr.push(temp[j]);

                }
            }

            this.data = arr;

            return this;
        };
        this.order = function (name, desc) {
               var self =this;
            //降序
            if (desc === "desc") {
                for (var i = 1; i < self.data.length; i++) {

                    var j = i - 1;
                    var key = self.data[i][name];
                    while (j >= 0 && self.data[j][name] < key) {
                        self.data[j + 1][name] = self.data[j][name];
                        j--;
                    }

                    self.data[j + 1][name] = key;

                }

            }

            return self.data;
        };
        this.data = data;

    }

    return new jquery(data);

};

var result = find(origin).where({‘title‘: /\d$/}).order(‘id‘, ‘desc‘); //desc 非递增
console.log(result);  //  [{id:3,title:‘title2‘},{id:1,title:‘title1‘}]

唉,取属性的时候,hasOwnPrototype我忘记怎么写了,后来查了一下,原来他是用来确认的,我了个,后来机智的我想起来es5好像出了keys这个方法,然后试了试果然用这个,然后就这样咯。排序我用的插入排序,你可以选择冒泡,选择,快排,归并,计数,堆排序等等,不会的可以看我的算法博客。我看了下别人的代码,原来js有sort这个方法。大家自己去了解吧。其实链式调用就是返回this咯,没什么大不了的。反正写的不怎么样,将就看一下吧,完美的话,个人认为在Object.keys()上面做文章。比如我在where方法里传的参数可以有很多keys:

{‘title‘:/\d$/, ‘id:‘/[2-4]/,...}那这个时候,就要在做好多次筛选了,怎么做大家自己动脑筋吧。还有就是这个排序。我们现在是只可以传入desc. 其实我们知道有降序就会有升序(asc),当然还有乱序。 阿里啊,这不是考我们mongodb吗。熟悉mongodb的同学这里是不是看起来很像。
 1 // ali-for
 2 var items = [
 3     {name:‘item1‘},
 4     {name:‘item2‘}
 5 ];
 6 var str = ‘<div ali-for="item in items">{{item.name}}<div>‘;
 7
 8 var ParseDom = function(str){
 9     // your code here
10 }
11
12 // 对应生成的dom
13 // <div>item1</div>
14 // <div>item2</div>
这题目,我是没做出来,我认为,起码是不能直接认为是div的,一定是匹配html标签。下面填一个别人写的,主要考察的是正则表达式
 1 var items = [
 2     {name:‘item1‘},
 3     {name:‘item2‘}
 4 ];
 5 var str = ‘<div ali-for="item in items">{{item.name}}<div>‘;
 6
 7 var ParseDom = function(str){
 8
 9     var reg1 = /\sali-for=\"[a-zA-Z\s]+\"/gi,
10         reg2 = /\{{2}[a-zA-Z\.]+\}{2}/gi,
11         reg3 = /\.[a-zA-Z]+/gi,
12         len = items.length;
13
14     var temp = str.replace(reg1,‘‘),
15         fill = str.match(reg2)[0],
16         key = str.match(reg2)[0].match(reg3)[0].slice(1),
17         clone_temp =‘‘,
18         str = ‘‘;
19
20     for(var i=0;i<len;i++){
21         clone_temp = temp;
22         str+=clone_temp.replace(fill,items[i][key]);
23     }
24
25     console.log(str);
26
27 }  
				
时间: 2024-09-30 14:35:01

实现函数,类似jQuery链式调用.的相关文章

JavaScript设计模式-8.链式调用

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>javascript高级语法8-链式调用</title> 6 </head> 7 <body> 8 <div id="box"></div> 9 <script type="text/javas

jQuery的XX如何实现?——2.show与链式调用

往期回顾: jQuery的XX如何实现?——1.框架 -------------------------- 源码链接:内附实例代码 jQuery使用许久了,但是有一些API的实现实在想不通.于是抽空看了jQuery源码,现在把学习过程中发现的一些彩蛋介绍给大家(⊙0⊙). 下面将使用简化的代码来介绍,主要关注jQuery的实现思想~>_<~ 相较于上一篇,代码更新了:21~78 1 (function(window, undefined){ 2 3 function jQuery(sel){

jQuery的链式调用原理,Promise的链式调用,this的问题

最近被问到这个问题,jq的链式调用原理,当时比较懵=.=,毕竟现在jq接触的机会变很少了. jq的链式调用 jq的链式调用其实就是比如我们在选择dom的时候, $('input[type="button"]') .eq(0).click(function() { alert('点击我!'); }).end().eq(1) .click(function() { $('input[type="button"]:eq(0)').trigger('click'); }).

玩一把JS的链式调用

链式调用我们平常用到很多,比如jQuery中的$(ele).show().find(child).hide(),再比如angularjs中的$http.get(url).success(fn_s).error(fn_e).但这都是已经包装好的链式调用,我们只能体会链式调用带来的方便,却不知道形成这样一条函数链的原理是什么. 随着链式调用的普及,实现的方案也越来越多.最常见的,是jQuery直接返回this的方式,underscore的可选式的方式,和lodash惰性求值的方式.我们分别来了解,并

javascript设计模式 第6章 链式调用

链式调用是一种语法招数.作用:能让你通过重用一个初始化操作来达到用少量代码表达复杂操作的目的.. 这种技术包含两个部分: 1.一个创建代表html元素的对象的工厂.以及一批对这个html元素执行某些操作的方法. 通过例子对比:之前和之后的代码,对链式调用的概念的初步认识.  之前:   addevent($('example'),"click",function(){    setstyle(this,"color",'green');    show(this);

如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用

1.以$ 函数为例.通常返回一个HTML元素或一个元素集合. 代码如下: function $(){ var elements = []; for(var i=0;i<arguments.length;i++){ var element = argument[i]; if(typeOf element == "String") { element = document.getElementById(element); } if ( arguments.length === 1)

如何搭建一个可以链式调用,批量操作的前端框架

用jquery写代码的时候总是很方便,少写很多代码.那么为什么会这样呢?我觉得主要有三个原因: ① jquery封装了获取dom的方法,只需要一个$就可以方便地获取你想要得dmo节点 ② 链式调用,比如你可以这样写代码: $("#a").show().height(20); 而不需要这样写 $("#a").show(); $("#a").height(20); ③ 对象的批量操作.假如你需要对下面的列表进行同样的操作 <li class=&

js链式调用

我们都很熟悉jQuery了,只能jQuery中一种非常牛逼的写法叫链式操作 * $('#div').css('background','#ccc').removeClass('box').stop().animate({width:300}) 那这是如何实现的呢,我自己写了个例子:并非jQuery源码 Ferrinte.prototype.show=function () { for(var i=0;i<this.elements.length;i++) { this.elements[i].s

面向对象的链式调用

1. 对象的链式调用 function Chain(){ this.n=0;//属性不一定一开始的时候全部都要初始化 this.fn1=function(_obj){//this指向  new Chain()实例化的对象 alert(this.n++);//注意:alert(this.n++)与this.fn1中的this 不一定指向的对象是一样的 return this; } this.fn2=function(){//同上 alert(this.n++);//注意:alert(this.n+