欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JS中Polyfill注解与阻止修改的使用

程序员文章站 2022-03-19 07:50:42
...
这次给大家带来JS中Polyfill注解与阻止修改的使用,JS中Polyfill注解与阻止修改使用的注意事项有哪些,下面就是实战案例,一起来看一下。

随着ES5和和HTML5的特性逐渐被各种浏览器实现。JS polyfills(也称为shim)变得流行起来了。 polyfill是对某种功能的模拟,这些功能在新版本的浏览器中有完整的定义和原生实现。例如,ES5为数组增加了forEach()函数。该方法在 ES3中有模拟实现,这样就可以在老版本浏览器中用上这个方法了。 polyfills的关键在于它们的模拟实现要与浏览器原生实现保持完全兼容。正是由于少部分浏览器原生实现这些功能,才需要尽可能的检测不同情况下它们这些功能的处理是否符合标准。

为了达到目的,polyfills经常会给非自己拥有的对象新增一些方法。我不是polyfills的粉丝,不过对于别人使用它们,我表示理解。相相比其他的对象修改而言,polyfills是有界限的,是相对安全的。因为原生实现中是存在这些方法并能工作的,有且仅当原生方法不存在时,polyfills才新增这些方法,并且它们和原生版本方法的行为是完全一致的。

polyfills的优点是,如果浏览器提供原生实现,可以非常轻松地移除它们。如果你使用了polyfills,你需要搞清楚哪些浏览器提供了原生实现。并确保polyfills的实现和浏览器原生实现保持完全一致,并再三检查类库是否提供验证这些方法正确性的测试用例。polyfills的缺点是,和浏览器的原生实现相比,它们的实现可能不精确,这会给你带来很多麻烦,还不如不实现它。

从最佳的可维护性角度而言,避免使用polyfills,相反可以在已存在的功能之上创建门面来实现。这种方法给了你最大的灵活性,当原生实现中有bug时这种做法(避免使用polyfills)就显得特别重要。这种情况下,你根本不想直接使用原生的API,不然无法将原生实现带有的bug隔离开来。

ES5引入了几个方法来防止对对象的修改。理解这些能力很重要,因此现在可以做到这样的事情:锁定这些对象,保证任何人不能有意或无意地修改他们不想要的功能。当前(2018年)的浏览器都支持ES5的这些功能,有三种锁定修改的级别:

防止扩展(Object.preventExtension()):禁止为对象“添加”属性和方法,但已存在的属性和方法是可以被修改或删除

密封(Object.seal()):类似“防止扩展”,而且禁止为对象“删除”已存在的属性和方法

冻结(Object.freeze()):类似“密封”,而且禁止为对象“修改”已存在的属性和方法(所有字段均只读)

每种锁定的类型都拥有两个方法:一个用来实施操作,另一个用来检测是否应用了相应的操作。如防止扩展,Object.preventExtension()和Object.isExtensible()两个函数可以使用。你可以在MDN上查看相关方法的使用,这里就不赘述了。

使用ES5中的这些方法是保证你的项目不经过你同意锁定修改的极佳的做法。如果你是一个代码库的作者,很可能想锁定核心库某些部分来保证它们不被意外修改,或者想强迫允许扩展的地方继续存活着。如果你是一个应用程序的开发者,锁定应用程序的任何不想被修改的部分。这两种情况中,在全部定义好这些对象的功能之后,才能使用上述的锁定方法。一旦一个对象被锁定了,它将无法解锁。

相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!

推荐阅读:

web开发中怎样检测原始值

为什么web开发中需要避免使用全局变量

以上就是JS中Polyfill注解与阻止修改的使用的详细内容,更多请关注其它相关文章!