如果你构建了一个 AngularJS 自定义指令,在代码中使用 jQuery 是不是不好的做法



有时当我构建一个 Angular 自定义指令时,我会听到一个注释,如果它是一个 Angular 指令,它不应该在其中使用 jQuery 代码,因为它应该以 AngularJS 的方式构建。

我认为这可能是真的,但这可能吗? 例如,如果指令模板有 2 个部分,一个是单词,一个是小图像(例如评论星号),所以你需要模板中的 2 个部分,标记为 .description.star-images - 那么如果您需要对模板或在其中执行某些操作,您应该需要使用 $.find(".description") 在模板内查找该部分。 jqLite 无法正常工作,因为 jqLite 的find()仅限于标签。

另一个例子是,如果你有一个没有模板的指令,而只是将按键限制为数字,比如输入框,该怎么办? 所以你不希望你的指令有一个模板作为<input type="text">,而只是希望指令的用户说<input type="text" digits-input-only>你的指令被称为digitsInputOnly。 那么在这种情况下,是不是不需要用jQuery的elem.on()或者elem.bind()来监听按键或按键事件,当按键代码不是数字时,再做一个event.preventDefault()? 那么在这种情况下,它必须使用jQuery吗?

或者还有其他方法可以做到这一点,这样你真的不需要使用jQuery?

作为 jQuery 的长期用户,在学习 angular 时很容易依靠 jQuery,但是提到的任何情况都不难解决没有它......在大多数情况下实际上更容易

尝试从您的项目中完全删除jQuery以避免诱惑,您将很快意识到您真正需要它的数量很少

核心指令提供了所需的大多数事件处理程序,angular.element (jQlite)还具有几乎接受任何事件名称的bind()$document.bind('contextmenu', function(event)例如。

核心 dom 事件指令都允许您在$event传递诸如event.preventDefault()

<input ng-keydown="somefunc($event)">

对于遍历,您始终可以使用本机方法来查询 DOM 以查找元素并将该元素(或集合)包装angular.element(),就像使用 $() 一样。然而,你越关注数据模型和核心指令,你就越不需要实际做 dom 遍历。

至于插件...在指令中使用jQuery插件并不是罪过。有一些非常常用的角度模块是众所周知的jQuery插件的包装器......全日历和数据表是一对很快想到的,还有众多日期选择器。然而,您经常会发现以前可能依靠插件来执行简单的任务,而 angular 本身就很容易,并且您不再使用此类插件

使用

jQuery 插件的罪过是使用那些实际上更容易使用角度本身实现(和测试)的插件

总之,最大的调整是学习如何先关注数据模型,然后再考虑 DOM。此外,非常熟悉 API 参考的左侧菜单,其中列出了所有核心指令和服务,这是一个巨大的帮助

最新更新