为了深入学习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的主函数。

zepto源码--整体框架--学习笔记的更多相关文章

  1. zepto源码--定义变量--学习笔记

    主要了解一下zepto定义的初始变量. 逐一以自己的理解解析,待到后面完全透彻理解之后,争取再写一遍zepto源码学习的文章. 其中的undefined确实不明白为什么定义这么个变量在这里. docu ...

  2. zepto源码--插入节点--学习笔记

    与生成width和height使用的方法类似,通过`after`, `prepend`, `before`, `append`,这四者之间的共性,生成对应的函数.并根据这四个函数,生成 `insert ...

  3. zepto源码--width,height--学习笔记

    width和height函数,实际上通过css方法也完全可以取到这两个函数的结果.获取width,$elem.css('width');设置width的话,$elem.css('width', 100 ...

  4. 《Android源码设计模式》学习笔记之ImageLoader

    微信公众号:CodingAndroid cnblog:http://www.cnblogs.com/angel88/ CSDN:http://blog.csdn.net/xinpengfei521 需 ...

  5. 《PHP7底层设计与源码实现》学习笔记1——PHP7的新特性和源码结构

    <PHP7底层设计与源码实现>一书的作者陈雷亲自给我们授课,大佬现身!但也因此深感自己基础薄弱,遂买了此书.希望看完这本书后,能让我对PHP7底层的认识更上一层楼.好了,言归正传,本书共1 ...

  6. uboot源码整体框架

    源码解压以后,我们可以看到以下的文件和文件夹:  cpu 与处理器相关的文件.每个子目录中都包括cpu.c和interrupt.c.start.S.u-boot.lds. cpu.c:初始化CPU.设 ...

  7. PHP7 源码整体框架

    一.PHP7语言执行原理 常用的高级语言有很多种,根据运行的方式不同,大体分为两种:编译型语言和解释型语言. 编译是指在应用源程序执行之前,就将程序源代码“翻译”成汇编语言,然后进一步根据软硬件环境编 ...

  8. .NET 云原生架构师训练营(KestrelServer源码分析)--学习笔记

    目录 目标 源码 目标 理解 KestrelServer 如何接收网络请求,网络请求如何转换成 http request context(C# 可识别) 源码 https://github.com/d ...

  9. 阅读{django-restframework}源码[generics.py]学习笔记

    首先django-restframework是基于django的一个框架.   mixins.py中开头是这样写的: Basic building blocks for generic class b ...

随机推荐

  1. FireBug使用总结

    FireBug是一个用于网站前端的开发工具,它是Firefox浏览器的一个拓展插件,它可以调试JavaScript.查看DOM.分析CSS.监控网络流量以及进行Ajax交互等.提供了几乎前端开发需要的 ...

  2. css expression

    概述 css expression(css表达式)又称Dynamic properties(动态属性)是早期微软DHTML的产物,以其可以在Css中定义表达式(公式)来达到建立元素间属性之间的联系等作 ...

  3. 稳定的奶牛分配 && 二分图多重匹配+二分答案

    题意: 农夫约翰有N(1<=N<=1000)只奶牛,每只奶牛住在B(1<=B<=20)个奶牛棚中的一个.当然,奶牛棚的容量有限.有些奶牛对它现在住的奶牛棚很满意,有些就不太满意 ...

  4. 【壁纸自动换】自动下载、更换壁纸(Bing壁纸)--XinBSBingWallPaper[2.7更新]

    XinBSBingWallPaper主要功能: 1.支持自动下载Bing壁纸.Netbian壁纸.美国国家地理杂志图片. 2.自动搜索.下载多国Bing首页壁纸. 3.支持定时自动更换桌面壁纸. 4. ...

  5. 【SPOJ】7258. Lexicographical Substring Search(后缀自动机)

    http://www.spoj.com/problems/SUBLEX/ 后缀自动机系列完成QAQ...撒花..明天or今晚写个小结? 首先得知道:后缀自动机中,root出发到任意一个状态的路径对应一 ...

  6. Mysql_mysql force Index 强制索引

    其他强制操作,优先操作如下: mysql常用的hint 对于经常使用oracle的朋友可能知道,oracle的hint功能种类很多,对于优化sql语句提供了很多方法.同样,在mysql里,也有类似的h ...

  7. sql 语句大小写的问题

    关键字不区分大小写 例如 select ,from, 大小写均可 标识符区分大小写 例如 表名,列名 标识符如果不加双引号,默认是按大写执行 标识符如果加双引号,则是按原始大小写执行 但是,当表名加上 ...

  8. MONGODB 计算机服务

    安装完成后,在 BIN目录执行如下 E:\APMServ5.2.6\MongoDb\bin>mongod --logpath E:\APMServ5.2.6\MongoDb\logs\Mongo ...

  9. JSP简单访问数据库

    Java代码 public class DBHelper { private String driverName; private String url; private String user; p ...

  10. CSS架构

    CSS架构 有趣的是,我们通常不这样评判其他语言.一个Rails开发者不会因为他写的代码规范就认为他是一个好的开发者.因为这是最基本的.当然它必须是满 足规范,除此以外还要考虑其他方面:代码是否有可读 ...