zoukankan      html  css  js  c++  java
  • seajs模块化加载框架使用

    seajs是模块化加载框架。seajs.org已经打不开了,seajs的githubseajs速查文档

    <!--如果完成下面4步,则seajs掌握了80%
    js模块化
    1.引入seajs的库 :<script type="text/javascript" src="sea/sea.js"></script>
    2.如何变成模块
    define:一个文件就是一个模块。如下utils文件

    define(function(require, exports) {
      exports.each = function (arr) {
        // 实现代码
      };
    
      exports.log = function (str) {
        // 实现代码
      };
    });


    3.如何调用模块 exports seajs.use

    用来在页面中加载一个或多个模块。seajs.use(id, callback?)
    4.如何依赖模块 requie

    通过 require('./util.js') 就可以拿到 util.js 中通过 exports 暴露的接口。

    require执行完的结果就是exports 。
    -->

    html文件:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
        <meta name="format-detection" content="telphone=no, email=no"/>
        <meta name="apple-touch-fullscreen" content="yes"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
        <title>image-size</title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
        </style>
        <script type="text/javascript" src="sea/sea.js"></script>
        <script language="javascript">
                //加载入口文件main.js,默认后缀js自动匹配 
                //seajs.use(模块地址,函数)
                // sea的默认根目录:sea.js这个文件所在的文件
                //以当前页面为根目录写法:./目录
            seajs.use('./sea/main',function(main){ 
                console.log(main.say());
            });
        </script>
    </head>
    <body>
    
    </body>
    </html>
    View Code

    与html并列的sea文件夹里,放有sea.js,main.js,main1.js,main2.js

    main.js:

    define(function(require,exports,module){ 
        console.log('module of main:');
        var main1 = require('main1');
        main1.say();
        var main2 = require('main2'); //require引用模块
        main2.say();
    
        return { 
            say: function(){ 
                console.log('main--hello');
            }
        };
    
    });
    View Code

    main1.js:

    define(function(require,exports,module){ 
        console.log('module of main1:');
    //exports 对外提供接口的对象
        module.exports = { 
            say: function(){ 
                console.log('main1--hello');
            }
        };
    });

    main2.js:

    define(function(require,exports,module){ 
        console.log('module of main2:');
    
        return { 
            say: function(){ 
                console.log('main2--hello');
            }
        };
    });

    输出结果:

    module of main:
    module of main1:
    main1--hello
    module of main2:
    main2--hello
    main--hello
    undefined
  • 相关阅读:
    react脚手架
    快速创建一个node后台管理系统
    vue脚手架结构及vue-router路由配置
    Spring 事务管理-只记录xml部分
    Spring-aspectJ
    Maven 自定义Maven插件
    JVM
    JVM
    Spring
    Digester
  • 原文地址:https://www.cnblogs.com/lanyueff/p/6825651.html
Copyright © 2011-2022 走看看