交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 通过seajs实现JavaScript的模块开发及按模块加载

    seajs实现了JavaScript 的 模块开发及按模块加载。用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载。

    首先看看seajs是怎么进行模块开发的。使用seajs基本上只有一个函数“define”

    fn.define
    = function(id,
    deps, factory) {
    //code of function…
    }

    使用define函数来进行定义一个模块,根据 CMD (Common Module Definition)模块定义规范。一个文件就是一个模块。所以一个js文件中只有一个define,即一个文件是一个模块,SeaJS中模块的概念有点类似于面向对象中的类——模块可以拥有数据和方法,数据和方法可以定义为公共或私有,公共数据和方法可以供别的模块调用。

    官方实例中,define只传入一个参数: 一个工厂函数

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

    在看参数之前,我们先看看define是如何处理参数的:

    fn.define = function(id, deps, factory)

    define可以接收的参数分别是模块ID,依赖模块数组及工厂函数;

    如果只有一个参数,则赋值给factory。

    如果有两个参数,第二个赋值给factory;第一个如果是array则赋值给deps,否则赋值给id。

    如果有三个参数,则分别赋值给id,deps和factory。

    根据官方实例,建议还是根据官方的来就传递一个参数,即只有factory参数,这样的话模块id默认为js文件路径。

    在来看看工厂函数的参数:

    require, exports, module

    • require——模块加载函数,用于记载依赖模块。通过这个参数来进行对其他模块的加载。
    • exports——接口点,将数据或方法定义在其上则将其暴露给外部调用。通过这个参数,来将这个模块的方法进行暴露
    • module——模块的元数据。其是一个对象,有属性:
      • module.id——模块的ID。
      • module.dependencies——一个数组,存储了此模块依赖的所有模块的ID列表。
      • module.exports——与exports指向同一个对象。

    使用factory的参数的使用:

    define(function(require,
    exports, module) {
    var a = require('./a');//引入a模块 
    exports.fun2= function(){
    alert("fun2");
    a.dosomething();
      } 
    
    }

    使用require对象来进行加载模块,其实使用正则表达式进行验证加载的,所以其参数必须是特定的字符串,不能是表达式。

    seajs会自动在require的参数中加入".js"来进行加载,即不需要写上后缀名,但是在某些情况下,seajs不会为其添加“.js”:

    1.载入css:    

    require("./module1-style.css");

    2.路径中含有“?”: 

    require(<a href="http://example/js/a.json?b=func" rel="external nofollow" >http://example/js/a.json?cb=func</a>);

    3.路径以“#”结尾:

    require(http://example/js/a.json#);

    使用exports来向外部暴露方法,或者属性。暴露属性有几种方式,如上面中的例子是一种方式,另外还有:

    使用return:

    define(function(require)
    {
    var data1 = 1; //私有数据
    var func1 = function() { //私有方法
    returna.run(data1);
    }
    //暴露
    return{
    data2: 2,
    func2:function() {
    return'hello';
    }
    }; 
    });

    直接返回json对象:

    define({
    data: 1,
    func:function() {
    return'hello';
    }
    });

    页面中调用seajs

    前面说了seajs用来解决模块开发,和繁琐的文件依赖问题,所以所有的文件依赖都是通过require对象进行加载,或者可以使用require.async(“./a”)来进行异步加载,即当使用到的时候才进行加载,

    注:无论是require()还是require.async()都可以有第二个参数为回调函数,当文件加载成功时调用:

    require.async('/path/to/module/file',function(m) {
    //code of callback...
    });

    有了这个加载依赖的方式,我们无需再页面上书写大量的<script ></script>标签,而仅仅使用一个

    <script src="./sea.js" data-main="./init"></script>

    即可,其中data-main="./init" 为入口模块,表示加载这个模块,在进行迭代加载其所依赖的模块,使用这个属性可以省略seajs.use。这个后面说。

    使用seajs.config进行全局配置:

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

    这是对seajs进行全局配置,

    base表示基址寻址时的基址路径

    alias可以对较长的常用路径设置缩写。

    charset表示下载js时script标签的charset属性。

    timeout表示下载文件的最大时长,以毫秒为单位。

    debug表示是否工作在调试模式下。

    使用seajs.use 载入入口模块,相当于java的main函数,

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

    下面可以看其官方给的simple例子中的页面怎么写的,基本上就明白了sea.js 是怎么用的了:

    <script src="../sea-modules/seajs/seajs/2.2.0/sea.js"></script>
    <script>
    // Set configuration
    seajs.config({
    base: "../sea-modules/",
    alias: {
    "jquery": "jquery/jquery/1.10.1/jquery.js"
    }
    });
    // For development
    if (location.href.indexOf("?dev") > 0) {
    seajs.use("../static/hello/src/main");
    }
    // For production
    else {
    seajs.use("examples/hello/1.0.0/main");
    }
    </script>

    //mian.js

    //hello/mian.js
    define(function(require) {
    var Spinning = require('./spinning');
    var s = new Spinning('#container');
    s.render();
    });

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。

    您可能感兴趣的文章:

    • Seajs源码详解分析
    • seajs下require书写约定实例分析
    • seajs实现强制刷新本地缓存的方法分析
    • seaJs使用心得之exports与module.exports的区别实例分析
    • seajs模块压缩问题与解决方法实例分析
    • seajs中模块依赖的加载处理实例分析
    • seajs模块之间依赖的加载以及模块的执行

    广而告之:
    热门推荐:
    基于vue打包后字体和图片资源失效问题的解决方法

    1. vue打包后font-awesome字体失效 解决方案: 2. 打包后图片资源失效 解决方案: 针对html中引用的图片 针对css添加的背景中引用的图片 以上这篇基于vue打包后字体和图片资源失效问题的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持···

    织梦dedecsm5.7整合ueditor百度编辑器最新1.4.3方法

    织梦dedecsm 5.7整合ueditor百度编辑器最新1.4.3方法详细步骤:   步骤一:先把自己网站备份一下(非常重要)! 步骤二:去官网下载最新版的ueditor(这样的目前是最新1.4.3),注意要对应自己的网站编码! 步骤三:解压后放到include目录下,文件名改为ueditor 步···

    jQuery 全选 全部选 反选 实现代码

    1.概述 在项目中经常遇到列表中对复选框进行勾选操作,全选。。。反选。。 2. example <html> <body> <form id="test-form" action="test"> <legend>请选择想要学习的编程语言:</legend> <fieldset> <p><label class="selec···

    JS控制图片等比例缩放的示例代码

    复制代码 代码如下:<SCRIPT language="JavaScript">function DrawImage(ImgD,FitWidth,FitHeight){       var image=new Image();       image.src=ImgD.src;       if(image.width&g···

    微信小程序 教程之小程序配置

    微信小程序——配置        以下就是小编对小程序配置的资料进行的系统的整理,希望能对开发者有帮助。 我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 以下是一个包含···

    JavaScript 类型的包装对象(Typed Wrappers)

    例如: new Boolean(false) 会返回一个对象,该对象有一个 valueOf 方法会返回被包装的值。这其实完全没有必要,并且有时还令人困惑。不要使用 new Boolean、 new Number 或 new String。 此外也请避免使用 new Object 和 new Array。可使用 {} 和 [] 来代替。 -----···

    实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码

      这是一个很酷的HTML5 Canvas动画,它将模拟的是我们现实生活中烟花绽放的动画特效,效果非常逼真,但是毕竟是电脑模拟,带女朋友看就算了,效果还是差了点,呵呵。这个HTML5 Canvas动画有一点比较出色,就是其性能,Chrome上基本没有卡的感觉,就算你放出很多烟花也一样。 ···

    PHP图形操作之Jpgraph学习笔记

    本文实例讲述了PHP图形操作之Jpgraph学习笔记。分享给大家供大家参考,具体如下: 一、Jpgraph安装配置 下载Jpgraph安装包 解压后放置磁盘中,(最好是放在和网页一起) 修改php.ini文件: 1、内存  memory_limit=X,至少为32M 2、执行时间  max_execution_time=X,对···

    php面向对象中static静态属性与方法的内存位置分析

    本文实例分析了php面向对象中static静态属性与方法的内存位置。分享给大家供大家参考。具体如下: static静态属性的内存位置——>类,而不是对象。下面做测试来证明一下 <?php header("content-type:text/html;charset=utf-8"); class Human{ static public $name =···