• seajs入门使用


    使用 Sea.js 进行模块化开发还能够带来非常多优点:

    1. 模块的版本号管理

      通过别名等配置,配合构建工具,能够比較轻松地实现模块的版本号管理。

    2. 提高可维护性。模块化能够让每一个文件的职责单一,很有利于代码的维护。Sea.js 还提供了 nocache、debug 等插件,拥有在线调试等功能。能比較明显地提升效率。

    3. 前端性能优化

      Sea.js 通过异步载入模块,这对页面性能非常故意。

      Sea.js 还提供了 combo、flush 等插件,配合服务端,能够非常好地对页面性能进行调优。

    4. 跨环境共享模块

      CMD 模块定义规范与 Node.js 的模块规范非常相近。通过 Sea.js 的 Node.js 版本号。能够非常方便实现模块的跨server和浏览器共享。



    seajs的文件结构 :


    以上步骤完毕,接下来演示一个怎样简单的使用seajs

    第一步:
       

    define

       用来定义模块。Sea.js 推崇一个模块一个文件,遵循统一的写法:
    define(function(require,exports,module){
        
    	  var _msg = 'not set msg!';
    	  exports.setMsg = function(msg){
    		  _msg = msg;
    	  };
    	  
    	  exports.getMsg = function(){
    		  return _msg;  
    	  };
    });

    第一个參数:require用来获取指定的接口,注意require仅仅接受字符串直接是量作为參数
    第二个參数:exports用来在模块内部对外部提供接口
    第三个參数:module与exports类似,用来在模块内部对外提供接口

    第二步:
       当模块定义好了。那么就把刚才配置好的模块配置入seajs。

    seajs.config

    seajs.config({
        alias:{
             'init':"modul/init.js"
            }
    });

    init表示模块的id是自己定义的,“modul/init.js”是模块的相对路径能够省略js。注意:模块的绝对路径是seajs-2.3.0/dist/modul/init.js

    seajs.use

    用来在页面中载入一个或多个模块。

    seajs.use("init", function(init){
    	 //设置值
    	 init.setMsg('Hello World');
         alert(init.getMsg());
    });

    效果:


      
    HTML页面的代码:
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!-- 导入seajs-2.3.0这个文件 -->
    <script type="text/javascript" src="seajs-2.3.0/dist/sea.js"></script>
       
    <script type="text/javascript">
    //配置seajs
    seajs.config({
        alias:{
             'init':"modul/init.js"
            }
    });
    
    //使用seajs
    seajs.use("init", function(init){
    	 //设置值
    	 init.setMsg('Hello World');
         alert(init.getMsg());
    });
    </script>
    </head>
    <body>
         <h1>Test seajs</h1>
         
    </body>
    </html>


  • 相关阅读:
    微信小程序中的WXS语法
    小程序 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内
    Linux 远程连接sftp与ftp
    MySQL使用方法
    Rsync+Inotify实时同步环境部署
    inotify+rsync实时同步
    rsync备份
    C# 基于ef的2种简单的仓储封装和工作单元 net core3.1 ---sqlserver 2019
    xshell个人免费版下载使用
    Git 命令之 git add、git commit
  • 原文地址:https://www.cnblogs.com/zhchoutai/p/6888468.html
Copyright © 2020-2023  润新知