浅析Javascript使用include/require

所属分类: 网络编程 / JavaScript 阅读数: 1622
收藏 0 赞 0 分享

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

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多