自学了三天的SeaJs学习,解决了前端的一些问题,与小伙伴们一起分享一下!

我为什么学习SeaJs ?

【第一】:为了解决项目中资源文件版本号的问题,以及打包压缩合并等问题。

【第二】:好奇心和求知欲。【我发现很多知名网站也都在使用( qq空间 , msn ,淘宝 等等),而且 SeaJs 也得到了很好的推广与应用】。

【第三】:经过了解得知 淘宝的 玉伯 是 湖南炎陵 人,觉得他很牛X。

【强烈】给小伙伴们推荐一个   玉伯   的讲的 SeaJs PDF 学习资料,下载地址:http://pan.baidu.com/s/1CCz4C

第一步 【 版本号问题的解决】 :首先大家可以到 seaJs.org 官网去下载一个 seajs 的 例子,以及文件,现在 sea.js 的版本 已经到 V 2.1.1 了

然后在项目中引入sea.js文件。

  如图 :我的项目,目录如下图:

index.html 的源码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SeaJsDemo-操作</title>
    <script src="script/src/sea.js"></script>
</head>
<body>
    <div style="margin: 100px;">
        <!---------------------->
        <div id="idTest" class="claTest1">SeaJS-你也可以</div>
        <br />
        <!---------------------->
        <div id="btnCLick" class="claTest2">Jquery-回调测试看看</div>
    </div>
    <script type="text/javascript">
        seajs.config({
            // 别名配置
            paths: {
                "urlSite": "http://gdboc.sell.uni2uni.com/" //跨目录调用模块可以使用;获得当目录比较深时也可以使用
            },
            // 别名配置
            alias: {
                ‘jquery‘: ‘jquery‘,
                ‘style‘: ‘/style/a.css‘,
                "styleUrl": "urlSite/style/style.css"
            },
            preload: [‘jquery‘],//预先加载
            base: ‘/script/src/‘, //基础路径
            map: [[/^(.*\.(?:css|js))(.*)$/i, ‘$1?v=20131010‘]],  //map,批量更新时间戳
            charset: ‘utf-8‘ // 文件编码
        });

        //-------seajs.use为入口模块,也可以用 data-main="";(区别在于use可以加载多个入口函数,以及做一些回调的操作)------------
        seajs.use([‘init‘, ‘jquery‘], function (i, $) {
            alert("亲,全部加载都完成了!");

            //----------调用init中对外公开的接口--------------------------------
            i.alertFun();

            //----------习惯了在页面<script>写$就可以了-------------------
            $(function () {
                $("#btnCLick").click(function () {
                    alert("jquery被模块化了,我不太习惯了!");
                })
            })
        });
    </script>
</body>
</html>

SeaJs里,你必须知道那些东西 :

【 1】.  define

define 是一个全局函数,用来定义模块【每一个js文件都是一个小模块】

define(function( require exports module ){

// require: 是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口

// exports: 是一个对象,用来向外提供模块接口

// module: 是一个对象,上面存储了与当前模块相关联的一些属性和方法

})

init.js 文件源码  :

//--------------------------------------------
define(function (require, exports, module) {
    require(‘test‘);
    require(‘style‘);

    //----对外提供公共的接口------
    exports.alertFun = function () {
        //......................
        alert("init中对外提供的接口被调用了!");
    };

    //----暴露到全局-------------
    //module.exports = function () {
    //    //......................
    //};
});

【 2】.    seajs.config

配置一些全局的东西, 版本问题可以在这里解决   详细说明如下:

<script type="text/javascript">
        seajs.config({
            // 路径配置
            paths: {
                "urlSite": "http://gdboc.sell.uni2uni.com/" //跨目录调用模块可以使用;获得当目录比较深时也可以使用
            },
            // 别名配置
            alias: {
                ‘jquery‘: ‘jquery‘,
                ‘style‘: ‘/style/a.css‘,
                "styleUrl": "urlSite/style/style.css"
            },
            preload: [‘jquery‘],//预先加载
            base: ‘/script/src/‘, //基础路径
            map: [[/^(.*\.(?:css|js))(.*)$/i, ‘$1?v=20131010‘]],  //map,批量更新时间戳
            charset: ‘utf-8‘ // 文件编码
        });
 </script>

