构建兼容浏览器的Angularjs web应用
随着mvvm逐渐成熟,现在使用jQuery构建web应用已经显得过时了,而且使用jQuery需要编写更多的代码去控制dom的取值、赋值、绑定事件等,而mvv从底层实现了对以上操作的支持,让程序员可以从原始的复杂、重复的编码中解放出来,让程序员可以将更多的重心放在业务的实现、数据的交互上去,而且大大减少了程序员需要编写的代码量。
多年来的web经验告诉我们,编写web应用最难的地方主要在于浏览器的兼容问题,而且更多的兼容问题主要体现在ie上,因此只要能解决ie上的问题,那么这个web应用的其他问题都不再是问题了。
今天,我将使用angualrjs来构建兼容浏览器的web应用,其实主要是解决ie下的一些问题,大致如下:
- ie下构建app
- ie下a标签unsafe问题
- ie下ngSrc无法正确绑定问题
- ie下ngMouseleave的问题
- ie下创建service的一些问题
- ie下使用swfupload的一些问题
这里将使用angular的1.0.7版本,这是由于该版本对于ie低版本的支持较好,且存在的BUG较少,而高版本在ngShow、ngHide、ngBindHtml等标签上都会出现严重的问题。
ie下构建app
在chrome、ff等浏览器下,我们可以直接在html或者body标签上直接绑定ngApp来绑定angularjs的应用,但是在ie下是无法实现的,这是由于低版本的ie不支持html5的一些特性以及JSON对象,因此我们需要引入2个js来解决这个问题:
有了以上2个js文件后,ie下绑定ngApp的方式也略微有点区别,需要有class、ngApp、id的支持,代码如下:
<body class="ng-app:myApp" id="ng-app" ng-app="myApp">
ie下a标签unsafe问题
当a标签的href绑定有效的url时,无法触发绑定其他事件,如:click,但是如果没有href或者href为空,在ie下则会出现unsafe的问题,因此需要给href绑定javascript:void(0),这样既能解决unsafe的问题又能解决无法触发事件的BUG。
ie下ngSrc无法正确绑定问题
在ie下,不管是使用ng-src或者ng-src="{{ xx }}"都无法让img显示图片,而且在低版本ie下使用属性="{{xx}}"都是无法实现你想要的功能的,因此只能使用自定义的指令去实现某些不支持的标签。
这里我自己实现了一个customSrc的指令去解决ie下ngSrc的问题,大致代码如下:
myApp.directive('customSrc', function () { return { scope: { data: '=' }, link: function (scope, element, attrs) { scope.$watch('data', function (v) { if (!v) return; element.attr('src', v); }); } }; });
ie下ngMouseleave的问题
其实这不算是ng-mouseleave的bug,而是ie下,对于mouseleave和mouseover的表现不同而已,首先我们来看一段html代码,如:
<div ng-click="display=!display">下拉单</div> <div ng-show="display" ng-mouseleave="display=false"> <div>标题</div> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> </div>
在chrome、ff等浏览器下,这个脚本运行的还是很顺利的,但是在ie下会出现一个问题,就是当鼠标移入ul的时候,下拉单的列表层会消失,但是在ul内加上ng-mouseover="display=true"以后,这个BUG就可以解决了
ie下创建service的一些问题
当我在创建模块的时候,如果模块只有一个方法时,我一般会直接返回这个函数,示例代码为:
//seajs module.exports = function (){ //coding }; //angular myApp.service('$fn', function (){ return function (){ //coding }; });
在ie下,$fn()是无法正确调用的,会出现异常,因此需要做些许调整,代码如:
//angular myApp.service('$fn', function (){ return { exec: function (){ //coding } }; });
在ie下使用$fn.exec()就不会出现问题了。
ie下使用swfupload的一些问题
使用swfupload在低版本的ie下,最常出现的问题是flash的版本问题,因此首先得保证ie下flash的版本。
偶尔会遇到"例外被抛出且未被接住",出现该异常的时候,主要注意2个问题:
1、后台返回数据的时候,需要设置响应流的Head的ContentType为text/html; charset=UTF-8
2、ie下绑定swfupload的button_placeholder的元素不能包含在ng-repeat内,如:
//html <li ng-repeat="m in imgs"> <a href="javascript:void(0)"> <img data="m" width="178" height="178" custom-src /> </a> </li>
当我们要将最后一个li的元素绑定到swfupload的button_placeholder上时,低版本ie下就会出现以上的错误,因此在使用当中要注意。
结尾
以上是我在开发兼容浏览器angular应用遇到的一些问题以及解决方案,如果你有更好的解决方案,请告诉我。
那么今天的文章就到这里了,如果文章中有什么问题请告诉我,谢谢!