仿网易邮箱5.0（二）：core.js

今天我们来看在写此UI框架时的第一个js文件，本来想将所有的基本的js都写入此文件，但由于使用jquery而导致这个文件很小，不算注释仅有几十行大小。先上代码，然后我们再来一块说明每个函数在整个框架中的用处。

  1 /**
  2  * Neter核心库
  3  * @author Ly
  4  * @date 2012/11/14
  5  * @version 1.0
  6  * @namespace Neter
  7  */
  8 ;(function(window, $) {
  9     // 插件相对于调用页面的路径
 10     var __path__  = '',
 11         __skin__  = '天空蓝',
 12         __color__ = '#135BA5';
 13     
 14     /**
 15      * @static
 16      * @class
 17      * @name Neter
 18      */
 19     window.Neter = window.Neter || {};
 20     
 21     $.extend(Neter, {
 22         /**
 23          * @type String
 24          * @constant
 25          * @name Neter.version
 26          */
 27         version : '1.0',
 28         
 29         /**
 30          * 创建命名空间
 31          * @static
 32          * @function
 33          * @name Neter.namespace
 34          * @param {String} namespace 以点分隔的命令空间字符串，即要转换的字符串。
 35          * @return {Neter} 返回Neter引用
 36          */
 37         namespace : function(namespace) {
 38             var arg = arguments, ns = null, nsArray, obj;
 39             
 40             for (var i = 0; i < arg.length; i++) {
 41                 nsArray = arg[i].split('.');
 42                 obj = nsArray[0];
 43                 
 44                 eval('if (typeof ' + obj + ' == "undefined") { ' + obj + ' = {}; } ns = ' + obj + ';');
 45                 
 46                 for (var j = 1; j < nsArray.length; j++) {
 47                     ns[nsArray[j]] = ns[nsArray[j]] || {};
 48                     ns = ns[nsArray[j]];
 49                 }
 50             }
 51             
 52             return this;
 53         },
 54         /**
 55          * 日志输入，如果开启Firebug，则直接使用控制台进行输出。若在控制台中无法调用console则不输出日志
 56          * @static
 57          * @function
 58          * @name Neter.log
 59          * @param {*} msg 要输出的信息，可以是字符串，也可以是一个dom元素，字符串中支持点位符：%d/%s/%o
 60          * @param {*} [param] 用来填充参数msg点位符的参数，当有此参数时必须传递type参数。
 61          * @param {String} [type='log'] 输出类型，默认为log，支持info/warning/error等
 62          */
 63         'log' : function(msg, param, type) {
 64             var arg = [].slice.call(arguments, 0);
 65             
 66             type = arg.length < 2 ? 'log' : arg.pop();
 67             
 68             typeof console === 'object' && typeof console[type] === 'function' && console[type].apply(console, arg);
 69             
 70             return this;
 71         },
 72         /**
 73          * 设置或获取插件路径
 74          * @static
 75          * @function
 76          * @name Neter.path
 77          * @param {String} [path] 插件路径，省略则为获取插件路径
 78          * @return {String|Neter} 若有path参数，则返回Neter引用，否则返回插件路径。
 79          */
 80         path : function(path) {
 81             if (path) {
 82                 __path__ = path;
 83             } else {
 84                 return __path__;
 85             }
 86             return this;
 87         },
 88         /**
 89          * 拷贝属性
 90          * @static
 91          * @function
 92          * @name Neter.apply
 93          * @param {Object} aim 目标对象
 94          * @param {Object} source 源对象
 95          * @param {Object} [defaults] 默认对象，即用这个对象中的值覆盖源对象中同名属性
 96          * @param {Array} [mask] 需要屏蔽掉的属性，即不需要拷贝的属性
 97          * @return {Object} 返回目标对象aim
 98          */
 99         apply : function(aim, source, defaults, mask) {
100             aim      = aim || {};
101             source   = source || {};
102             defaults = defaults || {};
103             mask     = mask || [];
104             
105             for (var p in source) {
106                 if (~$.inArray(p, mask)) { continue; }
107                 aim[p] = source[p];
108             }
109             
110             for (var p in defaults) {
111                 if (~$.inArray(p, mask)) { continue; }
112                 aim[p] = defaults[p];
113             }
114             
115             return aim;
116         },
117         /**
118          * 获取或保存当前系统中正在使用的皮肤
119          * @static
120          * @function
121          * @name Neter.skin
122          * @param {String} [name='天空蓝'] 要保存的皮肤名称，省略则获取
123          * @return {String|Neter} 若提供color参数则返回Neter引用，否则返回当前的皮肤名称
124          */
125         skin : function(name) {
126             if (name) {
127                 __skin__ = name;
128             } else {
129                 return __skin__;
130             }
131             return this;
132         },
133         /**
134          * 设置获取保存当前皮肤的基准色
135          * @static
136          * @function
137          * @name Neter.color
138          * @param {Number|String} [color='#135BA5'] 要设置的颜色，省略则获取
139          * @return {String|Neter} 若提供color参数则返回Neter引用，否则返回当前的颜色值
140          */
141         color : function(color) {
142             if (typeof color === 'undefined') {
143                 return __color__;
144             } else {
145                 __color__ = color;
146             }
147             return this;
148         }
149     });
150 })(window, $);

这个文件中的Neter对象很简单，都是些静态方法。

1、version属性，这个就不用说，仅是用来表示当前框架的版本号，可以直接忽略掉。

2、namespace方法，这个是用来生成一个命名空间，主要是用于像是比较长的命名空间的创建，如果很短的话也就无所谓了，咱们自己写也可以，如果像是：Neter.Plugin.Grid.View这种借助于Neter.namespace就很简单了。

1 // 普通方式
2 window.Neter = window.Neter || {};
3 Neter.Plugin = Neter.Plugin || {};
4 Plugin.Grid  = Plugin.Grid || {};
5 Grid.View    = Grid.View || {};
6 
7 // Neter.namespace
8 Neter.namespace('Neter.Plugin.Grid.View');

3、log方法，此方法其实就是对控制台对象console的一个封装，仅是当控制台未打开时调用console不至于报错。在这里还有一个小问题，即在chrome下console中的方法调用，仅能是console本身调用，也就是说不能写成console.apply(null, [1,2,3]);，但在firebug下就无所谓了。

4、path方法，用来设置或获取当前框架的路径，这个主要是用在框架中使用到图片的地方。

5、apply方法，用来拷贝对象的属性与方法，与jquery中的extend相似，唯一多的就是最后一个参数mask，这个参数是一个数组，数组中的每个元素都是表示在拷贝中要忽略掉的key。

6、skin方法，用来设置与获取当前系统中使用的皮肤，这个在Neter.Skin类中会调用。

7、color方法，用来设置与获取当前系统中使用的基准色，这个基准色也是由Neter.Skin类来控制。

 

总之，这个文件的功能很少，没有一些实质性的东西，接下来的内容才会涉及到UI相关的。

posted @ 2012-12-08 13:40  AUOONG  阅读(394)  评论(0)  编辑  收藏  举报