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中的这些方法是保证你的项目不经过你同意锁定修改的极佳的做法。如果你是一个代码库的作者,很可能想锁定核心库某些部分来保证它们不被意外修改,或者想强迫允许扩展的地方继续存活着。如果你是一个应用程序的开发者,锁定应用程序的任何不想被修改的部分。这两种情况中,在全部定义好这些对象的功能之后,才能使用上述的锁定方法。一旦一个对象被锁定了,它将无法解锁。
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
以上就是JS中Polyfill注解与阻止修改的使用的详细内容,更多请关注其它相关文章!
上一篇: PHP小实例:抓取基本信息代码
下一篇: vue-router的脚手架使用
推荐阅读
-
微信小程序 image组件binderror使用例子与js中的onerror区别
-
微信小程序 image组件binderror使用例子与js中的onerror区别
-
Node.js中多进程模块Cluster的介绍与使用
-
thinkPHP框架中layer.js的封装与使用方法示例
-
node.js中debug模块的简单介绍与使用
-
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
-
Vue中JS动画与Velocity.js的结合使用
-
解决Django中修改js css文件但浏览器无法及时与之改变的问题
-
eclipse Java web项目数据库由oracle更改为mysql中遇到的问题(使用JPA注解)附上修改过程
-
import与export在node.js中的使用详解