请选择 进入手机版 | 继续访问电脑版
查看: 145|回复: 0

JavaScript基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架的搭建

[复制链接]

699

主题

740

帖子

5977

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5977
发表于 2018-7-15 18:50:44 | 显示全部楼层 |阅读模式
JavaScript框架封装雏形:实现了基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架的搭建

[JavaScript] 纯文本查看 复制代码
/*
* @Author: 我爱科技论坛
* @Time: 20180705
* @Desc: 实现一个类似于JQuery功能的框架
* V 1.0: 实现了基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架的搭建
* */



// 框架
(function (w) {
    var xframe = {
        /**
         * 实现对象的可扩充性
         * @param target
         * @param source
         * @returns {*}
         */
        extend : function (target, source) {
            for (var i in source){
                target[i] = source[i];
            }
            return target;
        },
    }

    // 暴露我的立即函数中的局部变量(给window这个对象添加两个属性变量: xframe, $$)
    w.xframe = w.$$  = xframe;
})(window);



// 基础框架: 基本上都是不需要参与链式访问的
// 实现功能: 如果是一个参数的话,就直接给类添加方法
// 如果是多个参数的话,就表示给指定的对象添加方法
xframe.extend(xframe, {
    ltrim : function () {

    },
    rtrim : function () {

    },
    trim : function () {

    },
    ajax : function () {

    },
    formateString : function () {

    },
    random : function () {

    },
    isNumber : function () {

    },
    isBoolean : function () {

    },
    isString : function () {

    },
    isUndefined : function () {

    },
    isObject : function () {

    },
    isNull : function () {

    },
    isArray : function () {

    },

})


// 选择框架
/***
 * 如果下面的框架需要用到上面的框架,就直接可以把上面的去全局变量/对象暴露出去,这里是使用了前面的xframe全局变量
  */
(function ($$) {
    $$.$all = function(){

    };
    $$.$id  = function (id) {

    };
    $$.$tag = function () {

    };
    $$.$class = function () {

    };
    $$.$group = function () {

    };
    $$.cengci = function () {

    };
    $$.$select = function () {

    }

})(xframe);


// 事件框架
(function ($$) {
    $$.on = function () {

    }
})(xframe);


// CSS框架
(function ($$) {
    $$.css = function () {

    };

    // 元素的显示与隐藏
    $$.show = function () {

    };
    $$.hide = function () {

    };

    // 元素的宽度和高度
    $$.width = function () {

    };
    $$.height = function () {

    };


    // 元素的滚动宽度和高度
    $$.scrollWidth = function ()
    {

    };
    $$.scrollHeight = function () {

    };

    // 滚动条相对于上面和左边的距离
    $$.scrollTop = function () {

    };
    $$.scrollLeft = function () {

    };


    // 屏幕的宽度和高度
    $$.screenWidth = function () {

    };
    $$.screenHeight = function () {

    };


    // 文档区域的宽度和高度
    $$.wWidth = function () {

    };
    $$.wHeight = function () {

    };


    // 获取文档滚动窗口的相关属性参数信息
    $$.wScrollHeight = function () {

    };
    $$.wScrollWidth = function () {

    };

    // 获取文档滚动窗口距离上面和左边的距离和宽度
    $$.wScrollTop = function () {

    };
    $$.wScrollLeft = function () {

    };
})(xframe);


// 属性框架
(function ($$) {
    // 私有方法
    function removeName() {

    };
    function addName() {

    }

    // 公有方法
    $$.attr  = function () {

    };
    $$.addClass = function () {

    };
    $$.removeClass = function () {

    }
})(xframe);



// 内容框架
(function () {
    $$.html = function () {

    };
    $$.text = function () {

    };
    $$.val = function () {

    }
})();


// 动画框架
(function () {
    function Animate() {

    }

    Animate.prototype = {

    }
})();







上一篇:18肖秀荣考研政治真题全套PDF电子版资料
下一篇:基于OpenLayers实战地理信息系统(离线地图项目实战)实战教程
发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案; 如果你在论坛求助问题,并且已经从坛友或者管理的回复中解决了问题,请把帖子分类或者标题加上【已解决】。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

微信扫一扫

我爱科技论坛(www.52tech.tech)旨在打造全网最大的免费资源共享平台。目前论坛包括考研资料、编程学习、黑科技/科学上网、开源软件等资源模块,竭力服务于正在学习道路上的每一个人。我爱科技论坛,爱科技,更爱分享。致力于营造一个资源丰富、内容完善的大型网络学习交流资源共享平台!

QQ|Archiver|手机版|小黑屋|我爱科技论坛 快乐学习交流

(请勿发布违反中华人民共和国法律法规的言论,会员观点不代表我爱科技论坛的官方立场)

Powered by Discuz! X3.4© 2001-2013 Technology Inc.

返回顶部 返回列表