Framework7源码学习-1-概览
源码打包地址：
https://raw.githubusercontent.com/qq286735628/Framework7/master/dist/js/framework7.js
整个Framework7框架，由Framework7核心代码、jQuery风格的DOM操作库、DOM选择器、DOM操作辅助工具、Ajax这五部分组成。
纵观
(function(){
'use strict';
// 框架核心代码
window.Framework7 = function(params){};
// jQuery风格的DOM库
var Dom7 = function(arr){};
Dom7.prototype = {
addClass: function(className){},
removeClass: function(className){},
hasClass: function(className){},
toggleClass: function(className){},
attr: function(key, value){},
data: function(key, value){},
val: function(value){},
transform: function(transform){},
transition: function(duration){},
on: function(eventName, targetSelector, listener){},
off: function(event, listener){},
trigger: function(eventName, eventData){},
transitionEnd: function(callback){},
animationEnd: function(callback){},
width: function(){},
outerWidth: function(margins){},
height: function(){},
outerHeight: function(margins){},
offset: function(){},
hide: function(){},
show: function(){},
css: function(props, value){},
each: function(callback){},
html: function(html){},
text: function(text){},
is: function(selector){},
indexOf: function(el){},
index: function(){},
eq: function(index){},
append: function(newChild){},
prepend: function(newChild){},
insertBefore: function(selector){},
insertAfter: function(selector){},
next: function(){},
prev: function(){},
parent: function(selector){},
parents: function(selector){},
find: function(selector){},
children: function(selector){},
remove: function(){}
};
// DOM选择器
var $ = function(selector, context){};
// DOM操作工具
$.parseUrlQuery = function(url){};
$.isArray = function(arr){};
$.unique = function(arr){};
$.trim = function(str){};
$.serializeObject = function(obj){};
$.getTranslate = function(el, axis){};
$.fn = Dom7.prototype;
// Ajax
$.ajax = function(options){};
Framework7.$ = $;
// 特性检测
Framework7.prototype.support = (function(){})();
// 设备检测
Framework7.prototype.device = (function()){}();
})整个库文件，通过最外层的匿名函数 (function(){})() 进行封装，防止内部变量污染全局。
使用 window.Framework7 = function(){} 方式暴露Framework7这个构造函数给外部使用。
其DOM操作和Ajax部分，采用仿jQuery的风格，最大程度减少开发者学习成本。
通过上面的代码片段，可以看到，一个JS框架，主要由框架核心代码，DOM操作，Ajax操作这三部分组成。由于jQuery的占有率非常高，很多人的JS操作习惯，实际上是jQuery操作习惯，故大部分的框架，其DOM操作和Ajax操作都会去模仿jQuery的风格。
Framework7核心
window.Framework7 = function(params){
// 定义app这个别名
var app = this;
// 默认参数
app.params = {}
// 合并参数列表
for (var param in params){
app.params[param] = params[param];
}
app.init = function(){};
// 对象初始化
if(app.params.init) app.init();
// 返回对象实例
return app;
}上面代码，可以看到一个简单的JS构造函数的写法。
通过 var app = this 这种别名方式，来保存this。
通过 for in 循环，来实现带参数初始化。
通过结尾的 return app ，来返回一个对象实例，供外部采用 newFramework7() 初始化的时候使用。
通过上面的代码片段，可以看到，一个JS框架，主要由框架核心代码，DOM操作，Ajax操作这三部分组成。由于jQuery的占有率非常高，很多人的JS操作习惯，实际上是jQuery操作习惯，故大部分的框架，其DOM操作和Ajax操作都会去模仿jQuery的风格。
Framework7核心
JavaScript
window.Framework7 = function(params){ // 定义app这个别名 var app = this; // 默认参数 app.params = {} // 合并参数列表 for (var param in params){ app.params[param] = params[param]; } app.init = function(){}; // 对象初始化 if(app.params.init) app.init(); // 返回对象实例 return app; }
1234567891011121314151617181920 | window.Framework7 = function(params){ // 定义app这个别名 var app = this; // 默认参数 app.params = {} // 合并参数列表 for (var param in params){ app.params[param] = params[param]; } app.init = function(){}; // 对象初始化 if(app.params.init) app.init(); // 返回对象实例 return app;} |
|---|
上面代码，可以看到一个简单的JS构造函数的写法。
通过 var app = this 这种别名方式，来保存this。
通过 for in 循环，来实现带参数初始化。
通过结尾的 return app ，来返回一个对象实例，供外部采用 new Framework7() 初始化的时候使用。
腾讯云开发者
