图片 4

javascript十个最常用的自定义函数,命名空间

简言之进化

如此那般能够是能够,但也可能有标题,最大的难题在于调用格局复杂而其貌不扬!每一回调用的时候都要实例化对象,然后调用其形式,轻松修改代码让其完成机关实例化。

<input type="button" value="test" onclick="NS.alert();"/>

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

                window.NS=this;
            })();
        </script>

要看通晓下面代码首先要领悟一下“马上推行函数”(江洛杉矶湖人(Los Angeles Lakers)是这般称呼的)的本事结构类似那样

(function xxx(){

       //function body 

 })();

如此写xxx函数就能够在概念完后自行推行,看起来奇妙,其实上面写法可以拆成这么

function xxx(){

       //function body 

 }

xxx();

便是概念三个函数,然后选拔括号语法调用,而函数定义外面的壹层括号只起到将函数申明转为函数定义表达式,因为唯有表达式才足以利用括号调用。看领会那个妖蛾子之后上面代码就大约了,在自定义namespace函数最后把this赋值为window的NS属性,在调用的时候一贯动用NS.xx就足以了。看起来好了大多。

另,小编还收藏了1个HTML5工作组的本子:

页面代码

添加FileInput JS/CSS

<form enctype="multipart/form-data" id="uploadForm">

    <div id="uploadFileDiv" hidden="true" style="width: 60%;">

        <input id="pdFile" name="file" type="file">

        <div id="fileError" class="help-block"></div>

        <br />

    </div>

</form>

添加JS

    $("#pdFile").fileinput({

        showPreview : false,

        allowedFileExtensions : [ "zip", "bar", "bpmn", "bpmn20.xml" ], 限制文件类型

        elErrorContainer : "#fileError",

        browseClass : "btn btn-success",

        browseLabel : "查找文件",

        browseIcon : ‘<i ></i>’,

        removeClass : "btn btn-danger",

        removeLabel : "删除",

        removeIcon : ‘<i ></i>’,

        uploadClass : "btn btn-info",

        uploadLabel : "部署",

        uploadIcon : ‘<i ></i>’,

    });

 

    $("#uploadForm").submit(function(event) {

        var formData = new FormData(this); 这里用的是this,如果是Form的话需要Form[0]

        event.preventDefault(); 阻止当前提交事件,自行实现,否则会跳转

        var grid = $(‘[data-role="pdGrid"]’);

        $.ajax({

            url : contextPath + ‘/activiti/pd/upload.koala’,

            type : ‘POST’,

            data : formData,

            contentType : false, 这两个参数需要被定义,否则报错

            processData : false,

            success : function(data) {

                if (data.result == ‘success’) {

                    grid.message({

                        type : ‘success’,

                        content : ‘部署成功’

                    });

                    $("#uploadFileDiv").slideToggle("slow");

                    grid.grid(‘refresh’);

                } else {

                    grid.message({

                        type : ‘error’,

                        content : data.result

                    });

                }

            },

            error : function() {

                grid.message({

                    type : ‘error’,

                    content : ‘部署失败’

                });

            }

        });

    });

 

写多少个有效的函数

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是怎么办的?欲知后事怎么着,且听下回分解。


实至名归,最值钱的函数,能够节约多少流量啊。初叶由Prototype.js达成的,那是洪荒时期遗留下来的珍兽,今后有不少变种。

运作效果

 

图片 1

 

图片 2

 

点击【铺排】,完结无刷新提交form,并且刷新当前页的功用

图片 3

 


一个简约的例证

<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函数中调用了test贰函数,test二函数中意图调用window的alert方法,那样循环调用了,大概看了你会说那样分明的错误何人会犯,然则要是自定义的主意叫close(那么些常常会冒出呢),然后中间调用了八个外表文件的函数,该函数调用了window的close方法,那样错误是或不是东躲山西了数不清呢。

var getElementsByClassName = function (searchClass, node,tag) {
    if(document.getElementsByClassName){
        return  document.getElementsByClassName(searchClass)
    }else{
        node = node || document;
        tag = tag || "*";
        var classes = searchClass.split(" "),
        elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
        patterns = [],
        returnElements = [],
        current,
        match;
        var i = classes.length;
        while(--i >= 0){
            patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
        }
        var j = elements.length;
        while(--j >= 0){
            current = elements[j];
            match = false;
            for(var k=0, kl=patterns.length; k<kl; k++){
                match = patterns[k].test(current.className);
                if (!match)  break;
            }
            if (match)  returnElements.push(current);
        }
        return returnElements;
    }
}

