zoukankan      html  css  js  c++  java
  • js模块加载框架 sea.js学习笔记

    seajs实现了JavaScript 的 模块开发及按模块加载。用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载。

      官方文档:http://seajs.org/docs/#docs

      首先看看seajs是怎么进行模块开发的。使用seajs基本上只有一个函数“define”

    fn.define
     = function(id,
     deps, factory) {
    
        //code  of function…
    
    }

         使用define函数来进行定义一个模块,根据 CMD (Common Module Definition)模块定义规范。一个文件就是一个模块。所以一个js文件中只有一个define,即一个文件是一个模块,SeaJS中模块的概念有点类似于面向对象中的类——模块可以拥有数据和方法,数据和方法可以定义为公共或私有,公共数据和方法可以供别的模块调用。

      官方实例中,define只传入一个参数: 一个工厂函数

    define(function(require,
     exports, module) {
    
        //code  of the module...
    
    });

        在看参数之前,我们先看看define是如何处理参数的:

      fn.define = function(id, deps, factory)

       define可以接收的参数分别是模块ID,依赖模块数组及工厂函数;

        如果只有一个参数,则赋值给factory。

        如果有两个参数,第二个赋值给factory;第一个如果是array则赋值给deps,否则赋值给id。

        如果有三个参数,则分别赋值给id,deps和factory。

      根据官方实例,建议还是根据官方的来就传递一个参数,即只有factory参数,这样的话模块id默认为js文件路径。

      在来看看工厂函数的参数:

    require,  exports, module

      require——模块加载函数,用于记载依赖模块。通过这个参数来进行对其他模块的加载。

      exports——接口点,将数据或方法定义在其上则将其暴露给外部调用。通过这个参数,来将这个模块的方法进行暴露

      module——模块的元数据。其是一个对象,有属性:

            module.id——模块的ID。

            module.dependencies——一个数组,存储了此模块依赖的所有模块的ID列表。

            module.exports——与exports指向同一个对象。

        使用factory的参数的使用:

    define(function(require,
     exports, module) {
    
        var a  = require('./a');//引入a模块    
       
        exports.fun2= function(){
                alert("fun2");
                a.dosomething();
       }    
    
    }

       使用require对象来进行加载模块,其实使用正则表达式进行验证加载的,所以其参数必须是特定的字符串,不能是表达式。

      seajs会自动在require的参数中加入".js"来进行加载,即不需要写上后缀名,但是在某些情况下,seajs不会为其添加“.js”:

      1.载入css:    

    require("./module1-style.css");

      2.路径中含有“?”: 

    require(<a  href="http://example/js/a.json?b=func">http://example/js/a.json?cb=func</a>);

      3.路径以“#”结尾:

    require("http://example/js/a.json#");

    使用exports来向外部暴露方法,或者属性。暴露属性有几种方式,如上面中的例子是一种方式,另外还有:

    使用return:

    define(function(require)
     {
        var data1 = 1; //私有数据
        var func1  = function() { //私有方法
            returna.run(data1);
        }
    
        //暴露
        return{
            data2: 2,
            func2:function() {
                return'hello';
            }
        }; 
    });

    直接返回json对象:

    define({
        data: 1,
        func:function() {
            return'hello';
        }
    });

    页面中调用seajs

    前面说了seajs用来解决模块开发,和繁琐的文件依赖问题,所以所有的文件依赖都是通过require对象进行加载,或者可以使用require.async(“./a”)来进行异步加载,即当使用到的时候才进行加载,

      注:无论是require()还是require.async()都可以有第二个参数为回调函数,当文件加载成功时调用:

    require.async('/path/to/module/file',function(m) {

        //code of callback...
    });
     
    有了这个加载依赖的方式,我们无需再页面上书写大量的<script ></script>标签,而仅仅使用一个
      
     <script src="./sea.js" data-main="./init"></script>

    即可,其中data-main="./init" 为入口模块,表示加载这个模块,在进行迭代加载其所依赖的模块,使用这个属性可以省略seajs.use。这个后面说。

    使用seajs.config进行全局配置:

    seajs.config({
    
        base:'path/to/jslib/',
    
        alias: {
          'app':'path/to/app/'
        },
    
        charset:'utf-8',
    
        timeout: 20000,
    
        debug:false
    
    });

    这是对seajs进行全局配置,

    base表示基址寻址时的基址路径

    alias可以对较长的常用路径设置缩写。

    charset表示下载js时script标签的charset属性。

    timeout表示下载文件的最大时长,以毫秒为单位。

    debug表示是否工作在调试模式下。

    使用seajs.use 载入入口模块,相当于java的main函数,

    //单模块模式
    seajs.use('./a');
     
    
    //回调模式
    
    seajs.use('./a',function(a)
     {
    
      a.dosomething();
    
    });
     
    
    //多模块模式
    
    seajs.use(['./a','./b'],function(a,
     b) {
    
      a.dosomething();
    
      b.dosomething();
    
    });

    下面可以看其官方给的simple例子中的页面怎么写的,基本上就明白了sea.js 是怎么用的了:

    <script src="../sea-modules/seajs/seajs/2.2.0/sea.js"></script>
    <script>
    
      // Set configuration
      seajs.config({
        base: "../sea-modules/",
        alias: {
          "jquery": "jquery/jquery/1.10.1/jquery.js"
        }
      });
    
      // For development
      if (location.href.indexOf("?dev") > 0) {
        seajs.use("../static/hello/src/main");
      }
      // For production
      else {
        seajs.use("examples/hello/1.0.0/main");
      }
    </script>

    //mian.js

    //hello/mian.js
    define(function(require) {
    
      var Spinning = require('./spinning');
    
      var s = new Spinning('#container');
      s.render();
    
    });

        参考资料:seajs使用教程指南

            API快速参考

            前端模块化开发的价值

  • 相关阅读:
    POJ1028 Web Navigation【堆栈+模拟】
    UVa10276 HDU1329 ZOJ1239 Hanoi Tower Troubles Again!【递推函数+打表】
    UVALive5369 UVa732 HDU1515 ZOJ1004 Anagrams by Stack【DFS+堆栈】
    HDU5776 sum【前缀和+模除】
    POJ1844 Sum【水题+数学题】
    AOJ0558 Cheese【BFS】
    POJ3009 Curling 2.0【DFS】
    HDU1163 Eddy's digital Roots(解法二)【快速模幂+九余数定理】
    HDU1210 Eddy's 洗牌问题【递推函数+模拟】
    Vijos P1571 笨笨的导弹攻击【最长上升子序列+DP】
  • 原文地址:https://www.cnblogs.com/lic309/p/4136389.html
Copyright © 2011-2022 走看看