zoukankan      html  css  js  c++  java
  • javascript 命名空间的实例应用

    /**
    * 创建全局对象MYAPP
    * @module MYAPP
    * @title MYAPP Global
    */
    var MYAPP = MYAPP || {};
    
    /**
    * 返回指定的命名空间,如果命名空间不存在则创建命名空间。
    * 备注:命名时需小心,注意保留关键字,可能在一些浏览器无法使用。
    *
    * @method namespace
    * @param {String *} 至少需要创建一个命名空间
    * @return {Object} 最后一个命名空间创建的对象的引用
    */
    MYAPP.namespace = function(str){
        var parts = str.split("."),
        parent = MYAPP,
        i=0,
        l=0;
    
        if(parts[0]==="MYAPP"){
            parts = parts.slice(1);
        }
        for(i=0,l=parts.length; i<l;i++){
            if(typeof parent[parts[i]] === "undefined"){
                parent[parts[i]] = {};
            }
            parent = parent[parts[i]];
        }
        return parent;
    }
    
    /**
    * bfun是Basic Functions Extended的缩写
    * 作用:包括数组、字符串等等数功能扩展
    *
    * @module bfun
    */
    MYAPP.bfun = {
        array:(function(){
            return {
                /**
                * @method isArray 判断是否为数组
                * @param {Array} 数组
                * @return {Boolean} 真返回true,否则返回false
                */
                isArray: function(){
                    return Object.prototype.toString.call(arguments[0])  === '[object Array]'; 
                },
                /**
                * @method inArray 检查值是否在数组中
                * @param {value,Array} 值,数组
                * @return {Boolean} 真返回true,否则返回undefined
                */
                inArray: function(val,arr){
                    for(var i=0,l=arr.length;i<l;i++){
                        if(arr[i] === val){
                            return true;
                        }
                    }
                }
            }
        })(),
        string:(function(){
            return {
                /**
                * @method trim 过滤字符串两边多余的空格
                * @param {String} 字符串
                * @return {String} 字符串
                */
                trim: function(){
                    return arguments[0].replace(/(^s*)|(s*$)/g, "");
                },
                /**
                * @method ltrim 过滤字符串左边多余的空格
                * @param {String} 字符串
                * @return {String} 字符串
                */
                ltrim: function(){
                    return arguments[0].replace(/^s+/g, "");
                },
                /**
                * @method rtrim 过滤字符串右边多余的空格
                * @param {String} 字符串
                * @return {String} 字符串
                */
                rtrim: function(){
                    return arguments[0].replace(/s+$/g, "");
                }
            }
        })()
    }
    
    // 测试
    MYAPP.test = {
        init: function(){
            // 使用对应的模块先引用
            var marray = MYAPP.namespace("MYAPP.bfun.array");
            var mstring = MYAPP.namespace("MYAPP.bfun.string");
    
            var arr =  ["a","b"];
            var str = "   abc  ";
    
            console.log("判断是否为数组:" + marray.isArray(arr));
            console.log("值是否在数组中:" + marray.inArray("a",arr));
            console.log("过滤左右空格:" + mstring.trim(str));
        }
    }
    
    MYAPP.test.init();

    写几个有用的函数

    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();
            })();

    构造函数的一些知识

    想要做到上面几点除了prototype等基本知识,还需要了解一些关于JavaScript构造函数的知识。

    1.什么样的函数是构造函数

    在JavaScript的世界里构造函数并不神秘,也不特殊,任何函数通过new 操作符调用都可以变为构造函数,不使用new 操作符就不是构造函数,而是直接按普通函数调用。

    2.构造函数返回什么样的结果

    构造函数的返回值分为两种情况,当function没有return语句或者return回一个基本类型(bool,int,string,undefined,null)的时候,返回new 创建的一个匿名对象,该对象即为函数实例;如果function体内return一个引用类型对象(Array,Function,Object等)时,该对象会覆盖new创建的匿名对象作为返回值。

    写个小例子验证一下

  • 相关阅读:
    连接ACCESS数据库[原创]
    破解金山词霸2007
    上班族饮食十大“夺命”恶习
    C#3.0 新特性速览(1) (2)
    抽象工厂模式(AbstractFactory)创建型模式
    委托创建小记
    八个笑话,八个人生哲理
    自定义对话框[原创]
    一个数字键盘的自定义控件[原创]
    男人绝对需要红颜知己
  • 原文地址:https://www.cnblogs.com/hubing/p/4528079.html
Copyright © 2011-2022 走看看