构建兼容浏览器的Angularjs web应用

时间 2019-11-09

原文原文链接

背景javascript

　　随着mvvm逐渐成熟，如今使用jQuery构建web应用已经显得过期了，并且使用jQuery须要编写更多的代码去控制dom的取值、赋值、绑定事件等，而mvv从底层实现了对以上操做的支持，让程序员能够从原始的复杂、重复的编码中解放出来，让程序员能够将更多的重心放在业务的实现、数据的交互上去，并且大大减小了程序员须要编写的代码量。
html

　　多年来的web经验告诉咱们，编写web应用最难的地方主要在于浏览器的兼容问题，并且更多的兼容问题主要体如今ie上，所以只要能解决ie上的问题，那么这个web应用的其余问题都再也不是问题了。html5

　　今天，我将使用angualrjs来构建兼容浏览器的web应用，其实主要是解决ie下的一些问题，大体以下：java

ie下构建app
ie下a标签unsafe问题
ie下ngSrc没法正确绑定问题
ie下ngMouseleave的问题
ie下建立service的一些问题
ie下使用swfupload的一些问题

　　这里将使用angular的1.0.7版本，这是因为该版本对于ie低版本的支持较好，且存在的BUG较少，而高版本在ngShow、ngHide、ngBindHtml等标签上都会出现严重的问题。程序员

ie下构建appangularjs

　　在chrome、ff等浏览器下，咱们能够直接在html或者body标签上直接绑定ngApp来绑定angularjs的应用，可是在ie下是没法实现的，这是因为低版本的ie不支持html5的一些特性以及JSON对象，所以咱们须要引入2个js来解决这个问题：web

　　有了以上2个js文件后，ie下绑定ngApp的方式也略微有点区别，须要有class、ngApp、id的支持，代码以下：chrome

<body class="ng-app:myApp" id="ng-app" ng-app="myApp">

ie下a标签unsafe问题json

　　当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个问题：

　　一、后台返回数据的时候，须要设置响应流的Head的ContentType为text/html; charset=UTF-8

　　二、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应用遇到的一些问题以及解决方案，若是你有更好的解决方案，请告诉我。

　　那么今天的文章就到这里了，若是文章中有什么问题请告诉我，谢谢！