基于requireJS和jQuery的模块化编程

将前端代码模块化，可以怎么整，最近接触vue之后也想搞一个类似的前端代码风格，将js文件模块化。

1、引入 require.js 文件，设置 data-main 入口文件地址

<script src="./static/js/require.js" data-main="./static/js/main" defer async="true"></script>

2、设置入口文件 main.js

require.config({
    baseUrl: 'static/js',   // 基础目录
    urlArgs: 'v=' + (new Date()).getTime(),  // 清除缓存
    paths: {　　　　　　
        'jquery': 'jquery.min',   // jquery
        'layer': 'layer.min',     // layer弹框插件
        'sdk': 'sdk.min',         // sdk常用插件
        'app': 'app'              // 网站个性化代码
    },
    map: {
        '*': {
            'css': 'css.min'        // 引入css.min.js
        }
    },
    shim: {
        'layer': {
            deps: ['jquery', 'css!../css/layer.min.css']
        },
        'sdk': {
            deps: ['jquery', 'css!../css/sdk.min.css']
        },
        'app': {
            deps: ['jquery']
        }
    }
});

require(['jquery', 'layer', 'sdk', 'app'], function($) {
    console.log('start');
});

 

先写到这里，下班。

 

 

相关阅读：

https://www.cnblogs.com/xing901022/p/5388534.html

https://q.cnblogs.com/q/83300/

https://bbs.csdn.net/topics/392462588

http://qtdebug.com/fe-requirejs/