zoukankan      html  css  js  c++  java
  • 模块化以及requirejs和seajs

    我们用模块化的思想进行网页的编写是为了更好的管理我们的项目

    模块与模块之间是独立存在的,每个模块可以独立的完成一个子功能。

    模块化所涉及的规范commonjs,AMD,CMD,UMD

    其中的commonjs是服务器规范,用到的是同步加载,适用于nodejs后台的操作

    由于commonjs的特性是同步加载,并不适用于前端,人们想解决前端异步加载的问题,AMD就应运而生了。

    AMD将commonjs的思想全部推翻,产生了一套新的规范,它是专门为前端定制的规范,实现了异步加载。

    CMD和AMD的区别是可以实现按需加载。

    UMD则是commonjs和AMD的结合。

    requirejs遵循的是AMD规范

    requirejs

    require.js提供两种加载(前置加载:2.0以前的版本使用,按需加载(异步加载,2.0以后的版本))

    requirejs的引入

    页面只需要插入一个script标签
        <script src="js/requirejs_module/require.min.js"  data-main="js/require-main"></script>
        上面的data-main是用来加载配置文件的。

    //require-main的配置如下:
        require.config({
            paths:{
                "m1":"js/js-module/m1",
                "m2":"js/js-module/m2",
                "my":"js/js-module/me
            shim:{
                "my":{export:"myFunc"}
                }//shim是为不支持AMD的js文件提供的方法(尽量不适用此方法,应该讲js文件进行改造)
        })    //paths用来配置所有路径

    模块的定义:(define关键字
        define(function(){
        })
        define(["module2"],function(m2){ })

    定义的模块可在其他模块的内部加载
        define(function(require,exports,module){
            var m2=require("module2");//内部加载模块"module2"
                m2.func2
        })

    模块的加载方法如下:

    require(["m1"],function(m1){
            var fun1=function(){
            }
            var fun2=function(){
            }
                return{fun1:fun1,fun2:fun2
        }

    //模块的前置加载
        require(["fun1,fun2"],function(m1,m2){})

    seajs:

     1.sea.js的导入
        <script src="js/seajs_modules/sea.js"></script>//官网中提供的js文件
        <script src="js/seajs_config.js"></script>//自己建立的配置路径

    配置路径中:
        seajs_config.js代码如下:
        
        seajs.config({
        base:".", //指定根路径
        alias:{
            "jquery":"js/seajs_modules/jquery-1.11.2-min",//导入的jQuery文件
            "bootstrap":"js/seajs_modules/bootstrap.min",//导入的框架
            "reg":"js/modules/reg/reg",//要进行模块化配置的页面
            "login":"js/modules/login/login",
            "student":"js/modules/student/register"
        }    //alias别名
        });

    使用:
        seajs.use("reg",function(reg){
            reg.load();
        });

    seajs中模块的定义:

    模块的定义:(关键字:define)
        define(function(require){
        var $=require("jquery");//加载jQuery
        var load=function(){
            $("#content").load("js/modules/login/login.html",function(){
                。。。。。。
            });//在content里面加载页面login.html

        };
        return{load:load}//定义的模块中返回的方法
        });

    引入的第三方插件要进行改造:

    第三方插件改造:
        jQuery改造:
        在js代码外面包裹:
        define(function(){
            。。。。。。
            return $.noconflict();


        })

    上面的return $.noconflict():运行这个函数将变量$的控制权让渡给第一个实现它的那个库(这有助于确保jQuery不会与其他库的$对象发生冲突。 在运行这个函数后,就只能使用jQuery变量访问jQuery对象。例如,在要用到$("div p")的地方,就必须换成jQuery("div p")。 '''注意:'''这个函数必须在你导入jQuery文件之后,并且在导入另一个导致冲突的库'''之前'''使用。当然也应当在其他冲突的库被使用之前,除非jQuery是最后一个导入的。


        bootstrap改造:
        define(function(require,exports,module){
            return function($){
            ......js内容区.......
        }})

    模块化实现的都是单页面应用

  • 相关阅读:
    (转)基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理
    (转)基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作
    (转)基于MVC4+EasyUI的Web开发框架经验总结(13)--DataGrid控件实现自动适应宽带高度
    心得体悟帖---200301(因为别人或者别的事情,影响自己的心情,实在是太傻b了)
    心得体悟帖---200301(尽量把课程弄短,那样不良状态也可以录课)
    范仁义js课程---34、break和continue
    尚硅谷js---44、break和continue
    javascript疑难问题---5、javascript代码执行时间的计算
    范仁义js课程---33、打印99乘法表
    范仁义js课程---32、for循环嵌套
  • 原文地址:https://www.cnblogs.com/hongxuejiao/p/4986854.html
Copyright © 2011-2022 走看看