100 行代码实现的 JavaScript MVC 样式框架-阿里云开发者社区

开发者社区> 知与谁同> 正文

100 行代码实现的 JavaScript MVC 样式框架

简介:
+关注继续查看

使用过 JavaScript框架(如 AngularJS, Backbone 或者Ember)的人都很熟悉在UI(用户界面,前端)中mvc的工作机理。这些框架实现了MVC,使得在一个单页面中实现根据需要变化视图时更加轻松,而模型-视图-控制器(mvc)的核心概念就是:处理传入请求的控制器、显示信息的视图、表示业务规则和数据访问的模型。

因此,当需要创建这样一个需要在单个页面中实现切换出不同内容的应用时,我们通常选择使用上述框架之一。但是,如果我们仅仅需要一个在一个url中实现视图切换的框架,而不需要额外捆绑的功能的话,就不必使用象Angular和Ember等复杂的框架。本文就是尝试使用简单、有效方法来解决同样的问题。

概念

应用中的代码利用urls中的“#”实现MVC模式的导航。应用以一个缺省的url开始,基于哈希值的代码加载应用视图并且将对象-模型应用于视图模板。

url格式像下面这样:

http://Domain Name/index.html#/Route Name

视图内容必须以{{Property-Name}}的方式绑定对象模型的值和属性。代码会查找这个专门的模板格式并且代替对象模型中的属性值。

以ajax的方式异步加载的视图会被放置于页面的占位符中。视图占位符可以是任何的元素(理想的情况是div),但是它必须有一个专门的属性,代码根据这个专门的属性来定位它,这样同样有助于代码的实现。当url改变时,会重复这个场景,另外一个视图被加载。听起来很简单吧!下面的流程图解释了在这个特定的实现中的消息跳转。
screenshot

文章转载自 开源中国社区 [http://www.oschina.net]

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
C#代码实现矢量画图
原文:C#代码实现矢量画图 版权声明:本文为博主原创文章,转载请附上链接地址。 https://blog.csdn.net/ld15102891672/article/details/80275969 ...
957 0
100行JavaScript代码实现JavaScript
100行JavaScript代码实现JavaScript
10 0
在C++下实现的程序拨号代码
下面是一段拨号代码(摘自Nokia的例子),代码虽然不多,但很多地方都值得学习,例如:对R类的使用,清理;server/client机制;参数传递机制;编码风格;注释风格等等自己体会吧。
566 0
Linux USB Host-Controller的初始化代码框架分析【转】
转自:http://blog.csdn.net/zkami/article/details/2496770 usb_hcd_omap_probe (const struct hc_driver *driver) (dev/ohci/ohci-omap.
816 0
代码生成框架Velocity
代码生成框架VelocityVelocity是一个基于Java的模板引擎,用户可以使用模板语言VTL来引用由Java代码定义的对象。
1016 0
「crudapi」零代码实现订单序列号Sequence
本文通过产品编码和订单流水号介绍一下序列号(Sequence)在crudapi增删改查接口中的应用。
78 0
Java 网络爬虫获取网页源代码原理及实现
  1.网络爬虫是一个自动提取网页的程序,它为搜索引擎从万维网上下载网页,是搜索引擎的重要组成。传统爬虫从一个或若干初始网页的URL开始,获得初始网页上的URL,在抓取网页的过程中,不断从当前页面上抽取新的URL放入队列,直到满足系统的一定停止条件。
1395 0
+关注
10077
文章
2994
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载