angular的Dom操作
原文
https://www.jianshu.com/p/9d7249922bda
大纲
1、angular的DOM操作
2、为什么不能直接操作DOM?
3、三种错误操作DOM的方式
4、angular2如何DOM操作的机制?
5、正确操作DOM的方式
6、为什么需要ElementRef
7、使用ElementRef的代码实例及优化
8、代码资源
angular的DOM操作
angular2的设计目标本来就是要让浏览器和DOM独立。DOM是复杂的,因此使组件与它分离,会让我们的应用程序,更容易测试和重构。为了支持跨平台,Angular还通过抽象封装了不同平台的差异。
为什么不能直接操作DOM?
angular2采用AOT静态编译模式,这种形式下需要我们的模板类型必须是稳定和安全的,直接使用javascript和jquery语言是不稳定,因为他们的编译不会提前发现错误,所以angular2才会选择javascript的超集typescript语言(这种语言编译期间就能发现错误)。
三种错误操作DOM的方式
@Component({ ... })
export class HeroComponent {
constructor(private _elementRef: ElementRef) {} doBadThings() {
$('id').click(); //jquery
this._elementRef.nativeElement.xyz = ''; //原生的ElementRef
document.getElementById('id'); //javascript
}
}
angular2如何DOM操作的机制?
为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异。比如定义了抽象类 Renderer、Renderer2 、抽象类 RootRenderer 等。此外还定义了以下引用类型:ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。
正确操作DOM的方式
angular通过ElementRef实现跨平台,用Renderer实现视图应用相分离,想必也是一种很赞的设计模式。
为什么需要ElementRef
angular一直在做的一件事情就是降低视图层和应用层之间的耦合,在应用层直接操作DOM,会导致应用层和视图层之间强耦合,导致我们不能将应用运行在不同的环境中。比如令js能够实现多线程的webWorker,在webWorker中,却不能直接操作DOM,angular为我们封装了一个对象,叫做ElementRef,能够获取到视图层中的native对象,比如在浏览器中,native对象就是DOM对象。
export class ElementRef {
public nativeElement: any;
constructor(nativeElement: any) { this.nativeElement = nativeElement; }
}
使用ElementRef的代码实例及优化
1、简单使用实例
通过this.elementRef.nativeElement.querySelector()获取元素节点,然后对元素及节点设置样式。
2、优化1
在ngAfterViewInit生命周期钩子中对DOM元素进行样式的初始化设置
3、优化2
利用ViewChild来获取Child DOM对象的引用。
4、优化3
angular为我们提供了一个叫做Renderer的对象,它作为视图层和应用层的粘合剂,能够使我们把视图层和应用层做到最大程度的分离。
通过注入Renderer,我们可以轻松的操作DOM,并且对视图层和应用的分离做到最大限度。
代码资源
在这里我就不粘贴源码了,这样整篇的篇幅会很大,这里我就将大概的原理粘贴出来。如果对Dom操作的代码有兴趣的读者可以从我的git上查看。angular实例代码中的angular-dom项目里就是该篇博客中提及的代码实例。
最新文章
- ECS Linux 服务器公钥秘钥SSH登录
- php鼠标滚动加载
- Jquery鼠标滚动到页面底部自动加载更多内容,使用分页
- python正则表达式之元字符介绍
- bzoj2458: [BeiJing2011]最小三角形(分治+几何)
- Microsoft Visual C++ 2010(86) Redistributable不能安装完美解决
- [C++]VS2010功能设置
- [BZOJ 1053] [HAOI 2007] 反素数ant
- android把图片 视频 保存到相册
- es6的模块化编程
- NOIP2012疫情控制(二分答案+倍增+贪心)
- JavaScript设计模式(3)-工厂模式
- 框架开发之——AngularJS+MVC+Routing开发步骤总结——5.14
- 解决_CRT_SECURE_NO_WARNINGS警告
- MySQL使用过程中的报错处理(持续更新)
- SQL的修炼
- How the Microsoft Bot Framework Changed Where My Friends and I Eat: Part 1
- 系统API执行没效果,可以检查一下是否与 360安全卫士 有关?!
- 2017-12-15python全栈9期第二天第三节之使用while循环输出0到10
- 【算法】二分查找法&;大O表示法