Lozye

身处黑夜，心向黎明！

全部文章

原生JS使用require.js实践
2022-07-09

为什么要使用 require.js

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

0x1 目录结构

├── dist
|   ├── css
|   |   ├── unsemantic.min.css #栅栏CSS
|   |   └── {your.css} #你的样式
|   ├── addons
|   |   ├── require.js
|   |   ├── template-simple.js #渲染组件
|   |   └── {third-party.js} #三方js
|   ├── js
|   |   └── {your.js} #你自己的js
|   └── app.js #全局入口
└── index.html #

0x2 app.js

"use strict";
var app = (function () {    
    // 这里定义版本号 如果需要更新时可以快速重置缓存
    var _version= "v=1";
    var _fn = () => { };

    var listen = function () {
        var script = document.createElement("script");
        script.setAttribute("src", "/dist/addons/require.js?" + _version)
        script.setAttribute("onload", "app.onload()");
        document.body.appendChild(script);
    };//end listen

    var onload = function () {
        requirejs.config({
            urlArgs: _version,
            baseUrl: '/dist/js',
            paths: {
                addons: '/dist/addons'
            }
        });

        // 这里引用全局公共js
        requirejs(["addons/template-simple","addons/{third-party}"], function () {
            _fn();
        });
    };//end onload

    var run = function (fn) {
        if (fn) _fn = fn;
        listen();
    };//end run

    return {
        onload: onload,
        run: run
    };
})();

0x3 页面引用

<!DOCTYPE html>
<html lang="cn">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="/dist/css/unsemantic.min.css">
  <link rel="stylesheet" href="/dist/css/{your.css}">
</head>

<body>
  <div id="app"></div>
  <!-- ========= script ========= -->
  <script src="/dist/app.js"></script>
  <script>
    app.run(function(){
        // on load success
        // 这里引用此页面需要的js
        requirejs(["{your}"],function(t){

            console.log(typeof(t),t);

        });        
    });
  </script>
</body>
</html>

0x3 参考

 
BACK