链式结构序列化详解,javascript中异常处理案例

如下所示:

最近在angular中使用select指令时,出现了很多问题,搞得很郁闷。查看了很多资料后,发现select指令并不简单,决定总结一下。

一、概述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <script type="text/javascript">
    // cache 缓存
    // try-catch-finally
    // 1 如果try中的代码出现了异常, 就会被catch住, 再catch中处理异常,
    //   最终,会执行finally中的代码
    // 2 如果try中大代码没有出现异常, catch内部的代码就不会执行, 但是,finally中的
    //   代码还是会要执行

    /*try {
      console.log(num);
    } catch(e) {
      console.log(e);
    } finally {

    }

    console.log(123);*/

    function fn() {
      // 如果此处直接return , 首先 try就不会执行,finally也不会执行
      return;

      try {
        var dv = document.getElementsByTagName("div");
        // 此处出错了
        dv.innerHTML = "12312";
        console.log("1 有没有错误??");
        return;
      } catch (e) {
        console.log("2 如果有错误,就会被处理");
      } 
      finally {
        // 释放try中使用的一些变量
        dv = null;
        console.log("3 代码最终是要执行的");
      }


      console.log("4 函数体最后的一行代码");
    }

    fn();
  </script>
</body>
</html>  

  select用法:

在JavaScript中,链式模式代码,太多太多,如下:

以上就是小编为大家带来的javascript中异常处理案例(推荐)全部内容了,希望大家多多支持脚本之家~

<select
ng-model=""
[name=""]
[required=""]
[ng-required=""]
[ng-options=""]>
</select>

if_else:

您可能感兴趣的文章:

  • 理解javascript中try…catch…finally
  • javascript中 try catch用法
  • JS异常处理try..catch语句的作用和实例
  • js中的异常处理try…catch使用介绍
  • JavaScript Try…Catch 声明的
    使用方法
  • JS使用onerror捕获异常示例
  • js异常捕获方法介绍
  • javascript编程异常处理实例小结
  • javascript中的try
    catch异常捕获机制用法分析

  属性说明:

if(...){
  //TODO
}else if(...){
  //TODO
}else{
  //TODO
}

  发现并没有ng-change属性

switch:

  ng-required:当属性值为true时,对select添加required验证,为false时不验证。

switch(name){
  case ...:{
    //TODO
    break;
  }
  case ...:{
    //TODO
    break;
  }
  default:{
    //TODO  
  }
}

  ng-options:指定数据源,生成option选项。

疑问:诸如上述这些链式代码,倘若,我们想将其扁平化链式处理呢?如下:

  数据源为数组时,用法:

//fn1,f2,f3为处理函数
_if(fn1)._elseIf(fn2)._else(fn3);

   label for value in array
   select as label for value in array
   label group by group for value in array
   select as label group by groupexpr for value in array track by
trackexpr

下面我们就来一起尝试实现下呗。

 数据源为对象时,用法:

二、链式代码扁平化

   label for (key,value)in object
   select as label for(key,value)in object
label group by group for(key,value)in object
select as label group by groupexpr for (key,value)in object track by
trackexpr  

假如,现在我们有如下链式代码:

 具体说明:

if(name === 'Monkey'){
  console.log('yes, I am Monkey');
}else if(name === 'Dorie'){
  console.log('yes, I am Dorie');
}else{
  console.log('sorry, over for ending!');
}

   array/object:数组/对象

好了,现在我们一步一步将其”扁平化”。

   label:option选项显示的名称。

其实看看上面的代码,不难发现,if…else这种格式,其实就是数据结构中的单链表,那么,初步利用JavaScript实现单链表,如下:

   select:是选中某一项后,绑定到ngModel的值。

var thens = [];
thens.resolve = function(name){
  for(var i = 0, len = this.length; i < len;i++){
    if(this[i](name) !== 'next'){
      break;
    }
  }
}
thens.push(f1, f2, f3);

value : 数组中的值。

其中f1,f2,f3为判断函数,并且我们假设,如果诸如f1、f2、f3返回’next’时,就继续往下查找,否则,停止往下查找。如下:

  (key,value):对象的key,value。

function f1(name){
  if(name === 'Monkey'){
    console.log('yes, I am Monkey');
  }else{
    return 'next';
  }
}
function f2(name){
  if(name === 'Dorie'){
    console.log('yes, I am Dorie');
  }else{
    return 'next';
  }
}
function f3(){
  console.log('sorry, over for ending!');
}

   group by groupexpr:用于选项分组,

好了,这就是链表的模式。

 ng-options与ng-repeat自动生成option选项的区别:

但是,我们的最终目的是想实现如下这样的呢?

 ng-options生成的option选项选中后,绑定到ngModel的值可以是对象。ng-repeat绑定到ngModel的值只能是字符串。

//fn1,f2,f3为处理函数
_if(fn1)._elseIf(fn2)._else(fn3);

注意:select初始化时需要为ngModel指定值,否则会出现空白选项。

你可能会说,将上述代码改成如下这样,不就好了吗?!!

以上所述是小编给大家介绍的Angular 中
select指令用法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

thens.push(f1).push(f2).push(f3).resolve();

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图