关于 angular js 的坑
2015-06-08 09:53
344 查看
angular js 很好很强大,但是注意,angular js并不适合操作DOM,虽然在某个版本更新过之后,angular 内部自建了 jqLite 来方便操作DOM,意图取代jquery的位置,真是居心叵测。
其实 angular 最好的地方还是给我们提供了一个新的思维方式,如果你是个新手,想看看传说中的 MVC 是个啥,在 ember, backbong, angular...等等众多框架中犹豫不决,那么推荐先看看angular
当然坑是很多,由于马上 2.* 的版本要出现,所以自然 1.* 就会被慢慢淘汰,不过不妨碍你稍稍了解一下,且在面试中可以聊一聊这个
说一下 angular中的一个大坑,指令,坑在那里?
注意 h2 中我添加了一个指令 toggle-class,但是在 js代码中,我指定这个指令的时候 名字需要变成 toggleClass,为啥呢,也就是说横线分割命名和驼峰法命名,这两个命名方法都被限制死了,你换任何一种方法都会出错,即如果指令在 HTML中是 toggleClass,然后在 js 中是 toggleClass,就会出错,或者其他的命名法,都会出错,而且在浏览器控制台里没显示错误在哪儿的。
坑爹啊!!!!
google 强行把自己的命名规范加到我们身上了,自以为了不起,所以其实也许司徒正美君的话是正确的?
大坑2,注意我在 .directive 指令的 js代码里写了 addClass() 和 removeClass(),这两个方法是 ng 封装的 jquery方法,但是并没有全部封装,所以才叫 jqLite,所以在 elem.removeClass() 这里如果不给参数的话, elem的类就不会移除,这让jquery的长期用户蛋疼菊紧,而且 console 不报错,fuuuuuuuuuuuuuuuuuuc!
所以记得下次要这样写哦,elem.removeClass('bg-info'),给上参数,就可以了。
angular 想要画个大饼,其实已经给我感觉有点膨胀的控制不了了,有那么点目的不明确,有什么功能就往源码里加,什么都想封装,导致 angular 代码非常肥大。
如果你只取用里面的一部分代码,确实让你眼前一亮,但是你要是想控制它的全部,还是推荐你算了吧,没有必要。
所以入坑可以,不要陷得太深,毕竟 google 没有把这个 angular用到自己的 gmail或者其他重要的地方,意味着随时都可能会抛弃用户不再更新
其实 angular 最好的地方还是给我们提供了一个新的思维方式,如果你是个新手,想看看传说中的 MVC 是个啥,在 ember, backbong, angular...等等众多框架中犹豫不决,那么推荐先看看angular
当然坑是很多,由于马上 2.* 的版本要出现,所以自然 1.* 就会被慢慢淘汰,不过不妨碍你稍稍了解一下,且在面试中可以聊一聊这个
说一下 angular中的一个大坑,指令,坑在那里?
<div class="container" ng-controller="ccCtrl"> <h2 class="text-center" toggle-class>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h2> </div> <script src="js/angular.js"></script> <script type="text/javascript"> 'use strict' var app = angular.module('ccModule', []) app.controller('ccCtrl', ['$scope', function($scope){ }]) .directive('toggleClass', function(){ return function(scope, elem, attrs){ elem.bind('mouseenter', function(){ elem.addClass('bg-info') }) elem.bind('mouseleave', function(){ elem.removeClass() // 这里的 removeClass 并没有jquery那么强悍 }) } }) </script>
注意 h2 中我添加了一个指令 toggle-class,但是在 js代码中,我指定这个指令的时候 名字需要变成 toggleClass,为啥呢,也就是说横线分割命名和驼峰法命名,这两个命名方法都被限制死了,你换任何一种方法都会出错,即如果指令在 HTML中是 toggleClass,然后在 js 中是 toggleClass,就会出错,或者其他的命名法,都会出错,而且在浏览器控制台里没显示错误在哪儿的。
坑爹啊!!!!
google 强行把自己的命名规范加到我们身上了,自以为了不起,所以其实也许司徒正美君的话是正确的?
大坑2,注意我在 .directive 指令的 js代码里写了 addClass() 和 removeClass(),这两个方法是 ng 封装的 jquery方法,但是并没有全部封装,所以才叫 jqLite,所以在 elem.removeClass() 这里如果不给参数的话, elem的类就不会移除,这让jquery的长期用户蛋疼菊紧,而且 console 不报错,fuuuuuuuuuuuuuuuuuuc!
所以记得下次要这样写哦,elem.removeClass('bg-info'),给上参数,就可以了。
angular 想要画个大饼,其实已经给我感觉有点膨胀的控制不了了,有那么点目的不明确,有什么功能就往源码里加,什么都想封装,导致 angular 代码非常肥大。
如果你只取用里面的一部分代码,确实让你眼前一亮,但是你要是想控制它的全部,还是推荐你算了吧,没有必要。
所以入坑可以,不要陷得太深,毕竟 google 没有把这个 angular用到自己的 gmail或者其他重要的地方,意味着随时都可能会抛弃用户不再更新
相关文章推荐
- JavaScript中的bold()方法使用详解
- 那些年我们追过的javascript框架
- 详解JavaScript中的blink()方法的使用
- 在Javascript中处理字符串之big()方法的使用
- Ext.Grid 刷新后选中指定行
- JavaScript面试问题:事件委托和this
- 有趣的JavaScript原生数组函数
- 通过<frameset>和<iframe>看JavaScript中window对象parent、self、top的区别
- javascript 获取文档/屏幕的Width||Height
- 出色的 JavaScript API 设计秘诀
- JavaScript高级用法三之浏览器对象
- Jsp&Servlet笔记
- JavaScript中的anchor()方法使用详解
- js特效示例
- javascript 实现tab菜单切换
- 上传图片显示预览js代码
- javascript理解闭包概念
- Javascript(函数)整理
- 由几道JS笔试题引发的知识点探究二——强制类型转换
- JavaScript中的anchor()方法使用详解