发表于: 2017-06-30 21:31:49

1 957


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)

后台性能检测,UI自检

明天计划的事情:(一定要写非常细致的内容) 

后台代码codereview
遇到的问题:(遇到什么困难,怎么解决的) 

MVC架构常见的网站的主要功能?

MVC架构常见的网站的主要功能是(1)提供可视界面;(2)采集用户的输入;(3)将用户输入送入后台,进行处理;(4)将处理后的数据返回前端格式化显示。

如果把这一切都混在一起编码,无疑是非常不利于扩展和维护的。

经典的MVC模型将应用分解成独立的表现、数据、逻辑三种组件,鼓励三者间的解耦,为网页程序的开发奠定了坚实的基础。

AngularJS贯彻了经典的MVC模式,并且更加模块化,更容易实现和更容易测试。

收获:(通过今天的学习,学到了什么知识)

就webapp开发而言,前端实现的功能主要有:

-实现UI(渲染出用户可见的视图和各种功能组件)

-对用户的操作(事件)做出反应

-实现业务逻辑

-实现页面路由

-与服务器端交互

-对文件资源的管理(HTML/CSS/javascrip/图片等)

-提供用户安装和运行的手段


在单页面应用中,最有实力的是AngularJS。据它的创始人misko说,它的设计初衷是:看看是否有可能让Web设计师(非开发者)只使用HTML标签来创建简单的应用程序。AngularJS遵循的设计理念是——构建UI应该是声明式的。

AngularJS是由Google创建的一种JS框架,使用它可以扩展应用程序中的HTML词汇,从而在web应用程序中使用HTML声明动态内容。
AngularJS可以让你扩展HTML的语法,以便清晰、简洁地表示应用程序中的组件,并允许将标准的HTML作为你的模板语言,AngularJS可以通过双向数据绑定自动从拥有JavaScript对象(模型)的UI(视图)中同步数据。


特性一:双向数据绑定
    数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理,查询和监听DOM。我们想象一下Model是你的应用中的动态内容。传统来说,当内容变化了,开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面,model变化驱动了DOM中元素变化,另一方面,DOM元素的变化也会影响到Model。这个在用户互动中更加复杂,因为开发人员需要处理和解析这些互动,然后融合到一个model中,并且更新View。这是一个手动的复杂过程,当一个应用非常庞大的时候,将会是一件非常费劲的事情。数据绑定使的代码更少,你可以专注于你的应用。
   AngularJS的双向数据绑定,能够同步DOM和Model等等,提供了你的Model投射到view的方法。这些投射可以无缝的,而且是双向的,在控制器和视图中以MODEL为桥梁形成互动。

特性二:模板
    在AngularJS中,一个模板就是一个HTML文件。是的,它使用HTML,而不是任何特定的模板语言!但是HTML的内容扩展了,包含了很多帮助你映射model到view的内容。 HTML模板将会被浏览器解析到DOM中,然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导,即,directive(指令)。所有的指令都负责针对view来设置数据绑定。
我们要理解AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化,不是字符串的连接或者innerHTML变化。使用DOM作为输入,而不是字符串,是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令,甚至开发可重用的组件。

特性三:MVC
   针对客户端应用开发AngularJS吸收了传统的MVC基本原则。AngularJS并不执行传统意义上的MVC,更接近于MVVM(Moodel-View-ViewModel)。
Model
  代表数据。一般是简单的javascript对象。
ViewModel
  viewmodel是一个用来提供特别数据和方法从而维护指定view的对象。viewmodel是$scope的对象,主要指的是$scope对象,这个对象使用简单的API来侦测和广播状态变化。
Controller
   控制器。controller负责设置初始状态和参数化$scope方法用以控制行为。
View
  view是AngularJS解析后渲染和绑定后生成的HTML 。这个部分帮助你创建web应用的架构。$scope拥有一个针对数据的参考,controller定义行为,view处理布局和互动。


特性四:依赖注入(Dependency Injection,DI)
   AngularJS拥有内建的依赖注入子系统,可以帮助开发人员更容易的开发,理解和测试应用。DI允许你请求你的依赖,而不是自己找寻它们。比如,我们需要一个东西,DI负责找创建并且提供给我们。为了而得到核心的AngularJS服务,只需要添加一个简单服务作为参数,AngularJS会侦测并且提供给你。

特性五:Directives(指令)
   你是不是也希望浏览器可以做点儿有意思的事情?那么AngularJS可以做到。 指令可以用来创建自定义的标签,是一种威力强大的工具。它们可以用来装饰元素或者操作DOM属性,使得HTML被无限扩展。,甚至还可以重写一套完全属于自己的html标签。

特性六:测试
AngularJS内含了测试方法和用例可以帮助你更方便的执行测试。JS是一个动态的解析性语言,而不是编译类型的,因此非常的难写测试。
AngularJS被开成一个可测试的框架。它甚至包含了点对点的单元测试。

特性七:与node.js, bootstrap的良好结合,还有sublime插件。

总之,angularjs则是一个让我感到惊艳的框架,相对于同类无数个mv**框架,它的优势达到了数量级。如果用几个词来形容它,应该是:学习成本高,开发效率高,写代码时思路流畅。
Angularjs的学习成本比较高,主要原因是其设计思路与我们以前写jquery代码时有很大的不同,不能套用。Angularjs的核心思想就是“复用”,它的“复用”体现在"directive"上。Directive既是angularjs的核心,也是它的重点、难点和杀手级特性。简单的说,directive可以是一个自定义的html标签、或者属性、或者注释,它的背后是一些函数,可以对所在的html标签进行增强,比如修改html的dom内容,增强它的功能(如用第三方js插件包装它)。
编写Directive比较复杂,需要理解它的内部原理才能定义出自己的directive。这是angularJS学习中的难点。 




返回列表 返回列表
评论

    分享到