Method 4: Lazy function definition
Now, here's the reason you read this article:
Copy the codeThe code is as follows:
var foo = function() {
var t = new Date();
foo = function() {
return t;
};
return foo();
};
When foo is called for the first time, we instantiate a new Date object and reset foo to a new function that contains the Date object in its closure. Before the first call ends, the new function value of foo is also called and provides the return value.
The next foo call will simply return the value t retained in its closure. This is a very quick lookup, especially if the conditions of the previous examples are very numerous and complex, it will appear very efficient.
Another way to figure out this pattern is that the first call to foo by the outer function is a promise. It ensures that the first call will redefine foo as a very useful function. Generally speaking, the term "guarantee" comes from Scheme's lazy evaluation mechanism. Every JavaScript programmer should really learn Scheme because it has a lot of functional programming-related things, and these things will appear in JavaScript.
Determine the scrolling distance of the page
When writing cross-browser JavaScript, different browser-specific algorithms are often wrapped in an independent JavaScript function. This allows standardizing the browser API by hiding browser differences and making it easier to build and maintain JavaScript with complex page features. When the wrapping function is called, the appropriate browser-specific algorithm is executed.
In the drag and drop library, it is often necessary to use the cursor position information provided by the mouse event. The cursor coordinates given by the mouse event are relative to the browser window rather than the page. Add the distance from the page scrolling to the mouse’s window coordinates to get the mouse’s coordinates relative to the page. So we need a function that feedbacks page scrolling. For demonstration purposes, this example defines a function getScrollY. Because the drag and drop library will continue to run during dragging, our getScrollY must be as efficient as possible.
However, there are four different browser-specific page scrolling feedback algorithms. Richard Cornford mentioned these algorithms in his feature detection article article. The biggest trap is that one of these four page scroll feedback algorithms uses. The JavaScript library is usually loaded in the <head> of HTML documents, and does not exist at the same time. Therefore, when loading the library, we cannot use feature detection to determine which algorithm to use.
Taking these issues into consideration, most JavaScript libraries will choose one of the following two methods. The first option is to use browser sniffing to create an efficient and concise getScrollY for the browser. The second better option is to use feature checks to determine the appropriate algorithms on each call. But the second option is not efficient.
The good news is that getScrollY in the drag-and-drop library will only be used when the user interacts with elements of the page. If the element already appears on the page, it will also exist at the same time. The first call of getScrollY, we can use lazy function definition patterns combined with feature checks to create efficient getScrollY.
Copy the codeThe code is as follows:
var getScrollY = function() {
if (typeof == 'number') {
getScrollY = function() {
return ;
};
} else if ((typeof == 'string') &&
(('CSS') >= 0) &&
() &&
(typeof == 'number')) {
getScrollY = function() {
return ;
};
} else if (() &&
(typeof == 'number')) {
getScrollY = function() {
return ;
}
} else {
getScrollY = function() {
return NaN;
};
}
return getScrollY();
}
Previous page123Next pageRead the full text