zoukankan      html  css  js  c++  java
  • Angular External js library calling Document.Ready

    https://stackoverflow.com/questions/51094841/angular-external-js-library-calling-document-ready

    Step 1

    Check if the external library is available on npm. If so you may be able to import the desired function rather than altering a vendored file.

    For example, it may provide an API such that:
    YourTsComponent.ts

    const CallMe = require('library').CallMe
    // or
    import { CallMe } from 'library'
    
    // on route change
    CallMe()

    If something like that is available, great, otherwise...

    Step 2

    Confirm your theory with a global (attach CallMe to window temporarily). If your theory is correct, you should be able to get the desired behavior by calling this global variable on route change.

    Tester.js

    (function($) {
      "use strict";
    
      $(document).ready(function() {
        CallMe();
      });
    
      function CallMe() {
        console.log('HEY I GOT CALLED');
      }
    
      // TODO - remove (test only)
      window._CallMe = CallMe
    })(jQuery);

    YourTsComponent.ts

    // on route change
    window._CallMe()

    If that doesn't work, you must reevaluate your theory.

    but if it does ...

    Step 3

    Convert the vendored library to a module that can be consumed by your app. Your mileage may vary based on what (if any) module system you are using. For example, if you are using require.js:

    Tester.js

    (function(factory) {
      if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
      } else if (typeof exports === 'object') {
        // CommonJS
        factory(require('jquery'));
      } else {
        // Browser globals
        factory(jQuery);
      }
    }(function($) {
      "use strict";
    
      function CallMe() {
        console.log('HEY I GOT CALLED');
      }
    
      $(document).ready(function() {
        CallMe();
      });
    
      return CallMe
    }));

    YourTsComponent.ts

    const CallMe = require('/path/to/tester.js')
    
    // on route change
    CallMe()

    If you're not keen on re-writing a vendored library

    You may consider overriding .ready's default behavior so that it may be retriggered. There Are a few answers here if you want to go this route, but be warned, overriding default jQuery behavior is probably much more error prone than editing a single vendored file.

  • 相关阅读:
    java设计模式简介
    java设计模式--单例模式
    判断整形回文数
    常用正则表达式 捕获组(分组)
    [转]十分钟搞定Vue搭建
    ActiveX界面已显示,调用方法报undefined的处理办法
    [转]纯js导出json到excel(支持chrome)
    webapi 开启gzip压缩
    webapi下载文件
    iis添加共享目录为虚拟目录
  • 原文地址:https://www.cnblogs.com/dhcn/p/9272162.html
Copyright © 2011-2022 走看看