加载模块的require方法

主干是因而define方法对冬天的代码实行有序的模块化定义,通过require方法完毕代码的模块化加载

亟待载入的公文:require

 

单独模块

define(function (){
    var control = {};
    return control;
});

该模块调用不借助于其余模块

 

require是1款能够扶助大家架构好前端框架的好工具,为大家带来越来越有利的模块化编制程序,轻松控制好模块载入的数码和顺序,并且品质特出

 

类型进口配置文件shop.js代码展示

require.config({
    paths : {
        jquery   : 'jquery.min',
        jqmd5    : 'jquery.md5',
        cookie   : 'public/cookie',

        jqui     : 'jquery.ui.min', /* 前端UI框架 */
        jquid    : 'jquery.ui.dialog.min', /* 前端UI框架 - 模态框模块 */
        jqtmpl   : 'jquery.tmpl.min', /* 模版引擎 */
        jqvali   : 'jquery.validation.min', /* 表单验证 */
        jqvalicn : 'jquery.validation.cn.min', /* 表单验证汉化 */

        base     : 'base', /* 基础功能 */
        control  : 'control', /* 控制器模块 */
        login    : 'login/index', /* 登录页模块 */
        register : 'register/index', /* 注册页模块 */
        detail   : 'detail/index' /* 详情页模块 */
    }
});

require(['control'], function (Control){
    Control.cookie();
    Control.template();
});

 

异步加载

require(['control'], function (Control){
    Control.cookie();
    Control.template();
});

 

require.config配置格局

写过php的人对此require函数都不生分,它的效率为文件导入,也得以把文件驾驭为模块、导入精晓为调用,称为模块调用

shim垫片

require.config({
    paths : {
        underscore : 'underscore.min',
        backbone : 'backbone.min'
    },
    shim : {
        underscore : {
            exports : '_'
        },
        backbone : {
            deps : ['underscore'],
            exports : 'Backbone'
        }
    }
});

有时我们需求运用非速龙定义模块,如jQuery,需求shim参数来扶持化解这一个库的剖析名称及载入顺序难点

 

乘势用户体验的可是追求,前端业务所占比例逐年增添,于是应运而生了前者领域的模块化编制程序

根本功能是把巨大的客户端代码分割为各模块从而完结模块化管理,便于代码的编写与保卫安全

图片 1

require能够精通为3个工具库,支持大家越来越好的架构前端框架,其本人并非前端框架

 

paths配置待调用模块路径

require.config({
    paths : {
        jquery : 'jquery.min',
        control : 'control'
    }
});

已陈设路径的模块的调用形式

require(['jquery', 'control'], function ($, Control){
    return true;
});

 

AMD模式

概念模块的define方法和调用模块的require方法,合称速龙方式

该形式的定义模块方法清晰且不会污染全局环境,能够知情的来得信赖关系

 

只得说的ADM规范

Asynchronous Module Definition – 异步加载模块规范

化解模块化编程带来的代码加载先后顺序难点及经常异步加载代码带来的不分明因素

 

概念模块的define方法

品类控制器模块control.js代码体现

define(['jquery', 'jqmd5', 'cookie', 'base'], function (){
    var control = {};

    /**
     * 登录状态检测
     */
    control.cookie = function (){
        setTimeout(WK.LC.syncLoginState, 100);
    };

    /**
     * 模块调用及配置
     */
    control.template = function (){
        if($('.naver').length > 0) base.naver();

        if(CATEGORY == 'login')
        {
            if(MODEL == 'index'){
                // 登录页
                require(['login'], function (Login){
                    Login.form();
                });
            };

            if(MODEL == 'register' || MODEL == 'check'){
                // 注册页
                require(['register'], function (Register){
                    Register.form(MODEL);
                });
            };
        };

        if(CATEGORY == 'goods')
        {
            // 详情页
            if(MODEL == 'index'){
                require(['detail'], function (Detail){
                    // Detail.form();
                });
            };
        };
    };

    return control;
});

 

唯独模块加载(javascript文件加载)的先后顺序却给大家带来了相当的大的分神,比如拍卖模块间的依赖性关系

重视模块

define(['base'], function (){
    var control = {};
    return control;
});

该模块调用须求重视base模块

 

载入require达成模块化编制程序

<script src="/static/js/require.min.js" data-main="/static/js/shop"></script>

data-main内定了进口配置文件shop.js,同时钦赐了依照shop.js的绝对路径baseUrl,baseUrl能够在config配置方式内重置

 

说不上达成了异步加载消除了网页加载时的不通难点

图片 2

客户端代码被定义为各模块后,模块之间错综复杂的依赖关系以及模块的按需加载、加载顺序就成了难点

require很好的解决了这么些标题,它的模块化管理服从速龙规范,模块加载不影响再而三语句执行

 

baseUrl重置相对路径

require.config({
    baseUrl : 'js/lib'
});

 

 

相关文章

网站地图xml地图