zoukankan      html  css  js  c++  java
  • 模块化开发,SesJS简单总结

    一、概念:
    SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架。

    在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(Common Module Definition) 模块定义规范。该规范明确了模块的基本书写格式和基本交互规则。

    在 CMD 规范中,一个模块就是一个文件。代码的书写格式如下:define(factory);

    SeaJS解决了两个问题:

    1.JavaScript的模块化

    2.按模块加载

    SeaJS在开发中的角色:在多人协作开发时,起着后勤人员的作用,协调  文件依赖、命名冲突、按需加载的作用;


    二、用法:

    1.引入sea.js

    2.定义模块--define

    3.对外提供接口--export

    4.依赖接口--require

    5.调用模块--seajs.use

    例:

    为了让 sea.js 内部能快速获取到自身路径,推荐手动加上 id 属性

     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>seajs的使用方法</title>
     6 <script type="text/javascript" src="sea/sea.js" id="seajs"></script>
     7 <script>
     8 /*
     9     调用模块
    10     语法: 
    11         seajs.use(url, callback); 
    12     参数说明:
    13         url: 调用模块的地址, url默认根目录是sea.js所有文件夹
    14         callback: 回调函数
    15     内部工作原理: 
    16         填入url后,seajs会异步加载url的文件, 加载完成后执行 callback;
    17         这样就实现了按模块加载JS,也可以说是按需加载。
    18 */
    19 seajs.use('./js/test1.js',function(ex){
    20     
    21     //ex就是对外接口export
    22     ex.tab();
    23     
    24     function tab(){
    25         alert('我是现写的,大家都是tab,但不冲突哦~~');
    26     }
    27     
    28     tab();  //很好的就解决了命名冲突
    29     
    30 });
    31 
    32 </script>
    33 </head>
    34 
    35 <body>
    36 </body>
    37 </html>

    目录层级关系如下 :

    test1.js 如下:

     1 // JavaScript Document
     2 /*
     3     定义模块
     4     语法: 
     5         define(function (require, exports, module){ //参数写法是固定
     6             //your code gose here
     7          }); 
     8     参数说明:
     9         require: 依赖的接口
    10         exports: 对外提供的接口
    11         module:  
    12     内部工作原理: 
    13         1.当调用require方法时,seajs会同步加载url的文件,这样就解决依赖问题了。如果想异步加载就用require.async(url, callback);
    14         2.exports对象下包含的是对外提供的属性和方法,调用seajs.use时,callback函数的参数就是exports对象
    15 */
    16 define(function(require, exports, module){ 
    17     
    18     //如果依赖的是一个普通JS文件
    19     require('./test2.js');
    20 
    21     //如果依赖的是一个用define写的JS模块
    22     var ex = require('./test3.js');
    23 
    24     function tab(){
    25         alert('我是test1模块的一个方法');
    26         alert('test1' + a);
    27         alert('test1' + ex.b)
    28     }
    29     
    30     exports.tab = tab;
    31     
    32 });

     test2.js 如下:

    1 // JavaScript Document
    2 
    3 var a = '依赖test2了, 我是test2的全局变量';

    test3.js 如下:

    1 // JavaScript Document
    2 
    3 define(function(require,exports,module){ //参数写法是固定
    4     
    5     exports.b = '依赖test3了,我是test3模块的局部变量';
    6     
    7 });

    上面说到了seajs中常用的4个方法,别外请参考管方的seajs常用的7个方法: https://github.com/seajs/seajs/issues/266

  • 相关阅读:
    java中tif转png
    HTTP服务器、WEB服务器、应用服务器
    word将编号转成普通文本
    浏览新闻常用单词
    手机端搜索的回车事件
    C#(winform)的label自动换行
    oracle for update wait 解析
    java8 新特性parallelStream 修改默认多线程数量
    ArcObjects您必须有许可证才能使用此ActiveX控件
    图灵社区电子书 全高清可编辑 内含多种格式 [珍藏]
  • 原文地址:https://www.cnblogs.com/Ivangel/p/3824541.html
Copyright © 2011-2022 走看看