当前位置: 首页 > 编程日记 > 正文

SeaJS基本开发原则

SeaJS基本开发原则

在讨论SeaJS的具体使用前,先介绍一下SeaJS的模块化理念和开发原则。
使用SeaJS开发JavaScript的基本原则就是:一切皆为模块。引入SeaJS后,编写JavaScript代码就变成了编写一个又一个模块,SeaJS中模块的概念有点类似于面向对象中的类——模块可以拥有数据和方法,数据和方法可以定义为公共或私有,公共数据和方法可以供别的模块调用。
另外,每个模块应该都定义在一个单独js文件中,即一个对应一个模块。
下面介绍模块的编写和调用。

模块的定义及编写

模块定义函数define
SeaJS中使用“define”函数定义一个模块。因为SeaJS的文档并没有关于define的完整参考,所以我阅读了SeaJS源代码,发现define可以接收三个参数:

复制代码代码如下:
/**
* Defines a module.
* @param {string=} id The module id.
* @param {Array.|string=} deps The module dependencies.
* @param {function()|Object} factory The module factory function.
*/
fn.define = function(id, deps, factory) {
    //code of function…
}

上面是我从SeaJS源码中摘录出来的,define可以接收的参数分别是模块ID,依赖模块数组及工厂函数。我阅读源代码后发现define对于不同参数个数的解析规则如下:
如果只有一个参数,则赋值给factory。
如果有两个参数,第二个赋值给factory;第一个如果是array则赋值给deps,否则赋值给id。
如果有三个参数,则分别赋值给id,deps和factory。
但是,包括SeaJS的官方示例在内几乎所有用到define的地方都只传递一个工厂函数进去,类似与如下代码:

复制代码代码如下:

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

个人建议遵循SeaJS官方示例的标准,用一个参数的define定义模块。那么id和deps会怎么处理呢?
id是一个模块的标识字符串,define只有一个参数时,id会被默认赋值为此js文件的绝对路径。如example.com下的a.js文件中使用define定义模块,则这个模块的ID会赋值为 http://example.com/a.js ,没有特别的必要建议不要传入id。deps一般也不需要传入,需要用到的模块用require加载即可。

工厂函数factory解析

工厂函数是模块的主体和重点。在只传递一个参数给define时(推荐写法),这个参数就是工厂函数,此时工厂函数的三个参数分别是:
1.require——模块加载函数,用于记载依赖模块。
2.exports——接口点,将数据或方法定义在其上则将其暴露给外部调用。
3.module——模块的元数据。
这三个参数可以根据需要选择是否需要显示指定。
下面说一下module。module是一个对象,存储了模块的元信息,具体如下:
1.module.id——模块的ID。
2.module.dependencies——一个数组,存储了此模块依赖的所有模块的ID列表。
3.module.exports——与exports指向同一个对象。

三种编写模块的模式

第一种定义模块的模式是基于exports的模式:

复制代码代码如下:

define(function(require, exports, module) {
    var a = require('a'); //引入a模块
    var b = require('b'); //引入b模块

    var data1 = 1; //私有数据

    var func1 = function() { //私有方法
        return a.run(data1);
    }

    exports.data2 = 2; //公共数据

    exports.func2 = function() { //公共方法
        return 'hello';
    }
});

上面是一种比较“正宗”的模块定义模式。除了将公共数据和方法附加在exports上,也可以直接返回一个对象表示模块,如下面的代码与上面的代码功能相同:

复制代码代码如下:
define(function(require) {
    var a = require('a'); //引入a模块
    var b = require('b'); //引入b模块

    var data1 = 1; //私有数据

    var func1 = function() { //私有方法
        return a.run(data1);
    }

    return {
        data2: 2,
        func2: function() {
            return 'hello';
        }
    };
});

如果模块定义没有其它代码,只返回一个对象,还可以有如下简化写法:

复制代码代码如下:
define({
    data: 1,
    func: function() {
        return 'hello';
    }
});


第三种方法对于定义纯JSON数据的模块非常合适。

模块的载入和引用

模块的寻址算法
上文说过一个模块对应一个js文件,而载入模块时一般都是提供一个字符串参数告诉载入函数需要的模块,所以就需要有一套从字符串标识到实际模块所在文件路径的解析算法。SeaJS支持如下标识:
绝对地址——给出js文件的绝对路径。

如:

复制代码代码如下:
require("http://example/js/a");


