Framework7源码学习-1-概览

源码打包地址:

https://raw.githubusercontent.com/qq286735628/Framework7/master/dist/js/framework7.js

整个Framework7框架,由Framework7核心代码、jQuery风格的DOM操作库、DOM选择器、DOM操作辅助工具、Ajax这五部分组成。

纵观

整个库文件,通过最外层的匿名函数 (function(){})() 进行封装,防止内部变量污染全局。

使用 window.Framework7 = function(){} 方式暴露Framework7这个构造函数给外部使用。

其DOM操作和Ajax部分,采用仿jQuery的风格,最大程度减少开发者学习成本。

通过上面的代码片段,可以看到,一个JS框架,主要由框架核心代码,DOM操作,Ajax操作这三部分组成。由于jQuery的占有率非常高,很多人的JS操作习惯,实际上是jQuery操作习惯,故大部分的框架,其DOM操作和Ajax操作都会去模仿jQuery的风格。

Framework7核心

上面代码,可以看到一个简单的JS构造函数的写法。

通过 var app = this 这种别名方式,来保存this。

通过 for in 循环,来实现带参数初始化。

通过结尾的 return app ,来返回一个对象实例,供外部采用 new Framework7() 初始化的时候使用。