仅提取在对象文字中使用的值

时间:2015-08-11 18:00:32

标签: javascript jquery google-chrome google-chrome-devtools

我刚刚玩了一个jBox.js插件,可用于创建模态,工具提示和胆汁,它大约有1600多行代码,现在我只想使用工具提示功能。我知道工具提示只能使用css创建,而且我也知道在JS中只能用几行JS来完成,但这是一个自定义要求,我只从这个库中提取代码,I.E。我只需要提取与工具提示相关的代码,我设法做到这一点,我在每个函数中使用chrome dev工具和console.logs来查看哪些是正在执行的函数,所以我只保留那些函数。我设法将代码行从1600+减少到900+。

问题现在的问题是,这是一个巨大的多用途插件,它的对象文字中有一大组默认值(每个插件使用一个带默认值的对象文字),请参阅下面:

this.options = {

        // jBox ID
        id: null,                   // Choose a unique id, otherwise jBox will set one for you (jBoxID1, jBoxID2, ...)

        // Dimensions
        width: 'auto',              // Width of content area (e.g. 'auto', 100)
        height: 'auto',             // Height of content area
        minWidth: null,             // Minimum width
        maxHeight: null,            // Minimum height
        minWidth: null,             // Maximum width
        maxHeight: null,            // Minimum height

        // Attach
        attach: null,               // Attach jBox to elements (if no target element is provided, jBox will use the attached element as target)
        trigger: 'click',           // The event to open or close your jBoxes, use 'click' or 'mouseenter'
        preventDefault: false,      // Prevent default event when opening jBox (e.g. don't follow the href in a link when clicking on it)

        // Content
        title: null,                // Adds a title to your jBox
        content: null,              // You can use a string to set text or HTML as content, or an element selector (e.g. jQuery('#jBox-content')) to append one or several elements (elements appended will get style display: 'block', so hide them with CSS style display: 'none' beforehand)
        getTitle: null,             // Get the title from an attribute when jBox opens
        getContent: null,           // Get the content from an attribute when jBox opens
        isolateScroll: true,        // Isolates scrolling to content container

        // Position
        target: null,               // The target element where jBox will be opened
        position: {
            x: 'center',            // Horizontal Position (Use a number, 'left', 'right' or 'center')
            y: 'center'             // Vertical Position (Use a number, 'top', 'bottom' or 'center')
        },
        outside: null,              // Use 'x', 'y', or 'xy' to move your jBox outside of the target element
        offset: 0,                  // Offset to final position, you can set different values for x and y with an object e.g. {x: 15, y: 0}

        attributes: {               // Note that attributes can only be 'left' or 'right' when using numbers for position, e.g. {x: 300, y: 20}
            x: 'left',              // Horizontal position, use 'left' or 'right'
            y: 'top'                // Vertical position, use 'top' or 'bottom'
        },
        adjustPosition: false,      // Adjusts the position when there is not enough space (use true, 'flip' or 'move')
        adjustTracker: false,       // By default jBox adjusts the position when opening, to adjust when scrolling or resizing, use 'scroll', 'resize' or 'true' (both events)
        adjustDistance: 5,          // How far from the window edge we start adjusting, use an object to set different values: {bottom: 5, top: 50, left: 5, right: 20}
        fixed: false,               // Your jBox will stay on position when scrolling
        reposition: false,          // Calculates new position when the window-size changes
        repositionOnOpen: true,     // Calculates new position each time jBox opens (rather than only when it opens the first time)
        repositionOnContent: true,  // Calculates new position when the content changes with .setContent() or .setTitle()

        // Pointer
        pointer: false,             // Your pointer will always point towards the target element, so the option outside should be 'x' or 'y'
        pointTo: 'target',          // Setting something else than 'target' will add a pointer even if there is no target element set or found (Use 'top', 'bottom', 'left' or 'right')

        // Animations
        fade: 180,                  // Fade duration in ms, set to 0 or false to disable
        animation: null,            // Animation when opening or closing (use 'pulse', 'zoomIn', 'zoomOut', 'move', 'slide', 'flip', 'tada') (CSS inspired from Daniel Edens Animate.css: http://daneden.me/animate)

        // Appearance
        theme: 'Default',           // Set a jBox theme class
        addClass: '',               // Adds classes to the wrapper
        overlay: false,             // Adds an overlay when jBox opens (set color and opacity with CSS)
        zIndex: 10000,              // Use a high zIndex (your overlay will have the lowest zIndex of all your jBoxes (with overlays) minus one)

        // Delays
        delayOpen: 0,               // Delay opening in ms (Note that the delay will be ignored if your jBox didn't finish closing)
        delayClose: 0,              // Delay closing in ms (Note that there is always a closing delay of at least 10ms to ensure jBox won't be closed when opening right away)

        // Closing events
        closeOnEsc: false,          // Close jBox when pressing [esc] key
        closeOnClick: false,        // Close jBox with mouseclick, use 'true' (click anywhere), 'box' (click on jBox itself), 'overlay' (click on the overlay), 'body' (click anywhere but jBox)
        closeOnMouseleave: false,   // Close jBox when the mouse leaves the jBox area or the area of the attached element
        closeButton: false,         // Adds a close button to your jBox, use 'title', 'overlay', 'box' or true (true will add the button to overlay, title or box, in that order if any of those elements can be found)

        // Other options
        constructOnInit: false,     // Construct jBox when it's being initialized
        blockScroll: false,         // When jBox is open, block scrolling
        appendTo: jQuery('body'),   // Provide an element if you want the jBox to be positioned inside a specific element (only useful for fixed positions or when position values are numbers)
        draggable: null,            // Make your jBox draggable (use 'true', 'title' or provide an element as handle) (inspired from Chris Coyiers CSS-Tricks http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/)
        dragOver: true,             // When you have multiple draggable jBoxes, the one you select will always move over the other ones

        // Events                   // Note: You can use 'this' in the event functions, it refers to your jBox object (e.g. onInit: function() { this.open(); })
        onInit: null,               // Triggered when jBox is initialized
        onBeforeInit: null,         // Triggered when jBox starts initializing, useful to add your own internal functions
        onAttach: null,             // Triggered when jBox attached itself to elements
        // TODO onPosition
        onCreated: null,            // Triggered when jBox is created and is availible in DOM
        onOpen: null,               // Triggered when jBox opens
        onClose: null,              // Triggered when jBox closes
        onCloseComplete: null,      // Triggered when jBox is completely closed (when fading is finished, useful if you want to destroy the jBox when it is closed)

    };

有没有办法只筛选出使用过的值? I.E.对象文字中的值,以后在代码中实际使用,并从默认对象文字中删除其余值。

我创建了一个演示版,其代码我已加载 HERE (转到源代码并打开jBox.js),或者您也可以在github上查看插件, { {3}}

0 个答案:

没有答案