zoukankan      html  css  js  c++  java
  • SeaJS入门

    SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等 JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。

    SeaJS的主要目的是令 JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的 逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript 编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护。

    SeaJS的作者是前淘宝UED,现支付宝前端工程师玉伯。

    SeaJS主要解决三个问题:命名冲突,依赖,性能。

    我们在做项目的过程中,是不是有些项目迭代频繁,js之间的依赖性太强,而最终代码量复杂度搞得我们不想再维护下去了,太乱了维护起来太痛苦了,之前我也有这样经历。后来就用了SeaJS做代码管理,使用SeaJS非常适用于多人合作的,且需求一变再变反复修改迭代升级长期维护的项目,这样我们不用考虑别人怎么命名变量或者函数,我们可以挥洒自如,因为每个功能模块只有一个对外的接口,我们要使用模块内变量或者方法必有通过这个接口,不然是访问不到的,而且引用同一个模块js只会加载一次,不会损耗性能。

    SeaJS的基本配置:

    首先在页面中引入seajs,然后根据项目实际情况配置以下参数:

    seajs.config({
     // Sea.js 的基础路径
      base: './js/',
     
      // 别名配置
      alias: {
         'jquery''static/jquery-1.9.1.min'
      },
     
      // 路径配置
      paths: {
        'ddbing''http://www.ddbing.com/'
      },
     
      // 变量配置
      vars: {
        'locale''zh-cn'
      },
     
      // 映射配置
      map: [
        ['http://example.com/js/app/''http://localhost/js/app/']
      ],
     
      // 预加载项
      preload: [
        Function.prototype.bind ? '' 'es5-safe',
        this.JSON ? '' 'json'
      ],
     
      // 调试模式
      debug: true,
     
      // 文件编码
      charset: 'utf-8'
    });

    模块的书写约定,此时用到define 是一个全局函数,用来定义模块:

    define(function(require, exports, module) {  
         // 模块间的依赖,获取模块 a 的接口
          var a = require('./a');  // 调用模块 a 的方法
          a.doSomething();
    });

    默认会传入三个参数:requireexports 和 module

    在页面中如何加载使用模块,此时用到use方法,例如:

    // 加载模块 main,并在加载完成时,执行指定回调
    seajs.use('./main'function(ex) {
      ex.init();
    });

    use 方法还可以一次加载多个模块:

    //并发加载模块 a 和模块 b,并在都加载完成时,执行指定回调
    seajs.use(['./a''./b'], function(a, b) {
      a.init();
      b.init();
    });

    callback 参数可选,省略时,表示无需回调。

    与 DOM ready 的关系:
    注意:seajs.use 与 DOM ready 事件没有任何关系。如果某些操作要确保在 DOM ready 后执行,需要使用 jquery 等类库来保证,比如:

    seajs.use(['jquery''./main'], function($, main) {
      $(document).ready(function() {
        main.init();
      });
    });

    seajs.use 理论上只用于加载启动,不应该出现在 define 中的模块代码里。在模块代码里需要异步加载其他模块时,推荐使用 require.async 方法。

  • 相关阅读:
    iOS常用框架总结
    【Java】使用@Value @Reource或@Autowire依赖 (值) 注入时出现NPE的排查方法
    【Java】事件驱动模型和观察者模式
    新人训练营心得 - 道路阻且长
    【Java】Spring Web MVC注意事项
    【Linux】OpenWRT的无线设置注意事项——从2.4G到5G,hwmode不简单
    【Java】 Spring依赖注入小试牛刀:编写第一个Spring ApplicationContext Demo
    【Linux】 awk应用
    【C/C++】高亮C++中函数的重写——函数名相同?参数列表相同?返回值相同?
    【设计模式】C++单例模式的几种写法——Java自动加载内部类对象,C++怎么破?
  • 原文地址:https://www.cnblogs.com/liqingbo/p/4824449.html
Copyright © 2011-2022 走看看