讀書筆記

時間 2019-11-19

標籤讀書筆記简体版

原文原文鏈接

1、如何設計友好的REST APIcss

1.使用uuid代替idhtml

2.URI參數定義由/users/age/20/60改成/users?minAge=20&&maxAge=60express

3.四大method，GET是安全的，HEAD也安全，POST/PUT/DELETE是不安全的數組

4.讓GET的實現不要改變資源狀態，由於GET的攻擊手段要比針對其餘METHOD的多一點瀏覽器

方法	含義	安全	冪等
GET	讀取資源列表或指定資源詳情	是	是
HEAD	獲取資源概況	是	是
POST	建立新資源	否	否
PUT	更新指定資源	否	是
DELETE	刪除指定資源	否	是

冪等的意義在於：它能夠安全地自動重試剛纔的操做，而不用擔憂破壞業務邏輯安全

5.分頁的參數模式，推薦使用「起始位置offset+條數size」，通常使用GET請求資源，結果返回數組形式，總條數放在響應頭中（用HEAD方法去取，可定時刷新）session

2、語法糖controller asapp

推薦寫法：ide

angular.module('app').controller('DemoController', function() {
   var vm = this;
   vm.title = 'angular';
   return vm;   
})

3、雙向綁定和watchers函數函數

compileProvider服務能夠用來關閉調試信息（調試類：ng-binding、ng-scope、ng-isolate-scope等）

app.config(function($compileProvider) {

//disable debug info

$compileProvider.debugInfoEnabled(false);

})

4、one-time綁定

若是數據是靜態數據，則在綁定的時候爲了不$watch產生致使性能降低，選擇單次綁定: $watch在第一次實行是必要的，但以後由於不改變數據因此沒有必要$watch。

單次表達式在第一次$digest完成後，將再也不計算（檢測屬性的變化），以「::」做爲前綴的表達式爲one-time綁定

<ul>
    <li ng-repeat="session in sessions">
        <div class="info">
            {{::session.name}}
        </div>
    </li>
</ul>

注意：目前測試one-time不適用於動態數據

5、滾屏加載（針對大數據集顯示）

ngInfiniteScroll開源組件實現滾屏加載

6、老是用ng-model做爲輸出

有ngModel的地方均可以使用ng-change事件

7、用打包代替動態加載

8、angular-hint

定位angular中常見的錯誤問題

9、攔截器

angular的攔截器（interceptors）可以實現對全部Ajax請求攔截和切入，分爲四個切入點：

1.AJax請求Request以前切入

2.AJax請求Request錯誤時切入

3.AJax請求響應成功時切入

4.AJax請求響應失敗時切入

$provide.factory('myHttpInterceptor', function($q) {
    return {
        //可選方法
        'request': function(config) {
            //成功以後作一些事情
            return config;
        },
        'requestError': function(rejection) {
            //出錯以後作一些事情
            return $q.reject(rejection);
        },
        'response': function(response) {
            //成功以後作一些事情
            return response;
        },
        'responseError': function(rejection) {
            //出錯以後作一些事情
            return $q.reject(rejection);
        }
    };
});
$httpProvider.interceptors.push('myHttpInterceptor');

在實際項目中，設置token的代碼應該放在登錄成功或者是首頁Controller加載的resolve等位置，這須要根據項目具體狀況而定。

建議使用factory定義攔截器

10、裝飾器

1.用在對第三方服務的擴展

angular.module('com.ngnice.app').factory('foo', function() {
    return {
        name: 'Angular'
    };
});
//利用Angular的裝飾器來裝飾foo服務；返回被修改後的代理對象
angular.module('com.ngnice.app').config(function($provide) {
    $provide.decorator('foo', function($delegate) {
        $delegate.greet = function() {
            return 'Hello, '+this.name;
        };
        return $delegate;
    });
});

angular.module('com.ngnice.app').controller('DemoCtrl', function(foo) {
    var vm = this;
    console.log(foo.greet());

    return vm;
});
//輸出：Hello, Angular

