Lấy tập lệnh src trong javascript

Question

Khi chúng tôi đang xây dựng các ứng dụng một trang hoặc ứng dụng dựa trên JavaScript bằng cách sử dụng các công cụ như Pup, đôi khi chúng tôi cần dựa vào các thư viện của bên thứ ba yêu cầu thẻ tập lệnh được đặt trong

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

9 hoặc

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

0 của HTML của chúng tôi

Nội dung chính Show

Tập lệnh src là gì?
Thẻ script trong JavaScript là gì?
Làm cách nào để liên kết tệp JavaScript với HTML?
Tập lệnh async src là gì?

Đối với các thư viện được sử dụng trên toàn cầu trên trang web, việc đặt chúng trong

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

9 chính của chúng tôi là hoàn toàn ổn

Đối với các thư viện chỉ được sử dụng ở một hoặc một vài nơi, việc thực hiện các cuộc gọi để tải các thư viện này vào

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

9 của ứng dụng của chúng tôi có thể thêm tải trang không cần thiết và sau đó, thời gian tải

May mắn thay, có một cách giải quyết

Mẹo nhỏ là tạo thẻ

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

3 đang tải thư viện một cách nhanh chóng và chỉ đưa nó vào DOM khi chúng ta cần. Đây là ý chính của nó

Mẫu tải tập lệnh động

const loadDynamicScript = (callback) => {
  const existingScript = document.getElementById('scriptId');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'url'; // URL for the third-party library being loaded.
    script.id = 'libraryName'; // e.g., googleMaps or stripe
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

Ý tưởng ở đây là chúng ta tạo một chức năng mà chúng ta có thể gọi trên các trang mà chúng ta cần thư viện của bên thứ ba và tự động tạo và thêm thẻ

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

3 vào

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

0 của ứng dụng

Để làm cho điều này trở nên cụ thể, hãy giả sử rằng chúng tôi đang cố tải API Google Maps để hiển thị bản đồ trên trang của chúng tôi

Đang tải Google Maps động

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

Hãy bước qua nó. Bên trong chức năng của chúng tôi, chúng tôi bắt đầu bằng cách cố gắng phát hiện xem chúng tôi đã tải Google Maps hay chưa bằng cách tìm thẻ

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

3 với

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

1 được đặt thành

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

2. Nếu chúng tôi làm như vậy, chúng tôi sẽ dừng—không cần tải thư viện hai lần

Tuy nhiên, nếu chúng tôi không tìm thấy

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

3, chúng tôi sẽ thực sự tạo tập lệnh động. Chúng tôi bắt đầu bằng cách tạo một thẻ

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

3 trống trong bộ nhớ là

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

5 và sau đó gán các thuộc tính cần thiết cho thẻ đó là

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

6 (URL nơi tập lệnh tồn tại) và

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

1 để xác định tập lệnh sau này. Cuối cùng, chúng tôi nối tập lệnh vào thẻ

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

0 của mình để thực sự tải nó

Một chi tiết cuối cùng. chú ý cuộc gọi đến

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

9 ở đây? . Đối số

import React from 'react';
import GoogleMap from '../GoogleMap/GoogleMap';
import loadGoogleMaps from '../../../modules/load-google-maps.js';

class MapsComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { googleMapsReady: false };
  }

  componentWillMount() {
        loadGoogleMaps(() => {
          // Work to do after the library loads.
          this.setState({ googleMapsReady: true });
        });   
  }

  render() {
      return (
          
                {this.state.googleMapsReady ?  : ''}
      
    );
  }
}

0 được chuyển đến hàm

import React from 'react';
import GoogleMap from '../GoogleMap/GoogleMap';
import loadGoogleMaps from '../../../modules/load-google-maps.js';

class MapsComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { googleMapsReady: false };
  }

  componentWillMount() {
        loadGoogleMaps(() => {
          // Work to do after the library loads.
          this.setState({ googleMapsReady: true });
        });   
  }

  render() {
      return (
          
                {this.state.googleMapsReady ?  : ''}
      
    );
  }
}

1 của chúng tôi ở đây được thiết kế để gọi một số mã sau khi thư viện được tải

Lưu ý rằng chúng tôi gọi

import React from 'react';
import GoogleMap from '../GoogleMap/GoogleMap';
import loadGoogleMaps from '../../../modules/load-google-maps.js';

class MapsComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { googleMapsReady: false };
  }

  componentWillMount() {
        loadGoogleMaps(() => {
          // Work to do after the library loads.
          this.setState({ googleMapsReady: true });
        });   
  }

  render() {
      return (
          
                {this.state.googleMapsReady ?  : ''}
      
    );
  }
}

2 nếu nó tồn tại cả khi chúng tôi tải tập lệnh lần đầu tiên, cũng như trong các cuộc gọi tiếp theo khi tập lệnh đã tồn tại (cảm ơn Bob Johnson trong các nhận xét đã chỉ ra điều này)

Áp dụng điều này vào thực tế, đây là một ví dụ về việc sử dụng điều này trong thành phần React tồn tại trong Pup

Ví dụ sử dụng

import React from 'react';
import GoogleMap from '../GoogleMap/GoogleMap';
import loadGoogleMaps from '../../../modules/load-google-maps.js';

class MapsComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { googleMapsReady: false };
  }

  componentWillMount() {
        loadGoogleMaps(() => {
          // Work to do after the library loads.
          this.setState({ googleMapsReady: true });
        });   
  }

  render() {
      return (
          
                {this.state.googleMapsReady ?  : ''}
      
    );
  }
}

Đó là nó. Bây giờ, khi thành phần của chúng tôi bắt đầu gắn kết, chúng tôi sẽ gọi đến thư viện của chúng tôi để tự động tạo và đưa

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

3 của chúng tôi vào

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

0. Sau khi nó được tải và gọi hàm

const loadGoogleMaps = (callback) => {
  const existingScript = document.getElementById('googleMaps');

  if (!existingScript) {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=&libraries=places';
    script.id = 'googleMaps';
    document.body.appendChild(script);

    script.onload = () => {
      if (callback) callback();
    };
  }

  if (existingScript && callback) callback();
};

9, hàm gọi lại mà chúng tôi chuyển vào đây sẽ kích hoạt và cập nhật giá trị

import React from 'react';
import GoogleMap from '../GoogleMap/GoogleMap';
import loadGoogleMaps from '../../../modules/load-google-maps.js';

class MapsComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { googleMapsReady: false };
  }

  componentWillMount() {
        loadGoogleMaps(() => {
          // Work to do after the library loads.
          this.setState({ googleMapsReady: true });
        });   
  }

  render() {
      return (
          
                {this.state.googleMapsReady ?  : ''}
      
    );
  }
}

6 của thành phần của chúng tôi thành

import React from 'react';
import GoogleMap from '../GoogleMap/GoogleMap';
import loadGoogleMaps from '../../../modules/load-google-maps.js';

class MapsComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { googleMapsReady: false };
  }

  componentWillMount() {
        loadGoogleMaps(() => {
          // Work to do after the library loads.
          this.setState({ googleMapsReady: true });
        });   
  }

  render() {
      return (
          
                {this.state.googleMapsReady ?  : ''}
      
    );
  }
}

7. Nếu chúng ta nhìn xuống chức năng kết xuất của mình, chúng ta có thể thấy một ví dụ giả tạo về điều này khi chơi. Ở đây, chúng tôi chỉ tải thành phần

import React from 'react';
import GoogleMap from '../GoogleMap/GoogleMap';
import loadGoogleMaps from '../../../modules/load-google-maps.js';

class MapsComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { googleMapsReady: false };
  }

  componentWillMount() {
        loadGoogleMaps(() => {
          // Work to do after the library loads.
          this.setState({ googleMapsReady: true });
        });   
  }

  render() {
      return (
          
                {this.state.googleMapsReady ?  : ''}
      
    );
  }
}

8 của mình nếu

import React from 'react';
import GoogleMap from '../GoogleMap/GoogleMap';
import loadGoogleMaps from '../../../modules/load-google-maps.js';

class MapsComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { googleMapsReady: false };
  }

  componentWillMount() {
        loadGoogleMaps(() => {
          // Work to do after the library loads.
          this.setState({ googleMapsReady: true });
        });   
  }

  render() {
      return (
          
                {this.state.googleMapsReady ?  : ''}
      
    );
  }
}

6 là

import React from 'react';
import GoogleMap from '../GoogleMap/GoogleMap';
import loadGoogleMaps from '../../../modules/load-google-maps.js';

class MapsComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { googleMapsReady: false };
  }

  componentWillMount() {
        loadGoogleMaps(() => {
          // Work to do after the library loads.
          this.setState({ googleMapsReady: true });
        });   
  }

  render() {
      return (
          
                {this.state.googleMapsReady ?  : ''}
      
    );
  }
}

7, nghĩa là thư viện của chúng tôi đã được tải và sẵn sàng để sử dụng

Gọn gàng, phải không?

Tập lệnh src là gì?

Thuộc tính HTML dùng để chỉ định URL của tệp JavaScript bên ngoài . Tệp JavaScript bên ngoài được sử dụng để chạy trên cùng một tập lệnh trên một số trang trên trang web. Chúng tôi có thể lưu tệp JavaScript với phần mở rộng là. js.

Thẻ script trong JavaScript là gì?

Thẻ dùng để nhúng tập lệnh phía máy khách (JavaScript) . Phần tử

Làm cách nào để liên kết tệp JavaScript với HTML?

Chúng ta có thể liên kết JavaScript với HTML bằng cách thêm tất cả mã JavaScript bên trong tệp HTML . Chúng tôi đạt được điều này bằng cách sử dụng thẻ script đã được giải thích trước đó. Chúng ta có thể đặt thẻ ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân. ở trong phần đầu của HTML hoặc ở cuối phần thân.

Tập lệnh async src là gì?

Thuộc tính async là thuộc tính boolean. Khi xuất hiện, nó chỉ định rằng tập lệnh sẽ được thực thi không đồng bộ ngay khi có sẵn . Ghi chú. Thuộc tính async chỉ dành cho các tập lệnh bên ngoài (và chỉ nên được sử dụng nếu có thuộc tính src).

programming javascript

Lấy tập lệnh src trong javascript

Tập lệnh src là gì?

Thẻ script trong JavaScript là gì?

Làm cách nào để liên kết tệp JavaScript với HTML?

Tập lệnh async src là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội