Easy Tutorial
❮ Android Tutorial Decompile Apk Get Code Resources C Static Effect ❯

JavaScript Developer's Toolbox: Highly Practical

Category Programming Techniques

Since the rise of HTML5, the entire Web platform has made significant progress, and people have started to regard JavaScript as a language capable of creating complex applications. Many new APIs have emerged, and articles about how browsers apply these technologies have also surged.

As a scripting language, JavaScript was initially created to enhance the performance capabilities of web pages, and now JavaScript is almost used everywhere you can think of. With the continuous improvement of the industry's technical capabilities, JavaScript can now run on the server side and can also be compiled into native mobile application code. Today's JavaScript developers are part of a rich ecosystem, and they can choose from hundreds of IDEs, tools, and frameworks at will. Due to the overwhelming number of options and resources, some developers may also feel unsure about where to start learning. I am happy to discuss and outline the situation faced by modern JavaScript developers, first briefly introducing the history of JavaScript, and then covering some of the most popular frameworks, tools, and IDEs currently available.

A Quick Look Back at History

Let's start a quick journey. Back in 1995, Netscape Navigator and Internet Explorer 1.0 were the only choices for browsers. Websites were filled with annoying flashing text and too many GIF images. Loading a page with a lot of rich content via a dial-up network could take up to two minutes. Then a web language appeared that allowed these old websites to execute client-side code. This year was the birth of JavaScript.

The websites created 20 years ago did not use much JavaScript, and of course, they did not fully explore the potential of this language. Occasionally, they would pop up a dialog box to tell you some information, or display news in a box by scrolling text, or save your username with cookies so that when you visit the website again after a few months, your name can be directly displayed. There were no job positions in the workplace that took JavaScript as the main development language, and it was very fortunate to be able to write some JavaScript at work. In short, the application of JavaScript on websites at that time was to play some tricks in the DOM.

Nowadays, you can basically see the figure of JavaScript everywhere. From Bootstrap to ReactJS, Angular, general jQuery, and even Node.js running on the server side, JavaScript has become one of the most important and popular web languages.

Frameworks

One of the biggest changes in JavaScript since its inception is the way it is applied. The days of calling those awkward document.GetElementById methods and creating cumbersome XMLHttpRequest objects are gone. Instead, the basic functions are abstracted through various helper libraries, making JavaScript easier for developers to use. This is also one of the main reasons why JavaScript can be seen everywhere today.

jQuery

jQuery was launched by John Resig in 2006, providing a rich set of tools that abstract and simplify various obscure and mysterious JavaScript commands and methods. The simplest way to show this tool is through code examples.

Creating an AJAX request with pure JavaScript:

function loadXMLDoc() {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 ) {
           if(xmlhttp.status == 200){
               alert("success");
           }
           else if(xmlhttp.status == 400) {
              alert("error 400")
           }
           else {
               alert("something broke")
           }
        }
    }

    xmlhttp.open("GET", "test.html", true);
    xmlhttp.send();
}

Source: Stack Overflow

Creating an AJAX request with jQuery:

$.ajax({
    url: "test.html",
    statusCode: {
        200: function() {
            alert("success");
        },
        400: function() {
            alert("error 400");
        }
    },
    error: function() {
        alert("something broke");
    }
});

jQuery makes complex JavaScript functions easy to use, and DOM manipulation is a piece of cake. As a result, jQuery became one of the earliest widely used JavaScript frameworks, and the idea of abstracting JavaScript became the foundation for the construction of other various frameworks.

AngularJS

AngularJS, often also called "Augular," made its debut in 2009. It is a framework created by Google with the goal of simplifying the creation of single-page applications (SPAs). Similar to jQuery, its Source: Atom

Build and Automation Tools

