浅析Javascript使用include/require


Posted in Javascript onNovember 13, 2013

1. javascript include
Javascript 没有 include 语句有时挺讨厌, 特别是脚本和脚本之间存在依存的关系, 你根本就不能动态的去控制加载脚本, 一般来说最简单的 include 基本就是这样的, 当然我们这个使用了 jQuery 来进行请求脚本.

  include: function (jsurl) {
        if (jsurl == null || typeof(jsurl) != 'string') return;
        var js = document.createElement('script');
        js.type = 'text/javascript';
        js.charset = 'utf-8';
        js.src = jsurl;
        $.ajaxSetup({ cache : true });
        $('head').append(js);
        //$.getScript(jsurl);
 }

基本用法

需要注意的是该函数其实在发送GET请求的事情是 jQuery.ajax 的 getScript() 来处理的, 但是在GET后的处理和 $.getScript() 不同, 因此导致使用方法会不一样, getScript() 一般需要把有依赖的函数写到它的回调函数中去, 如:

$.getScript('some.js', function() {
    // 做写依赖 some.js文件的事情.
});

而我们这里的 include 不需要这么写, 而是直接:

include('some.js');

// 这里可以直接写依赖 some.js 文件中定义的函数

开启缓存

另外就是关于文件缓存, 默认情况下 $.getScript 是会在 url 后面加上一个时间戳, 使得在第二次请求的时候不让浏览器去读取缓存文件, 如果我们 getScript("some.js") , 最后在请求的时候会变成 GET some.js?_23432434534235 之类的, 这是一种强制不缓存的策略, 在开发阶段是比较好的, 但到了生产阶段, 会导致用户的浏览器每次都不缓存我们的js脚本, 这对效率是很大的影响, 我们应该自己在js脚本后面自己加上版本戳, 比如 some.js?v=1 , 而不是使用每次都会变的时间戳, 所以需要使用:

$.ajaxSetup({ cache : true });

这样就会关闭jQuery自动在url后面加上时间戳的特性.

requireJs

如果你的脚本大量的存在互相依赖关系, 而又需要动态的决定加载哪些脚本, 那么我推荐的是使用requirejs .

它的基本用法是:

require(["some/module", "a.js", "b.js"], function(someModule) {
    // do something
});

它有一个要求就是你的前端js是作为模块式的开发, 在前端逻辑比较复杂的话, 使用模块式来进行前端开发应该是种不错的选择, 而关于JS的模块式开发在今后文章再专门谈, 这里只简单介绍一下, 如果对这个方面感兴趣的可以到requireJs官网去看看.

Javascript 相关文章推荐
JavaScript XML操作 封装类
Jul 01 Javascript
js和php如何获取当前url的内容
Sep 22 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 #Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 #Javascript
如何判断鼠标是否在DIV的区域内
Nov 13 #Javascript
HTTP 304错误的详细讲解
Nov 13 #Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 #Javascript
js字母大小写转换实现方法总结
Nov 13 #Javascript
jQuery替换字符串(实例代码)
Nov 13 #Javascript
You might like
php中mysql模块部分功能的简单封装
2011/09/30 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
PHP积分兑换接口实例
2015/02/09 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
JS常用算法实现代码
2016/11/14 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
微信小程序使用npm支持踩坑
2018/11/07 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
Python异常处理总结
2014/08/15 Python
python实现决策树分类
2018/08/30 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
如何实现jdbc性能优化
2012/07/30 面试题
大学生就业策划书范文
2014/04/04 职场文书
师德演讲稿范文
2014/05/06 职场文书
护士节策划方案
2014/05/19 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
党校学习党性分析材料
2014/12/19 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
教师节老师寄语
2015/05/28 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
浅析Python中的套接字编程
2021/06/22 Python