jQuery 版本viewer.js插件的结构分析与学习

最新推荐文章于 2024-08-08 08:24:33 发布

ccessl

最新推荐文章于 2024-08-08 08:24:33 发布

阅读量3.8k

点赞数

分类专栏： jQuery 文章标签： jquery 插件 javascript

本文链接：https://blog.csdn.net/cc_fys/article/details/78824785

版权

本文分析了viewer.js插件的结构，包括其jQuery插件的封装方式，AMD支持，以及如何防止插件冲突。通过立即执行匿名函数利用闭包特性保护内部变量，同时提供不同情况下的加载机制，如AMD和直接调用。通过$.fn.viewer注册插件，并使用jQuery的data方法管理状态，确保实例复用，避免重复创建。此外，还讲解了插件如何保存并恢复同名插件的引用，以处理潜在的命名冲突问题。

摘要由CSDN通过智能技术生成

viewer.js，其调用方法和使用都很简单。但是开始的时候对于其内部方法的调用，图片更新，插件冲突控制等原理都不是很理解。在这里分析一下viewer.js的框架，和大部分jQuery插件的封装类似，也有很多值得学习的部分。

先省略掉大部分的属性和方法，留下整体框架，再一步步分析结构。

(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as anonymous module.
        define('viewer', ['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node / CommonJS
        factory(require('jquery'));
    } else {
        // Browser globals.
        factory(jQuery);
    }
})(function ($) {

    'use strict';


    // Constants
    var NAMESPACE = 'viewer';


    //globle function
    function isUndefined(u) {
        return typeof u === 'undefined';
    }
    function isNumber(n) {
        return typeof n === 'number' && !isNaN(n);
    }
    function isString(s) {
        return typeof s === 'string';
    }
    function toArray(obj, offset) {
        var args = [];
        if (isNumber(offset)) { // It's necessary for IE8
            args.push(offset);
        }
        return args.slice.apply(obj, args);
    }
    //省略
    //省略

    function Viewer(element, options) {
        this.$element = $(element);
        this.options = $.extend({}, Viewer.DEFAULTS, $.isPlainObject(options) && options);
        this.isImg = false;
        this.isBuilt = false;
        this.isShown = false;
        this.isViewed = false;
        this.isFulled = false;
        this.isPlayed