jquery.js与sea.js综合使用

 

目录
  模块定义
  define
    id
    dependencies
    factory
  exports
  require
    require.async
    require.resolve
    require.load
    require.constructor
  module
   module.id
   module.dependencies
   module.exports
   module.constructor
seajs.config
alias

jquery.js与sea.js综合使用
简介:
SeaJS:javascrīpt模块化开发
jQuery:javascrīpt框架
简介:
SeaJS:javascrīpt模块化开发
jQuery:javascrīpt框架
1、jQuery定义 2、加载jQuery文件
  1. //jquery-sea.js
  2. define(function(require, exports, module) = {
  3. //原jquery.js代码...
  4. module.exports = $.noConflict(true);
  5. });
  1. seajs.config({
  2. alias: {
  3. 'jquery': '/static/lib/seajs/jquery-sea.js'
  4. }
  5. });
 3、模块定义  4、define,使用全局函数 define 来定义模块:

  1. SeaJS 中,所有 JavaScript 文件都应该用模块的形式来书写,并且一个文件只包含一个模块。

  1. define(id?, dependencies?, factory);
 5、id  6、dependencies
 当前模块的唯一标识。该参数可选。如果没有指定,默认为模块所在文件的访问路径。如果指定的话, 必须是顶级或绝对标识(不能是相对标识)。

  1. 当前模块所依赖的模块,是一个由模块标识组成的数组。该参数可选。如果没有指定,模块加载器会从 factory.toString() 中解析出该数组。
  2.  
  3. ** 注意:强烈推荐不要设定 id dependencies 参数。 在开发阶段,模块加载器会自动获取这两个参数。部署上线时,则可以通过优化工具来提取这两个参数。
 7、factory  8、exports

  1. 模块的工厂函数。模块初始化时,会调用且仅调用一次该工厂函数。factory 可以是函数, 也可以是对象、字符串等任意值,这时 module.exports 会直接设置为 factory 值。
  2. factory 函数在调用时,会始终传入三个参数: requireexports module 这三个参数在所有模块代码里可用。
  3.  
  4. define(function(require, exports, module) {
  5. // The module code goes here
  6. });

9、require

  1. require 函数用来访问其他模块提供的 API.
  2.  
  3. define(function(require) {
  4. var a = require('./a');
  5. a.doSomething();
  6. });
  7. 它接受 模块标识 作为唯一参数。
  8.  
  9. 请牢记,为了使静态分析能成功获取到模块依赖信息,在书写模块时,需要遵循一些简单的 规则。

10、require.async

  1. 该方法可用来异步加载模块,并在加载完成后执行回调函数。
  2. define(function(require, exports, module) {
  3. // 加载一个模块
  4. require.async('./b', function(b) {
  5. b.doSomething();
  6. });
  7.  
  8. // 加载多个模块
  9. require.async(['./c', './d'], function(c, d) {
  10. // do something
  11. });
  12. });

  1. exports 用来向外提供模块的 API.
  2.  
  3. define(function(require, exports) {
  4. // snip...
  5. exports.foo = 'bar';
  6. exports.doSomething = function() {};
  7. });
  8. 除了给 exports 对象增加成员,还可以使用 return 直接向外提供 API.
  9.  
  10. define(function(require, exports) {
  11. // snip...
  12. return {
  13. foo: 'bar'
  14. doSomething: function() {};
  15. };
  16. });
  17. 如果 return 语句是模块中的唯一代码,可简化为:
  18.  
  19. define({
  20. foo: 'bar'
  21. doSomething: function() {};
  22. });
  23. 上面这种格式特别适合定义 JSON 数据。
  24.  
  25. ** 注意:下面这种写法是错误的!
  26.  
  27. define(function(require, exports) {
  28. // snip...
  29. exports = { // 错误!
  30. foo: 'bar'
  31. doSomething: function() {};
  32. };
  33. });
  34. 模块加载器不能获取到新赋给 exports 变量的值。 请使用 return module.exports
 11、require.resolve  12、require.load
  1. 使用 require() 的内部机制来解析并返回模块路径。该函数不会加载模块,只返回解析后的路径。
  1. 该方法可用来异步加载脚本,并在加载完成后,执行指定的回调函数。开发插件时, 可以通过覆盖该方法来实现自定义的资源加载。
13、require.constructor 14、module
  1. 有时候,我们需要给所有 require 参数对象添加一些公用属性或方法。这时, 使用 require.constructor 来实现会非常方便。
  1. module 参数存储模块的元信息。拥有以下成员:
15、module.id 16、module.dependencies
  1. 当前模块的唯一标识。 require(module.id) 必然返回此模块的 exports
  2.  
  3. define(function(require, exports, module) {
  4. console.log(module.id); // http://path/to/this/file.js
  5. console.log(require(module.id) === exports); // true
  6. });
  1. module.dependencies 是一个数组,表示当前模块的依赖列表。
  2.  
  3. 该数组只读:模块加载完成后,修改该数组不会有任何效果。
17、module.exports  18、module.constructor
  1.  

exports 对象由模块系统创建,这不能满足开发者的所有需求, 有时候会希望 exports 是某个类的实例。 这时可用 module.exports 来实现:

  1.  

define(function(require, exports, module) {
console.log(module.exports === exports); // true
module.exports = new SomeClass();
console.log(module.exports === exports); // false
});
注意,对 module.exports 的赋值需要同步执行,它不能放在回调函数里。 下面这样是不行的:

  1.  

x.js:

  1.  

define(function(require, exports, module) {
setTimeout(function() {
module.exports = { a: "hello" };
}, 0);
});
y.js:

  1.  

