脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS的编程思想探讨

AngularJS入门知识之MVW类框架的编程思想探讨

 更新时间：2014年12月08日 11:16:42   投稿：junjie  
这篇文章主要介绍了AngularJS入门知识之MVW类框架的编程思想探讨,本文通过实现两个简单的业务需求,探讨AngularJS和传统的JavaScript控制DOM实现方式的差别,并尝试理解MVW此类框架在流行的Web前端开发中的编程思想,需要的朋友可以参考下

本文通过实现两个简单的业务需求，探讨AngularJS和传统的JavaScript控制DOM实现方式的差别，并尝试理解MVW此类框架在流行的Web前端开发中的编程思想。

这个需求很常见，比如，一个两级菜单，在第一级别菜单项点击时候，对应的子菜单项目应该显示或隐藏。

jQuery的实现：

复制代码 代码如下:

<!-- html -->
<ul class="parent">
    <li class="parent_item">
        Item 1
        <ul class="child">
            <li class="child_item">Item child 1</li>
        </ul>
    </li>
</ul>

// javascript
$('li.parent_item').click(function(){
    $(this).children('ul.child').toggle();
})

AngularJS的实现：

复制代码 代码如下:

<!-- html -->
<ul>
    <li ng-click="hide_child = !hide_child">
        Item 1
        <ul ng-hide="hide_child">
            <li>Item child 1</li>
        </ul>
    </li>
</ul>

传统操作DOM的方式，不再赘述。AngularJS的实现，相对代码要精炼很多，只有HTML的版本即可。以上代码，用到了AngularJS这些知识点：

1.Directives 

2.Expressions

ng-click和ng-hide都是框架自带的Directives（指令），前者相当于给li标签提供了一个Event Handler，在该HTML元素（li）被点击的时候，会执行hide_child = !hide_child这个Expression（表达式）。我们先看一下ng-hide这个指令，它会根据赋值的表达式结果（布尔值）来控制该HTML元素是否要显示（通过CSS实现）。也就是说，如果hide_child这个变量如果是true，那么ul就会被隐藏，否则结果相反。  

这里hide_child其实是$scope上的一个变量，对它的值的变更，也可以用controller控制器包装一个方法来实现，只不过现在的语句比较简单，直接写在了指令的赋值里面。

通过以上简单的代码分析，我们可以看到AngularJS两个比较明显的特点：

1.通过指令和表达式对DOM的操作进行了封转，只需简单的代码便可省去额外的JavaScript代码
2.指令和表达式的应用，只直接嵌套在HTML中的，这和jQuery推从的Unobtrusive JavaScript的代码风格有些背道而驰

我们先看另外一个需求，再详细解释上面的结论。

需求2：通过点击div，触发选择form中的一个radio button
传统的HTML Form元素，在如今的移动设备上，操作起来并不是十分友好。比如，Radio button单选框，在触摸屏上，需要精确的位置定位，才能控制好这个组件，但是手指定位又很粗糙。常见的做法，是添加一个对应的Label控件，但是文字本身占屏比例也并不理想，而且也不具备明确的信息传达效果。所以，通常会间接操作一个区域比较大的div或者li标签。

jQuery的实现：

复制代码 代码如下:

<!-- html -->
<ul>
    <li class="selection">
        <input type="radio"
            id="option1" />
        <label for="option1">option 1</label>
    </li>
</ul>

// javascript
$('li.selection').click(function(){
    $(this).children('input[type="radio"]').click();
})

AngularJS的实现：

复制代码 代码如下:

<!-- html -->
<ul>
    <li ng-repeat="option in options"
        ng-click="model.option = option.value"
        ng-class="{active: model.option == option.value}" >
        <input type="radio"
            ng-model="model.option"
            value="{{option.value}}"
            id="option1" />
        <label for="option1">option 1</label>
    </li>
</ul>

在这个解决方案中，我们同样没有涉及到额外的JavaScript代码，并且多用了几个指令。为了对比参照，我们只关心ng-click和ng-model这两个指令的表达式。

我们先看一下input这个元素的ng-model指令，这里赋值的意思是，我们把模板上的input和$scope.model对象的option属性进行了关联，深入了解数据绑定可以参考Data Binding。这种指定关联，使得模板控件直接和数据Model进行了绑定，并且这种绑定是双向的。意味着，一旦用户修改控件中的值（勾选radio input），对应的Model对象就会重新赋值（model.option）；同时，如果Model对象的值发生了变化，模板中的input控件也会对应反映变化。而这点，在上述jQuery的实现中，其实是没有做到的。

所以，这里通过AngularJS的数据绑定，点击li元素间接完成触发input的流程是这样子的：

