AdminLte 框架 和 requireJs 整合的问题

最近在 做一个基于 adminLte 框架的项目，在我将 require 引进项目之后，框架中的 adminlte.js 中搞的左侧边栏 就不起作用了。

刚开始以为是  各位不符合 requireJs 的书写格式，随后将 adminLTe。js 的 源码 修改为 define（） 的格式，然而 当然还是没有效果。

define(['jquery'],function () {

       if (typeof jQuery === 'undefined') {
           throw new Error('AdminLTE requires jQuery')
       }
}

这是 开头，源码里都是自执行函数，一共8个函数，分别是其中的Tree 函数 是  负责 左侧 导航栏 下拉与收回的。

+ function Tree($) {
            'use strict'

            var DataKey = 'lte.tree'

            var Default = {
                animationSpeed: 500,
                accordion: true,
                followLink: false,
                trigger: '.treeview a'
            }

            var Selector = {
                tree: '.tree',
                treeview: '.treeview',
                treeviewMenu: '.treeview-menu',
                open: '.menu-open, .active',
                li: 'li',
                data: '[data-widget="tree"]',
                active: '.active'
            }

            var ClassName = {
                open: 'menu-open',
                tree: 'tree'
            }

            var Event = {
                collapsed: 'collapsed.tree',
                expanded: 'expanded.tree'
            }

            // Tree Class Definition
            // =====================
            var Tree = function (element, options) {
                this.element = element
                this.options = options

                $(this.element).addClass(ClassName.tree)

                $(Selector.treeview + Selector.active, this.element).addClass(ClassName.open)

                this._setUpListeners()
            }

            Tree.prototype.toggle = function (link, event) {
                var treeviewMenu = link.next(Selector.treeviewMenu)
                var parentLi = link.parent();
                var isOpen = parentLi.hasClass(ClassName.open)

                if (!parentLi.is(Selector.treeview)) {
                    return
                }

                if (!this.options.followLink || link.attr('href') === '#') {
                    event.preventDefault()
                }

                if (isOpen) {
                    this.collapse(treeviewMenu, parentLi)
                } else {
                    this.expand(treeviewMenu, parentLi)
                }
            }

            Tree.prototype.expand = function (tree, parent) {
                var expandedEvent = $.Event(Event.expanded)

                if (this.options.accordion) {
                    var openMenuLi = parent.siblings(Selector.open)
                    var openTree = openMenuLi.children(Selector.treeviewMenu)
                    this.collapse(openTree, openMenuLi)
                }

                parent.addClass(ClassName.open)
                tree.slideDown(this.options.animationSpeed, function () {
                    $(this.element).trigger(expandedEvent)
                }.bind(this))
            }

            Tree.prototype.collapse = function (tree, parentLi) {
                var collapsedEvent = $.Event(Event.collapsed)

                tree.find(Selector.open).removeClass(ClassName.open)
                parentLi.removeClass(ClassName.open)
                tree.slideUp(this.options.animationSpeed, function () {
                    tree.find(Selector.open + ' > ' + Selector.treeview).slideUp()
                    $(this.element).trigger(collapsedEvent)
                }.bind(this))
            }

            // Private

            Tree.prototype._setUpListeners = function () {
                var that = this

                $(this.element).on('click', this.options.trigger, function (event) {
                    that.toggle($(this), event)
                })
            }

            // Plugin Definition
            // =================
            function Plugin(option) {
                return this.each(function () {
                    var $this = $(this)
                    var data = $this.data(DataKey)

                    if (!data) {
                        var options = $.extend({}, Default, $this.data(), typeof option == 'object' && option)
                        $this.data(DataKey, new Tree($this, options))
                    }
                })
            }

            var old = $.fn.tree

            $.fn.tree = Plugin
            $.fn.tree.Constructor = Tree

            // No Conflict Mode
            // ================
            $.fn.tree.noConflict = function () {
                $.fn.tree = old
                return this
            }

            // Tree Data API
            // =============

            $(Selector.data).each(function () {
                Plugin.call($(this));
            })
}(jQuery)

关键问题在于 

Tree Data API 这个地方
下边是源代码

$(window).on('load',function () {
    $(Selector.data).each(function () {
        Plugin.call($(this));
    })
})

在这里 window  load 函数并没有执行。

在 函数内打印 也没有执行。我将 外层的 load 的函数删掉了。然后。。。。 问题就解决了。

// Tree Data API
            // =============

            $(Selector.data).each(function () {
                Plugin.call($(this));
            })

我现在还不知道 为什么 load 函数为什么没有执行，可能 是因为 我之前引入了 domReady 函数的缘故吧。

既然解决了，就将 函数整体装进一个 匿名函数中  return，然后在 启动文件中引用就行了。

define([
    'domReady!',
    'require',
    'angular',
    'angular-route',
    'jquery',
    'bootstrap',
    'jquerydataTables',
    'datatables.net',
    'app',
    'routes',
    'controller'
],function (doc,require,angular) {
    angular.bootstrap(doc,['myapp']);
    require(['adminlte'],function (adminlte) {   在这里引用之后直接执行。因为函数里都是自执行函数。
        console.log(adminlte)
        adminlte();
    })
})

 adminlte.js 中一共8个函数 ，出问题的原因基本都可以确定为 window.onload 没有执行。

转载于:https://www.cnblogs.com/RoadAspenBK/p/9225110.html