浅析Javascript使用include/require

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官网去看看.

(0)

相关推荐

  • 浅析Javascript使用include/require

    1. javascript includeJavascript 没有 include 语句有时挺讨厌, 特别是脚本和脚本之间存在依存的关系, 你根本就不能动态的去控制加载脚本, 一般来说最简单的 include 基本就是这样的, 当然我们这个使用了 jQuery 来进行请求脚本. 复制代码 代码如下: include: function (jsurl) {        if (jsurl == null || typeof(jsurl) != 'string') return;       

  • 浅析JavaScript中var that=this

    在阅读别人的代码时,发现别人写的代码中有这么一句:var that = this;,这代表什么意思呢?经过一番查阅,才明白是这么回事. 在JavaScript中,this代表的是当前对象. var that=this就是将当前的this对象复制一份到that变量中.这样做有什么意义呢? $('#conten').click(function(){ //this是被点击的#conten var that = this; $('.conten').each(function(){ //this是.c

  • 浅析JavaScript 箭头函数 generator Date JSON

    ES6 标准新增了一种新的函数: Arrow Function(箭头函数). x => x *x 上面的箭头相当于: function (x){ return x*x; } 箭头函数相当于匿名函数,并且简化了函数定义.一种像上面的,只包含一个表达式, 连{ ... }和return都省略掉了.还有一种可以包含多条语句,这时候就不能省略{ ... }和return: x =>{ if(x > 0){ return x * x; }else{ return -x *x; } } 如果参数不是

  • 浅析JavaScript Array和string的转换(推荐)

    Array类可以如下定义: var aValues = new Array(); 如果预先知道数组的长度,可以用参数传递长度 var aValues = new Array(20); ------------------如下2种定义方式是一样的--------1------- var aColors = new Array(); aColors[0] = "red"; aColors[1] = "green"; aColors[2] = "blue&quo

  • PHP中include/require/include_once/require_once使用心得

    最近一直在抽时间来学习PHP,据说PHP是世界上最好的语言,于是各大论坛炸开了锅!哈哈,我们这里不是来讨论哪门语言是最好的语言,我们是在学习PHP中经常使用到的文件引入的四种方式的特点及区别! 相信大家在使用PHP时经常看到include a.php.include_once a.php.require a.php或者require_once a.php类似这样的写法吧? 我们一起来学习和总结一下这几个语句的作用及特点! include 使用方法: include "test.php"

  • 浅析Javascript中bind()方法的使用与实现

    在讨论bind()方法之前我们先来看一道题目: var altwrite = document.write;  altwrite("hello");  //1.以上代码有什么问题 //2.正确操作是怎样的 //3.bind()方法怎么实现 对于上面这道题目,答案并不是太难,主要考点就是this指向的问题,altwrite()函数改变this的指向global或window对象,导致执行时提示非法调用异常,正确的方案就是使用bind()方法: altwrite.bind(document

  • 浅析javascript异步执行函数导致的变量变化问题解决思路

    浅析javascript异步执行函数导致的变量变化问题解决思路 for(var i=0;i<3;i++) { setTimeout(function(){ console.log(i) },0); } 控制台输出: 3 3 3 这是因为执行方法的时候for循环已经执行完成每次执行的时候取得都是3 而不是1-2-3这时我们可以使用立即执行函数为每一次循环创建一个变量副本来供定时器调用解决这个问题 for (var i = 0; i < 3; i++) { setTimeout( (functio

  • 浅析JavaScript中浏览器的兼容问题

    浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分.我们在讲老版本浏览器兼容问题之前,首先要了解什么是能力检测,它是来检测浏览器有没有这种能力,即判断当前浏览器是否支持要调用的属性或者方法.下面做了一些简短的介绍. 1.innerText 和 innerContent 1)innerText 和 innerContent 的作用相同 2)innerText IE8之前的浏览器支持 3)innerContent 老版本的Firefox支持 4)新版本的浏览器两种方式都支持 1 // 老版本浏

  • 深入浅析JavaScript中的Function类型

    Function是javascript里最常用的一个概念,javascript里的function是最容易入手的一个功能,但它也是javascript最难理解最难掌握的一个概念. 1. Function类型是js中引用类型之一,每个函数实际上都是Function类型的实例对象,具有自己的属性和方法.正因为函数式对象,所以函数名实际上也是一个指向函数对象的指针. 2. 常用的函数定义方式 1. 函数声明: function sum(a , b ){ return a+b; } 2. 表达式: va

  • 浅析JavaScript 函数防抖和节流

    函数防抖和节流都是对高频动作触发回调函数的一个优化,实现方式上有类似之处.先从使用场景做个区分. 防抖使用场景: 表单输入框校验 提交按钮避免重复提交 节流使用场景: scroll,mousemove,resize等 函数防抖(debounce) 表单输入框校验在用户不停的打字输入时并不需要向后台校验文本,只有当用户停下来一定时间后,这时候默认用户已经输入完毕了可以开始向后台提交文本了. 表单的提交按钮被用户多次连续点击时,显然并不需要每次点击都提交表单.仅在用户不点击之后,把最后一次的点击操作

随机推荐