zoukankan      html  css  js  c++  java
  • 深入seajs源码系列一

    简述

            前端开发模块化已经是大势所趋,目前模块化的规范有很多,众所周知的有commonJS,Module/Wrappings和AMD等,而且ES6也着手开始制定模块化机制的实现。类似于c/c++的include,java中的import关键字,在js中也定义了require关键字,用以引进依赖模块。

            由于规范的多样性,模块化的实现也是各有各的不同。nodejs遵从的就是commonJS规范,它有着一些形式上的约定:  

    1. require为函数,该函数接受一个字符串作为模块标示符
    2. require函数返回值为该模块API
    3. require函数出错,则抛出异常
    4. exports导出模块API
    5. 如果有多个require,则依次加载依赖

            但是浏览器端加载的模块却不像服务器端,依赖模块不在本地,需要通过http请求获取文件,这就涉及到异步加载。但是异步加载并不阻塞代码的运行,如果函数上下文中应用了加载的依赖模块,而此时依赖模块并未加载或者解析完毕,就会抛出undefined错误,避免该错误的发生可以使用回调模式。当所有依赖模块均加载完毕,后执行代码。这也就是Module/Wrappings规范,而seajs基本实现了该规范。

    剖析

              阅读seajs官网的入门demo,首先在主页面引入seajs文件,并设置入口

    // seajs 的简单配置
    seajs.config({
      base: "../sea-modules/",
      alias: {
        "jquery": "jquery/jquery/1.10.1/jquery.js"
      }
    })
    
    // 加载入口模块
    seajs.use("../static/hello/src/main")

    其次定义模块(main.js)

    // 所有模块都通过 define 来定义
    define(function(require, exports, module) {
    
      // 通过 require 引入依赖
      var $ = require('jquery');
      var Spinning = require('./spinning');
    
      // 通过 exports 对外提供接口
      exports.doSomething = ...
    
      // 或者通过 module.exports 提供整个接口
      module.exports = ...
    
    });

    这样,当打开页面时,会调用seajs.use函数并加载main.js文件,此时解析main模块的依赖,并加载jquery和spining模块,待这两个模块加载完毕,执行回调函数。具体执行细节将会在分析源码时提到。

  • 相关阅读:
    vue---mixins的用法
    vue---slot,slot-scoped,以及2.6版本之后插槽的用法
    Java实现DDD中UnitOfWork
    redis基础及redis特殊场景使用描述
    网易一千零一夜 读后初感
    产品经理与众不同的思维方式与“职业病”——《人人都是产品经理》
    【Ubuntu14】Nginx+PHP5+Mysql记录
    A标签/按钮防止重复提交&页面Loading制作
    PHPCMS v9 二次开发_验证码结合Session开发
    eclipse 编码设置【转】
  • 原文地址:https://www.cnblogs.com/accordion/p/4303061.html
Copyright © 2011-2022 走看看