【3】.    seajs.use

seajs.use 为 seajs 的入口模块。还可以直接写成这样:<script src= "script/src/sea.js "  data-main =" init.js " ></script>

seajs.use (" init.js ") 和 data-mian =" init.js "  的区别在于 seajs.use 可以加载多个入口函数,以及做一些回调的操作

<script type="text/javascript">
        //-------seajs.use为入口模块,也可以用 data-main="";(区别在于use可以加载多个入口函数,以及做一些回调的操作)------------
        seajs.use([‘init‘, ‘jquery‘], function (i, $) {
            alert("亲,全部加载都完成了!");

            //----------调用init中对外公开的接口--------------------------------
            i.alertFun();

            //----------习惯了在页面<script>写$就可以了-------------------
            $(function () {
                $("#btnCLick").click(function () {  alert("jquery被模块化了,我不太习惯了!");  })
            })
        });
    </script>

【4】. 不要以为 SeaJs 真就我讲的这么点东西了,我还没有很 深入细化 的讲,拿了几个我认为最重要的,故 省略............

第二步 :【 合并压缩的问题解决】  ,可以用( spm , grunt , combo, spmx , 或者是 牛逼的 Fis 等)解决,本实例用 spm 来做的。

1.下载 安装 不同系统版本的 Node

2.下载 npm 包管理

3.下载安装 spm  (利用  npm install spm -g )安装 spm

【 提醒:压缩之前你应该做的事 】

【1】. 准备好要压缩的文件,并且记住一定要放在一个 叫  “ src ”  的文件夹目录下。

【2】.  新建一个 Package.json 。配置要压缩合并的文件 的参数

{
   "family":"examples",
   "name":"script",
   "version":"1.0.0",
   "spm": {
       "alias":{
              "jquery": "jquery"
        },
        "output": ["init.js","test.js","jquery.js"]
    }
}

【3】. 做好(【1】,【2】)步,然后 执行命令 spm  build  , 就会生成压缩文件  

生成压缩的文件放在了自动新建的一个叫   dist 文件夹目录下  分别包含了一个叫 xx.js 和 xx-debug.js 的文件

至于为什么会这样生成,因为【2】中的  Package.json 配置 已经指定了。

         

----------------------------------------------------------------------------------------------------------------------

第一步中的版本号解决如图(版本号的解决在 seajs.config 里面) :

  第二步中的压缩解决如图:

------------------------------------------------------------------------------------------------------------------------

最后 ,总结一下,我也还有几个 疑问 没有解决:

【1】.  data-mian方式提供入口函数,我一直没有成功过,不知道是不是版本的问题(当前版本 seajs v2.1.1)

【2】.  依赖合并的文件,没有被合并到一个js文件里。

时间: 2024-10-13 20:49:50

自学了三天的SeaJs学习,解决了前端的一些问题,与小伙伴们一起分享一下!的相关文章

孤荷凌寒自学python第六十六天学习mongoDB的基本操作并进行简单封装5

孤荷凌寒自学python第六十六天学习mongoDB的基本操作并进行简单封装5并学习权限设置 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第十二天. 今天继续学习mongoDB的简单操作,并继续对一些可能反复经常使用的操作进行简单的封装.同时通过搜索了解了如何对本地Mongo数据库进行权限设置(没有实践本地数据库的用户权限设置.) 按个人规划,今天是初步了解学习MongoDb数据库的最后一个学习日,后续将在真正使用此数据库时,再对其进行深入研究. 一.今天完成了两个可

模块化之seaJs学习和使用

使用seaJs也有一阵子了,一直也想抽个时间写个这方面的博客,直到今天才写--也许写的不是很完善,但跟大伙分享也是一种乐趣,不对之处欢迎指出.[抱拳] 时间有限,我这里不过多介绍前端模块化,有兴趣可以去了解. 一.写在前面 seaJs出自前端工程师玉伯之手,一个文件就是一个模块,实现JavaScript的模块化及按模块加载.使用SeaJS可以提高JavaScript代码的可读性和清晰度,确保各个JS文件先后加载的顺序,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便

