博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【SeaJS】【2】再识SeaJS
阅读量:7238 次
发布时间:2019-06-29

本文共 1640 字,大约阅读时间需要 5 分钟。

为了更清楚地认识SeaJS,在此再举一个示例,最终效果图如下:

一、没有使用SeaJS的示例

1、从下载jquery.js放置到E:\seajs\sample\modules下

2、从下载sea.js放置到E:\seajs\sample\modules下

3、创建页面文件hello.html,并放置在E:\seajs\sample\app下。其内容如下:

4、创建init.js,并放置在E:\seajs\sample\app下。其内容如下:

$("#seajsName").html("SeaJS");

$("#seajsAddress").html("http://seajs.org/docs/");

$("#seajsLabel").html("玉伯");

5、在浏览器打开hello.html可以看到上面的效果。

二、使用SeaJS示例:

   在上面的hello.html可以看到直接引用了jquery.js和init.js这两个文件,由于在init.js需要使用到jquery.js,所以jquery.js要先于init.js加载。使用SeaJS就可以把依赖关系最小化,下面来改造上面的示例

1、删除hello.html中的jquery.js和init.js,而让其只引用sea.js。

<script src="../modules/jquery.js"></script>

<script src="./init.js"></script>

<script src="../modules/sea.js"></script>

2、由于jquery.js是作为工具而存在的,为了全局可以使用它,此处利用SeaJS的config API把其配置出来。

<script>

   seajs.config({

      base: "../modules/",

      alias: {

          "jquery": "jquery.js"

      }

   });

</script>

经过这样的配置,在其他的JS文件可以直接通过require("jquery")把jquery.js引用过来。

3、init.js是为了给Name、Address和Author赋值的,所以需要在SeaJS加载后使用。这里利用SeaJS的 use API把它引进过来。

seajs.use("./init.js");

经过上面三步hello.html内容变为:

4、使用seajs.use API把init.js引进来,也意味着init.js必须按SeaJS规范要求写代码,否则SeaJS怎么会识别init.js呢?这个是比较容易理解的。为了让SeaJS识别init.js,需要在init.js上增加define(function(require, exports, module){},然后在{}内写自己的代码。这点看起来与nodeJS很像吧。修改后的init.js为:

define(function(require, exports, module){

   var $ = require("jquery");

   $("#seajsName").html("SeaJS");

   $("#seajsAddress").html("http://seajs.org/docs/");

   $("#seajsLabel").html("玉伯");    

});

5、在浏览器中打开hello.html,会发现jquery是找不到的,异常信息为:

仔细想一想就能明白,jquery.js出道时sea.js还未出道,所以jquery.js并未按SeaJS的规范来写,为了让SeaJS识别jquery.js,同时又不破坏jquery.js的现有代码,可以如下修改jquery.js代码:

define(function(){

   // 原jquery.js代码

   return $.noConflict();

});

在浏览器中打开hello.html看一下效果吧。

转载地址:http://abrfm.baihongyu.com/

你可能感兴趣的文章
关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage
查看>>
http头中的host字段详解
查看>>
puts函数
查看>>
Flask--偏函数, 线程安全, 请求上下文
查看>>
布Windows Azure开发者预览版活动目录
查看>>
How to Modify the Virtual Memory in a Mac
查看>>
Azure Backup 入门
查看>>
Javascript中快速退出多重循环的技巧
查看>>
Tensorflow:DCGAN生成手写数字
查看>>
2016 蓝桥杯决赛体验
查看>>
markdown 入门知识
查看>>
怎样成为PHP 方向的一个合格的架构师
查看>>
标准表达式中数据类型不匹配
查看>>
sql:select赋值和set赋值的区别
查看>>
Linux phpbb论坛的安装(英文版)
查看>>
Android 音视频深入 六 使用FFmpeg播放视频(附源码下载)
查看>>
python网络编程(七)
查看>>
【简书】JAVA程序员一定知道的优秀第三方库(2016版)
查看>>
四、PyQt5布局管理(绝对&相对、水平、垂直、格栅、表单)
查看>>
补第二阶段冲刺站立会议4(原6月6日)
查看>>