JavaScript 命名空间 使用介绍


Posted in Javascript onAugust 29, 2013

使用过Java、C#的同学对命名空间非常的熟悉,在复杂的系统中会有N多的函数、对象,语言提供的、架构预定义的,这么多的函数和对象,由于编程规范要求起有实际意义的名字,难免会重名发生错误调用,而有了命名空间烦恼就没有了,不但可以分类组织函数与对象,还可以形成隔离,解决重名问题。

使用JavaScript就没有这么舒服了,Javascript只有函数作用域,什么块儿啊、神马文件啊统统都认为是一个命名空间的,有时候因为一些重名问题导致的错误让人莫名其妙,难以调试解决。

一个简单的例子

<input type="button" value="test" onclick="alert();"/>        <script type="text/javascript">
            function alert(){
                //.......
                test2();
                //.......
            }
            function test2(){
                alert('test2')
            }

在个例子在不同的浏览器下有不同表现,IE会报Stack over flow, Firefox会死掉。。。反正都会报错,很简单的错误,代码中自定义了一个alert函数,在alert函数中调用了test2函数,test2函数中意图调用window的alert方法,这样循环调用了,也许看了你会说这么明显的错误谁会犯,但是如果自定义的方法叫close(这个经常会出现吧),然后内部调用了一个外部文件的函数,该函数调用了window的close方法,这样错误是不是隐蔽了很多呢。

简单的命名空间

由于JavaScript没有文件作用域,不同的函数分散在不同的文件中,甚至由不同的人编写,重名的概率大大增加。是不是足够小心就可以了呢?也不尽然,还有些意外情况,比如经常会用到继承,于是写了一个没出现过的函数名extend,不料在EcmaScript5中加入了extend函数,命名空间的必要性就体现出来了。

JavaScript有函数的作用域,可以利用这点把自定义的函数写到一个函数体内,这样函数内的变量、对象、函数就像在一个命名空间内一样和外部隔离。

<input type="button" value="test" onclick="(new namespace()).alert();"/>        <script type="text/javascript">
            function namespace(){
                this.alert=function(){
                    console.log('test');
                }
            }
        </script>

这样自定义的alert方法就不会和window的alert冲突了。

简单进化

这样可以是可以,但也有问题,最大的问题在于调用方式复杂而丑陋!每次调用的时候都要实例化对象,然后调用其方法,简单修改代码让其实现自动实例化。

<input type="button" value="test" onclick="NS.alert();"/>        <script type="text/javascript">
            (function namespace(){
                this.alert=function(){
                    console.log('test');
                }
                window.NS=this;
            })();
        </script>

要看明白上面代码首先要了解一下“立即执行函数”(江湖人是这么称呼的)的技巧结构类似这样

(function xxx(){
       //function body 
 })();
 

这样写xxx函数就可以在定义完后自动执行,看起来神奇,其实上面写法可以拆成这样
function xxx(){
       //function body 
 }
xxx();

就是定义一个函数,然后使用括号语法调用,而函数定义外面的一层括号只起到将函数声明转为函数定义表达式,因为只有表达式才可以使用括号调用。看明白这些妖蛾子之后上面代码就简单了,在自定义namespace函数最后把this赋值为window的NS属性,在调用的时候直接使用NS.xx就可以了。看起来好了很多。

美化一下

上面的写法看起来不错了,但是函数名namespace貌似是多余的了,可以美化一下

(function (){
                this.alert=function(){
                    console.log('test');
                }                window.NS=this;
            })();

变成了一个立即执行的匿名函数,美化了一些,不过看起来还是怪怪的,对呀,明明是实例化的function,为什么方法定义不写到prototype中呢,匿名函数怎么写prototype。。。,还得动动脑筋

(function(){
                var _NS=function(){                }
                _NS.prototype.alert=function(){
                    console.log('test');
                }
                window.NS=new _NS();
            })();

写几个有用的函数

querySelector和querySelectorAll是W3C提供的新的查询接口,但是名字好长,自己写个简单的,innerHTML属性也常用到,写个简单版仿jQuery的html方法

(function () {
            var _NS = function () {            }
            _NS.prototype.select = function (selector,context) {
                var context = context || document;
                return context.querySelectorAll(selector);
            }

            _NS.prototype.isArrayLike=function(obj){
                if(obj instanceof Array){
                    return true;
                }
                var length=obj.length;
                if ( obj.nodeType === 1 && length ) {
                    return true;
                }
                return false;
            }
            _NS.prototype.html = function (obj,value) {
                var isArray=this.isArrayLike(obj), i=0;
                if (typeof value == 'string') {
                    if (!isArray) {
                        obj.innerHTML = value;
                    } else {
                        var length = obj.length;
                        while (i < length) {
                            obj[i].innerHTML = value;
                            i += 1;
                        }
                    }
                } else {
                    if (!isArray) {
                        return obj.innerHTML;
                    } else {
                        return obj[0].innerHTML;
                    }
                }
            }
            window.NS = new _NS();
        })();

这样一个带有命名空间的简单JavaScript库就写成了,不用担心命名冲突了,但是用起来很不方便啊,做前端的同学都用过jQuery,人家用起来那叫一个简单,jQuery是怎么做的?欲知后事如何,且听下回分解。

Javascript 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
js分页工具实例
Jan 28 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
jquery ajax分页插件的简单实现
Jan 27 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
npx create-react-app xxx创建项目报错的解决办法
Feb 17 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
JavaScript prototype 使用介绍
Aug 29 #Javascript
JavaScript创建对象的写法
Aug 29 #Javascript
jQuery实现用户注册的表单验证示例
Aug 28 #Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 #Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 #Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 #Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 #Javascript
You might like
用PHP和ACCESS写聊天室(三)
2006/10/09 PHP
七款最流行的PHP本地服务器分享
2013/02/19 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
python实现txt文件格式转换为arff格式
2018/05/31 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
Python reversed函数及使用方法解析
2020/03/17 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
百度吧主申请感言
2014/01/12 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
2014年个人总结范文
2015/03/09 职场文书
敬老院活动感想
2015/08/07 职场文书
四年级语文教学反思
2016/03/03 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