1.点击li标签，给model.option赋值；
2.修改了Model对象，定位到对应input控件（value的值为model.option那个）；
3.激活input控件的checked属性

通过以上两个案例，我们对Web前端的操作有了新的认识。

首先，技术实现上，通过引入新的指令，表达式，数据绑定等概念，我们可以完全新的方式去操作DOM，而不仅仅局限在用户和HTML组件交互操作上的JavaScript代码的实现。这种思想的变化是巨大的。

从本世纪初，动态Web编程的兴起开始，服务器端的编程技术一直在改进。从一开始的CGI/PHP/ASP，由语言和平台产生了.NET vs. Java，开发效率和软件过程促进了MVC框架/ORM/AOP等，性能和大数据带来了NodeJS/NoSQL/Hadoop等，而浏览器前端的技术需求似乎没有那么激进过。一方面，通过服务器端和数据库，大部分B/S模型的业务需求都能满足；再者，浏览器本身存在不同平台的差异性，对脚本语言和渲染技术的标准不兼容，以及运算能力的欠缺和安全性的考虑。

在这种情况下，浏览器端的需求，大部分时候只需要考虑渲染页面和简单的用户交互。HTML/DOM加上JavaSript/CSS就这样成就了前端的主要工作。所以，以前是没有前端工作师，只需要Web设计师的。慢慢对前端的要求多起来，jQuery成为使用程度最高的一个JavaScript操作DOM的封装库。而在这个阶段，jQuery/JavaScript的主要任务，仍然只是作为面向用户浏览器终端呈现和交互的工具。

理解了jQuery的起源，我们不难发现，以前追求的一些规则，譬如Unobtrusive JavaScript，当时局限于实现的手段和方式，为了分离DOM和JavaScript代码逻辑，我们优先选择了维护性更高的方式。前端对JavaScript的需求加大之后，出现了很多MVC/MVP的前端框架，以及AngularJS所谓的MVW(Model-View-Whatever)，JavaScript和DOM一刀切的方式发生了变化。原先我们考虑界面显示和用户交互的直接操作，现在我们有了客户端的数据绑定，丰富的指令，依赖注入，等待我们的将是全新的编程模型和思维方式。 

您可能感兴趣的文章:

相关文章

  • angular动态删除ng-repaeat添加的dom节点的方法

    angular动态删除ng-repaeat添加的dom节点的方法

    本篇文章主要介绍了angular动态删除ng-repaeat添加的dom节点的方法，非常具有实用价值，需要的朋友可以参考下
    2017-07-07
  • 浅谈Angularjs link和compile的使用区别

    浅谈Angularjs link和compile的使用区别

    下面小编就为大家带来一篇浅谈Angularjs link和compile的使用区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 详解AngularJS过滤器的使用

    详解AngularJS过滤器的使用

    这篇文章主要为大家详细介绍了AngularJS过滤器的使用方法，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 详解AngularJS Filter（过滤器）用法

    详解AngularJS Filter（过滤器）用法

    这篇文章主要介绍了AngularJS的filter，中文名“过滤器”是用来过滤变量的值，或者格式化输出，得到自己所期望的结果或格式的东东，的相关资料,需要的朋友可以参考下
    2015-12-12
  • Angular8 简单表单验证的实现示例

    Angular8 简单表单验证的实现示例

    这篇文章主要介绍了Angular8 简单表单验证的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • AngularJS学习第一篇 AngularJS基础知识

    AngularJS学习第一篇 AngularJS基础知识

    这篇文章主要介绍了AngularJS学习第一篇，分享了有关AngularJS的基础知识，主要包括指令、过滤器等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • angularjs实现对表单输入改变的监控(ng-change和watch两种方式)

    angularjs实现对表单输入改变的监控(ng-change和watch两种方式)

    这篇文章主要介绍了angularjs通过ng-change和watch两种方式实现对表单输入改变的监控,需要的朋友可以参考下
    2018-08-08
  • AngularJS过滤器filter用法总结

    AngularJS过滤器filter用法总结

    这篇文章主要介绍了AngularJS过滤器filter用法,结合实例形式较为详细的总结分析了过滤器filter的功能、分类、使用技巧及自定义过滤器的实现方法,需要的朋友可以参考下
    2016-12-12
  • AngularJS基础知识笔记之过滤器

    AngularJS基础知识笔记之过滤器

    在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化，才能显示给用户。比如时间本地化，或者yyyy-MM-dd HH:mm:ss格式，数字精度格式化，本地化，人名格式化等等。在angularjs中为我们提供了叫filter的指令，让我们能够很轻易就能做到着一些列的功能
    2015-05-05
  • AngularJS上传文件的示例代码

    AngularJS上传文件的示例代码

    上传文件在很多时候都能用到，这篇文章主要介绍了AngularJS上传文件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论