专栏首页Web 开发Framework7源码学习-1-概览

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() 初始化的时候使用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • NodeJS那些事

    下半年做了挺多活动型需求,因为我们业务人力有限,我在业务的策略是不依赖NodeJS。

    libo1106
  • Generator异步隐藏测试

    这样有没有Generator感觉都是一样的,只不过把异步的包在一个函数里面,对外没有暴露出来而已

    libo1106
  • jQuery进阶,$.Deferred() 延迟对象

    JS里面有大量的异步方法,写着写着,代码就会变得>>。多层嵌套的回调,很影响后续代码的维护,也许今天你还记得这块回调逻辑,明天你就很有可能被这回调姿势给坑了。

    libo1106
  • phpcms v9 常用函数

    常用函数 , 打开include/global.func.php,下面存放一些公共函数 view plaincopy to clipboardprint? fu...

    joshua317
  • JavaScript立即调用的函数表达式

    主要参考知乎上这个问题:javascript 匿名函数有哪几种执行方式 长天之云的回答。

    meteoric
  • Coursera吴恩达《神经网络与深度学习》课程笔记(2)-- 神经网络基础之逻辑回归

    上节课我们主要对深度学习(Deep Learning)的概念做了简要的概述。我们先从房价预测的例子出发,建立了标准的神经网络(Neural Network)模型...

    红色石头
  • python 中面向切面编程AOP和装饰器

    简言之、这种在运行时,编译时,类和方法加载时,动态地将代码切入到类的指定方法、指定位置上的编程思想就是面向切面的编程。

    用户7625070
  • 微信小程序的生命周期函数

    *** 里面的生命周期 *监听页面加载 onLoad:function(options) { } 常用语发送请求,因为这里的options 会携带参数。

    用户4344670
  • JQuery事件处理

    Jquery事件 1、  绑定事件示例代码: <a href=”#”>绑定事件</a> <div style=”display:none;”> 什么是绑定事件?...

    苦咖啡
  • es6之深入理解promise对象

    连小壮

扫码关注云+社区

领取腾讯云代金券