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地址。
优点
速度快
依赖关系清晰
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调研的更多相关文章
- 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular
现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...
- CMS模板应用调研问卷
截止目前,已经有数十家网站与我们合作,进行了MIP化改造,在搜索结果页也能看到"闪电标"的出现.除了改造方面的问题,MIP项目组被问到最多的就是:我用了wordpress,我用了织 ...
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
- 实现一个类 RequireJS 的模块加载器 (二)
2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进 ...
- 使用RequireJS并实现一个自己的模块加载器 (一)
RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...
- 使用gulp解决RequireJS项目前端缓存问题(二)
1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...
- AngularJs2与AMD加载器(dojo requirejs)集成
现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...
- angularjs集成requirejs
其实说成使用requirejs加载angularjs应用会更贴切一些 <body> <span ng-controller="homeController"> ...
- 使用gulp解决RequireJS项目前端缓存问题(一)
1.前言 前端缓存一直是个令人头疼的问题,你有可能见过下面博客园首页的资源文件链接: 有没有发现文件名后面有一串不规则的东东,没错,这就是运用缓存机制,我们今天研究的就是这种东西. 先堵为快,猛戳链接 ...
随机推荐
- 关于zepto(相似于jquery、jQuery用于网页浏览器,zepto用于手机浏览器)
http://blog.csdn.net/kongjiea/article/details/42522305 -----关于zepto和jquery的差别 jQuery 使用 .width() 和 ...
- ViewController的生命周期
# ViewController 的生命周期 # ViewController的生命周期中各个方法的流程如下: init loadView :加载view viewDidLoad :view加载完毕 ...
- About_Smarty
Smarty是一个使用PHP写出来的模板PHP模板引擎,是目前业界最著名的PHP模板引擎之一.它分离了逻辑代码和外在的内容,提供了一种易于管理和使用的方法,用来将原本与HTML代码混杂在一起PHP代码 ...
- C++构造函数/析构函数 设置成private的原因
C++构造函数/析构函数 设置成private的原因 标签(空格分隔): c/c++ 将构造函数,析构函数声明为私有和保护的,那么对象如何创建? 已经不能从外部调用构造函数了,但是对象必须被构造,应该 ...
- 在发送ajax请求时加时间戳或者随机数去除js缓存
在发送ajax请求的时候,为了保证每次的都与服务器交互,就要传递一个参数每次都不一样,这里就用了时间戳 大家在系统开发中都可能会在js中用到ajax或者dwr,因为IE的缓存,使得我们在填入相同的值的 ...
- >hibernate初认识
一.什么是hibernate 1.hibernate是java领域的一款开源的ORM框架技术 2.hibernate对JDBC进行了非常轻量级的封装(使用了反射机制+配置或注解) 二.hibernat ...
- ES6(五) 数组扩展
Array.of方法用于将一组值,转换为数组. Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES ...
- 线上应用bug跟踪查找-友盟统计
线上的应用只要用心点点都能发现些bug,连微信,QQ也不列外.但是bug中最严重的算是闪退了,这导致了用户直接不能使用我们的app. 我们公司是特别注重用户反馈和体验的,我们会定期打电话咨询用户的使用 ...
- c = (a / b, a%b) 运算输出顺序
#include<iostream> int main() { using namespace std; int a, b, c; a = ; b = ; c = ; printf(&qu ...
- 分区里的inode号是0号和1号的block
分区里的inode号是0号和1号的block 我相信大家在使用Linux的时候都遇到过误删文件系统数据的情况,不管是自己误删还是帮人家恢复误删 现在用的比较多的恢复工具大概是ext3grep .ext ...