Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 384|回复: 0

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

[复制链接]
  • TA的每日心情
    奋斗
    2024-11-24 15:47
  • 签到天数: 804 天

    [LV.10]以坛为家III

    2053

    主题

    2111

    帖子

    72万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    726782
    发表于 2021-5-21 10:24:13 | 显示全部楼层 |阅读模式

    我为什么学习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>
    View Code

    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.useseajs的入口模块。还可以直接写成这样:<script src="script/src/sea.jsdata-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"]
        }
    }
    View Code

            【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文件里。

     

    -------------如果有小伙伴解决了上面的2个疑问,还请多多指教---------------------------------------------------------------

     非常感谢@yuanyiasd  的回复: 问题【1】已经有了答案 (SeaJs移除掉了对 data-main/config 的支持)

     详细地址如下 :https://github.com/seajs/seajs/issues/734

     

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2025-1-23 12:03 , Processed in 0.061185 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表