后台代码

    @ResponseBody

    @RequestMapping("/upload")

    public Map<String, Object> uploadFile(@RequestParam MultipartFile file)

    {

        Map<String, Object> dataMap = Maps.newHashMap();

        String fileName = file.getOriginalFilename();

        try

        {

            InputStream fileInputStream = file.getInputStream();

XXXXXXXXXXXXXX

        } catch (Exception e)

        {

            dataMap.put("result", "部署流程时发生错误");

            e.printStackTrace();

        }

        dataMap.put("result", "success");

        return dataMap;

    }

 

Spring.xml

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

 

鼓吹一下

下边包车型客车写法看起来不错了,可是函数名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();
            })();

 

function getCookie( name ) {
 var start = document.cookie.indexOf( name + "=" );
 var len = start + name.length + 1;
 if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
  return null;
 }
 if ( start == -1 ) return null;
 var end = document.cookie.indexOf( ';', len );
 if ( end == -1 ) end = document.cookie.length;
 return unescape( document.cookie.substring( len, end ) );
}
function setCookie( name, value, expires, path, domain, secure ) {
 var today = new Date();
 today.setTime( today.getTime() );
 if ( expires ) {
  expires = expires * 1000 * 60 * 60 * 24;
 }
 var expires_date = new Date( today.getTime() + (expires) );
 document.cookie = name+'='+escape( value ) +
  ( ( expires ) ? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString()
  ( ( path ) ? ';path=' + path : '' ) +
  ( ( domain ) ? ';domain=' + domain : '' ) +
  ( ( secure ) ? ';secure' : '' );
}
function deleteCookie( name, path, domain ) {
 if ( getCookie( name ) ) document.cookie = name + '=' +
   ( ( path ) ? ';path=' + path : '') +
   ( ( domain ) ? ';domain=' + domain : '' ) +
   ';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}

下载FileInput.js

    图片 4

    

    

 

简单的说的命名空间

是因为JavaScript没有公文功效域,区别的函数分散在差别的文书中,乃至由差别的人编写,重名的票房价值大大扩大。是否十足小心就能够了吗?也不尽然,还有些奇异情况,举个例子平时会用到一而再,于是写了1个没出现过的函数名extend,不料在EcmaScript5中参预了extend函数,命名空间的供给性就显示出来了。

JavaScript有函数的成效域,能够运用那点把自定义的函数写到2个函数体内,这样函数内的变量、对象、函数就像在一个命名空间内一律和外部隔开分离。

<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争辨了。

(7)cssQuery()

行使JavaScript就从未有过这么舒畅(英文名:Jennifer)了,Javascript唯有函数功能域,什么块儿啊、神Marvin件啊统统都是为是四个命名空间的,有的时候候因为有的重名难点变成的失实令人莫名其妙,难以调试化解。

(1)$()

使用过Java、C#的同查对命名空间特别的精通,在头昏眼花的系统中会有N多的函数、对象,语言提供的、架构预约义的,这么多的函数和目的,由于编制程序标准供给起有实际意义的名字,难免会重名发生错误调用,而有了命名空间烦恼就从没有过了,不但可以分类组织函数与对象,还是能形成隔开,消除重名难点。

(4)inArray()

  function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
      elm.addEventListener(evType, fn, useCapture);//DOM2.0
      return true;
    }
    else if (elm.attachEvent) {
      var r = elm.attachEvent('on' + evType, fn);//IE5+
      return r;
    }
    else {
      elm['on' + evType] = fn;//DOM 0
    }
  }

假使不利用类库也许尚未协调的类库,储备一些常用函数总是有便宜的。

(6)toggle()

 function setStyle(el,prop,value){
    if(prop == "opacity" && !+"\v1"){
      //IE7 bug:filter 滤镜要求 hasLayout=true 方可执行(否则没有效果)
      if (!el.currentStyle || !el.currentStyle.hasLayout) el.style.zoom = 1;
      prop = "filter";
      if(!!window.XDomainRequest){
        value ="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity="+value*100+")";
      }else{
        value ="alpha(opacity="+value*100+")"
      }
    }
    el.style.cssText += ';' + (prop+":"+value);
  }

  function getStyle(el, style){
    if(!+"\v1"){
      style = style.replace(/\-(\w)/g, function(all, letter){
        return letter.toUpperCase();
      });
      return el.currentStyle[style];
    }else{
      return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
    }
  }

做BBS与商业网址的应当时时应用,无理由每便都要让用户输入密码登入吧。大家要求借助cookie完毕机关登入作用。

function insertAfter(parent, node, referenceNode) {
 parent.insertBefore(node, referenceNode.nextSibling);
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图