飞鱼 ^_^ 浆抱罗斯‘s blog

函数命名冲突问题，相信很多人碰到过。
作为一个刚做js 不久的 小虾米来说，我也没有太多发言权。
但可喜的是最近做的一个系统级的应用项目中碰到了这个问题。
之前在老系统里看到很多程序员参与进来各种小需求，也带进来了好多大大小小的函数，导致某些页面的函数命名很是多样化。
对于如何避免命名冲突问题，自然很多开发都选择了加长函数名称这条无奈但是又死板又实用的方法，如getTranslateTargetIntro,看到这样的名称就是蛋疼。但是结果让其他中途进来的开发前端等蛋很疼~~~，并且到处都是全局变量，冲突得让人想死。 =，=

原因在哪里~~~~?

因为它历史悠久~~~，当初设计这个系统的时候，架构师没想到它以后会成为一个庞大的系统，也不曾想过以后还有那么多蛋疼的前端会加入进来，更没想过，页面上的交互会越变越多，只是单纯的想解决燃眉之急的一个小交互。
于是乎，很多规则，命名方式，功能架构都没有一个清晰的解释型的图表出来。

得扯远了··· 唠叨了一下，^_^

对于一个新的系统，命名冲突问题如何解决？

我就单单说说我最近做的这个系统中关于js 部分的函数命名的一个方法吧。
先看一下如下图：

智商高的童鞋相信看了这图就知道啥意思，这个东东可是我哥写了那么多js以及 OOP思想的一些结晶，我觉得很强大，至少我这么觉得，因为很好用。飞鱼端了端眼睛：看不懂的话，继续往下看^_^

首先是减少全局参量
全局这个东西 应该是越少越好，就像jquery 用个美元$号一样（虽然经常被其他js 库抢），所以如果要让一个系统有一个简洁的js 系统架构，最好给它起个全局变量，这样的好处是，你的系统只占一个全局变量(当然jquery等$是必须的，因为你得依赖它)。这样从命名上就避开了全局变量冲突的问题。

让你的js 系统函数 都分组升级成类
然后根据系统的功能的类型 进行划分，比如web中系统应用，无外乎 layout 初始化，然后是Effect效果，然后是通用模块，等等。这样做的好处是当你有需求要添加什么功能的时候就可以对症下药，而不会出现要加什么功能就往系统里的js 部分最下方添加，导致页面上的js 代码 像狗皮膏药一样，那样会让你的代码很没有深度以及层次(此句话，很有深度，借用我哥的话)
可能上面说的全局变量，功能分类说了懂了，但不知道咋实现。这一步开始将它实体化。
新建一个js文件my.js，写入如下面的代码:

var My = {}

然后给你的系统添加一个启动函数，就像机器的开关一样，我们将其命名为run()多么直观^_^

var My = {
    run: function() {
         //just do something....
         alert('你好，死猪！')
    }
};

上面的代码其实就是一个类，和它的一个方法，完全的OOP 思想。
那么怎么启动它呢，很简单在它的下面加个动作来开动它。就是标准的jquery 语法。

$(function() {
    My.run();
});

这样我们的系统就起来了。
然后我们给系统增加一些功能，先从layout模块 来。
My 类下添加一个新的子类 My.Layout。

var My = {
    run: function() {
         //just do something....
         alert('你好，死猪！');
         My.Layout.run();
    }
};
My.Layout = {
    run: function() {
         alert('您又便秘啦？');
    }
};

这里有个小技巧就是子类命名方式是首字母大写，用2个英文单词构成，来提高识别度。
看起来，这样来访问My.Layout.run(); 这个方法还是挺长，但是它用点号分隔开，让其命名方式变成了三维。而不是MyLayoutrun()这样的一维命名方式。这样层次一目了然。让我们再增加一个子类，就会了解这其中的奥秘了。

var My = {
    run: function() {
         //just do something....
         alert('你好，死猪！');
         My.Layout.run();
         My.Panel.run();
    }
};
My.Layout = {
    run: function() {
         alert('您又便秘啦？');
    }
};
My.Panel = {
    run: function() {
         alert('死了算了=，=');
    }
};

这个感觉就像是一台机器一样，显示我打开的开关，机器开始启动，初始化了一些初始操作触发了显示模块，然后再做通用模块的操作。 一切都是有秩序的在执行着。很有感觉吧？^_^ 继续

var My = {
    run: function() {
         this.root = {};
         this.root.head = $('#head');
         this.root.main = $('#main');
         var root= this.root;
         My.Layout.run(root);
         My.Panel.run(root);
    }
};
My.Layout = {
    run: function(root) {
         this.root = root;
         thit._init_resize()
    },
    _init_resize: function() {
         alert('您又便秘啦？' + this.root.main.text());
    }
};
My.Panel = {
    run: function() {
         alert('死了算了=，=');
    }
};

这一步是亮点，我将一些需要全局用到的对象打包成一个root之类，然后带入到每个其他子类中，这样就可以访问到这些对象，而不需要另外再申明，(我不知道这样子做能够节省内存开销，还是会浪费，但感觉应该是前者)
这样子的写法，让整个js 系统被一些关系连接在一起，但是又很容易切开，(比如：注释掉My.Panel.run(root) 就能关闭整个Panel 功能，就像一个一个小插件一样)。

扯得优点离题了，其实也不离题啦，这样子写本来就很难产生命名冲突，并且命名规则可以很有秩序，并且不会出现非常长的纠结的名称。

您可能还对这些日志感兴趣

• 闭包式 js架构 前端书写心得(上)
• 三元运算符 使用小技巧一则 – javascript
• 神经特长 – lazy hover 延迟激活jquery 插件
• 走马观花 – jQuery调试工具- jQuery pad
• 隔山打牛 – jQuery中 trigger() & bind() 使用心得 (二)