博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
zepto源码--整体框架--学习笔记
阅读量:4987 次
发布时间:2019-06-12

本文共 1113 字,大约阅读时间需要 3 分钟。

为了深入学习javascript,根据别人推荐的方法之一:研究源码。

相对而言,之前的项目中仅仅使用过zepto和jquery,当前阶段,看到好几千行的jquery源码,心生敬畏,望而却步,所以选择相对精简一点的zepto。

首先,最重要的是理清楚zepto的结构。

zepto采用的立即执行函数来实现避免对全局变量污染。

javascript立即执行函数有两张写法:

1、 (function(形参){...})(实际传入参数);

2、 (function(形参){...}(实际传入参数));

zepto为了实现对模块化js,(只认识名词),初始传入两个参数,并且第二个传入的参数是一个函数,

(function(形参1, 形参2){...}(实际传入参数1, function(){...}));

我们在源码上看到的就是这样的一种效果了

也可以将此种写法改为第一种立即执行函数的写法,可能更符合习惯(反正我更习惯第一种写法)。

真正的实现方式都是在立即执行函数的第二个参数的函数内部实现的。

定义一个主体函数Zepto,依然是立即执行的函数,通过函数内部返回一个实际函数。

然后将该Zepto函数赋值给全局的Zepto,即window.Zepto,如果全局上没有使用过$,则使用$作为函数命名。

其中window.$ === undefined && (window.$ = Zepto); 涉及到了&&运算符,这句可以简单的转换为

if (window.$ === undefined) window.$ = Zepto;

将Zepto赋值给window.Zepto是为了在其他地方能够调用到Zepto所封装的各种方法。将Zepto作为window的属性使用。

赋值给Zepto的立即执行函数,封装了所有需要用到的方法。

使用到了JavaScript6中对象继承方法中的“原型式继承”的方法。

原型式继承:

  基本想法:借助原型可以基于已有的对象创建新对象,同时还不必须因此创建自定义的类型。

  原型式继承的思想可用以下函数来说明:  

   

在Zepto封装的即时执行函数内部定义了一个函数名为Z的构造函数

将内部构造函数Z实例化,作为变量zepto的属性

在初始化的方法中返回实例化之后的zepto.Z对象

zepto初始化之后的对象赋值给$

将zepto赋值给$.zepto,并返回$。

剩下的就是各种方法的实现的过程。

就是通过如此结构,实现了Zepto和$符号调用zepto的主函数。

 

 

 

 

转载于:https://www.cnblogs.com/zhuhuoxingguang/p/5980858.html

你可能感兴趣的文章
maven打包
查看>>
CSS
查看>>
初学springboot, 如何快速使用maven搭建springboot项目呢
查看>>
POJ 3380 最大流
查看>>
iOS学习之 plist文件的读写
查看>>
写的一些推广方法 拿出来分享下
查看>>
【公告】CSDN个人空间将于2014年4月20日全新改版上线
查看>>
C#:MVC打印PDF文件
查看>>
在学习mybatis中的接口是发生错误Type interface com.souvi.ibatis.xxxMapper is not known to the MapperRegistry...
查看>>
iOS开发xcode报错:"xxxxxx"has been modified since the precompiled header was built
查看>>
网络管理不得不知道的一些常识
查看>>
推荐!国外程序员整理的机器学习资源大全
查看>>
Eclipse中代码整体左移,右移快捷键
查看>>
C# 局部类型 Partial
查看>>
ASP.NET 获取来源网站的网址,获取上一网页的网址,获取来源网页的URL,获取上一网页的URL...
查看>>
HDU 4386 Quadrilateral 几何
查看>>
(10)zabbix item key详解
查看>>
Cocoa touch(一):总览
查看>>
在微信浏览器中如何让他自动关闭当前页面回到会话框js
查看>>
Bootstrap 导航栏
查看>>