zepto学习之路--源代码提取

   最近在看zepto的源代码,把一些有用的函数摘出来,看看zepto是怎么实现的,自己做的时候也可以用。说实话,zepto的实现有一些看起来还是很晦涩的,可能是自己的水平不够,看不透作者的真正的意图。

1、zepto的正则总结:

//HTML代码片断的正则fragmentRE = /^\s*<(\w+|!)[^>]*>/
//匹配非单独一个闭合标签的标签,类似将<div></div>写成了<div/>tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig
//根节点rootNodeRE = /^(?:body|html)$/i
//class选择器的正则classSelectorRE = /^\.([\w-]+)$/,//id选择器的正则idSelectorRE = /^#([\w-]*)$/,
//DOM标签正则tagSelectorRE = /^[\w-]+$/,

2、zepto工具函数总结(我的意思只是我感觉比较有用的哈):

 

 //判断一个元素是否匹配给定的选择器
//这里作者的实现我觉得有点小问题,其思想是在其父元素中按照selecor找出匹配的元素再indexOf判断是否存在,但是,如果selector是这样的呢“body div .a”,在其父元素中能匹配到body吗?我觉得还不如直接在document下匹配,欢迎拍砖。可能是我笨吧,或者zepto的qsa函数比较高级。zepto.matches = function(element, selector) {if (!element || element.nodeType !== 1) return false//引用浏览器提供的MatchesSelector方法var matchesSelector = element.webkitMatchesSelector || element.mozMatchesSelector || element.oMatchesSelector || element.matchesSelectorif (matchesSelector) return matchesSelector.call(element, selector);//如果浏览器不支持MatchesSelector方法,则将节点放入一个临时div节点,//再通过selector来查找这个div下的节点集,再判断给定的element是否在节点集中,如果在,则返回一个非零(即非false)的数字// fall back to performing a selector:var match, parent = element.parentNode,temp = !parent//当element没有父节点,那么将其插入到一个临时的div里面if (temp)(parent = tempParent).appendChild(element)//将parent作为上下文,来查找selector的匹配结果,并获取element在结果集的索引,不存在时为-1,再通过~-1转成0,存在时返回一个非零的值match = ~zepto.qsa(parent, selector).indexOf(element)//将插入的节点删掉temp && tempParent.removeChild(element)return match}

  接下来就有个大问题了,是zepto的类型判断部分,求解答:

//问题在这里,下面的type函数中,很明显有问题啊,class2type[toString.call(obj)]我感觉不对啊,我感觉应该是toString.call(obj).slice(8,-1);待我去知乎上问下,再分享给大家。
//好吧,我承认自己太急躁了原来还有下面这么一段,
 $.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
 class2type[ "[object " + name + "]" ] = name.toLowerCase()
 })

