位置: 编程技术 - 正文

仅30行代码实现Javascript中的MVC(代码行数不够了,怎么弄多行)

编辑:rootadmin

推荐整理分享仅30行代码实现Javascript中的MVC(代码行数不够了,怎么弄多行),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:教你一行代码,代码行数kloc,几十行代码,代码行数kloc,几十行代码,代码行数,代码20行,20行代码实现promise,内容如对您有帮助,希望把文章链接给更多的朋友!

从年左右开始,MVC逐渐在前端领域大放异彩,并终于在刚刚过去的年随着React Native的推出而迎来大爆发:AngularJS、EmberJS、Backbone、ReactJS、RiotJS、VueJS…… 一连串的名字走马观花式的出现和更迭,它们中一些已经渐渐淡出了大家的视野,一些还在迅速茁壮成长,一些则已经在特定的生态环境中独当一面舍我其谁。但不论如何,MVC已经并将持续深刻地影响前端工程师们的思维方式和工作方法。

很多讲解MVC的例子都从一个具体的框架的某个概念入手,比如Backbone的collection或AngularJS中model,这当然不失为一个好办法。但框架之所以是框架,而不是类库(jQuery)或者工具集(Underscore),就是因为它们的背后有着众多优秀的设计理念和最佳实践,这些设计精髓相辅相成,环环相扣,缺一不可,要想在短时间内透过复杂的框架而看到某一种设计模式的本质并非是一件容易的事。

这便是这篇随笔的由来——为了帮助大家理解概念而生的原型代码,应该越简单越好,简单到刚刚足以大家理解这个概念就够了。

1. MVC的基础是观察者模式,这是实现model和view同步的关键为了简单起见,每个model实例中只包含一个primitive value值。

借助观察者模式,我们已经实现了在调用model的set方法改变其值的时候,模板也同步更新,但这样的实现却很别扭,因为我们需要手动监听model值的改变(通过watch方法)并传入一个回调函数,有没有办法让view(一个或多个dom node)和model更简单的绑定呢?

2. 实现bind方法,绑定model和view

通过一个简单的封装,view和model之间的绑定已经初见雏形,即使需要绑定多个view,实现起来也很轻松。注意bind是Function类prototype上的一个原生方法,不过它和MVC的关系并不紧密,笔者又实在太喜欢bind这个单词,一语中的,言简意赅,所以索性在这里把原生方法覆盖了,大家可以忽略。言归正传,虽然绑定的复杂度降低了,这一步依然要依赖我们手动完成,有没有可能把绑定的逻辑从业务代码中彻底解耦呢?

仅30行代码实现Javascript中的MVC(代码行数不够了,怎么弄多行)

3. 实现controller,将绑定从逻辑代码中解耦

细心的朋友可能已经注意到,虽然讲的是MVC,但是上文中却只出现了Model类,View类不出现可以理解,毕竟HTML就是现成的View(事实上本文中从始至终也只是利用HTML作为View,javascript代码中并没有出现过View类),那Controller类为何也隐身了呢?别急,其实所谓的"逻辑代码"就是一个框架逻辑(姑且将本文的原型玩具称之为框架)和业务逻辑耦合度很高的代码段,现在我们就来将它分解一下。如果要将绑定的逻辑交给框架完成,那么就需要告诉框架如何来完成绑定。由于JS中较难完成annotation(注解),我们可以在view中做这层标记——使用html的标签属性就是一个简单有效的办法。

就这么简单吗?就这么简单。MVC的本质就是在controller中完成业务逻辑,并对model进行修改,同时model的改变引起view的自动更新,这些逻辑在上面的代码中都有所体现,并且支持多个view、多个model。虽然不足以用于生产项目,但是希望对大家的MVC学习多少有些帮助。

整理后去掉注释的"框架"代码:

后记:

笔者在学习flux和redux的过程中,虽然掌握了工具的使用方法,但只是知其然而不知其所以然,对ReactJS官方文档中一直强调的 "Flux eschews MVC in favor of a unidirectional data flow" 不甚理解,始终觉得单向数据流和MVC并不冲突,不明白为什么在ReactJS的文档中这二者会被对立起来,有他无我,有我无他(eschew,避开)。终于下定决心,回到MVC的定义上重新研究,虽然平日工作里大大咧咧复制粘贴,但是咱们偶尔也得任性一把,咬文嚼字一番,对吧?这样的方式也的确帮助了我对于这句话的理解,这里可以把自己的思考分享给大家:之所以觉得MVC和flux中的单向数据流相似,可能是因为没有区分清楚MVC和观察者模式的关系造成的——MVC是基于观察者模式的,flux也是,因此这种相似性的由来是观察者模式,而不是MVC和flux本身。这样的理解也在四人组的设计模式原著中得到了印证:"The first and perhaps best-known example of the Observer pattern appears in Smalltalk Model/View/Controller (MVC), the user interface framework in the Smalltalk environment [KP]. MVC's Model class plays the role of Subject, while View is the base class for observers. "。

如果读者有兴趣在这样一个原型玩具的基础上继续拓展,可以参考下面的一些方向:

