`

使用了angularJS就离不开jQuery

 
阅读更多
引言:angularjs是一个中等重量级的前端开发框架
HTML是一门很好的为静态文本设计的语言,但要构建动态的web应用它就显的乏力了。通常,我们使用以下技术来解决静态网页技术在构建动态应用上的不足:

1.类库:类库是一类函数的集合,它能帮助你写web应用。这里起主导作用是你的代码,由你来决定何时使用类库。典型的类库,例如prototype、jquery等。

2.框架:框架式一种特殊的、已经实现的web应用,你只需要填充具体的业务逻辑。这里框架是起主导作用的,由它根据具体的逻辑来调用你的代码。典型的框架例如knockout,sproutcore, YUI等。angularjs也是其中之一。

框架又有轻重之分。我对轻重的判断标准是,是否需要很多的第三方类库来帮助你实现功能。显然,backbone这种属于轻量级框架,它简单易用,专注于前端Mvc的实现,故而你还需要很多第三方类库(至少jquery)来完成dom操作、UI等各种各样的内容。Yui、dojo属于重型框架,他们的作者企图搞出一个森罗万象的框架+组件库,包括代码动态调用、各种UI组件都包含在内,学习成本较高,但是一旦精通,至少这个项目别无所求。从这个角度讲,轻量级框架好比毛坯房,还需要各种工具做装修,但是对于开发者来说也更灵活。重量级框架好比精装修的房间,你只需要的是适应它,但如果要自己做出大刀阔斧的修改,那就稍微有点伤经动骨了。

angularjs,在我看来是介于以上两类之间,是个中等重量级的框架。即不像backbone那么简单,也不像dojo和Yui那么包罗万象。很多时候,妄图包罗万象,往往会出现很多子模块的质量高不成低不就,并且修改起来较为困难。过分精简,则框架内容单薄需要写的内容太多。angularjs这种相对中庸的风格,则非常符合我的需求。目前,AngularJS三个我认为最为精妙的组件就是数据绑定(Scope),指令(Directive)和依赖注入(Dependency Injection),表现得非常好。相对而言,它的UI组件和动画则是弱项。可以说,选择了angularjs,就意味着选择了jquery式的组件库方式来弥补它的不足,要完成一个web应用必须跟第三方类库打交道。

现在已经有许多针对angularjs写的UI插件,有的是结合了bootstrap,有的是结合了jquery, 虽然不太完善,都很值得参考:http://angular-ui.github.io/


与jquery类库的协作

第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了。它灵活的dom操作,让很多web开发人员欲罢不能。再加上已经很成熟的jquery UI 库和大量jquery 插件,几乎是一个取之不尽用之不竭的宝库。然而,它是否能与angularjs结合呢?

很多angularjs原教旨主义者对此持否定态度。他们认为,既然已经使用了angularjs做web应用框架,那就必须避免其他类库的干扰,做纯净的MvvM模式应用。任何类似jquery的dom操作,都是不洁的。把所有和界面相关的, 比如dom操作, 都放在directive中, 这样页面中directive而没有代码,跟JSF思想一致。MVVM,DSL,组件化的思想这才是web的趋势。嗯,想法很好,原教旨主义者想法都是这么纯洁。但事实情况是,使用了angularjs我们就离不开jquery。

众所周知,angularjs里面事实上已经内置了jquery lite.,而且angularjs源码中很多方法直接就是使用jquery方法。例如angularjs的事件绑定机制。既然先知们都在用,我们又何苦不用?组件化的思想没有错,但没必要因此把自己的手脚绑住。唯一要注意的问题是,不要用jquery的代码破坏了angularjs的结构。对此我的原则如下,不足之处还请指出:

    (1)模块划分、服务、路由、依赖注入等重要方面上都得使用angularjs的方式,只有某些具体内容(通常是一些Ui)才使用jquery。
    (2)避免在controller里面写了一堆直接操作dom元素的 jquery代码。使用angularjs的模板绑定机制。
    (3)常用的组件要用angularjs的方法抽取出来,但组件具体实现则不必纠结于是否使用jquery及其插件。
    (4)使用第三方类库时,在变量和函数命名时有特殊标记(通常是加上这个类库名的缩写)。

jquery,更是建议作为angularjs的依赖,先于angularjs加载进来。

事实上,选择了angularjs这样的框架中德中等重量级选手,就意味着你必须添加其他类库。而jquery,更是建议作为angularjs的依赖,先于angularjs加载进来。因为在查看angularjs API的时候,我已经发现,其中许多功能,事实上是依赖于jquery的。典型的例子,就是官网的ng-blur指令。
〈input type="text" ng-model="name" ng-blur="checkname()" 〉

ng-blur指令,是在焦点离开某个元素时触发的指令。对于上例,即在焦点离开该文本输入框时,触发checkname()函数。

看起来很简单,但是你如果真的使用了这个指令,你就会发现它根本不起效果。在仔细查看文档后,我才发现这实际是先知们使用jquery的blur方法实现的函数(而且事实上根本没有真正实现并放在当前的版本里)。那么就算我们想写一个,离开jquery原生库是不行的,因为blur方法并未封装到angularjs内带的jquery lite里。换句话说,必须先载入完整的jquery才能使用。于是,我干脆自己写了一个标签:
/*
 * angular directive onBlur
 *
 * @description my ng-blur
 * @require jquery
 */
$compileProvider.directive('onBlur', function() {
    return {
        restrict : 'A',
        link : function(scope, elm, attrs) {
            elm.bind('blur', function() {
                scope.$apply(attrs.onBlur);
            });
        }
    };
});

这已经很好了。

但是还不够完美。由于$apply方法接受函数的问题,所以直接像上面这样写,有可能导致angularjs运行时报错:$apply already in progress

避免这个问题的发生,则需要对$apply方法进行加工:
/* factory function safeApply
 *
 * @description If you find yourself triggering the '$apply already in progress' error while developing with Angular.JS
 * (for me I find I hit most often when integrating third party plugins that trigger a lot of DOM events),
 * you can use a 'safeApply' method that checks the current phase before executing your function.
 *
 * @param scope, the action scope, mostly is the topmost controller
 * @param fn, the function which you want to apply into scope
 * @see  https://coderwall.com/p/ngisma
 */.factory('safeApply', function($rootScope) {
    return function(scope, fn) {
        var phase = scope.$root.$$phase;
        if (phase == '$apply' || phase == '$digest') {
            if (fn && ( typeof (fn) === 'function')) {
                fn();
            }
        } else {
            scope.$apply(fn);
        }
    }
});

那么之前的onblur标签,就应该改为:
/*
 * angular directive onBlur
 *
 * @description my ng-blur
 * @require jquery
 */
$compileProvider.directive('onBlur', function(safeApply) {
    return {
        restrict : 'A',
        link : function(scope, elm, attrs) {
            elm.bind('blur', function() {
                safeApply(scope, attrs.onBlur);
            });
        }
    };
});

以上代码我已经加入了自己的angular_extend模块,在自己的项目中使用了,效果很好。


将jquery 插件用angularjs的方式封装成组件的例子

icheck是一个jquery插件,用于跨浏览器美化Checkbox和Radio按纽。关于它的介绍,在http://www.bootcss.com/p/icheck/

一般来说,它的使用方法是在dom载入后加一段jquery代码:
$('input').iCheck({
    labelHover : false,
    cursor : true,
    checkboxClass : 'icheckbox_square-blue',
    radioClass : 'iradio_square-blue',
    increaseArea : '20%'
});

但是既然要放在我们的项目里,就不能到处塞这种直接操作dom的jquery代码,既不美观,也不易维护。按照之前所说的原则,最好将其封装成angular指令的模式,放在公共模块里来调用。这里我将我新建的指令命名为ng-icheck。如此,我们只要写在某个checkbox或者radio的html标签里加上一句ng-ickeck即可。具体实现如下:
/*
 * angular directive ng-icheck
 *
 * @description icheck is a plugin of jquery for beautifying checkbox & radio, now I complied it with angular directive
 * @require jquery, icheck
 * @example <input type="radio" ng-model="paomian" value="kangshifu" ng-icheck>
 *          <input type="checkbox" class="icheckbox" name="mantou" ng-model="mantou" ng-icheck checked>
 */
$compileProvider.directive('ngIcheck', function($compile) {
    return {
        restrict : 'A',
        require : '?ngModel',
        link : function($scope, $element, $attrs, $ngModel) {
            if (!$ngModel) {
                return;
            }
            //using iCheck
            $($element).iCheck({
                labelHover : false,
                cursor : true,
                checkboxClass : 'icheckbox_square-blue',
                radioClass : 'iradio_square-blue',
                increaseArea : '20%'
            }).on('ifClicked', function(event) {
                if ($attrs.type == "checkbox") {
                    //checkbox, $ViewValue = true/false/undefined
                    $scope.$apply(function() {
                        $ngModel.$setViewValue(!($ngModel.$modelValue == undefined ? false : $ngModel.$modelValue));
                    });
                } else {
                    // radio, $ViewValue = $attrs.value
                    $scope.$apply(function() {
                        $ngModel.$setViewValue($attrs.value);
                    });
                }
            });
        },
    };
});

在以上代码中值得注意的是:使用了icheck插件后,会生成一个美化过的div覆盖在原来的checkbox或者radio之上,而原来的checkbox或者radio会被影藏。故而,当我们点击它们时,不会直接触发事件,使得绑定到checkbox或者radio上的model值改变。所以我们这里需要重新绑定事件,使用
$ngModel.$setViewValue()

方法来给model赋值。具体逻辑,则相根据checkbox和radio而不同。详见以上代码。

由于以上代码写在我的项目中的通用模块common_angular_component.js里,故而在调用了该通用模块的页面里,直接使用ng-icheck指令即可实现ickeck的美化效果,同时避免了大量重复的jquery代码的出现。
<input type="radio" ng-model="paomian" value="kangshifu" ng-icheck>
<input type="checkbox" name="mantou" ng-model="mantou" ng-icheck checked>


本文固定链接: http://www.storagelab.org.cn/zhangdi/2013/09/09/angularjs%e9%a1%b9%e7%9b%ae%e5%ae%9e%e6%88%98%ef%bc%8103%ef%bc%9aangularjs%e4%b8%8e%e5%85%b6%e4%bb%96%e7%b1%bb%e5%ba%93%e7%9a%84%e5%8d%8f%e4%bd%9c/
分享到:
评论

相关推荐

    jqueryupload上传控件

    在Web开发中,文件上传功能是不可或缺的一部分,无论是用户上传图片、文档还是其他类型的数据,都离不开这一关键功能。jQueryUpload控件作为一个强大且易用的上传解决方案,深受开发者喜爱。本文将深入解析jQuery...

    一套超漂亮基于jquery的后台HTML模板,包含登陆页和后台首页

    3. CSS3:美化页面离不开CSS3,如过渡、动画、阴影、渐变、媒体查询等,确保在不同设备和屏幕尺寸上呈现良好。 4. 响应式设计:考虑到多设备兼容性,后台模板可能采用了响应式布局,使用媒体查询来适应不同屏幕大小...

    H5-JavaScript-CSS-HTML:Web前端角(Angularjs,Reactjs,Vuejs,Ember,JQuery,其他...)

    在现代Web开发中,前端框架和技术的选择至关重要,它们极大地影响着网站的...HTML5和CSS3是现代Web开发的基础,无论选择哪种框架,都离不开它们的支撑。了解和掌握这些技术,对于成为一位优秀的Web前端开发者至关重要。

    从网页制作到前端工程师难吗.docx编程资料

    无论是简单的网页动态效果还是复杂的Web应用程序,都离不开JavaScript的支持。 ##### jQuery - **简介**:jQuery是一个非常流行的JavaScript库,它简化了许多常见的操作,如DOM元素的选择、动画效果的实现以及Ajax...

    精选西方后台模版

    3. 表单组件:后台管理离不开数据录入,表单组件如输入框、下拉选择、日期选择器、复选框、单选按钮等,需设计得既实用又易于操作。 4. 模态框与提示:模态框用于显示弹出式窗口,如确认对话框、信息提示等;提示则...

    Ajax in action 配书源码

    2. **JavaScript基础**:理解Ajax离不开对JavaScript的熟练掌握,因为Ajax主要由JavaScript实现。源码中可能包括事件处理、DOM操作、函数封装等方面的内容,这些都是编写Ajax应用的基础。 3. **JSON与XML**:虽然...

    嘟嘟狗网上家园Ajax系统.

    1. **JavaScript基础**:Ajax离不开JavaScript的支持。JavaScript是客户端脚本语言,用于控制网页的行为。在Ajax中,JavaScript负责发起HTTP请求,处理服务器返回的数据,并动态更新DOM(Document Object Model)...

    java web 2.0架构开发与项目实战 源代码01

    7. **JavaScript框架**:在Web 2.0中,富客户端应用的开发离不开JavaScript框架,如jQuery、Dojo、Prototype和AngularJS等。这些框架简化了DOM操作,提供了动画效果,并支持异步数据交换。 8. **CSS和响应式设计**...

    Ajax for Web Application Developers

    Ajax技术离不开JavaScript,用于处理用户交互、构建和修改网页内容。Document Object Model (DOM) 是HTML和XML文档的结构化表示,JavaScript可以遍历、添加、删除或修改DOM元素,实现页面动态更新。 ### 4. 数据...

    武功粗布电商平台的设计与实现.pdf

    中国已经成为网购的庞大市场,人们的生活中越来越离不开网络购物。然而,武功县手工粗布作为一种传统手工艺品,虽然具有吸汗透气、舒适止痒、抗静电等优点,但其销售主要以自产自销为主,缺乏一个有效的平台来连接...

    JAVA Web上主要的应用介绍

    Java Web开发也离不开前端技术的支持,如JavaScript、jQuery、AngularJS、React等。这些库和框架提供了丰富的交互效果和功能,与后端Java Web服务紧密结合,共同构建出完整的Web应用程序。 最后,我们提到容器,如...

    ajax技术 局部更新内容

    2. **JavaScript**:Ajax技术离不开JavaScript,它负责创建XMLHttpRequest对象,发送HTTP请求,处理服务器返回的数据,并更新DOM(Document Object Model)来显示新内容。 3. **XMLHttpRequest对象**:这是Ajax的...

    常用web开发元素6

    Web开发离不开Web服务器,它们负责接收HTTP(超文本传输协议)请求并返回响应。理解HTTP方法(GET、POST、PUT、DELETE等)以及状态码(200、404、500等)对于调试和优化Web应用至关重要。 5. Java与Servlets: ...

    AJAX小程序

    2. **JavaScript**:AJAX的执行离不开JavaScript,通过编写JS代码来创建、初始化和操作XMLHttpRequest对象,实现请求的发送、状态的监控以及数据的解析。 3. **JSON**:虽然名称中包含XML,但实际应用中,AJAX更多...

    Ajax技术

    1. **JavaScript引擎**:Ajax的运行离不开JavaScript引擎,它解析和执行JavaScript代码,是Ajax交互的核心驱动力。 2. **XMLHttpRequest对象**:这是Ajax与服务器进行异步通信的关键,它提供了一种在页面不刷新的...

    网络课程代码___________好

    2. **视频播放**:在线教育离不开视频播放功能,这通常涉及到HTML5的`<video>`标签,支持MP4、WebM、Ogg等格式。为了确保跨浏览器兼容性和流畅播放,可能需要引入如Video.js、 Plyr或Vimeo、YouTube的嵌入API。此外...

    negotiation360:谈判360移动应用程序

    综上所述,谈判360移动应用程序的开发离不开JavaScript的强大功能。从用户界面的交互性到数据的处理和安全,再到移动设备的优化,JavaScript在每一个环节都扮演着不可或缺的角色。通过巧妙运用这些技术,谈判360能够...

    web2

    它是Web 2.0应用的基础,因为几乎所有的网页都离不开HTML。HTML5是其最新版本,引入了许多新特性,如语义化标签、媒体元素、离线存储和图形绘制API等,极大地增强了网页的交互性和功能。 在Web 2.0的世界里,HTML5...

    website

    总的来说,JavaScript在网站开发中扮演着不可或缺的角色,从创建动态用户体验到构建复杂的Web应用程序,都离不开它的身影。理解并掌握JavaScript,对于任何想要涉足Web开发的人来说都是至关重要的。

    mytodomvc:分支,克隆和编辑todoMVC

    项目的质量保证离不开测试。在这个项目中,使用了 `Karma` 这个JavaScript测试运行器。通过运行 `grunt test`,Karma 将执行所有的单元测试。单元测试通常是针对项目中的最小可测试单元,如函数或类,来验证其行为...

Global site tag (gtag.js) - Google Analytics