关闭

RequireJS 构造方法以及封装成jQuery插件

1304人阅读 评论(0) 收藏 举报
分类:

scrollto.js

// 定义模块
define(['jquery'], function($){

    // 构造函数(方法名跟文件名相同,首字母要大些)
    function ScrollTo(opts){
        // 将用户传递的参数覆盖原来的ScrollTo.DEFAULTS,以"{}"形式返回
        this.opts = $.extend({}, ScrollTo.DEFAULTS, opts);
        this.$el = $('html, body');

    }

    // 在原型添加方法move
    ScrollTo.prototype.move = function(){
        var opts = this.opts,
            dest = opts.dest;

        if($(window).scrollTop() != dest){
            if(!this.$el.is(':animated')){
                console.log('log', 1);
                this.$el.animate({
                    scrollTop: dest
                }, opts.speed);
            }
        }
    };

    // 在原型添加方法go
    ScrollTo.prototype.go = function(){
        var dest = this.opts.dest;

        if($(window).scrollTop != dest){
            this.$el.scrollTop(dest);
        }
    };

    // 定义默认值
    ScrollTo.DEFAULTS = {
        dest: 0,
        speed: 800
    };

    return {
        // 返回对象
        ScrollTo: ScrollTo
    }
});

backtop.js

// 定义模块
define(['jquery', 'scrollto'], function($, scrollto){

    // 构造函数
    function BackTop(el, opts){
        this.opts = $.extend({}, BackTop.DEFAULTS, opts);
        this.el = $(el);
        //实例化scrollto
        this.scroll = new scrollto.ScrollTo({
            dest: 0,
            speed: this.opts.speed
        });

        this._checkPosition();

        if(this.opts.mode == 'move'){
            // $.proxy(this._move, this)是将this对象替换
            // 如果是this.el.on('click', this._move);
            // 那么_move方法中的this指的是$('#backTop')
            // 替换后this就是BackTop对象。
            this.el.on('click', $.proxy(this._move, this));
        }else
        {
            this.el.on('click', $.proxy(this._go, this));
        }

        $(window).on('scroll', $.proxy(this._checkPosition, this));
    }

    BackTop.DEFAULTS = {
        mode: 'move',
        pos: $(window).height(),
        speed: 800
    };

    BackTop.prototype._move = function(){
        this.scroll.move();
    };

    BackTop.prototype._go = function(){
        this.scroll.go();
    };

    BackTop.prototype._checkPosition = function(){
        var el = this.el;
        //console.log('log:',this);
        if($(window).scrollTop() > this.opts.pos){
            el.fadeIn();
        }else
        {
            el.fadeOut();
        }
    };

    // 注册jquery插件
    $.fn.extend({
        backtop: function(opts){
            return this.each(function(){
                new BackTop(this, opts);
            });
        }
    });

    return {
        BackTop:BackTop
    }
});

main.js

require.config({
    paths: {
        jquery: 'jquery.min',
    }
});

requirejs(['jquery', 'backtop'], function($, backtop) {

    $('#backTop').backtop({
        mode: 'move'
    });
});
0
0
查看评论

使用requireJS的shim参数,完成jquery插件的加载

没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过标签加载,这个时候jquery框架生成全局变量$和jQuery等全局变量。如果项目中引用了requireJS框架,采用模块化的方式加载jquery,那么jquery不会再添加全局变量$和jQuery。现在问题来了,...
  • aitangyong
  • aitangyong
  • 2014-10-31 13:59
  • 13565

jquery插件的写法,以及requireJS如何引入jquery插件

下面,就是一个自制的jquery小插件(affix),用于固定某个元素在浏览器顶部(也可以自定义距离浏览器顶部多高的位置),不随滚动条的下拉而移动 ;(function(){ $.fn.extend({ 'affix':function(opt){ ...
  • csdn_yudong
  • csdn_yudong
  • 2016-08-21 16:32
  • 6239

如何用原生js封装一个属于自己的插件

今天介绍一下怎么写属于自己的插件,建议看之前温习一下面向对象; 我就写个简单的重置样式的插件,话不多说先上代码;//SetStyles.js (function(win, doc) { var defaultSettings = { color: "red&quo...
  • qq_34562689
  • qq_34562689
  • 2017-10-26 19:25
  • 1201

使用requireJS,backboneJS,和underscoreJS完成自定义模板封装

使用requireJS,backboneJS,和underscoreJS完成自定义模板封装原来的代码当我们进行一个列表的数据填充的时候,是这样做的: //获取美食列表 function getFoodList(typeId) { appcan.request.ajax({...
  • WatermelonZero
  • WatermelonZero
  • 2015-10-09 16:54
  • 1295

Jquery Validate插件+requireJs库

这个页面是使用了requireJs,页面是freemarker页面 ,CSS是bootstrap ...
  • u010363836
  • u010363836
  • 2015-07-23 18:13
  • 2002

requireJs 调用Jquery-UI

如何让requireJs 调用Jquery-UI呢
  • clarkt
  • clarkt
  • 2015-05-13 16:56
  • 1302

requireJS(1)---使用requireJS的shim参数,完成jquery插件的加载

一、说明没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过(function( $, undefined ) { })( jQuery ); 2、示例如果我们项目中使用了jquery插件,但是jquery框架是通过requireJS加载的(不会添加全局变量$),...
  • lovoo
  • lovoo
  • 2017-11-01 09:03
  • 158

将C++接口封装成C函数

在某些情况下,需要将C++的接口封装成C函数。 --------------------------------------首先,我们准备一个C++的so文件,它由以下h和cpp文件生成: [chengyi@localhost cytest]$ cat cy_test.h...
  • flykobesummer
  • flykobesummer
  • 2009-08-10 10:24
  • 1367

RequireJS 构造方法以及封装成jQuery插件

scrollto.js// 定义模块 define(['jquery'], function($){ // 构造函数(方法名跟文件名相同,首字母要大些) function ScrollTo(opts){ // 将用户传递的参数覆盖原来的ScrollTo....
  • xinyflove
  • xinyflove
  • 2015-07-09 16:46
  • 1304

JavaScript模块化:使用requireJS按需加载

模块加载器的概念可能稍微接触过前端开发的童鞋都不会陌生,通过模块加载器可以有效的解决这些问题: JS文件的依赖关系。 通过异步加载优化script标签引起的阻塞问题 可以简单的以文件为单位将功能模块化并实现复用 主流的JS模块加载器有requireJS,SeaJS等,加载器之间可...
  • huang100qi
  • huang100qi
  • 2016-09-06 17:15
  • 6538
    个人资料
    • 访问:115069次
    • 积分:2589
    • 等级:
    • 排名:第16661名
    • 原创:137篇
    • 转载:59篇
    • 译文:0篇
    • 评论:10条
    最新评论