至今博主对于 MVVM 框架比较了解的就只能算有 Angular 了,首先给大家明确一个概念,Angular1.x 才能叫 Angular.js,而 Angular2、4、5 都直接叫 Angular 了,因为从 2 开始已经是用 TypeScript 开发的了,不能再称它为 js 框架,值得肯定的是 Ng2 比 Ng1.x 的确更强大,更加规范,开发出来的应用的性能也相对变强了些,不过 Ng2 的太过激进的变动使得框架使用复杂度变大,1.x 的用户相当于要重新学习一种开发模式,用户流失严重。
今天呢,我不在这里做具体的功能介绍,这些没什么意思,就说一下 Angular.js 的优缺点吧~
优点:
首先 Angular.js 是前端三大框架最早出来的,这意味着它是前端这类框架创始的始祖,这个历史地位还是值得我们尊重的。
1. 它创新性地做出了双向绑定的开发方式,{{}} 这种写法就是 Angular 率先提出的,这种可以双向绑定 js 里面的 "变量" 和 html 的数据显示(这样不需要我们再去自己操作 dom,就可以更新页面)
2. 实现了依赖注入(依赖反转,由函数来决定要什么依赖)
缺点:
由于 Angular 太早出现,一些核心的代码还是过于陈旧,从而有一些 vue、React 没有的 Bug
1. 事件、赋值、ng-repeat 不能同时使用
- <input type="button" ng-click="now=$index" ng-repeat="(k,v) in json" value="{{k}}">
以上会使得 $scope.now 无法赋值成功,这当然不是我们的问题,Vue,React,Ng2 + 都不会出现这种问题,要解决这个问题,我们要换一种写法:
- <input type="button" ng-click="setIndex($index)" ng-repeat="(k,v) in json" value="{{k}}">
调用函数在函数内部完成赋值的工作。
2. 异步数据不会自动同步
由于 Angular1.x 的双向绑定依然使用旧的 "脏检查",而不是新的 Observation, 如果我们自己写异步获取数据,或者其他库的异步获取数据(例如 JQ 的 $.ajax({})), 异步修改 $scope 上的数据,HTML 上是无法自动更新的,我们需要在修改后,手动调用一次 $scope.$apply(),当然我们可以使用 Angular 提供的 $http,就可以不用写手动触发脏检查了。
3.$http.post 的 Content-Type
Angular $http.post 模块默认设置的 Header['Content-Type'],居然是 application/json,这个是大部分服务器不认,传统的服务器认的是 application/x-www-form-urlencoded
所以我们还要把默认设置自己给设置一遍:
- angular.module('common', []).config(function($httpProvider) {
- $httpProvider.defaults.transformRequest = function(data) {
- let temp = [];
- for (i in data) {
- temp.push(encodeURIComponent(i) + ' = ' + encodeURIComponent(data[i]));
- }
- return temp.join(' & ');
- }
- $httpProvider.defaults.headers.post['Content - Type'] = 'application / x - www - form - urlencoded';
- })
我们要设置好 transformRequest(数据传出前的格式转换) 和 headers.post['Content-Type'](数据格式是哪种),设置好了之后我们之后写 module 的时候直接引入依赖就可以了:
- angular.module('test1', ['common']);
4.$http.jsonp 麻烦
- let mod = angular.module('test',[]);
- mod.controller('test_c',function($scope,$http,$sce){
- $scope.arr=[];
- $scope.keyword="";
- $scope.$watch('keyword',function(){
- let url = $sce.trustAsResourceUrl(`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${$scope.keyword}`);
- $http.jsonp(url,{jsonpCallbackParam:'cb'}).then(res=>{
- $scope.arr = res.data.s;
- },err=>{
- alert('错了');
- });
- })
- });
jsonp 本来就是不安全的,但是感觉多此一举的需要用 $sce.trustAsResourceUrl 包裹一下 url,才能用 {jsonpCallbackParam:'cb'} 配置 callback 的名字。
来源: http://www.bubuko.com/infodetail-2446685.html