1. 实现对input类标签的双向绑定 2. 实现对controller所控制的scope的精准控制,这里一个controller就控制了整个dom树 3. 实现view层有关dom node隐藏/显示、创建/销毁的逻辑 4. 集成virtual dom,增加dom diff的功能,提高渲染效率 5. 提供依赖注入功能,实现控制反转 6. 对innerHTML的赋值内容进行安全检查,防止恶意注入 7. 实现model collection的逻辑,这里每个model只有一个值 8. 利用es5中的setter改变set方法的实现,使得对model的修改更加简单 9. 在view层中增加对属性和css的控制 .支持类似AngularJS中双大括号的语法,只绑定部分html ……

一个完善的框架要经过无数的提炼和修改,这里只是最初最初的第一步,道路还很漫长,希望大家再接再厉。

谷歌showModalDialog()方法不兼容出现对话窗口的解决办法 showModalDialog,在测试中,IE,Firefox中正常运行,但是在google中,点击后没什么反应,在网上看了一下,谷歌浏览器不支持showModalDialog模态对话框和无法

JS中call/apply、arguments、undefined/null方法详解 a.call和apply方法详解--------------------------------------------------------------------------------call方法:语法:call([thisObj[,arg1[,arg2[,[,.argN]]]]])定义:调用一个对象的一

JavaScript中使用数组方法汇总 定义数组VararryMap={riskId:%=riskid%,riskType:%=risktype%};或Vararry=[];使用:varrisk=arryMap.riskId;Arry.push({id:1,name:1});Arry.push({id:2,name:2});数组中也可以放入单个值如:va

标签: 代码行数不够了,怎么弄多行

本文链接地址:https://www.jiuchutong.com/biancheng/381666.html 转载请保留说明!

上一篇:理解javascript中的with关键字(对于javascript理解)

下一篇:谷歌showModalDialog()方法不兼容出现对话窗口的解决办法(谷歌邮箱)

  • 可抵扣暂时性差异是指在确定未来收回资产
  • 计提税金账务处理
  • 公司纳税证明怎么开
  • 资产组可收回金额包含商誉吗
  • 银行账户利息怎么记账
  • 预缴土地增值税的会计处理
  • 建筑企业收到预售款时需要缴纳增值税吗
  • 原材料亏损率怎么算
  • 缴纳地方教育附加费现金流量选什么
  • 收到客户定金账务怎么做
  • 小规模纳税人房租发票税率是多少
  • 收到厂家返利如何做账
  • 收到餐饮费发票会计分录
  • 行政事业性收费计入什么科目
  • 固定资产差额
  • 代开增值税发票沒有付款怎么做账?
  • 软件行业研发费用比例有要求么
  • 应交增值税是总额吗
  • 外贸企业出口退税撤销申报
  • 成本核算的原则和要求
  • 一个产品要有什么认证
  • 商贸公司商品品种规格多如何核算
  • 资产报废对企业的好处
  • 修改apache的http服务端口为8080
  • 一般合同怎么写才有效
  • pytorch :OSError: [WinError 1455] 页面文件太小,无法完成操作。 Error loading 【已解决】
  • winform缓存解决方案
  • 发票刮出来的奖有兑奖时间
  • 单位车辆车船使用税滞纳金如何交
  • yii框架手册
  • 残疾人就业保障金怎么申报
  • download github
  • addr指令
  • php中常量
  • 固定资产实收资本按照什么入账
  • 工会经费缴纳方式的文件
  • 有销项无进项怎么处理
  • 现金劳务收入会计分录
  • 推广服务费可以抵扣吗
  • 小规模纳税人免增值税的账务处理
  • 运输行业一般纳税人开普票税率是多少
  • 开自家车出差怎样报销
  • 暂估成本账务处理办法
  • 可供出售的价格基本上可以估计
  • 公司支票可以转给个人吗
  • 无形资产出售时累计摊销为什么在借方
  • 代扣代缴的增值税额
  • 贴现凭证是什么意思
  • 对公付货款没有收到发票如何处理
  • 城市生活垃圾处理方式有哪几种
  • 款项已支付是什么科目?
  • 银行询证函快递费谁负担运费
  • 税金及附加科目借贷方向
  • 个人无偿赠与不动产税收管理
  • 企业材料物资的采购费用包括
  • mysql远程连接报10061
  • 注册表被锁定后的处理方法
  • centos6.5配置网络
  • 上网本安装win7
  • 东芝笔记本图片及型号
  • 怎么快速
  • win7电脑能登qq但打不开网页怎么办
  • win8 更改电脑设置
  • linux禁止root用户远程登录
  • windows10如何设置windows7开始菜单
  • 在Linux系统中安装Anaconda
  • perl 删除文件
  • typescript尖括号
  • javascript代码写在哪个标签里
  • unity text
  • js圆形链
  • 如何用python编写脚本
  • jquery easy ui
  • android自定义组件开发详解
  • android:ViewPager与FragmentPagerAdapter
  • 土地储备中心出让公告
  • 可以在企业所得税税前扣除的税金
  • 税务非正常认定条件
  • 中国税务总局贵州省税务局
  • 环保职责及管理范围
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设