模块化开发(二)--- seaJs入门学习

SeaJS是一个基于CMD模块定义规范实现一个模块系统加载器

[CMD规范](https://github.com/cmdjs/specification/blob/master/draft/module.md)9、seaJs启动函数的回调函数

官网:http://seajs.org/docs/

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

如何选择一个技术产品栈:

- 看作者是否是大牛

- 看社区是否活跃

- 看是否经常更新

SeaJS的作者已经不更新该项目了,但是国内很多公司还是在使用SeaJS作为前端模块化解决方案,

学习SeaJS有助于我们学习 Node.js 中的模块系统,因为他们所使用的规范基本一致。

学习完SeaJS之后可以自学 RequireJS[RequireJS官方网站](http://requirejs.org/),思想基本一样。无非是API的区别。

### 体验官方demo

[官方示例demo](http://seajs.org/docs/#quick-start)

###seaJs使用步骤:

1. 下载 sea.js 库

2. 在页面中引入 sea.js

3. define - 定义模块

4. module.exports - 暴露接口

5. require - 加载模块

6. seajs.use - 从入口模块启动模块系统

seaJs.use(‘./././‘,function(a){

console.log(a);//其中a就是exports而不是module.exports

}

10、define()的用法:

define(object)

define(string)

define(function(require,exports,medule){

//所有的自己的js 代码都写在回调函数中

})

例子1:

define(function (require ,exports , module ){    //最好在每一次定义模块的时候,尽量都使用匿名函数,并传入三个参数的方式;不要重命名require函数;

module.exports = {    //通过这种形式将对象暴漏到模块之外,供其他文件使用,可以直接使用exports = ...

add : require ( ‘ ./././ ‘ ) ,  //require的参数值必须是字符串,该字符串就是表示模块的一个模块标识

mod : require ( ‘ ./././ ‘ )    // 访问的时候使用 mod() 直接调用

}

})

例子2:

define ( function ( require , exports , module ) {

exports.add = reuire ( ‘ ./././‘ ) ;    // 访问的时候需要通过 exports.add()方式进行调用

exports.mod =require ( ‘./././‘ );

})

11、require(‘./././‘)加载文件模块

最好吧所有的require都写在define 函数中js 代码的最上面

[require 书写约定](https://github.com/seajs/seajs/issues/259)

12、seaJs在页面中的使用:

首先加载sea.js 文件

然后再启动模块:<script> </script>标签中加载入口模块 seajs.use(‘./a‘)

启动模块系统----开机

seaJs.use方法是异步加载模块文件

13、模块标识:其实就是模块的路径,可以不包含文件的后缀名,因为加载的都是js文件

相对标识:以 ./ 或者 ../ 开始的都是相对标识,相对于当前出现的位置所属的文件

顶级标识:不以 ./ 或者 ../ 或者 / 开始的标识是顶级标识,顶级标识相对模块系统的基础路径来解析,模块系统的基础路径在不指定的情况下,

默认顶级目录是第三方插件 sea.js 所在的目录,可以通过 seajs.config() 方法来指定顶级标识的基础路径

顶级标识配置:seajs.config({

base : ‘ ./ ‘  ; //指定当前目录为顶级目录

})

模块标识永远相对于require出现的文件路径。

14、require.async( ‘./文件‘ )实现异步按条件加载

if(true){require(‘./a‘)}else{require(‘./b‘)}这时候a和b文件都会被加载下来

require是所有加载成功之后才解析和执行

require.async可以按照条件进行加载,代码执行到具体位置的时候才会加载和执行

if(true){

require.async(‘./b‘ , function (foo){

console.log(foo) ;  // foo就是在./b 文件中表露出来的内容

})

}else {

require.async(‘./a‘ , function () {   }  )

}

15、exports 和 module

module.exports就是模块对外导出 的接口对象,相当于执行了 return module.exports

exports就是module.exports的一个别名而已。

module.exports就是当前模块与外部文件的接口对象。

首先需要明白:

var  foo2 = {}

var foo3 =foo2

foo3.name = ‘name‘ // 这是修改了foo3 ,它的引用也被修改

console.log(foo2)

console.log(foo3)

foo3 = ‘hello‘  // 这是对foo3重新赋值后,就丢失了原来foo2的引用

console.log(foo2)

console.log(foo3)

然后:

var foo ={

obj : {}

}

function changeFoo(obj,foo){

console.log(obj===foo.obj) //true

obj.name = ‘jack‘

obj = ‘hello‘

console.log(obj===foo.obj)  //false

return foo.obj

}

console.log(changeFoo(foo.obj,foo)) // {name : jack}

最后:

obj 就相当于 exports,foo 就相当于 module。综上所述可知,不能给exports重新赋值,这样就切断了exports与module.exports之间的联系,必须通过 点 的形式修改exports的值。

16、浏览器中的JS不能做什么?

不能操作数据库、不能操作文件、浏览器的JS只能通过AJAX发送请求而不能接受请求(后面的Socket网络编程就可以进行双向通信了)

JS可以脱离浏览器单独运行(这时候就没有BOM和DOM), JS仅仅是语言而已(以前所学的JS仅仅是ECMAScript)

时间: 2024-10-11 01:22:29

模块化开发(二)--- seaJs入门学习的相关文章

模块化开发,SeaJS简单总结

seajs是一个遵循CommonJS规范的JavaScript模块加载框架. 在 Sea.js 中,所有 JavaScript 模块都遵循 CMD 模块定义规范.该规范明确了模块的基本书写格式和基本交互规则. 在 CMD 规范中,一个模块就是一个文件.代码的书写格式如下:define(factory); SeaJS解决了两个问题: 1.JavaScript的模块化 2.按模块加载 SeaJS在开发中的角色:在多人协作开发时,起着后勤人员的作用,协调  文件依赖.命名冲突.按需加载的作用; 二.用

JavaSE入门学习4:搭建Java开发环境(二)

在上一篇的博文JavaSE入门学习3:搭建Java开发环境(一)中说到我们配置了Path变量的一种方式,再来说说第 二种配置方式,这种配置方式是必须掌握的. path环境变量配置方式2 我们为什么要将第二种配置形式呢?那第一种的配置方式有什么缺点吗?假设我的计算机上安装了两个JDK,一 个是1.7,一个1.8,我刚才配置的是1.8的,那么我需要配置1.7,需要重新配置Path环境变量,有可能在修改Path环 境变量的同时误删其它的东西,所以不建议使用第一种. path环境变量的参照形配置方式的步

seaJs模块化开发简单入门

随着前端技术的日益成熟,功能越来越丰富强大,规范也越来越健全,在这样的背景环境下很快便有了CommonJs.AMD.CMD等一系列规范,使前端发开趋向模块化.规范化.CMD模块化的代表之一就是国内开发的seaJs,它有很多优点: 遵从CMD规范,代码模块化 中文文档通俗易懂,入门上手简单 兼容性好.配置简洁明了.提供插件接口 seajs模块化基本流程: 引入sea.js库 define定义模块 exports暴露模块 require导入模块 安装 npm安装 npm i seajs bower安

SeaJS入门教程系列之使用SeaJS(二)

SeaJS入门教程系列之使用SeaJS(二) 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-03我要评论 这篇文章主要介绍了SeaJS入门教程系列之使用SeaJS,着重介绍了SeaJS的使用方法.关键方法的使用等,需要的朋友可以参考下 下载及安装 要在项目中使用SeaJS,你所有需要做的准备工作就是下载sea.js然后放到你项目的某个位置.SeaJS项目目前托管在GitHub上,主页为 https://github.com/seajs/seajs/ .可以到其git库的buil

前端模块化开发学习之gulp&amp;browserify篇

 随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发的时候,你会觉得十分费劲,因为你不知道文件之间复杂的关系,所以我们需要利用一些插件来配合进行模块化的开发. 所谓模块化的开发,写过nodejs的人都知道,文件之间的依赖可以用require()实现,但是浏览器端是不支持这样的依赖形式的,而browserify却可以解决这个问题,再加上gulp这个强大

seajs进行模块化开发

seajs进行模块化开发 模块化前端开发入门指南(二) 2015-08-26 15:23 by paseo, 370 阅读, 0 评论, 收藏, 编辑 概览 使用seajs模块化加载器进行模块化开发,以及它的一些弊端. 使用seajs进行模块化开发 项目目录 新建新项目 引入sea.js,文件路径modules/sea.js 引入公共库jquery. 新建index.html,index.js 项目目录如下: 关于sea.js的公共模块路径sea.js加载时,会自动获取sea.js所在的路径,将

JS模块化开发(三)——seaJs+grunt

1.seaJs直接构建存在的问题 由于模块之间的依赖require引用的是模块名,当多个js模块被合并成一个时,会由于找不到模块名而报错 2.seaJs+grunt开发 用到的插件:grunt-cmd-transport和grunt-cmd-concat       (CMD规范) grunt-cmd-transport:提取本模块的ID和本模块所依赖的ID(数组格式),作为define函数的两个参数:define(ID,[依赖数组],function(require,exports,modul

JS模块化开发:使用SeaJs高效构建页面

一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就更别说会知道js还有面向对象,设计模式,MVC,MVVM,模块化,构建工具等等这些高大上的概念了.现在想想还真是Too young too naive.前两天某大神在群里分享他招聘前端的心得的时候就说,就是那些以为能写两个页面就可以自称前端的人拉低了行业水平.这样看来前两年我还真的扯了不少后腿呢……

初学seaJs模块化开发,利用grunt打包,减少http请求

原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —dist   //压缩后的目标文件夹 —lib   //各个模块 —drag    //拖拽模块 —scale   //缩放模块 —seajs    //seajs库 —seajs_drag    //入口的主文件main.js —main.js /*——————————————————————————