javascript – 通过Modernizr加载jQuery后运行自定义代码

2019-09-25 20:36:45 阅读：114 来源： 互联网

我正在开发一个新网站,并决定第一次使用Modernizr.我很确定它是如何工作的一般要点,但是我在寻找关于加载jQuery然后运行jQuery代码的最佳实践的一些建议.

我目前有以下内容作为我页面上的最后一项加载：

Modernizr.load([
    {
        load: '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js',
        complete: function(){
            if( !window.jQuery){
                Modernizr.load('/scripts/jquery-1.11.1.min.js');
            }
        }
    },
    {
        load: '//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js',
        complete: function () {
            if ((typeof $().emulateTransitionEnd == 'function') == false) {
                Modernizr.load('/scripts/bootstrap.min.js');
            }
        }
    }
]);

这会尝试从CDN检索jQuery,如果无法执行此操作,则会加载本地版本.然后,它使用我的站点上的引导程序组件所需的Javascript重复该过程.

我遇到的问题是我之后直接有一些jQuery代码：

$(document).ready(function () {
    $('.wishlist-toggle').click(function () {
        var nodeId = $(this).data("node");
        var id = $(this).data("id");
        var type = $(this).data("type");
        var addTo = $(this).data("add");
        var list = $(this).data("list");
        var removeFrom = $(this).data("remove");
        var storedCookie = getCookie("wishlist");
        var jsonString = null;
        var found = false;

...

出于某种原因,尽管在整个jQuery加载声明之后我在控制台中收到错误,指出$未定义.这通常表明,在调用自定义脚本时,不会加载jQuery.

我的问题是,在尝试运行自定义代码之前,通常如何完成以及在这种情况下被认为是确保jQuery真正加载的最佳实践.

任何帮助,提示或指示将不胜感激.

解决方法:

尝试

var _jquery = function () {
    $(document).ready(function () {
        // do jquery stuff
        console.log("jQuery loaded");
        $("#jq").html("jquery version " + jQuery().jquery + " ready")
    })
};

var _bootstrap = function () {
    // do bootstrap stuff
    console.log("bootstrap loaded");
    $(".btn").trigger("click")
    .promise().done(function(el) {
      setTimeout(
      function() {
        $(el).trigger("click")
      }, 3000
      )
    });
};

var _load = function (url1, url2, test, callback) {
    var script = document.createElement("script");
    script.src = url1;
    script.type = "text/javascript";
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(script);
    setTimeout(function () {
        if (test()) {
            _load(url2, null, function() {return false}, callback)
        } else {
            callback()
        }
    }, 3000)
};

var _scripts = [
    ["//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
    , "//code.jquery.com/jquery-1.11.1.min.js", function () {
        return !window.jQuery
    },
    _jquery],
    ["//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js",
        "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js", function () {
        return (typeof $().emulateTransitionEnd == 'function') == false
    },
    _bootstrap]
];

_scripts.forEach(function (v) {
    _load(v[0], v[1], v[2], v[3]);
});

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
          <div id="jq"></div>
    </div>
  </div>
</div>
  </body>

标签：modernizr,javascript,jquery
来源： https://codeday.me/bug/20190925/1816810.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 通过Modernizr加载jQuery后运行自定义代码