就代表载入 http://example/js/a.js 。
相对地址——用相对调用载入函数所在js文件的相对地址寻找模块。
例如在 http://example/js/b.js 中载入

复制代码代码如下:
require("./c");


则载入 http://example/js/c.js 。
基址地址——如果载入字符串标识既不是绝对路径也不是以”./”开头,则相对SeaJS全局配置中的“base”来寻址,这种方法稍后讨论。
注意上面在载入模块时都不用传递后缀名“.js”,SeaJS会自动添加“.js”。但是下面三种情况下不会添加:
载入css时,如:

复制代码代码如下:
require("./module1-style.css");


路径中含有”?”时,如:

复制代码代码如下:
require(<a href="http://example/js/a.json?cb=func">http://example/js/a.json?cb=func</a>);


路径以”#”结尾时,如:

复制代码代码如下:
require("http://example/js/a.json#");


根据应用场景的不同,SeaJS提供了三个载入模块的API,分别是seajs.use,require和require.async,下面分别介绍。

seajs.use

seajs.use主要用于载入入口模块。入口模块相当于C程序的main函数,同时也是整个模块依赖树的根。上面在TinyApp小例子中,init就是入口模块。seajs.use用法如下:

复制代码代码如下:

//单一模式
seajs.use('./a');

//回调模式
seajs.use('./a', function(a) {
  a.run();
});

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


一般seajs.use只用在页面载入入口模块,SeaJS会顺着入口模块解析所有依赖模块并将它们加载。如果入口模块只有一个,也可以通过给引入sea.js的script标签加入”data-main”属性来省略seajs.use,例如,上面TinyApp的index.html也可以改为如下写法:

复制代码代码如下:

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>TinyApp</title>
</head>
<body>
    <p class="content"></p>
    <script src="./sea.js" data-main="./init"></script>
</body>
</html>


这种写法会令html更加简洁。

require

require是SeaJS主要的模块加载方法,当在一个模块中需要用到其它模块时一般用require加载:

复制代码代码如下:
var m = require('/path/to/module/file');


这里简要介绍一下SeaJS的自动加载机制。上文说过,使用SeaJS后html只要包含sea.js即可,那么其它js文件是如何加载进来的呢?SeaJS会首先下载入口模块,然后顺着入口模块使用正则表达式匹配代码中所有的require,再根据require中的文件路径标识下载相应的js文件,对下载来的js文件再迭代进行类似操作。整个过程类似图的遍历操作(因为可能存在交叉循环依赖所以整个依赖数据结构是一个图而不是树)。
明白了上面这一点,下面的规则就很好理解了:
传给require的路径标识必须是字符串字面量,不能是表达式,如下面使用require的方法是错误的:

复制代码代码如下:
require('module' + '1');
require('Module'.toLowerCase());


这都会造成SeaJS无法进行正确的正则匹配以下载相应的js文件。

require.async

上文说过SeaJS会在html页面打开时通过静态分析一次性记载所有需要的js文件,如果想要某个js文件在用到时才下载,可以使用require.async:

复制代码代码如下:
require.async('/path/to/module/file', function(m) {
    //code of callback...
});


这样只有在用到这个模块时,对应的js文件才会被下载,也就实现了JavaScript代码的按需加载。

SeaJS的全局配置
SeaJS提供了一个seajs.config方法可以设置全局配置,接收一个表示全局配置的配置对象。具体使用方法如下:

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


其中base表示基址寻址时的基址路径。例如base设置为 http://example.com/js/3-party/ ,则:

复制代码代码如下:
var $ = require('jquery');


会载入 http://example.com/js/3-party/jquery.js 。
alias可以对较长的常用路径设置缩写。
charset表示下载js时script标签的charset属性。
timeout表示下载文件的最大时长,以毫秒为单位。
debug表示是否工作在调试模式下。

SeaJS如何与现有JS库配合使用

要将现有JS库如jQuery与SeaJS一起使用,只需根据SeaJS的的模块定义规则对现有库进行一个封装。例如,下面是对jQuery的封装方法:

复制代码代码如下:
define(function() {

//{{{jQuery原有代码开始
/*!  
 * jQuery JavaScript Library v1.6.1
 * http://jquery.com/
 *
 * Copyright 2011, John Resig
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * Includes Sizzle.js
 * http://sizzlejs.com/
 * Copyright 2011, The Dojo Foundation
 * Released under the MIT, BSD, and GPL Licenses.
 *
 * Date: Thu May 12 15:04:36 2011 -0400
 */
//...
//}}}jQuery原有代码结束

return $.noConflict();
});


SeaJS项目的打包部署

SeaJS本来集成了一个打包部署工具spm,后来作者为了更KISS一点,将spm拆出了SeaJS而成为了一个单独的项目。spm的核心思想是将所有模块的代码都合并压缩后并入入口模块,由于SeaJS本身的特性,html不需要做任何改动就可以很方便的在开发环境和生产环境间切换。但是由于spm目前并没有发布正式版本,所以本文不打算详细介绍,有兴趣的朋友可以参看其github项目主页 https://github.com/seajs/spm/。
其实,由于每个项目所用的JS合并和压缩工具不尽相同,所以spm可能并不是完全适合每个项目。在了解了SeaJS原理后,完全可以自己写一个符合自己项目特征的合并打包脚本。

转载于:https://www.cnblogs.com/zhoukui224466/p/4716093.html

相关文章:

SMS主站点配置详细图解:Sms2003系列之二

SMS主站点配置在上一篇文章中&#xff0c;我们介绍了如何进行SMS2003&#xff0b;SP2的部署。本文中&#xff0c;我们将介绍如何进行SMS主站点的配置。在SMS中&#xff0c;站点(site)定义并包含了所有SMS管理的对象。当我们第一次安装SMS时&#xff0c;实际安装的是一个SMS站点…

2019,不可错过的NLP“高光时刻”

作者 | Elvis译者 | 凯隐、夕颜出品 | AI科技大本营&#xff08;ID: rgznai100&#xff09;【导读】对自然语音处理&#xff08;NLP&#xff09;领域而言&#xff0c;2019年是令人印象深刻的一年&#xff0c;本文将回顾2019年NLP和机器学习领域的重要事件。内容 主要集中于 NLP…

Windows客户端C/C++编程规范“建议”——结构

5 结构 5.1 不要使用goto 等级&#xff1a; 【必须】说明&#xff1a;在大型项目中&#xff0c;goto的滥用会导致灾难性后果。因为我们程序中一般不存在从一个函数体内部跳转到另一个函数体内部的场景&#xff0c;所以我们可以将跳转控制在函数内部&#xff0c;从而避免灾难。…

WinForm容器内控件批量效验是否允许为空?设置是否只读?设置是否可用等方法分享...

版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 https://blog.csdn.net/chinahuyong/article/details/47395633 WinForm容器内控件批量效验是否允许为空&#xff1f;设置是否只读&#xff1f;设置是否可用等方法分享 在WinForm程序中&#xff0c;我…

“不会Linux,怎么当程序员?”骨灰级程序员:干啥都不行。

说起优秀程序员的必备技能&#xff0c;我想大家都可以说很多&#xff0c;比如&#xff1a;数据结构、算法、数学、编程语言等等。但是&#xff0c;你可能会忽略了每一个程序员都应该掌握的技能&#xff1a;Linux。想一想&#xff0c;我们日常学习、求职、工作场景的中&#xff…

与空连接相关的几条命令

1)建立空连接:net use \\IP\ipc$ "" /user:"" (一定要注意:这一行命令中包含了3个空格) 2)建立非空连接:net use \\IP\ipc$ "密码" /user:"用户名" (同样有3个空格)3)映射默认共享:net use z: \\IP\c$ "密码" /u…

