M.js 是文叔来加入小米之后,和团队一起整起来的一套开发框架,其实没有什么创新之处,更多是为了方便开发的同时使得前端的代码量降低。之前用jQ试过,但jq的一个包就80K 着实让人有点受不了。
M.js的大小一直维持到20K左右,体积小就意味着功能弱,这是必然了。特别是在没有一个良好的架构前提下,更是这样。或许换句话说M.js也许就是有些同学经常所说的仅仅是一些方法的堆砌而且,所以M.js本不应该拿出来炫耀,更不能拿来误人子弟了。但文叔还是觉得M.js也并非完全的一无是处,各位看官且听某一一道来。
首先,要说是的核心。M.js的核心其实很简单,在我看来就那么几个重要的方法:
- M.template 模版方法
- M.extend 继承
- M.Object M.js的原始Class,它提供了M.js里最常用,也算是最核心的事件驱动机制。
- M.override class扩展或叫方法覆盖。
除了以上几个最主要的,还有一些常用的工具方法,某就不一一表述了。后面某要跟大家重点介绍下第2、第3和第4。
其次,M.js里面当然有一些必不可少的东西,那就是对Dom元素的操作,这个称之为M.js的Element。M.Element提供了对DOM元素的常规操作,比如html方法获取或设置dom元素的innerHTML等。当然M.Element是继承自M.Object,等等,这里为嘛要继续自M.Object呢?后吧,再埋个坑后面再说。在M.js里面如果你想产生一个新的元素,可以选择这样玩:
new M.Element("div",{ html:'this is html' , id:'id' , events: { click:function(){ alert(this.html() )} } }).appendTo("body")
上面这句就在body下产生了一个新div元素,并且当点击这个div的时候会弹出里面的内容。
最后,M.js必需得提供Ajax的封装啊。所以就有了 M.Net.ajax 。ajax当然是为了方便处理ajax请求的了。
好吧,总结上面埋的几个坑。第一是为什么有M.Object,貌似就是一个完全无用的废物啊。当然文叔设计这玩意不是拿来做摆设用啊。
M.Object实际上提供了一套事件驱动机制,你可以对M.Object进行监听任意一个事件,当M.Object的发生了这个事件后就可以执行你的回调。你可以就像对dom元素监听事件一样监听M.Object。
M.extend ,就是为了让你能方便扩展M.Object,以M.Object为基类,构建你的业务模型。
至于M.override正如我上面所述,你可以对M.Object进行方法覆盖,当你觉得某个Class的方法不合适的时候就可以用这货把原来不合适的覆盖掉,当然你也可以拿来扩展能力用。