構建兼容瀏覽器的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應用遇到的一些問題以及解決方案，若是你有更好的解決方案，請告訴我。

　　那麼今天的文章就到這裏了，若是文章中有什麼問題請告訴我，謝謝！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。