`
zhangyaochun
  • 浏览: 2614804 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

关于各大前端框架对数组元素的遍历api设计

阅读更多

 

api的使用场景是针对数组进行遍历

 

1.先看看tangram思想的做法:

 

 

/*
*each-traverse all the element in array *
*@function*
*@param {Array} source---the array*
*@param {Function} iterator---it has two params(item,index)*
*@param {Object} thisObj---when the api is using, this pointer is what(default the source)*
*@remark(_ps:this api do not support the obj traverse)*
*@return {Array} the traversed array*
*/
ZYC.array.each = function(source,iterator,thisObj){
    var returnValue,item,i,_length = source.length;
    if('function' == typeof iterator){
	  for(i=0;i<_length;i++){
	     item = source[i];
		 //TODO--when thisObj is not defined we now use the source not the global object
		 returnValue = iterator.call(thisObj || source,item,i);
	     if(returnValue === false){
		    break;
		 }
	   }
	}
	return source;
};

 

2.如果你研究过prototype或者比较熟悉的话,我们来进一步看看它的做法。

 

 

Object.isFunction = function(obj){
   return typeof obj;
}


/*判断是否支持javascript1.6中新增的forEach
如果支持直接扔给_each
*/
if(Object.isFunction(Array.prototype.forEach)){
    Array.prototype._each = Array.prototype.forEach;
}

/*prototype里面还有一个Enumerable对象*/
var Enumerable = {
      each :function(iterator,context){
          var index =0;
          iterator = iterator.bind(context);
          try{
              this._each(function(value){
                 iterator(value,index++);
              })
          }catch(e){}
          return this;
        
      }
};


Object.extend(Array.prototype,Enumerable);

 

 

3.把kissy也加进来吧。

 

 

/*
KISSY.each([1,2,3],function(item,i){
	   debugger;
});
*/

each:function(object,fn,context){
    if(object){
        var key,
              val,
              i=0,
              length = object && object.length,
              isObj = length === undefined || S.type(object) === 'function';
    }
    context = context || host;
    
    if(isObj){
           //是对象
           for(key in object){
                if(fn.call(context,object[key],key,object) === FALSE){
                        break;
                }
           }
    }else{
           for(val = object[0];i<length && fn.call(context,val,i,object) !== FALSE;val = object[++i]){

           }
    }
    return object;
}

 

1
0
分享到:
评论

相关推荐

    1.数组forEach.zip

    下面将深入探讨Vue.js、前端框架以及数组`forEach`方法的相关知识点。 Vue.js 是由尤雨溪开发的渐进式框架,它旨在通过简洁的API实现响应式的数据绑定和组件化。Vue的核心库专注于视图层,易于上手,同时可以与现有...

    js 实现根据数组分组动态生成table(合并相同项)

    此外,你还可以通过引入前端框架,如React或Vue,以及它们提供的表格组件,来更高效地处理这种情况。这些框架提供了更丰富的API和更好的性能优化,但基本思路与上述JavaScript实现相似。 在实际项目中,你可能还...

    前端开发与用户界面设计.pptx

    前端框架是一套预定义的规则和结构,用于帮助开发者更高效地构建复杂的Web应用。而前端库则是提供特定功能的代码集合。 **前端框架的优势:** 1. **减少重复编码**:通过提供通用的解决方案,避免了大量手动编写...

    avalon移动单页开发js前端框架

    ** Avalon 移动单页开发 JS 前端框架详解 ** Avalon.js 是一个专注于移动Web App单页应用开发的JavaScript框架,由阿里云团队开发并维护,是前端工程师实现高效、高性能Web应用的优选工具。该框架的设计理念是简单...

    前端项目-foreach.zip

    在前端开发领域,`Foreach`通常指的是JavaScript中的一个遍历数组或对象的循环结构,它在各种前端框架和库中都有广泛的应用。本项目"前端项目-foreach.zip"似乎包含了一个名为"Foreach"的组件,它可能是一个专门用于...

    collectjs是一个用于在JavaScript中处理数组和对象库

    这个库的主要目的是提供一种高效、便捷的方式来操作数据集合,它借鉴了Laravel框架中的Collections API,使得开发者在JavaScript环境中也能享受到类似的功能。在不依赖任何其他第三方库的情况下,`collect.js` 提供...

    Gridview用javascript遍历所有控件的例子

    在实际应用中,你需要根据你的后端框架(如ASP.NET MVC或Web API)来调整AJAX请求的URL和方法。 总结来说,通过JavaScript遍历GridView中的控件,我们可以实现客户端的批量操作,如批量删除、更新和修改。这种做法...

    前端开源库-map-o

    5. **灵活使用**:由于 omap-o 是为前端设计的,它可以轻松集成到任何JavaScript项目中,特别是那些基于现代前端框架(如React、Vue或Angular)的项目,它可以帮助优化状态管理,减少不必要的渲染。 6. **API接口**...

    JavaAPI大全

    例如,`java.util.ArrayList`是Java集合框架的一部分,提供动态数组的功能,允许在运行时添加、删除和查找元素。 其次,`jQuery`是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。...

    pink老师Javascript基础PPT.zip

    通过这五天的学习,学员将对JavaScript有全面的理解,能够编写基本的脚本,进行网页交互,甚至开始接触更复杂的前端框架。在pink老师的指导下,学员不仅会掌握语言基础,还能了解到JavaScript在实际开发中的最佳实践...

    JavaWeb开发API文档

    例如,`java.lang`包下的`String`类用于处理文本字符串,`java.util`包中的`ArrayList`和`HashMap`分别代表动态数组和键值对存储,而`java.io`包则提供了文件操作的接口和类。 2. **MySql中文参考手册**: MySQL是...

    jQuery API 1.5.2 中文版

    jQuery API 1.5.2 是一个非常重要的版本,它为开发者提供了丰富的JavaScript库功能,使得HTML文档...在实际项目中,结合jQuery与其他前端框架(如AngularJS或React)一起使用,可以构建出功能强大、响应迅速的Web应用。

    前端课程设计-餐厅点餐系统(html+css+js).zip

    综上所述,"餐厅点餐系统"项目涵盖了前端开发的多个核心知识点,不仅锻炼了开发者对HTML、CSS和JavaScript的运用能力,也提升了他们对用户体验设计、数据管理、用户交互以及前后端协作的理解。通过实践这样的项目,...

    Java学习常用API

    - **Iterator**:用于遍历集合中的元素。 - **Collections工具类**:提供了对集合的各种操作,如排序、查找、填充等。 6. **反射机制**: - **Class类**:代表运行时的类信息,通过它我们可以获取类的方法、字段...

    spring boot框架layui前端,table拓展,支持动态表头和数据展示,支持table表数据编辑

    在IT行业中,Spring Boot框架和Layui前端库的结合被广泛用于构建高效、美观的Web应用。本项目重点在于实现动态表头和数据展示,同时支持表格的编辑功能,这些特性大大增强了用户界面的交互性和灵活性。接下来,我们...

    2020中旬初级前端开发机试题

    10. **前端框架**:虽然初级开发者可能不深入学习,但至少需要了解React、Vue、Angular等主流框架的基本概念和用途。 在压缩包内的"中汽联合面试题 - 副本"可能包含了具体的题目和解答,包括HTML结构设计、CSS样式...

    超完整的javaWeb前端开发帮助文档

    jQuery的核心理念是"Write Less, Do More",它的API设计易于理解和使用,可以快速实现复杂的前端功能。文档中会详细介绍选择器、遍历、事件、特效、Ajax等功能,以及如何创建和使用插件,让开发者能高效地利用jQuery...

    API帮助文档-包含java html 等

    jQuery API文档详述了库中的函数和方法,如$(document).ready()用于页面加载后的事件处理,$.ajax()用于异步数据请求,以及$.each()用于遍历数组或对象。jQuery使得JavaScript编程更加简洁,降低了学习曲线,提高了...

    jQuery1.7.1_API中文手册

    掌握这些方法和技巧,将极大提升前端开发效率,让开发者能够更专注于创新和用户体验的设计。尽管随着技术的发展,jQuery可能不再是唯一的解决方案,但它在前端开发历史上的地位不容忽视,仍值得每位开发者深入学习和...

Global site tag (gtag.js) - Google Analytics