The use of Polyfill annotations and preventing modifications in JS

This time I will bring you the use of Polyfill annotations and prevention of modifications in JS. What are the precautions for using Polyfill annotations and prevention of modifications in JS. The following is a practical case, let's take a look.

As the features of ES5 and HTML5 are gradually implemented by various browsers. JS polyfills (also known as shims) have become popular. A polyfill is a simulation of certain functions that are fully defined and natively implemented in new versions of browsers. For example, ES5 adds the forEach() function for arrays. This method has a mock implementation in ES3, so you can use this method in older browsers. The key to polyfills is that their mock implementation remains fully compatible with the browser's native implementation. It is precisely because a small number of browsers implement these functions natively that it is necessary to check whether the processing of these functions in different situations meets the standards as much as possible.

In order to achieve their goals, polyfills often add some methods to objects that are not owned by themselves. I'm not a fan of polyfills, but I understand others using them. Compared with other object modifications, polyfills are limited and relatively safe. Because these methods exist and work in the native implementation, polyfills add these methods only when the native methods do not exist, and their behavior is exactly the same as the native version methods.

The advantage of polyfills is that they can be removed very easily if the browser provides a native implementation. If you use polyfills, you need to find out which browsers provide native implementations. And ensure that the implementation of polyfills is completely consistent with the browser's native implementation, and double-check whether the class library provides test cases to verify the correctness of these methods. The disadvantage of polyfills is that their implementation may be imprecise compared to the browser's native implementation, which can cause you a lot of trouble, and you might as well not implement it.

For best maintainability, avoid using polyfills and instead create facades on top of existing functionality. This approach gives you the most flexibility, which is especially important when there are bugs in the native implementation (avoiding polyfills). In this case, you don't want to use the native API directly, otherwise you won't be able to isolate the bugs in the native implementation.

ES5 introduces several methods to prevent modifications to objects. It's important to understand these capabilities so you can now do something like this: lock these objects down so that no one can modify functionality they don't intend, intentionally or unintentionally. Current (2018) browsers support these features of ES5, and there are three levels of locking modifications:

Prevent extension (

Object.preventExtension()): prohibit "adding" to objects Properties and methods, but existing properties and methods can be modified or deleted

Sealing (Object.seal()): similar to "prevent expansion", and prohibits "delete" for objects "Existing properties and methods

Freeze (Object.freeze()): similar to "sealing", and it is prohibited to "modify" existing properties and methods for the object (all fields are read-only)

Each lock type has two methods: one to implement the operation, and the other to detect whether the corresponding operation has been applied. To prevent expansion, the two functions Object.preventExtension() and Object.isExtensible() can be used. You can check the use of related methods on MDN, so I won’t go into details here.

Using these methods in ES5 is a good way to ensure that your project does not lock changes without your consent. If you are the author of a code base, you probably want to lock down certain parts of the core library to ensure that they are not accidentally modified, or to force areas that allow extensions to survive. If you are an application developer, lock down any parts of the application that you don't want to be modified. In both cases, the above locking methods can only be used after the functions of these objects have been fully defined. Once an object is locked, it cannot be unlocked.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to detect original values ​​in web development

##Why you need to avoid using global variables in web development

The above is the detailed content of The use of Polyfill annotations and preventing modifications in JS. For more information, please follow other related articles on the PHP Chinese website!