AngularJS遇坑记

日期:2015-11-12 20:28 | 标签: AngularJS | 阅读:1102

AngularJS规范了前端架构,降低了开发成本,民工精髓曾说其可视为一种数据优先的框架,在它的三个层面中,数据模型是骨架,视图模型和业务事件是血肉,视图模板和指令是皮毛,这三层合在一起,就形成了一个活生生的Web应用,个人认为说得太贴切!

架构问题

公司内部分为管理系统与互联网应用两大阵营,但产品大同小异,都是对能源、设施的管理,管理系统使用的是ExtJS,互联网应用PC使用的jquery系列+模块化相关,手机端使用AngularJS,咋一看,当今流行框架还全了,这也导致前端开发人员技能不一,全学吧,不精通,学一个嘛,不能应付开发需求。
这里使用AngularJS的一些要求吧:

  1. 需根据开发人员素质进行技能搭配、团队分工。
  2. 单纯的依靠controller、service对代码进行分层,会造成代码难于维护(需对业务进行划分,并提取common)
  3. 到底是使用directive还是template这一点我一直很纠结
  4. 民工精髓说数据层得单独设计,这一点我们做得很差

    在复杂的Web应用中,建议在service层构建数据仓储,按照业务实体来组织。此外,在复杂的应用中,为实体建立对应的构造函数,也会增强应用的严谨性。

  5. AngularJS2什么时候该入手?

格式问题

  1. 控制器标识符后面加了空格(不小心)
    badly formed controller string ‘{0}’. Must match __name__ as __id__ or __name__.
    
  2. cache与enter&&leave事件的关系真像文档所说吗?
  3. 使用$stateParams时,一定要记得在路由那进行配置(params),形式为:{参数名称:值,...},为了不报错,设为null好了。
  4. Angular.module定义模块时,必须写上依赖,即
    // []不可少
    angular.module('MODULENAME', [])
    
  5. 自定义指令必须写结尾,而且不能缩写
  6. 指令模板必须只有一个根节点,注释也算节点

处理 HTTP Timeout

源码处理方式为

 if (timeout > 0) {
      var timeoutId = $browserDefer(timeoutRequest, timeout);
    } else if (timeout && timeout.then) {
      timeout.then(timeoutRequest);
    }


    function timeoutRequest() {
      status = ABORTED;
      jsonpDone && jsonpDone();
      xhr && xhr.abort();
    }

既然源码是这样做的,我们就可以覆盖 原生的 timeout 方法,自定义 timeout 逻辑

约定问题

  1. 自定义指令上的属性用小写,连词可以用横线连接,绑定在scope上的时候去掉横线改用驼峰命名方式即可。
  2. 自定义指令不能写成<tagname></tagname>形式,只能写成<tagname/> ???
  3. 双向绑定只适用于对象类型,写成值类型不会有任何反应的!
  4. 指令双向绑定,不能直接赋值{},而应该遵循引用的原则,改变属性值!赋值为{}[],其实是在内存区域新划出了一片空间。
  5. 一般的做法是js代码放在底部,但是放底部会造成focus现象,而且非常严重,果断放顶部!

页面跳转

使用内置导航时能够完美运行,但是使用物理按键进行导航时却会报错,后来一想,手机上的物理按键不就是键盘上的backspace么,果然,场景得到重现,使用谷歌控制台调试,原来是缓存问题,直接在路由中添加cache:false则可以解决。

性能优化

https://github.com/atian25/blog/issues/5

关于input聚焦问题

stackoverflow上大神使出了数种方案,参考:
http://stackoverflow.com/questions/14833326/how-to-set-focus-on-input-field
各种指令,各种service。后来我自己直接用这个解决了问题:

 document.querySelector("#text_content").focus();

不知道有啥问题否?

写全局的请求头

可以通过路由拦截器实现,为全局请求设置header

$httpProvider.interceptors.push(['$rootScope', '$q', function ($rootScope, $q) {
  return {
        request: function (config) {
          // Header - Token
          config.headers = config.headers || {};
          if (config.headers) {
              config.headers['ca-g-oo'] = 'data-dnwaec2ioagwqevnm';
          };
          return config;
        },
        response: function (response) {
            if (response.status == 200) {
                // console.log('do something...');
            }
            return response || $q.when(response);
        },
        responseError: function (response) {
            return $q.reject(response);
        }
  }
}])

仅仅是针对post请求时,可以这么用

$httpProvider.defaults.headers.post['AZQ'] = 'hero';

关于缓存

Caching can be disabled and enabled in multiple ways. By default, Ionic will cache a maximum of 10 views, and not only can this be configured, but apps can also explicitly state which views should and should not be cached.
去除缓存可以这样子:

#### Global
$ionicConfigProvider.views.maxCache(0);

 $stateProvider.state('myState', {
     cache: false,
     url : '/myUrl',
     templateUrl : 'my-template.html'
 })
#### Disable cache with an attribute
<ion-view cache-view="false" view-title="My Title!">
  ...
</ion-view>

其它问题

  1. tab跳转到其它非tab页,为啥没有默认的返回按钮,最终还得借助$ionicHistory实现。
  2. ng-cordova上的插件教程就没变过,最好还是关注github上的更新吧。
  3. ionic工程中$scope.$watch监听不到input的值, ion-content 需要指定 ng-controller 才行
  4. $compile动态编译html

     //通过$compile动态编译html var html="<div ng-click='test()'>我是后添加的</div>";
    
     var template = angular.element(html);
     var mobileDialogElement = $compile(template)($scope);
     angular.element("#"+id).append(mobileDialogElement); // remove移除创建的元素
    
     var closeMobileDialog = function () {
     if (mobileDialogElement) {  
     mobileDialogElement.remove();
     }
    

报错

  1. Deferred long-running timer task(s) to improve scrolling smoothness.
    
    原因是$timeout或者$interval用法不当,解决办法

一些参考

AngularJS在苏宁云中心的深入实践(民工精髓)

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式