上一篇主要讲解了jQuery原型中最重要的方法init。接下来再讲一些比较常用的原型方法和属性
core_slice = [].slice,
jQuery.fn = jQuery.prototype = {
toArray: function(){
//把jQuery对象转换成原生元素的数组，比如：$("div").toArray()，{0:"div",1:"div"} -> ["div","div"]
return core_slice.call( this );
},
get: function( num ) { //得到原生的元素（可以取到某一个）
return num == null ?
this.toArray() :( num < 0 ? this[ this.length + num ] : this[ num ] );
//[]，除了取下标，还可以取属性。如果this是数组，就取下标，如果是对象就取属性
},
pushStack: function( elems ) { //栈的实现，先进后出。
var ret = jQuery.merge( this.constructor(), elems ); //把传入的elems（数组）转换成jQuery对象
//this.constructor()是一个空的jQuery对象，jQuery()。
ret.prevObject = this; //使p(jQuery)的prevObject指向div(jQuery)
//这里的作用是为了回溯用，比如，$("div").pushStack($("p")).css()后，我想对div进行处理，这时可以调用$("div").pushStack($("p")).css().end().css()，后面这个css就会只对div进行处理了，end方法就是取p的prevObject属性。
ret.context = this.context;
return ret; //返回p(jQuery)
},//举个列子，$("div").pushStack($("p")).css();这个css就只对p进行处理。
end: function() {
return this.prevObject || this.constructor(null); //如果没有，就创建一个空的jQuery对象
},
slice: function() { //$("div").slice(1,3).css().end().css()，假设有4个div，那么第一个css只对第二个和第三个有效果，end之后，第二个css对这4个div都有效果。
return this.pushStack( core_slice.apply( this, arguments ) ); //4个div.pushStack(2个div)
},
each: function( callback, args ) { //实例方法调用的是工具方法（很多这种调用方式）。
return jQuery.each( this, callback, args ); //$("div").each(a) -> return jQuery.each( $("div"), a, undefined)，第三个参数供jQuery内部使用。
//jQuery.each会循环每一个div，执行a回调方法，a.call( obj[ i ], i, obj[ i ] );也就是在div的执行上下文，执行a(i,div)，其中i为当前div的index值。
},
ready: function( fn ) {
//可以先看我的另外一篇博客：http://www.cnblogs.com/chaojidan/p/4121788.html
jQuery.ready.promise().done( fn );
return this;
},
eq: function( i ) {
var len = this.length,
j = +i + ( i < 0 ? len : 0 ); //+i就是把传入的数字字符转化成数字,比如:"3"->3.
return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
},//eq方法也可以用end方法，返回到原jQuery对象。
map: function( callback ) { //$("div").map(a)
return this.pushStack( jQuery.map(this, function( elem, i ) {
return callback.call( elem, i, elem );
//map方法是针对每一个div,执行function(elem,i)方法，传入div，和div的index值。里面调用callback.call( elem, i, elem ),a.call(div,i,div)，如果执行a方法得到的是undefined或者是null，就会过滤掉此div。
}));
},
.....
}
差不多就这些了，其实我还想说下js以及jQuery各种方法调用时，里面的参数个数和顺序，面试官很喜欢问。这里我总结一下：
slice()，接收两个参数，第一个为开始index（从0开始），第二个为结束的index(也是从0开始，但是不包括index本身，只到index-1)。返回值是截取的数组，原数组不变化。传第三个参数，没有作用。
splice()，接收无数个参数，第一个为开始的index（从0开始），第二个为删除的元素的个数（0代表不删除，1代表删除一个...），第三个为添加的元素，第四个也为添加的元素.....，返回值是删除的元素组成的数组，如果删除了0个就返回空数组，原数组会被改变成被操作后的数组（这里需要注意一个问题,比如：arr =[1,2,3],arr.splice(1,0,4)，arr会变成[1,4,2,3]，添加的4是在2的前面插入）。
以上两个方法的区别和应用，面试官会问。
forEach方法（除了数组对象之外，forEach 方法可由具有 length 属性且具有已按数字编制索引的属性名的任何对象使用。比如：{0:"a",1:"b",length:2}）
对于数组中出现的每个元素，forEach方法都会调用callback函数一次（采用升序索引顺序）,但不会为数组中缺少的元素调用回调函数（[1,2,"",3]，第三个选项不会执行callback）。
arr.forEach(callback,thisArg),只接受两个参数，一个是回调方法，一个是context.callback必选, 最多可以接受三个参数的函数。 对于数组中的每个元素，forEach 都会调用callbackfn 函数一次。thisArg可选, callbackfn 函数中的 this 关键字可引用的对象,如果省略 thisArg，则 undefined将用作 this 值。这时你回答出来这些已经觉得自己还可以了，然后面试官会问你那callback的三个参数是什么？
回调函数的语法如下所示：
function callback(value, index, array1)，value：数组元素的值。index：数组元素的数字索引。array1：包含该元素的数组对象。可以在回调方法中改变原数组。
这个方法的作用就是：利用数组中的值做一些应用，比如：显示出来，累加等等。
这里大家可以去区分一下$("div")，jQuery对象的each方法。很像，但是在回调方法调用时，传参不一样，请仔细查看。
map方法，跟forEach方法差不多，唯一的区别是，arr.map(callback,thisArg)，有返回值，返回值是：对每个数组中的元素执行callback后，callback返回的值组成的数组。
当然原数组也不会改变，除非你在callback(value, index, array1)中直接改变array1。
这个方法的作用就是：把数组组装成其他的形式，比如：对数组中的每一项加1，或者平方等等。
这里大家可以去区分下$("div")，jQuery对象的map方法，也很像，但是传参不一样，同时，回调方法调用时，传参也不一样。请仔细查看。
indexOf方法：接收两个参数：searchElement：必需。 要在 array1 中定位的值。fromIndex：可选。 用于开始搜索的数组索引， 如果省略 fromIndex，则从索引 0 处开始搜索。 如果 fromIndex 大于或等于数组长度，则返回 -1。 如果 fromIndex 为负，则搜索从数组长度加上 fromIndex 的位置处开始。如果计算所得的索引小于 0，则搜索整个数组。数组元素将与 searchElement 值进行全等比较，与 === 运算符类似。 一、什么是WebZ WebZ是我用Python写的“关键字驱动”的自动化测试框架，基于WebDriver。 设计该框架的初衷是：用自动化测试让测试人员从一些简单却重复的测试中解放出来。之所以用“关键字驱动”模式是因为我觉得这样能让测试人员（测试执行人员）快速上手，无需编写代码也能执行自动化测试。 二、为啥开源 WebZ的开发用到了一些现有的开源项目，我很感谢这些开源项目的作者，希望自己也能成为一名开源者，和大家分享自己的成果，一起交流技术、一起成长。 该项目的GitHub地址：https://github.com/ZMANONE/WebZ 三、开源说明 四、使用方法 1.将 chromedriver.exe 放置在任意位置，添加到系统环境变量中。 2.将编写完成的自动化测试用例文件“case.xlsx”放在 D 盘根目录下。 3.运行WebZ.exe。若用例被正确执行，会在 D:\WebZ 目录下找到测试报告。 注：该程序在Win7 x64环境下打包而成。 示例： 测试用例（case.xlsx）： 如上图所示，这个文件包含两条测试用例，向大家展示了一些WebZ中基础的关键字。关于关键字的详细定义，请参见附录。 编写测试用例的人员如果懂得一些前端知识，那就很赞了，不了解也没关系，现在很多浏览器都有“元素审查”功能。以Chrome为例，按F12进入审查元素模式，点击“放大镜”图标。 然后点击你想要操作的元素，如“百度一下”按钮，此时浏览器就会高亮元素信息，直接右键复制CSS或XPATH即可，然后和WebZ提供的关键字相结合就可以对元素进行操作啦。 我们来跑一下这两条用例，自动生成测试报告（如果有未通过的用例，会列出失败步骤）： （好吧，本来报告内容是中文的，因为我发到GitHub了，所以我把这些中文都改成了英文，国际化嘛……） 五、实现解析 如果你想要在Python开发环境中运行WebZ，请使用Python3，你还需要安装以下几个开源库：reportlab、xlrd、selenium、splinter。 WebZ结构大致是这样的： 读取excel中的用例进行格式预处理、分段，读取定义的关键字，通过WebDriver进行分类处理，同时捕捉失败信息（如果用例执行失败，会再次尝试，共尝试三遍），最后生成报告。 当时设计WebZ时，构思就是这是一个轻量级的WEB自动化测试框架，但是要保留可扩充性的特点，主要可以对关键字进行自行扩充和封装。 “自动化测试是将一些重复性高却又简单的手动测试自动化，而不是要取代自动化。实行自动化测试前要考虑实现成本和收益情况”——好吧，这句话是我说的，我目前的个人观点~欢迎探讨 ：） 如果大家对WebZ有任何疑问或建议，可以联系我哦，谢谢！ ----------------------------------------------------------------- 附录： WebZ 关键字一览 1. 打开网页|（直接填网址） 如：打开网页|www.baidu.com（注：网址不含http://） 2. 点击|方法@@控件名方法支持：id、css、xpath 如：点击|xpath@@ti[2]>ao[3]>ca[0] 3. 填写|方法@@控件名@@文字方法支持：id、css、xpath 如：填写|id@@textbox1@@我爱测试 4. 后退 5. 刷新 6. 截图 7. 等待 等待两秒 <
打造轻量级自动化测试框架WebZ - isZMAN 阅读原文»
#
# This Source Code Form is subject to the terms of the Mozilla Public
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
#
# Name: WebZ
# Description: keyword-driven automated testing framework
# Author: ZMAN(ZhangNing)
#
# This project also uses some third-party modules:
#
# selenium: Licensed under the Apache License, Version 2.0 (the "License");
# Copyright 2008-2013 Software Freedom Conservancy.
#
# splinter: Licensed under the BSD License;
# Copyright 2012 splinter authors. All rights reserved.
#
# reportlab: Licensed under the BSD License;
# Copyright ReportLab Europe Ltd. 2000-2014.
#
# xlrd: Licensed under the BSD License;
# Portions copyright 2005-2009, Stephen John Machin, Lingfo Pty Ltd. All rights reserved.
#
没有评论:
发表评论