前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端解耦的一个最简单示例

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

作者头像
四火
发布2022-07-15 20:09:41
7630
发布2022-07-15 20:09:41
举报
文章被收录于专栏:四火的唠叨四火的唠叨

且看这样一段 HTML 片段:

代码语言:javascript
复制
<div style="background-color: red" id="name" onclick="alert('');">
    Jim
</div>

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

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

代码语言:javascript
复制
<div id="name" class="name" onclick="alert('');">
    Jim
</div>

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

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

代码语言:javascript
复制
<div id="name" class="name" onclick="clickName()">
    Jim
</div>

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

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

代码语言:javascript
复制
<div id="name" class="name">
    Jim
</div>

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

代码语言:javascript
复制
$("#name").click(
    function(){ alert(""); }
);

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

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

代码语言:javascript
复制
<script type="text/template" id="name-template">
    <div id="name" class="name">
        <%=name%>
    </div>
</script>

增加 js 代码,渲染模板:

代码语言:javascript
复制
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 又剥离成为模板和数据两个部分。

文章未经特殊标明皆为本人原创,未经许可不得用于任何商业用途,转载请保持完整性并注明来源链接 《四火的唠叨》

×Scan to share with WeChat

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档