RequireJs调研

背景

Problem（问题）

  • Web sites are turning into Web apps（网站正转变为网络应用程序）
  • Code complexity grows as the site gets bigger（代码复杂度随着站点变大而变复杂）
  • Assembly gets harder（组装变得更难【ps】这里我个人认为“组装”是拼接单个js文件中的昂多的代码段 ）
  • Developer wants discrete JS files/modules（开发者想分离js文件/模块）
  • Deployment wants optimized code in just one or a few HTTP calls（网站部署者想通过使用一个或者很少http请求来优化代码）

Solution（解决方案）

  • Front-end developers need a solution with:（前端工程师需要一个解决方案，拥有这些功能：）
  • Some sort of #include/import/require（一些引入文件的命令语句）
  • ability to load nested dependencies（加载嵌套的依赖文件）
  • ease of use for developer but then backed by an optimization tool that helps deployment（简单好用，但也有助于优化部署）

RequireJs简介

作用

RequireJS的目标是鼓励代码的模块化，它使用了不同于传统script标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。

优点

速度快

15085801_CrX1

有位网友做了对比测试

依赖关系清晰

JavaScript 文件之间的依赖项表示。

requirejs通过a.js调用b.js,b.js调用c.js,c.js调用d.js的原理，让我们可以只调用a.js，就可以加载所有的js,而且依赖关系非常清晰。

js文件不仅可以调用js，还能调用css和html页面，所以毫不夸张地说，引入一个入口js，无需向 HTML 文件添加任何其他元素即可构建大型单页面应用程序

鼓励代码模块化（最大优点）

使用requirejs，我们就需要将原来在一个js文件里面写的代码，按照模块解耦分离成多个js文件，然后按照需求调用。这样做的好处很多：

解耦了，就不会出现牵一发动全身的情况，便于日后维护；还能便于多人分工合作；还能复用…

在项目中使用RequireJs

调用第三方插件

使用多选插件

1
2
3
4
5
require(['jquery.shiftcheckbox'], function () {
           $(function () {
               $('#demo2 :checkbox').shiftcheckbox();
           })
       })

使用’bootstrap’, ‘jquery.form’, ‘jquery.validate’三个插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
require(['bootstrap', 'jquery.form', 'jquery.validate'], function () {
    $(function () {
        jQuery.validator.addMethod("isZipCode", function (value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value));
        }, "请正确填写您的邮政编码");
        $("#signupForm").validate({
            rules: {
                firstname: {
                    required: true },
                email: {
                    required: true,
                    email: true },
                password: {
                    required: true,
                    minlength: 5 },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password" },
                isZipCode: {
                    isZipCode: true }
            },
            messages: {
                firstname: "请输入姓名",
                email: {
                    required: "请输入Email地址",
                    email: "请输入正确的email地址" },
                password: {
                    required: "请输入密码",
                    minlength: jQuery.format("密码不能小于{0}个字 符")
                },
                confirm_password: {
                    required: "请输入确认密码",
                    minlength: "确认密码不能小于5个字符",
                    equalTo: "两次输入密码不一致不一致" }
            }
        });
        $("#signupForm").ajaxSubmit();
    });
});

调用自己写的方法或者类

调用日期方法类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 * Created by lewis on 15-9-15. */
//自定义的命名空间，用来对日期进行操作
define([],{ //输入json日期获取年
    getYear: function (jsonDate) { var dateArry = jsonDate.split('-'); var jsonyear = parseInt(dateArry[0]); return jsonyear;
    }, //输入json日期获取月
    getMonth: function (jsonDate) { var dateArry = jsonDate.split('-'); var jsonmonth = parseInt(dateArry[1]); return jsonmonth;
    }, //输入json日期获取日
    getDay: function (jsonDate) { var dateArry = jsonDate.split('-'); var jsonday = parseInt(dateArry[2]); return jsonday;
    }, //输入json日期和日历日期（后面的年）,判断json日期是否在两年内
    isInYear: function (jsonDate, calenYear) { var jsonArry = jsonDate.split('-'); var jsonyear = parseInt(jsonArry[0]); if (jsonyear == calenYear || jsonyear == (calenYear - 1)) return true; else
            return false;
    }, //输入json日期和日历日期（年和月），判断json日期是否在日历日期内
    isInMonth: function (jsonDate, calendarDate) { var jsonArry = jsonDate.split('-'); var jsonyear = parseInt(jsonArry[0]); var jsonmonth = parseInt(jsonArry[1]); var calenArry = calendarDate.split('-'); var calenyear = parseInt(calenArry[0]); var calenmonth = parseInt(calenArry[1]); if (jsonyear == calenyear && jsonmonth == calenmonth) return true; else
            return false;
    },
    getNowFormatDate: function () { var date = new Date(); var seperator = "-"; var year = date.getFullYear(); var month = date.getMonth() + 1; var strDate = date.getDate(); var currentdate = year + seperator + month + seperator + strDate;
        console.log(currentdate); return currentdate;
    },
    getDateFromYMD: function (a) { var arr = a.split("-"); var date = new Date(arr[0], arr[1], arr[2]); return date;
    }
});

调用：

1
2
3
4
 require(['common/myDateClass'], function (myDateClass) {
。。。
。。。
}）

调用代码段（任性！！！）

a.js

1
2
3
function myFunctionA(){
    console.log('a');
};

b.js

1
2
3
function myFunctionB(){
    console.log('b');
};

调用：

1
2
3
4
require(['js/ab/a','ab/b.js'],function(){
    myFunctionA();
    myFunctionB();
});
本文作者：
发布时间： 2015年9月26日 - 11时09分
版权声明： 本文由 原创，采用 保留署名-非商业性使用-禁止演绎 4.0-国际许可协议
转载请保留以上声明信息！