浅析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 YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
VsCode插件整理(小结)
Sep 14 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
新手简单了解vue
May 29 Javascript
Vue 同步异步存值取值实现案例
Aug 05 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 get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
php中{}大括号是什么意思
2013/12/01 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
Javascript String.replace的妙用
2009/09/08 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
Vue基础配置讲解
2019/11/29 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
商务英语本科生的自我评价分享
2013/11/15 职场文书
总经理司机职责
2014/02/02 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
2014个人年度工作总结
2014/12/15 职场文书
管理失职检讨书
2015/05/05 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
七一活动主持词
2015/06/29 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
MySQL快速插入一亿测试数据
2021/06/23 MySQL
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技