该学习一下前端框架了,原因是写了一段时间的前端界面,发现老是在重复写相同的内容,特别是js中的事件绑定,状态切换控制,无聊而且繁琐。
本系列文章翻译自Ember官网,建议大家多参考原文,翻译难免有误,欢迎指正。
CORE CONCEPTS
开始学习Ember.js前,需要理解一些核心的概念
Ember.js设计的初衷是帮助开发人员构建出类似native app那样的大型web应用程序,因此有一些设计的理念是借鉴于Cocoa和Smalltalk的。
TEMPLATES(模板)
模板使用Handlebars模板语言书写,用来描述你应用的用户界面,每一个模板背后都有一个模型支撑,如果模型发生变化后,模板会自动更新自己。
除了包含HTML标签外,模板也可以包含下面的元素:
- 表达式,例如
{{firstName}}
,它从模板的model中获取对应的信息,显示到HTML中 - Outlets,它是其他模板的占位符,当用户在你的app中逛荡时,通过router,可以把不同的模板插入到该Outlets占位符中,我们可以使用
{{outlet}}
语法实现该功能。 - Components(组件),消除重复的模板,创建可重用的控件。
ROUTER(路由)
路由可以将一个URL转化为一系列的嵌套模板,每一个模板都有相应的模型支撑,随着模板或者模型展示给用户的内容发生变化,Ember会同步更新浏览器地址栏的URL
这也就意味着,
在任意的时间点,用户可以共享app的URL,当有人点击了连接,他们应该和原始用户一样,看到相同的内容。
COMPONENTS(组件)
组件是定制的HTml标签,它的行为你使用JavaScript实现,它的外观你使用Handlebars模板进行描述,组件允许你创建可重用的控件,进而简化你应用程序的模板。
MODELS(模型)
模型是一个对象,他存储了对象的持久化状态,通过将模板转化为HTML标签的方式,model被展示给了用户,在很多应用程序中,模型是通过HTTP JSON API进行加载,虽然Ember并不知道后端你所选用的技术是什么。
ROUTE
route是一个对象,用来告诉模板哪一个模型应该被展示给用户。
CONTROLLERS(控制器)
控制器是一个对象,它存储了应用程序的状态,模板拥有一个控制器和模型,模板可以从它们两者中检索属性。
当你开发你自己的Ember.js app时,需要理解上面这些概念,