2.裝飾器能夠作到對服務進行通訊處理，如日誌記錄、訪問控制、性能測試等

注意：除了constant的其餘Provider服務：Value、Factory、Service、Provider定義的服務均可以被裝飾器所裝飾。costant是不可變的，它在定義的時候就已經肯定了服務實例，並不存在運行時的$get函數。

11、Ajax請求

$resource是基於$http之上，專門爲簡化Restful結構風格而設計的，適用面比$http更窄一些。

12、ng-cloak閃爍指令

Angular官方文檔推薦咱們將Angular腳本引入在head中，或者在head中額外引入Angular.css樣式文件，這樣才能更早隱藏ngCloak節點，防止Angular表達式出現閃爍。

若是要兼容低版本IE（IE7）則要加上ngCloak樣式屬性，由於IE7瀏覽器不支持像「[ng-cloak]」這類CSS屬性選擇器：

<div ng-cloak class="ng-cloak">{{hello angular express on IE7}}</div>

compile是在angular開始解析指令的時候執行的

十3、directive

transclude:true屬性的做用：讓經過ng-trasclude透傳過來的模板能夠訪問外部做用域，而不是內部做用域，即便定義了獨立scope。

angular.module('com.ngnice.app').controller('TabSetComponentCtrl', function($scope) {
    var vm = $scope.vm = {};
    vm.type = 'tabs';
});
angular.module('com.ngnice.app').directive('tabSet', function() {
    return {
        restrict: 'E',
        scope: {},
        transclude: true,
        replace: true,
        template: '<ul ng-transclude class="nav nav-{{vm.type}}"></ul>',
        controller: 'TabSetComponentCtrl'
    };
});
document.createElement('tab-set');

模板中ng-transclude以外的部分只能訪問當前指令的做用域，而透傳過來的模板只能訪問指令的外部做用域。

十4、ng-if-start/ng-if-end和ng-repeat-start/ng-repeat-end

<ul>
    <li ng-if-start="visibel">1</li>
    <li>2</li>
    <li ng-if-end>3</li>
    <li>4</li>
</ul>

指定做用範圍橫跨多個平級元素。

十5、如何實現動態加載的HTML雙向綁定

$compile服務實現這一功能。

<body ng-controller="DemoController as demo">
    <dy-compile html="{{demo.html}}"></dy-compile>
    <button ng-click="demo.change();">改變</button>
</body>

angular.module('com.ngnice.app').derective("dyCompile", ['$compile', function($compile) {
    return {
        replace: true,
        restricet: 'EA',
        link: function(scope, elm, iAttrs) {
            var DUMMY_SCOPE = {
                $destroy: angular.noop
            },
            root = elm,
            childScope,
            destroyChildScope = function() {
                (childScope || DUMMY_SCOPE).$destroy();
            };
            iAttrs.$observe('html', function(html) {
                if (html) {
                    destroyChildScope();
                    childScope = $scope.$new(false);
                    var content = $compile(html)(childScope);
                    root.replaceWith(content);
                    root = content;
                }
                scope.$on('$destroy', destroyChildScope);
            });
        }
    };
}]);
angular.module('com.ngnice.app').controller("DemoController", function() {
    var vm = this;
    vm.html = '<h2>hello:<a ng-href="{{demo.link}}">Angular</a></h2>';
    vm.link = 'https://angular.io/';
    var i = 0
    vm.change = function() {
        vm.html = '<h3>change after:<a ng-href="{{demo.link}}">'+(++i)+'</a></h3>'
    };
})

指令堅挺綁定屬性HTML值的變化，當HTML內容存在的時候，它會嘗試建立一個子scope，而後利用$compile服務來動態連接傳入的HTML和這個子scope，在最後還會用它來替換掉當前DOM節點；建立獨立子scope是爲了方便每次銷燬DOM的同時能很容易地把scope也銷燬掉，銷燬掉HTML compile帶來的watchers函數。最後還須要在父scope被銷燬的時候，也須要自動地銷燬這個獨立的子scope。

相關標籤/搜索

每日一句

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