`

前端解耦的一个最简单示例

阅读更多

 

且看这样一段HTML片段:

 

<div id="name" style="background-color:red" onclick="alert('');">Jim</div>

 

这是前端代码全部耦合在一起的例子,下面对它进行MVC解耦。

 

第一步解耦,把View层分离出来:

 

<div id="name" class="name" onclick="alert('');">Jim</div>

 

同时,引入一表示name的css。

 

第二步解耦,把Controller分离出来:

 

<div id="name" class="name" onclick="clickName()">Jim</div>

 

把点击的行为逻辑转移到一个方法上了。

 

第三步解耦,把Controller和Model的关联关系剥离出来:

 

<div id="name" class="name">Jim</div>

借助JQuery,增加绑定方法,关联div和点击行为:

 

$("#name").click(
    function(){
        alert("");
    }
);

在后端,M和C这样的关联关系有多种实现方式,比如xml配置文件,比如注解,比如规约方式;在前端,这里采用绑定的方式关联。

 

第四步解耦,借助backbone.js,把数据和模板分离:

 

<script type="text/template" id="name-template">
    <div id="name" class="name">
        <%=name%>
    </div>
</script>

增加js代码,渲染模板:

 

window.NameView = Backbone.View.extend({
    template : _.template($('#name-template').html()),
    ……
    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));
            return this;
    }
});

而渲染模板的数据通过ajax异步获取。ajax不仅仅给用户带来好的体验,也给前端程序员带来变革,它让前端页面的展示可以拆分为多个步骤,增加了解耦的可能性。

 

至此,原有的单个HTML片段已经解耦成为:M:HTML模型,View:CSS,C:JavaScript方法;同时,M和C之间的映射使用绑定方式关联,M又剥离成为模板数据两个部分。

 

文章系本人原创,转载请注明作者和出处

 

 

10
0
分享到:
评论
1 楼 facingSun 2016-11-01  
受教了

相关推荐

    Spring+SpringMVC+Mybatis最简单的整合示例

    这个最简单的整合示例可以帮助初学者快速理解三个框架如何协同工作。通过学习和实践这个示例,你可以掌握Spring、SpringMVC和Mybatis的基本用法,为进一步深入学习和开发复杂项目打下坚实基础。在实际项目中,还需要...

    Lucene4.8+IKAnalyzer+SpringMVC4+Jsoup+Quartz示例

    本示例项目"Lucene4.8+IKAnalyzer+SpringMVC4+Jsoup+Quartz"为我们提供了一个强大的智能搜索引擎搭建框架,它整合了多项关键技术,旨在帮助开发者高效地实现网页抓取、内容分析和定时任务等功能。 首先,Lucene是...

    Java网络程序:前台、后台框架示例.rar

    Java网络程序设计是一个涵盖多个领域的复杂主题,包括前端和后端框架的应用。在这个"Java网络程序:前台、后台框架示例"中,我们看到作者尝试使用Java语言来构建一个包含前后台功能的程序。让我们深入探讨一下这个...

    springMVC+Mybaits+dwr示例

    这个小例子展示了如何将这三个框架整合在一起,构建一个具备前后端交互功能的简单Web应用。通过学习和理解这个示例,开发者可以更好地掌握SpringMVC的请求处理机制、MyBatis的数据库操作以及DWR的AJAX通信方式,为...

    web前端开发-web前端框架-vuejs框架课件ppt教材-学习(从入门到精通)

    - **定义**: Vue.js是一个渐进式的JavaScript框架,专注于构建用户界面。 - **特性**: - **渐进式**: 可以逐步引入Vue.js,无需一开始就全面采用。 - **解耦**: 视图与数据分离,使得维护更容易。 - **组件化**...

    2024年前端最新场景题面试攻略.pdf

    下面是一个简单的示例代码,演示如何实现整个页面的截图: ```html &lt;!DOCTYPE html&gt; 截图示例 #canvas { position: fixed; left: 0; top: 0; z-index: 9999; } 截图示例 这是一个简单的截图示例...

    oracle-pagehelper-通用mapper-easyui-SSM框架示例

    综上所述,"oracle-pagehelper-通用mapper-easyui-SSM框架示例"是一个完整的Java Web项目,利用SSM框架连接Oracle数据库,通过PageHelper实现分页查询,通用Mapper简化数据库操作,EasyUI构建用户友好的前端界面。...

    Spring 框架学习总结-学习代码示例

    以下是一个简单的Spring配置文件`beans.xml`示例,展示了Bean的定义和依赖注入: ```xml ``` 对应的`ExampleBean`类: ```java public class ExampleBean { private String name; public void setName...

    ssm框架创建的一个最基本的项目

    在这个基本的SSM项目中,"hello"可能代表了一个初始的测试模块或者一个简单的Hello World示例。开发者可以在此基础上添加自己的业务实体类、DAO接口、Mapper XML文件、Service接口和服务实现类、Controller类等,...

    ssh框架开发简单实例

    这个"ssh框架开发简单实例"提供了一个适合新手学习的标准配置和应用示例。以下将详细讲解SSH框架及其在实际开发中的运用。 1. **Struts**: Struts是一个基于MVC(Model-View-Controller)设计模式的Web应用框架。...

    SpringMVC+mysql+idea+JDBC实现的登陆注册系统

    在本项目中,"SpringMVC+mysql+idea+JDBC实现的登陆注册系统"是一个适合初学者上手的Web应用程序。它结合了多种技术,包括...同时,也能让他们了解如何构建一个简单的登录注册系统,为后续更复杂的Web开发打下基础。

    Spring3 第一个程序 (常用包下载)

    它提供了一个灵活的MVC实现,允许开发者将模型、视图和控制器分离,从而实现更好的代码组织和解耦。在"Spring MVC开发最常用的包集合"中,我们可以找到一些关键的类库,如`spring-webmvc.jar`,这个包包含了处理HTTP...

    SSM精简最新版本2017-10-28

    这个"SSM精简最新版本2017-10-28"的压缩包文件,显然是一个包含了SSM框架集成应用的示例项目,旨在帮助开发者快速理解和使用SSM框架进行开发。 首先,Spring作为核心容器,负责管理应用程序的Bean,通过依赖注入...

    Struts2HiberSpring+简单的dwr整合

    在"Struts2HiberSpring+简单的dwr整合"这个例子中,开发者可能已经创建了一个示例应用,其中Struts2负责处理HTTP请求,Hibernate用于数据库操作,Spring作为整体的胶水框架,管理依赖并提供事务控制。DWR的引入可能...

    webwork+spring+ibatis简单实例

    这个"webwork+spring+ibatis简单实例"提供了如何整合这三个框架来创建一个功能完整的应用程序的示例。以下是关于这三个框架及其整合方式的详细说明: **WebWork**: WebWork是一个轻量级的MVC(模型-视图-控制器)...

    maven+springmvc

    ”这样的简单示例。在SpringMVC中,JSP常用于创建视图层,接收并展示由控制器处理后的数据。 2. `META-INF`:这个目录包含元数据,如MANIFEST.MF文件,它定义了jar或war文件的属性,如类路径和版本信息。在Web应用...

    Javascript模版引擎Handlebars.js源文件与示例

    1. **注册模板**:首先,你需要创建一个模板字符串,然后使用`Handlebars.compile()`方法将其编译成一个函数。 ```javascript var templateString = "&lt;p&gt;{{name}}&lt;/p&gt;"; var template = Handlebars.compile...

    spring3+springMVC3+springJDBC3+jQuery easyui的运行环境

    本示例提供的"spring3+springMVC3+springJDBC3+jQuery easyui"就是一个经典组合,适用于开发高效、可维护的后端服务和用户友好的前端界面。让我们逐一深入探讨这些技术的细节。 首先,Spring框架(版本3)是Java...

Global site tag (gtag.js) - Google Analytics