Modern JavaScript projects are tending to become increasingly complex, with an ever-growing number of changing parts. This is not to say that the language or the corresponding tools are inefficient, but rather a direct consequence of the richness, cool experiences, and complexity of the web applications being created today. When working on large projects, you often have to perform many repetitive tasks, whether you intend to check in code or build it into a production environment. These tasks may include merging, compressing, compiling LESS or SASS CSS files, or even running tests. Manually completing these tasks is not only frustrating but also inefficient. A better approach is to automate these tasks through some kind of build tool that supports them.

Bundling and Minification

Most of the JavaScript and CSS you write will be shared across multiple web pages. Therefore, you are likely to put this content into separate .js and .css files, and then reference these files in the web pages. The result of this approach is that the user's browser needs to send an HTTP request for each file to fully display your web reference (or at least verify that the files have changed).

The cost of HTTP requests is high. In addition to the size of the request itself, you will also pay for network latency, HTTP headers, and cookies. The design purpose of bundling and compression tools is to reduce or even completely eliminate the impact of these requests.

Bundling

To improve the performance of web code, the simplest thing developers can do is to bundle the code. In the bundling process, multiple JavaScript or CSS files will be merged into a single JavaScript or CSS file. It feels like connecting multiple individual panoramic photos to complete a continuous single photo. By merging JavaScript files with CSS files, we can eliminate a large part of the HTTP request overhead.

Minification

JavaScript developers also have a way to improve performance by compressing the just-merged code. The compression process can compress JavaScript and CSS code into the smallest possible form while ensuring that the functionality remains unchanged. For JavaScript, this means renaming variables to meaningless single characters and removing all whitespace and formatting characters. For CSS, since the page style depends on the names of variables, it usually only removes formatting characters and whitespace. Compression can greatly improve network performance because it reduces the number of bytes in each HTTP response.

Uncompressed AJAX JavaScript code, the same as the code shown above:

$.ajax({
    url: "test.html",
    statusCode: {
        200: function() {
            alert("success");
        },
        400: function() {
            alert("error 400");
        }
    },
    error: function() {
        alert("something broke");
    }
});

The same code after compression:

$.ajax({url:"test.html",statusCode:{200:function() {alert("success");},
400:function(){alert("error 400");}},error:function(){alert("something broke");}});

Note that I divided the compressed output into two lines just to make it more convenient to read in the article, but in fact, the output after compression is usually only one line.

The Timing of Bundling and Compression

Generally speaking, the steps of bundling and compression are only performed in the production environment. The reason for this is to allow you to debug the original code that includes formatting characters and line numbers in the local or development environment. Debugging the compressed code shown above will be very difficult because all the code is squeezed into one line. Moreover, the compressed code will become completely unreadable, and you will find it completely useless when trying to debug, and it will make you feel very frustrated.

Source Map Files

Sometimes, some bugs in the code can only be reproduced in the production environment. In this case, when you need to debug some issues, the compressed code has become a problem. Fortunately, JavaScript supports source map files, which can "map" between the compressed code and the original code. These code mapping files are generated by some of the construction tools mentioned below during the compression phase. Subsequently, your JavaScript debugger can use these mapping files to provide you with clear and readable code for debugging. You should try to publish the mapping files with the actual code as much as possible, so that you can debug the code when some functions fail.

Code Linting

Code linting tools will check for common errors and issues in your code according to predefined formatting rules. The errors reported by these tools are usually similar to the following: using tab indentation instead of spaces, omitting semicolons at the end of the line, or using braces without if, for, or while statements. Most IDEs provide code linting tools, and other IDEs also allow users to install code linting plugins themselves.

The two most popular JavaScript linting tools are JSHint and JSLint. JSLint is a -JSHint

Build and Automation Tools

-NPM

-Grunt

-Gulp

Practical Resources

-Stack Overflow

Source: http://www.infoq.com/cn/articles/modern-javascript-toolbox

**Click to Share Notes

Cancel

-

-

-

❮ Android Tutorial Decompile Apk Get Code Resources C Static Effect ❯