define(function(require, exports, module) {
var x = require('./x');
console.log(x.a); // undefined
});

  1.  

  1. 有时候,我们需要给所有 module 参数对象添加一些公用属性或方法。在这种情况下, 使用 module.constructor 可以很好地满足需求。
  2.  
  3. extend.js:
  4.  
  5. define(function(require, exports, module) {
  6. var Module = module.constructor;
  7.  
  8. Module.prototype.filename = function() {
  9. var id = this.id;
  10. var parts = id.split('/');
  11. return parts[parts.length - 1];
  12. };
  13. });
  14. a.js:
  15.  
  16. define(function(require, exports, module) {
  17. exports.filename = module.filename();
  18. });
   

jquery.js与sea.js综合使用的更多相关文章

  1. require.js与sea.js的区别

    hi,感谢各位读者能够阅读我的文章. 下面为大家讲解一下require.js和sea.js的区别.纯属个人意见,不喜勿喷. 首先原理上的区别 sea.js遵循CMD规范.书写方式类似node.js的书 ...

  2. require.js和sea.js的区别

    下面为大家讲解一下require.js和sea.js的区别.纯属个人意见,不喜勿喷. 首先原理上的区别 sea.js遵循CMD规范.书写方式类似node.js的书写模板代码.依赖的自动加载,配置的简洁 ...

  3. JavaScript模块化编程之require.js与sea.js

    为什么要模块化:当今,网站以不再是一个简单的页面,JavaScript也不再是做一些简单的脚本验证,随着WEB.20时代到来,前端工程师面临的必将是越来越庞大的JavaScript代码,越来越复杂的内 ...

  4. 前端模块化 、包管理器、AMD、 CMD、 require.js 、sea.js

    问题由来,为什么要前端模块化管理: 假设我们有个组件名为Acomponent.js, 是架构封装的,里面依赖另一个公司公用库common.js: 那我们引入Acomponent.js的时候,怎么知道要 ...

  5. JS利用 Sea.js 实现模块化:拖拽、缩放及范围限制

    知识点总结: Sea.js的使用:define.export.seajs.use.require等方法:   参考:http://seajs.org/docs/ Sea.js与require.js的区 ...

  6. sea.js 入门

    上个月学了 require.js 现在顺便来学学 sea.js. 对比下这两种的区别,看自己喜欢哪个,就在接下来的项目中去使用它吧. seajs中的所有 JavaScript 模块都遵循 CMD 模块 ...

  7. 记录:sea.js和require.js配置 与 性能对比

    最近有点忙,很久无写博客,记录一下之前的配置require.js和sea.js的配置.(有误有望提出 require.js 文件目录 /app(项目使用js) /lib(require.js jq存放 ...

  8. sea.js 个人入门

    玉伯 : http://seajs.org/docs/ 说这两个JS 必须提到AMD.commonjs两种不同的规范: 奇舞团:http://www.75team.com/archives/882 知 ...

  9. sea.js教程

    转载自:http://blog.codinglabs.org/articles/modularized-javascript-with-seajs.html 前言 SeaJS是一个遵循CommonJS ...

随机推荐

  1. Intellij IDEA 部署 项目在tomcat 原理

    https://www.zhihu.com/question/54757013 Intellij IDEA通过tomcat部署web项目的机制 IntelliJ IDEA通过Tomcat启动项目过程分 ...

  2. Hibernate- 动态实例查询

    什么是动态实例查询: 就是将查询出的单一列的字段,重新封装成对象,如果不适用特殊方法,会返回Object对象数组. 01.搭建环境 02.动态实例查询 需要使用相应的构造方法: public Book ...

  3. CodeIgniter(3.1.4)框架中整合ThinkPHP验证码

    下载源码包: https://github.com/top-think/think-captcha 字体库: 源文件路径: //代码中字体路径,背景路径已经修改. <?php class Vco ...

  4. d3js把circle和rect连接在一起

    怎么办呢...哎...突然就必须全选中了.... 但是...一不小心想到 在g里面都添加circle和rect 但是根据tpye可以让circle的r为0或者rect的width和height为0,这 ...

  5. R语言进阶之4:数据整形(reshape)

    一.通过重新构建数据进行整形 数据整形最直接的思路就把数据全部向量化,然后按要求用向量构建其他类型的数据.这样是不是会产生大量的中间变量.占用大量内存?没错.R语言的任何函数(包括赋值)操作都会有同样 ...

  6. 13 款最棒的 jQuery 图像 360° 旋转插件

    在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式.这些超级棒的 360° 图像选择插件允许用户更详细的分析产品或者文章.jQuery 图像旋转插件可以让用 ...

  7. BOOTH 算法的简单理解

    学习FPGA时,对于乘法的运算,尤其是对于有符号的乘法运算,也许最熟悉不过的就是 BOOTH算法了. 这里讲解一下BOOTH算法的计算过程,方便大家对BOOTH的理解.        上图是BOOTH ...

  8. 深度可分离卷积结构(depthwise separable convolution)计算复杂度分析

    https://zhuanlan.zhihu.com/p/28186857 这个例子说明了什么叫做空间可分离卷积,这种方法并不应用在深度学习中,只是用来帮你理解这种结构. 在神经网络中,我们通常会使用 ...

  9. matlab下使用svmlib工具包

    虽然网络上已经有了很多的类似的东西了吧.但是呢,我自己还是要写一写的. 安装: 对于 libsvm工具包,我们可以去官方网站下载,网址为:http://www.csie.ntu.edu.tw/~cjl ...

  10. [转]oracle存储过程、声明变量、for循环

    oracle存储过程.声明变量.for循环 1.创建存储过程 create or replace procedure test(var_name_1 in type,var_name_2 out ty ...