背景

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地址。

优点

速度快

有位网友做了对比测试

依赖关系清晰

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

调用第三方插件

使用多选插件

 require(['jquery.shiftcheckbox'], function () {
            $(function () {
                $('#demo2 :checkbox').shiftcheckbox();
            })
        })

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

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();
    });
});

调用自己写的方法或者类

调用日期方法类

/**
 * 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;
    }
});

调用:

 require(['common/myDateClass'], function (myDateClass) {
。。。
。。。
})

调用代码段(任性!!!)

a.js

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

b.js

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

调用:

require(['js/ab/a','ab/b.js'],function(){
    myFunctionA();
    myFunctionB();
});

RequireJs调研的更多相关文章

  1. 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular

    现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...

  2. CMS模板应用调研问卷

    截止目前,已经有数十家网站与我们合作,进行了MIP化改造,在搜索结果页也能看到"闪电标"的出现.除了改造方面的问题,MIP项目组被问到最多的就是:我用了wordpress,我用了织 ...

  3. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  4. 实现一个类 RequireJS 的模块加载器 (二)

    2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进 ...

  5. 使用RequireJS并实现一个自己的模块加载器 (一)

    RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...

  6. 使用gulp解决RequireJS项目前端缓存问题(二)

    1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...

  7. AngularJs2与AMD加载器(dojo requirejs)集成

    现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...

  8. angularjs集成requirejs

    其实说成使用requirejs加载angularjs应用会更贴切一些 <body> <span ng-controller="homeController"> ...

  9. 使用gulp解决RequireJS项目前端缓存问题(一)

    1.前言 前端缓存一直是个令人头疼的问题,你有可能见过下面博客园首页的资源文件链接: 有没有发现文件名后面有一串不规则的东东,没错,这就是运用缓存机制,我们今天研究的就是这种东西. 先堵为快,猛戳链接 ...

随机推荐

  1. 关于zepto(相似于jquery、jQuery用于网页浏览器,zepto用于手机浏览器)

    http://blog.csdn.net/kongjiea/article/details/42522305   -----关于zepto和jquery的差别 jQuery 使用 .width() 和 ...

  2. ViewController的生命周期

    # ViewController 的生命周期 # ViewController的生命周期中各个方法的流程如下: init loadView :加载view viewDidLoad :view加载完毕 ...

  3. About_Smarty

    Smarty是一个使用PHP写出来的模板PHP模板引擎,是目前业界最著名的PHP模板引擎之一.它分离了逻辑代码和外在的内容,提供了一种易于管理和使用的方法,用来将原本与HTML代码混杂在一起PHP代码 ...

  4. C++构造函数/析构函数 设置成private的原因

    C++构造函数/析构函数 设置成private的原因 标签(空格分隔): c/c++ 将构造函数,析构函数声明为私有和保护的,那么对象如何创建? 已经不能从外部调用构造函数了,但是对象必须被构造,应该 ...

  5. 在发送ajax请求时加时间戳或者随机数去除js缓存

    在发送ajax请求的时候,为了保证每次的都与服务器交互,就要传递一个参数每次都不一样,这里就用了时间戳 大家在系统开发中都可能会在js中用到ajax或者dwr,因为IE的缓存,使得我们在填入相同的值的 ...

  6. >hibernate初认识

    一.什么是hibernate 1.hibernate是java领域的一款开源的ORM框架技术 2.hibernate对JDBC进行了非常轻量级的封装(使用了反射机制+配置或注解) 二.hibernat ...

  7. ES6(五) 数组扩展

    Array.of方法用于将一组值,转换为数组.  Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES ...

  8. 线上应用bug跟踪查找-友盟统计

    线上的应用只要用心点点都能发现些bug,连微信,QQ也不列外.但是bug中最严重的算是闪退了,这导致了用户直接不能使用我们的app. 我们公司是特别注重用户反馈和体验的,我们会定期打电话咨询用户的使用 ...

  9. c = (a / b, a%b) 运算输出顺序

    #include<iostream> int main() { using namespace std; int a, b, c; a = ; b = ; c = ; printf(&qu ...

  10. 分区里的inode号是0号和1号的block

    分区里的inode号是0号和1号的block 我相信大家在使用Linux的时候都遇到过误删文件系统数据的情况,不管是自己误删还是帮人家恢复误删 现在用的比较多的恢复工具大概是ext3grep .ext ...