基于JQuery的messager弹窗组件开发

昨天晚上和今天白天，主要完成了一个弹窗组件开发，在开发的过程中发现自己的问题和整理思路，将自己的想法通过代码实现并最终看到效果，是一个很享受的过程。在本次实践中，我学习到了以前没有注意的小的用法和知识点。当然里面的一些方法也是得到项目组的大神的指导才豁然开朗的，而且有些方法不熟悉，正好通过这次实践巩固一下。

下面我将自己完成的思路和完成过程中学到和用到的知识点总结如下：
我们先看下要求吧！

第一步：先分析要实现的需求。老师说最好是组件化开发，所以就想到了要传参数设计。想到了需要title，message，icon，fn四个参数。我先构建了基本的HTML页面，通过模拟情况实现了需求所要实现的，不过是静态的，其实时间大部分花在了CSS样式上，还好是参考了easyui插件开发，里面的一些基本样式得已快速确定，比如颜色搭配之类的。
发现了几个用法是之前没用过的。

1、  outline: medium none; 

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。不过我目前并没有发现这个属性的很好的用处。

border-width: 1px 1px 0px;
border-color: #dddddd #95b8e7 #95b8e7;

第二步：实现global.js全局文件的编写，主要是对JQ通过 .extend()方式和 .messager={}引入命名空间进行扩展。扩展了字符串拼接方法、元素拖动方法、弹窗函数。

$target.offset();
//获得当前元素相对于文档偏移的位置，包含left、top两个属性。
（$target.offset().left）

e.pageX;//获得鼠标相对于文档偏移的X方向的位置。

var _offset = $target.offset();
      var X = e.pageX - _offset.left,
      Y = e.pageY - _offset.top,
      left, top;
      $(document).on('mousemove', function(e) {
           left = e.pageX - X;
           top = e.pageY - Y;
           if (top < 0) top = 0;
           $proxy.css({
                'left': left,
                'top': top
            });
      });

这样设计的原理，其实理解起来就一点，元素是以左上角为偏移位置计算点的，鼠标是一个点，直接有偏移位置计算点，移动的过程就相当于把这两个点连接成的直线根据鼠标的移动进行平移，元素看成有限个点，作同样的平移动作，最终就会形成鼠标移到哪，整个元素就移动要哪的效果。

第三步：实现js.js。通过元素的获取绑定事件并调用扩展函数来获得效果。

//通过元素获取绑定事件，调用扩展函数方法，实现效果。
$("#messager-alert a").eq(1).on("click",function(){
        $.messager.alert('My Error','Here is a error message!','error');
});

总结：通过本次实践，有了一点组件开发的概念和对一些基础知识的巩固。继续加油，坚持练习，坚持看书。