Windows客户端C/C++编程规范“建议”——宏

6 宏 6.1 减少宏的使用 等级&#xff1a; 【建议】说明&#xff1a;宏的使用&#xff0c;将使得调试变得麻烦。所以在设计和使用宏的时候&#xff0c;请确保宏的逻辑是阅读者不会去关心细节的行为。6.2 宏定义中字母需大写 等级&#xff1a; 【必须】说明&#xff1a;为了醒目…

Struts2中通配符的使用

1、准备工作 新建一个JavaWeb项目HelloWord&#xff0c;导入Struts2的.jar包&#xff0c;在Web.xml下配置Struts2的监听&#xff0c;在src下添加Struts2的配置文件struts.xml&#xff1b;将该项目部署到服务器(Tomcat)上&#xff0c;运行检查项目是否部署成功和其他错误&#x…

关于Spark NLP学习,你需要掌握的LightPipeline(附代码)| CSDN博文精选

作者 | Veysel Kocaman, Data Scientist & ML Researcher ANKIT CHOUDHARY翻译 | 赵春光校对 | 申利彬来源 | 数据派THU(*点击阅读原文&#xff0c;查看作者更多精彩文章&#xff09;【导读】Pipeline具体来说是一个多阶段的序列&#xff0c;每个阶段由一个Transformer或者…

网络编程--ftp客户端的实现(c#版)

.net2.0对ftp有了一个很好的封装,但是确容易让人忽略ftp的真正内部实现,下面是我实现的ftp客户端的功能,其主要步骤是这样的:1、创建一个FtpWebRequest对象&#xff0c;指向ftp服务器的uri 2、设置ftp的执行方法&#xff08;上传&#xff0c;下载等&#xff09; 3、给FtpWebReq…

Windows客户端C/C++编程规范“建议”——文件

7 文件 7.1 正确使用#include 等级&#xff1a;【推荐】 说明&#xff1a;#include <>和#include “”导致编译器在搜索文件时&#xff0c;搜索的路径顺序不同。所以需要正确使用#include&#xff0c;以避免包含错了头文件。 语法形式操作带引号的形式预处理器按以下…

让你的网站支持 Emoji

SegmentFault有用户提出要支持Emoji表情输入&#xff0c;就研究了一下&#xff1a; 要记得备份数据库。 首先Mysql数据库在5.5.3之后开始支持utf8mb4字符集&#xff0c;所以mysql版本是5.5.3&#xff0b;的都可以设置让数据库存储Emoji表情&#xff0c;如果你的应用有移动端的&…

Windows客户端C/C++编程规范“建议”——变量和常量

8 变量和常量 8.1 尽量不要使用全局变量 等级&#xff1a; 【要求】说明&#xff1a;全局变量的滥用和goto的滥用一样&#xff0c;都是一种灾难。它将使得逻辑变得难以调试和控制。8.2 不涉及外部使用的全局变量需要使用static关键字修饰 等级&#xff1a; 【要求】说明&#…

机器学习模型五花八门不知道怎么选?这份指南告诉你

作者 | LAVANYA译者 | 陆离编辑 | 夕颜出品 | AI科技大本营&#xff08;ID: rgznai100&#xff09;【导读】在本文中&#xff0c;我们将探讨不同的机器学习模型&#xff0c;以及每个模型合理的使用场景。一般来说&#xff0c;基于树形结构的模型在Kaggle竞赛中是表现最好的&…

WinAPI: FlattenPath、WidenPath

不管什么曲线命令, 到来路径中都会变成 Bezier 线; 也就是说路径中只有直线和 Bezier 线.FlattenPath 和 WidenPath 都能够把路径中的 Bezier 线转换为近似的直线; 不同的是: 用 WidenPath 转换后貌似加宽了线, 其实它是转换成了一个包围路径的新路径(类似区域).本例效果图:代码…

Android - 小的特点 - 使用最新版本ShareSDK手册分享(分享自己定义的接口)

前太实用Share SDK很快分享&#xff0c;但官员demo快捷共享接口已被设置死&#xff0c;该公司的产品还设计了自己的份额接口&#xff0c;这需要我手动共享。 读了一堆公文&#xff0c;最终写出来&#xff0c;行&#xff0c;废话&#xff0c;进入主题。 之前没实用过ShareSDK分享…

结合Flink,国内自研,大规模实时动态认知图谱平台——AbutionGraph |博文精选

作者 | Raini出品 | 北京图特摩斯科技 &#xff08;www.thutmose.cn&#xff09;(*点击阅读原文&#xff0c;查看作者更多精彩文章&#xff09;Flink&#xff1a;目前最受关注的大数据技术&#xff0c;最活跃 Apache 项目之一。AbutionGraph&#xff1a;北京图特摩斯科技自研的…

Windows客户端C/C++编程规范“建议”——风格

9 风格 9.1 优先使用匈牙利命名法 等级&#xff1a; 【推荐】说明&#xff1a;该方法由微软总设计师设计。Windows上编程最好遵从该标准。详细介绍见&#xff1a;http://zh.wikipedia.org/wiki/%E5%8C%88%E7%89%99%E5%88%A9%E5%91%BD%E5%90%8D%E6%B3%959.2 变量名结合使用匈牙…

使用GIF(仅限Delphi2007)

-----------uses GIFImg; procedure TForm1.FormCreate(Sender: TObject); begin // 先在窗体上放一个 TImage 组件&#xff1a;Image1&#xff1b; Image1.Picture.LoadFromFile(C:\Example.gif); // AnimationSpeed 设定动画速度&#xff0c;值越大&#xff0c;速度越快…

使用Depth Texture

使用Depth Textures&#xff1a;   可以将depth信息渲染到一张texture&#xff0c;有些效果的制作会需要scene depth信息&#xff0c;此时depth texture就可以派上用场了。   Depth Texture在不同平台上有不同的实现&#xff0c;并且原生的支持也不一样。   UnityCG.cgin…

Exchage 2007 Client Application Functions(2) -- 如何收取邮件

上一篇介绍的Exchange2007客户端程序中怎么发送邮件。现在&#xff0c;我来简单介绍一下怎么收取邮件。来看代码&#xff1a;publicHashtable GetAllMails(DateTime StartDate, DateTime EndDate) { try { if (null this.m_esb) …

VC开发Windows客户端软件之旅——前言

从第一次拖着行李入京找活&#xff0c;至今已工作若干年了。这些年一直追逐自己的梦想&#xff0c;跑过三个城市&#xff0c;换了三份工作&#xff0c;认识了很多业内的朋友。和朋友们闲聊时&#xff0c;发现很多人都已经不再做客户端软件了。有的转去做管理&#xff0c;有的转…

代替Mask R-CNN,BlendMask欲做实例预测任务的新基准?

「免费学习 60 节公开课&#xff1a;投票页面&#xff0c;点击讲师头像」作者 | Hao Chen、Kunyang Sun、Zhi Tian、Chunhua Shen、Yongming Huang、Youliang Yan译者 | 刘畅编辑 | Jane出品 | AI科技大本营&#xff08;ID&#xff1a;rgznai100&#xff09;【导读】实例分割是…

如何让ie 7 支持box-shadow

box-shadow是一个很好用并且也常用的css 3属性&#xff0c;但是&#xff0c;如果我们要保证它能在ie 8及更低的版本下运行的话&#xff0c;需要借助一些其他的插件或文件。在这里我主要讲一下&#xff0c;如何用PIE.htc来解决ie 7不支持box-shadow。 代码如下&#xff1a; <…

拥有AI「变声术」,秒杀了多年苦练的模仿艺能

「免费学习 60 节公开课&#xff1a;投票页面&#xff0c;点击讲师头像」作者 | Daniel Chen&#xff0c;爱奇艺资深研发工程师 出品 | AI科技大本营&#xff08;ID&#xff1a;rgznai100&#xff09;【导读】什么是Voice Conversion&#xff08;VC&#xff09;&#xff1f;它有…

服务器架设笔记——编译Apache及其插件

之前一直从事Windows上的客户端软件开发&#xff0c;经常会处理和服务器交互相关的业务。由于希望成为一个全栈式的工程师&#xff0c;我对Linux上服务器相关的开发也越来越感兴趣。趁着年底自由的时间比较多&#xff0c;我可以对这块做些技术研究。虽然这些知识很基础也很老&a…

Silverlight 2中多语言支持实现(上)

引言 最近项目要在Silverlight 2应用程序中实现本地化&#xff0c;原以为这个过程非常简单&#xff0c;却没想到实现的时候一波三折&#xff0c;好在结果还算不错。需求是这样的&#xff0c;用户第一次访问的时候&#xff0c;默认为英文&#xff0c;当用户选择一种显示语言后&a…

解析大型.NET ERP系统 多国语言实现

实现多国语言有许多种实现方案&#xff0c;无外乎是一种字符串替换技术&#xff0c;将界面控件的文本标签替换成相应语言的文字。.NET Windows Forms实现多国语言的方法有以下几种&#xff1a; 1 .NET的方案&#xff0c;使用资源文件 分别做三个语言的资源文件&#xff0c;比如…

服务器架设笔记——Apache模块开发基础知识

通过上节的例子&#xff0c;我们发现Apache插件开发的一个门槛便是学习它自成体系的一套API。虽然Apache的官网上有对这些API的详细介绍&#xff0c;但是空拿着一些零散的说明书&#xff0c;是很难快速建立起一套可以运行的系统。&#xff08;转载请指明出于breaksoftware的csd…

解密Elasticsearch技术,腾讯开源的万亿级分布式搜索分析引擎

「免费学习 60 节公开课&#xff1a;投票页面&#xff0c;点击讲师头像」作者 | johngqjiang&#xff0c;腾讯 TEG 云架构平台部研发工程师来源 | 腾讯技术工程&#xff08;ID&#xff1a;Tencent_TEG&#xff09;【导读】Elasticsearch&#xff08;ES&#xff09;作为开源首选…