var class2type={},toString=class2type.toString;
function type(obj) {//obj为null或者undefined时,直接返回'null'或'undefined'return obj == null ? String(obj) : class2type[toString.call(obj)] || "object"}function isFunction(value) {return type(value) == "function"}function isWindow(obj) {return obj != null && obj == obj.window}function isDocument(obj) {return obj != null && obj.nodeType == obj.DOCUMENT_NODE}function isObject(obj) {return type(obj) == "object"}//对于通过字面量定义的对象和new Object的对象返回true,new Object时传参数的返回false//可参考http://snandy.iteye.com/blog/663245function isPlainObject(obj) {return isObject(obj) && !isWindow(obj) && obj.__proto__ == Object.prototype}function isArray(value) {return value instanceof Array}//类数组,比如nodeList,这个只是做最简单的判断,如果给一个对象定义一个值为数据的length属性,它同样会返回truefunction likeArray(obj) {return typeof obj.length == 'number'}

 3、数组操作

//清除给定的参数中的null或undefined,注意0==null,'' == null为false
//这个很赞,用filterfunction compact(array) {return filter.call(array, function(item) {return item != null})}//类似得到一个数组的副本,拷贝数组a就return a.concat([]);很赞function flatten(array) {return array.length > 0 ? $.fn.concat.apply([], array) : array}

//数组去重,如果该条数据在数组中的位置与循环的索引值不相同,则说明数组中有与其相同的值

//数组去重的方法有很多,但作者的这个方法真心赞,让我折服了,即短又高效!
uniq = function(array) {
return filter.call(array, function(item, idx) {
return array.indexOf(item) == idx
})
}

 4、字符串操作

//将字符串转成驼峰式的格式camelize = function(str) {return str.replace(/-+(.)?/g, function(match, chr) {return chr ? chr.toUpperCase() : ''})}//将字符串格式化成-拼接的形式,一般用在样式属性上,比如border-width//这个写的太赞了,真的是每一句都很赞,由衷的佩服。function dasherize(str) {return str.replace(/::/g, '/') //将::替换成/.replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2') //在大小写字符之间插入_,大写在前,比如AAAbb,得到AA_Abb.replace(/([a-z\d])([A-Z])/g, '$1_$2') //在大小写字符之间插入_,小写或数字在前,比如bbbAaa,得到bbb_Aaa.replace(/_/g, '-') //将_替换成-.toLowerCase() //转成小写}

  

转载于:https://www.cnblogs.com/dunken/p/4396623.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/376098.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java byte 整数_java整数与byte数组的转换实现代码

java整数与byte数组的转换实现代码这里对java中整数与byte数组的转换进行了实现&#xff0c;平时的项目中很少用的到&#xff0c;但是特定需求的时候还是需要的&#xff0c;这里就记录下&#xff0c;亲测可用&#xff0c;实现代码&#xff1a;public class NumberUtil {/*** in…

蓝桥杯 花朵数

一个N位的十进制正整数&#xff0c;如果它的每个位上的数字的N次方的和等于这个数本身&#xff0c;则称其为花朵数。 例如&#xff1a; 当N3时&#xff0c;153就满足条件&#xff0c;因为 1^3 5^3 3^3 153&#xff0c;这样的数字也被称为水仙花数&#xff08;其中&#xff0…

windows 2003添加删除windows组件中无iis应用程序服务器项的解决方法

解决方法如下: 1.开始 -- 运行,输入 c:\Windows\inf\sysoc.inf,会打开这个文件;在sysoc.inf中找到"[Components]"这一段,并继续找到类 似"iisiis.dll,OcEntry,iis.inf,hide,7" 的一行字,把这一行替换为"iisiis.dll,OcEntry,iis.inf,,7"。如果已经…

java打印菱形代码_Java打印菱形高效简洁代码

importjava.util.Scanner;publicclass打印菱形{publicstaticvoidmain(String[]args){/**菱形**************************/ScannerinputScannernewScanner(System.in);System.out.prin...import java.util.Scanner;public class 打印菱形 {public static void main(String[] arg…

QT mainwindow四件套

最近在学习QT。下面总结一下mainwindow的设置步骤。 使用的平台为vs2013qt5.3.2qt-vs-addin1.2.3 1)安装软件 首先安装vs2013&#xff0c;这个不多介绍。 然后安装qt5.3.2和addin1.2.3。并设置相关环境。详细见http://tieba.baidu.com/p/3451630520?pid61264366864#6126436686…

go mysql recover_golang用panic和recover做业务流程中断的尝试

随着使用golang越来越频繁&#xff0c;发现golang有一个地方非常不方便&#xff0c;就是在错误处理方面。先来看看golang中通常的错误处理方法&#xff1a;通常的error处理package mainimport ("errors""fmt")func a() (err error) {err errors.New("…

ROC曲线【转】

ROC曲线&#xff08;Receiver Operating Characteeristic Curve&#xff09;是显示Classification模型真正率和假正率之间折中的一种图形化方法 解读ROC图的一些概念定义&#xff1a; 真正&#xff08;True Positive , TP&#xff09;被模型预测为正的正样本 假负&#xff08;F…

更改密码 sp_password

sp_password添加或更改 Microsoft SQL Server™ 登录的密码。语法sp_password[ [ old ] old_password , ]{ [new ] new_password }[, [ loginame ] login ]参数[old] old_password是旧密码。old_password为 sysname 类型&#xff0c;其默认值为 NULL。[new] new_password是新…

java eclipse oxygen_Eclipse Java Oxygen配置Tomcat

eclipse oxygen 配置tomcat 9.0第一步 装上eclipse的EE插件因为我以前学习java都是用eclipse oxygen的se版本&#xff0c;所以并不支持j2EE&#xff0c;所以第一步&#xff0c;就是要先把它升级为EE版本。有两种方法供我们选择。重新安装eclipse的EE版本。安装eclipse的EE插件。…

五大常用算法之二:动态规划算法

一、基本概念 动态规划过程是&#xff1a;每次决策依赖于当前状态&#xff0c;又随即引起状态的转移。一个决策序列就是在变化的状态中产生出来的&#xff0c;所以&#xff0c;这种多阶段最优化决策解决问题的过程就称为动态规划。 二、基本思想与策略 基本思想与分治法类似&am…

java 数组处理_JAVA操作数组

使用 Arrays 类操作 Java 中的数组Arrays 类是 Java 中提供的一个工具类&#xff0c;在 java.util 包中。该类中包含了一些方法用来直接操作数组&#xff0c;比如可直接实现数组的排序、搜索等Arrays 中常用的方法&#xff1a;1、 排序语法&#xff1a; Arrays.sort(数组名);可…

VB调用VC DLL函数

—————————————————————————VC部分—————————————————————————————————————声明 ******************************************************************************************************** extern "C&q…

java拆装_JAVA线性表拆解

线性表(List)是一种线性结构。其特点是数据元素直线的线性关系。1.线性表抽象类定义public abstract class AbsList implements Iterable&#xff0c;List{protected int length;abstract public T get(int i); //返回第i(i≥0)个元素abstract public boolean set(int i, T x);…

display:none;与visibility:hidden;的区别

display:none;不会占用任何空间 visibility:hidden;会占用隐藏前的空间大小转载于:https://www.cnblogs.com/yaser/p/4414825.html

(转)起点

要想做Java程序员&#xff0c;并不需要必须是计算机专业出身。很多人不是计算机专业却也成为计算机高手&#xff1b;有的高中生都已经小有所成&#xff0c;可称得上是合格程序员了&#xff1b;甚至很多学校初中生都能写出漂亮的应用程序。所以&#xff0c;Java程序员的起点要求…

以太网 数据包速率计算方法

以太网 数据包速率计算方法 我们知道1个千兆端口的线速包转发率是1.4881MPPS, 百兆端口的线速包转发率是0.14881MPPS&#xff0c;这是国际标准&#xff0c;但是如何得来的呢&#xff1f; 具体的数据包在传输过程中会在每个包的前面加上64个&#xff08;前导符&#xff09;pream…

linux 多个java_linux 同时出现两个java进程,新手~ 请详细说明,这个是怎么回事。 我就装了一个jdk...

首先Tomcat是用java开发的&#xff0c;所以它的开始和停止的命令都是用java来执行的。你执行一下ps -ef |grep tomcat如果输出&#xff1a;sun 5144 1 0 10:21 pts/1 00:00:06 /java/jdk/bin/java -Djava.util.logging.managerorg.apache.juli.ClassLoaderLogManager -Djava.en…

ISP与IAP的区别

转&#xff1a; ISP&#xff08;In-System Programming&#xff09;在系统可编程&#xff0c;指电路板上的空白器件可以编程写入最终用户代码&#xff0c; 而不需要从电路板上取下器件&#xff0c;已经编程的器件也可以用ISP方式擦除或再编程。IAP&#xff08;In-Application P…

【转】手把手实现企业级开源监控软件cacti+nagios+ntop整合(图解)

http://freeze.blog.51cto.com/1846439/386828转载于:https://www.cnblogs.com/nhlinkin/p/3595532.html

【BZOJ】【1041】【HAOI2008】圆周上的点

数学 orz hzwer 完全不会做…… 很纠结啊&#xff0c;如果将来再遇到这种题&#xff0c;还是很难下手啊…… 引用题解&#xff1a; 【分析】&#xff1a; 样例图示&#xff1a; 首先,最暴力的算法显而易见&#xff1a;枚举x轴上的每个点&#xff0c;带入圆的方程&#xff0c;检…