前端蜗牛—阿灯个人博客

越努力越幸运~


JS模块预加载框架 SeaJS

Release time:2019-07-12 Author:阿灯 Reading volume:16

SeaJS是什么?

官网:https://seajs.github.io/seajs/

Github:https://github.com/seajs/seajs

SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制,兼容所有主流浏览器



为什么使用 Sea.js ?

Sea.js 追求简单、自然的代码书写和组织方式,具有以下核心特性:
简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码。
自然直观的代码组织方式:依赖的自动加载、配置的简洁清晰,可以让我们更多地享受编码的乐趣。
Sea.js 还提供常用插件,非常有助于开发调试和性能优化,并具有丰富的可扩展接口。



在页面中加载模块

在 hello.html 页尾,通过 script 引入 sea.js 后,有一段配置代码:



// seajs 的简单配置
seajs.config({
  base: "../sea-modules/",
  alias: {
    "jquery": "jquery/jquery/1.10.1/jquery.js"
  }
})

// 加载入口模块
seajs.use("../static/hello/src/main")



模块代码


// 所有模块都通过 define 来定义
define('common', ['jquery'], function(require, exports, module) {
  
  // 通过 require 引入依赖
  var $ = require('jquery');

  var __common = {  // 定义方法
    // 模块里面的方法
    header: function() {
      // 搜索
      $('.j_searchText').on('focus', function(e) {
        $('.j_csearchPop').removeClass('g-hide');
        e.preventDefault();
      });
      $('.j_searchText').on('focusout', function(e) {
        $('.j_csearchPop').addClass('g-hide');
        e.preventDefault();
      });
    },
 // 引用方法
    init: function() {
      this.header();
    }
  };

 // 或者通过 module.exports 提供整个接口
  module.exports = __common;
});



Catfish Blog | 后台 | Github
© adeng.y 粤ICP备17049299号