《机器学习导论》第三章 贝叶斯决策定理 学习笔记

在机器学习领域,我们碰到的第一个问题就是:如何选择特征量. 可是看了一些资料,这点好像都是一笔带过,因为很多都是所谓的不可观测量,如何把不可观测量量化呢?这个或许能给机器学习带来新的契机,就像当年牛顿把力.质量.加速度等模糊的概念定义下来,经典物理出现了前所未有的发展,香农把信息量化,造就了信息革命. 以前觉得贝叶斯好像没有大家说的那么神奇,现在知道,是因为当年对它的理解就有问题,贝叶斯更重要的一点应该是能够在加入evidence的情况下,从先验概率进化到后验概率,这点简直就是机器学习的内涵啊

Java深度历险(三) Maven初步学习

这几天接触这个词,很多遍了,只是浅显的体会到它在GXPT中的好处,功能之强大,又通过网络查询了资料进一步的认识学习了,和大家分享. Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 在gxpt中的体现 1. 父子关系 一个多模块项目通过一个父POM 引用一个或多个子模块来定义. a. 在父目录中分别创建子项目 b. 父项目,通过以下配置,将子项目关联: 如下: <span style="font-size:18px;"

javaweb学习总结(三十二)——JDBC学习入门【转】

原文地址:javaweb学习总结(三十二)——JDBC学习入门 一.JDBC相关概念介绍 1.1.数据库驱动 这里的驱动的概念和平时听到的那种驱动的概念是一样的,比如平时购买的声卡,网卡直接插到计算机上面是不能用的,必须要安装相应的驱动程序之后 才能够使用声卡和网卡,同样道理,我们安装好数据库之后,我们的应用程序也是不能直接使用数据库的,必须要通过相应的数据库驱动程序,通过驱动程序去和数 据库打交道,如下所示: 1.2.JDBC介绍 SUN公司为了简化.统一对数据库的操作,定义了一套Java操作

seaJs学习笔记2 – seaJs组建库的使用

原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最近在学习seaJs和AngualrJs的指令和服务,感觉angularjs实在太强大了,好吧,步入主题,今天在深入了解seaJs的时候发现了一款神器,不过这款神奇貌似没有更新和维护了,但我测试了一下,还是可以用的. 这款神奇就是SeaJS 组件库 ,Sea.js 是一个适用于 Web 浏览器端的模块

NASNet学习笔记——?? 核心一:延续NAS论文的核心机制使得能够自动产生网络结构; ?? 核心二:采用resnet和Inception重复使用block结构思想; ?? 核心三:利用迁移学习将生成的网络迁移到大数据集上提出一个new search space。

from:https://blog.csdn.net/xjz18298268521/article/details/79079008 NASNet总结 论文:<Learning Transferable Architectures for Scalable Image Recognition> 注 ??先啥都不说,看看论文的实验结果,图1和图2是NASNet与其他主流的网络在ImageNet上测试的结果的对比,图3是NASNet迁移到目标检测任务上的检测结果,从这图瞬间感觉论文的厉害之处了,值

适合新手小白学习的web前端自学路线图整理

新手小白学习web前端要学多久?没有基础的同学想要学习web前端选择什么样的学习方式会比较好一些呢?很多想要学习web前端开发的同学都有这个困惑,主要是担心web前端开发门槛高,害怕学不会. 其实关于零基础怎样学习web前端开发这个问题我们应该辩证的来看待,相对于IT技术类的其他技术岗位,web前端开发绝对算是门槛较低的,当然对应的起点也是比较低的.如果有小白有意向入行或者转行的话建议选择web前端.web前端开发门槛低主要体现在两个方面: 第一:web前端开发入门门槛低体现在html和CSS上

springmvc学习笔记(4)-前端控制器

springmvc学习笔记(4)-前端控制器 springmvc学习笔记4-前端控制器 本文通过前端控制器源码分析springmvc执行过程 1.前端控制器接收请求 调用doDispatch方法 protected void doDispatch(HttpServletRequest request, HttpServletResponse response) throws Exception { HttpServletRequest processedRequest = request; Ha