requirejs使用

requirejs基本使用

1.加载requirejs和启动文件

<script data-main="requirejs.module/app.js" src="js/require.js"></script>

app.js启动文件。默认的baseUrl是app.js所在的目录，也可以通过requirejs.config({baseUrl:""})手动设置baseUrl，baseUrl是用来加载其他模块的相对根目录。

2.配置启动文件js/app.js

requirejs.config({
});

requirejs([],function(){
});

3.定义模块

util/getJqInstance.js 获取jquery对象

define(function(){
    function getJqInstance(element){
        var $element;

        if ( element instanceof jQuery ){
            $element=element;
        }else{
            $element=$(element);
        }

        return $element
    };

    // 获取jquery对象
    return getJqInstance;
})

util/getUrlParam.js 获取url携带参数

define(function(){
    function getUrlParam(key){
        var reg=new RegExp("(^|&)"+key+"=([^&]*)(&|$)"),
            r=window.location.search.substr(1).match(reg);
        if ( r!=null ) return unescape(r[2]);
        return null;
    }

    // 获取url中携带参数
    return getUrlParam;
})

util/encodeHTML.js 转义

define(function(){
    function encodeHTML(text){
	    if (typeof text==='string'){
	        return text
	            .replace(/&/g,'&amp;')
	            .replace(/</g,'&lt;')
	            .replace(/>/g,'&gt;')
	            .replace(/"/g,'&quot;')
	            .replace(/'/g,'&#039;')
	            .replace(/`/g,'&#x60;');
	    }
	    return text;
	};

    // html转义
    return encodeHTML;
})

util/decodeHTML.js 转义

define(function(){
    function decodeHTML(text){
	    if (typeof text==='string'){
	        return text
	            .replace(/&amp;/g,'&')
	            .replace(/&lt;/g,'<')
	            .replace(/&gt;/g,'>')
	            .replace(/&quot;/g,'"')
	            .replace(/&#039;/g,"'")
	            .replace(/&#x60;/g,'`');
	    }
	    return text;
	};

    // html转义
    return decodeHTML;
})

util/cleanError.js 清除错误提示

define([
    "util/getJqInstance",
],function (getJqInstance){
    function cleanError(element){
        var $element=getJqInstance(element);

        $element.find("label.error").remove();
        $element.find(".has-success").find(".glyphicon-ok").remove().end().removeClass("has-success");
        $element.find(".has-error").find(".glyphicon-remove").remove().end().removeClass("has-error"); 

        if ( $element.is(".has-success") ) 
        $element.find(".glyphicon-ok").remove().end().removeClass("has-success");

        if ( $element.is(".has-error") ) 
        $element.find(".glyphicon-remove").remove().end().removeClass("has-error");
    }

    // 清除验证提示
    return cleanError;
});

util/cleanForm.js 清空表单

define([
    "util/getJqInstance",
    "util/cleanError",
],function (getJqInstance,cleanError){
    function cleanForm(options){
        var $elem=getJqInstance(options.element),
            callback=options.callback;

        $elem.find("[name],[clean]").each(function(index,item){
            switch(item.type){
                case "hidden":
                    break;
                case "radio":
                case "checkbox":
                    $(item).prop("checked",false)
                    break;
                default:
                    if ( $.nodeName(item,"SELECT") ){
                        item.selectedIndex=0;
                        break;
                    }
                    $(item).val("");
                    break;
            }
        });

        cleanError($elem);

        callback && callback();
    };

    // 清空带name属性或clean属性的表单元素，清空完成后执行回调函数
    return cleanForm;
});

util/resetForm.js 重置表单

define([
    "util/getJqInstance",
],function (getJqInstance){
    function resetForm(options){
        var $elem=getJqInstance(options.element),
            formData=options.formData,
            callback=options.callback;

        $elem.find("[name]").each(function(index,item){
            var name=$(item).attr("name"),
                value=formData[name],
                val=$(item).attr("value");

            if ( value==undefined ) return;

            switch(item.type){
                case "radio":
                case "checkbox":
                    if ( typeof value=="string" || typeof value=="number" ){
                        val==value && $(item).prop("checked",true)
                    }else if ( $.type(value)=="array" ){
                        value.indexOf(val)>-1 && $(item).prop("checked",true)
                    };
                    break;
                default:
                    $(item).val(value);
                    break;
            };
        });

        callback && callback();
    }

    // 重置表单元素
    return resetForm;
})

util/toggle.js 关联元素显示隐藏

define([
    "util/getJqInstance",
    "util/cleanForm",
],function (getJqInstance,cleanForm){
    function getAllRelNodes(toggleData){
        var nodes=[];

        $.each(toggleData,function (value,targets){
            $.each(targets,function (_,target){
                if ( nodes.indexOf(target)>-1 ) return;
                nodes.push(target);
            })
        });

        return nodes;
    };

    function hideAllNodes(nodes){
        $.each(nodes,function (index,node){
            var $node=getJqInstance(node);
            cleanForm({element:node});
            $node.addClass("hidden").find(".form-control").attr("disabled",true);
        });
    };

    function showRelNodes($trigger,toggleData){
        var value=$trigger.is(":radio") || $trigger.is(":checkbox") ?
                $trigger.filter(":checked").val() : $trigger.val(),
            targets=toggleData[value];

        $(targets).each( function (index,target){
            var $target=getJqInstance(target);
            $target.removeClass("hidden").find(".form-control").removeAttr("disabled");
        })
    };

    function init(nodes,$trigger,toggleData){
        hideAllNodes(nodes);
        showRelNodes($trigger,toggleData);
    };

	function toggle(options){
        var $trigger=getJqInstance(options.trigger),
            toggleData=options.toggleData,
            nodes=getAllRelNodes(toggleData);

        if ( !$trigger ) return;

        if ( !options.preventInit ){
            init(nodes,$trigger,toggleData);
        };

        $trigger.on("change.toggle",function (event){
            hideAllNodes(nodes);
            showRelNodes($trigger,toggleData);

            options.callback && $.type(options.callback)==="function" && options.callback()
        });
    };

    // util.toggle(opts) 表单元素联动显示隐藏，当表单项值改变时，显示或隐藏某项元素
    // opts.trigger 值被改变的表单项元素
    // opts.toggleData={value:["relationSelector"]} 键值对形式记录表单元素的值为value时，
    //              ["relationSelector"]关联元素显示，需为数组形式
    // opts.callback 表单项元素值改变时，关联元素显示后，触发回调函数
    // opts.preventInit 阻止初始化联动显示隐藏关联元素
    return toggle;
});

util.js

define([
    "util/getJqInstance",
    "util/getUrlParam",
    "util/encodeHTML",
    "util/decodeHTML",
    "util/cleanError",
    "util/cleanForm",
    "util/resetForm",
    "util/toggle",
],function (getJqInstance,getUrlParam,encodeHTML,decodeHTML,cleanError,cleanForm,resetForm,toggle){
	return {
		getJqInstance:getJqInstance,
		getUrlParam:getUrlParam,
		encodeHTML:encodeHTML,
		decodeHTML:decodeHTML,

		cleanError:cleanError,
		cleanForm:cleanForm,
		resetForm:resetForm,

		toggle:toggle
	};
});

4.加载模块

require(["util"],function(util){
    console.log(util);
});

猜你喜欢