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+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 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实现利用phpexcel导出数据
2013/08/24 PHP
php中使用sftp教程
2015/03/30 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
Python 创建子进程模块subprocess详解
2015/04/08 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
python通过socket查询whois的方法
2015/07/18 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
英国电器零售商:PRC Direct
2018/06/21 全球购物
2015年度村委会工作总结
2015/04/29 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL