互換ブラウザを構築するAngularjs webアプリケーション

4210 ワード
アングラーJS
背景
mvvmが成熟するにつれて、jQueryを使用してwebアプリケーションを構築するのは時代遅れになり、jQueryを使用するにはdomの取値、賦値、バインドイベントなどを制御するためにより多くのコードを記述する必要があるが、mvvは下位層から以上の操作のサポートを実現し、プログラマーが元の複雑で重複した符号化から解放されるようになった.プログラマは、ビジネスの実装、データのインタラクションに重点を置くことができ、プログラマが作成するコードの量を大幅に削減します.
長年のウェブ経験から、ウェブアプリケーションの作成が最も難しいところは主にブラウザの互換性の問題であり、より多くの互換性の問題は主にieに現れているため、ie上の問題を解決できれば、このウェブアプリケーションの他の問題はもう問題ではないと教えてくれた.
今日、angualrjsを使用して互換ブラウザのwebアプリケーションを構築します.実はieの下のいくつかの問題を主に解決しています.大体次のようにします.
  • ieでapp
    • を構築
  • ie下aラベルunsafe問題
  • ieでngSrcが正しくバインドできない問題
  • ie下ngMouseleaveの問題
  • ieでサービスを作成するいくつかの問題
  • ieでswfuploadを使用するいくつかの問題
    • ここではangularの1.0.7バージョンを使用します.これは、ieの低バージョンのサポートが良好で、BUGが少ないためです.高バージョンはngShow、ngHide、ngBindHtmlなどのラベルに深刻な問題が発生します.
    ieの下でappを構築する
    chrome、ffなどのブラウザでは、htmlまたはbodyラベルにngAppを直接バインドしてangularjsのアプリケーションをバインドすることができますが、ieの下では実現できません.これは、低バージョンのieがhtml 5のいくつかの特性とJSONオブジェクトをサポートしていないため、この問題を解決するために2つのjsを導入する必要があります.
  • html5shiv
  • json2

    • 以上の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のバグではなく、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の下でサービスを作成するいくつかの問題
    モジュールを作成するとき、モジュールにメソッドが1つしかない場合は、この関数を直接返します.サンプルコードは次のとおりです.
    //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アプリケーションを開発して出会ったいくつかの問題と解決策で、もしあなたがもっと良い解決策があれば、私に教えてください.
    では、今日の文章はここまでです.もし文章に何か問題があったら教えてください.ありがとうございます.
    String.join
    JAva週報