【web前端】聊聊MUI

        MUI（Mobile User Interface）是一套基于Html5，用于手机端界面开发的框架，它追求性能致力于UI原生体验，不依赖任何第三方JS库。以前接触的EasyUI、BootStrap应用在网页中没有多大问题，但是一放到手机上单独使用问题就来了，所以很多技术结合起来用各取所长才是最好不过的。

        UI组件是MUI的基础，以iOS 7为基础，补充部分Android特有控件。一般页面常用到的元素都包含在这部分，像按钮、消息框、图标、图文列表等等各种小部件。它们的特点是独立性，都是一个小个体，各自拥有特定的功能。

            

        窗口管理是MUI的门面，通过预加载解决切页白屏问题，通过封装原生动画解决SPA模式的动画卡顿。它的功能范围在页面级别，相当于控制了一个页面从开始到结束的整个流程，主要功能包括：页面初始化、创建子页面、打开新页面、关闭页面、预加载。

        事件管理是MUI的灵魂，极简的Js函数是它对自己的定义，不过我觉得熟悉了Ajax对它的简洁性倒是没太大感觉。事件管理在MUI中起到了穿针引线的功能，它把UI组件之间相关联的功能串接起来，给每个UI组件注入了灵力，让它们不再是单打独斗的小个体。相比较于网页前端的开发，这里加入了手势事件，更方便了手机用户的操作习惯，这个功能很赞。

        utils是MUI的核心，很多功能都封装在了它里边

               框架层面的配置集中在mui.init()方法中；mui()使用css选择器获取HTML元素，返回mui对象数组；

               each()既是一个类方法，同时也是一个对象方法，即我们可以用它遍历数组、json对象，也可以用它遍历DOM结构；

               extend()将两个对象合并成一个；later()封装了setTimeOut功能，这个在方法调用中还是挺常用到的；

             scrollTo()是对滚动条的控制，和iframe、input等控件结合起来用的时候还是挺烦人的；

             os()用于判断当前运行环境的需求；

        Ajax，mui提供了mui.ajax()方法，它封装了常用的Ajax函数，并在此基础上，做了进一步简化；上拉刷新、下拉加载功能中，加入了一些动画的感觉，一般对页面内容比较丰富的场景使用。

       MUI使用起来很简单，只要引入必要的js、css，接下来按照html规范，加入mui的特性类支持即可。调试一般选用google浏览器，它提供了对手机模式的支持，这个看个人习惯。

       MUI官网：http://dev.dcloud.net.cn/mui/