Video học lập trình mỗi ngày

Trong quá trình làm việc, bạn có trường hợp phải add một file javascript như những thống kê của facebook, goole hay "Adding pixel tracking to a link". Bạn phải làm như thế nào? Hãy tham khảo qua bài viết này, và nếu nó hay thì hãy lưu lại cho lần tới.

Tôi vẫn nhớ lúc còn triển khai một dự án về tạo ra một playerjs như jwplayer.com vậy. Và đến phần tracking cho người dùng khi xem video. Ví dụ như đến giây or phút thứ n thì phải run một file pixel của facebook để thống kê lại người dùng xem nhiều vào lúc nào của video đó. Vì vậy mới có kiểu này.

Bài viết liên quan đến chủ đề Performance javascript ghé qua chơi không?

Load a JavaScript file

// Create new script element
const script = document.createElement('script');
[script.src](script.src) = '/path/to/js/file.js';

// Append to the \`head\` element
document.head.appendChild(script);

Mã code được thực thi khi file JavaScript được loaded

// Create new script element
...
script.addEventListener('load', function() {
    // The script is loaded completely
    // Do something
});

// Append to the \`head\` element
...

Load multiple JavaScript files in order

Giờ giả sử chúng ta có nhiều file javascript thì chúng ta làm thế nào?

Để làm điều đó, chúng ta phải tải tập lệnh đầu tiên và tải tập lệnh thứ hai khi tập lệnh đầu tiên được tải hoàn toàn. Và tiếp tục làm như vậy cho đến khi tất cả các tập lệnh được tải.

// Load a script from given \`url\`
const loadScript = function(url) {
    return new Promise(function(resolve, reject) {
        const script = document.createElement('script');
        [script.src](script.src) = url;

        script.addEventListener('load', function() {
            // The script is loaded completely
            resolve(true);
        });

        document.head.appendChild(script);
    });
};

// Perform all promises in the order
const waterfall = function(promises) {
    return promises.reduce(
        function(p, c) {
            // Waiting for \`p\` completed
            return p.then(function() {
                // and then \`c\`
                return c().then(function(result) {
                    return true;
                });
            });
        },
        // The initial value passed to the reduce method
        Promise.resolve(\[\])
    );
};

// Load an array of scripts in order
const loadScriptsInOrder = function(arrayOfJs) {
    const promises = arrayOfJs.map(function(url) {
        return loadScript(url);
    });
    return waterfall(promises);
}

Sau khi loadScriptsInOrder thì bạn muốn làm gì thì làm?

loadScriptsInOrder(\[
    '/path/to/file.js',
    '/path/to/another-file.js',
    '/yet/another/file.js',
\]).then(function() {
    // All scripts are loaded completely
    // Do something
})

Ref: dom.dev