谢泽的网络日志

前端开发技术积累


  • 首页

  • 分类

  • 归档

  • 标签

  • 关于

  • 搜索

require.js的用法

发表于 2017-12-26 | 分类于 requireJs

为什么要用require.js?

最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。下面的网页代码,相信很多人都见过。

1
<script type="text/javascript" src="1.js"></script>

这段代码依次加载多个js文件。
这样的写法有很大的缺点。首先,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件之间存在依赖关 系,因此必须严格保证加载顺序(比如上例的1.js要在2.js的前面),依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维 护都会变得困难。
require.js的诞生,就是为了解决这两个问题:
20171226151425983549360.png

  • 实现js文件的异步加载,避免网页失去响应;
  • 管理模块之间的依赖性,便于代码的编写和维护。

require.js的加载

使用require.js的第一步,是先去官方网站 下载 最新版本。
下载后,假定把它放在js子目录下面,就可以加载了。
  <script type="text/javascript" src="js/require.js"></script>
有人可能会想到,加载这个文件,也可能造成网页失去响应。解决办法有两个,一个是把它放在网页底部加载,另一个是写成下面这样:
  <script type="text/javascript" src="js/require.js" defer async="true" ></script>
async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。
加载require.js以后,下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js,也放在js目录下面。那么,只需要写成下面这样就行了:

1
<script type="text/javascript" src="js/require.js" data-main="js/main"></script>

data-main属性的作用是,指定网页程序的主模块。在上例中,就是js目录下面的main.js,这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js,所以可以把main.js简写成main。

主模块的写法

上一节的main.js,我把它称为”主模块”,意思是整个网页的入口代码。它有点像C语言的main()函数,所有代码都从这儿开始运行。
下面就来看,怎么写main.js。
如果我们的代码不依赖任何其他模块,那么可以直接写入javascript代码。

1
2
  // main.js 
  alert("加载成功!");

但这样的话,就没必要使用require.js了。真正常见的情况是,主模块依赖于其他模块,这时就要使用AMD规范定义的的require()函数。

1
2
3
4
  // main.js 
  require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // some code here
  });

require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是['moduleA', 'moduleB', 'moduleC'],即主模块依赖这三个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函 数,从而在回调函数内部就可以使用这些模块。
require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。
下面,我们看一个实际的例子。
假定主模块依赖jquery、underscore和backbone这三个模块,main.js就可以这样写:

1
2
3
  require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){ 
    // some code here
  });

require.js会先加载jQuery、underscore和backbone,然后再运行回调函数。主模块的代码就写在回调函数中。

模块的加载

上一节最后的示例中,主模块的依赖模块是['jquery', 'underscore', 'backbone']。默认情况下,require.js假定这三个模块与main.js在同一个目录,文件名分别为 jquery.js,underscore.js和backbone.js,然后自动加载。
使用require.config()方法,我们可以对模块的加载行为进行自定义。require.config()就写在主模块(main.js)的头部。参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。

```

让你迅速成长甚至成功的,从不是努力

发表于 2017-12-25 | 分类于 励志

让你迅速成长甚至成功的,从不是努力

阅读全文 »

javascript墨卡托经纬度互转

发表于 2017-12-11 | 分类于 前端技术

墨卡托投影是荷兰地理学家墨卡托于1569年提出的一种地球投影方法,该方法是圆柱投影的一种。

阅读全文 »

curl命令

发表于 2017-12-06 | 分类于 linux

curl是一种命令行工具,作用是发出网络请求,然后得到和提取数据,显示在”标准输出”(stdout)上面。
它支持多种协议,下面举例讲解如何将它用于网站开发。

阅读全文 »

sublime非常好用的文件对比插件--sublimerge

发表于 2017-12-06 | 分类于 sublime

Sublimerge还不是Sublime Text的另一个 diff插件。事实上,它是最先进,功能最齐全的插件,将您最喜爱的编辑器变成专业的并排比较和合并工具,具有惊人的功能!

阅读全文 »

sublimeText下好用的markdown插件与快捷键

发表于 2017-12-06 | 分类于 前端技术

关于安装:

如果Sublime安装了Package Control,直接Command+Shift+P(Mac下)输入 MarkdownEditing,搜索到点击即可自行安装,重启便可使用。

阅读全文 »

CSRF攻击与防御原理

发表于 2017-12-05 | 分类于 前端技术

CSRF是什么?

(Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 2007 年曾被列为互联网 20 大安全隐患之一,也被称为“One Click Attack”或者Session Riding,通常缩写为CSRF或者XSRF,是一种对网站的恶意利用也就是人们所知道的钓鱼网站。尽管听起来像跨站脚本(XSS),但它与XSS非常不同,并且攻击方式几乎相左。XSS利用站点内的信任用户,而CSRF则通过伪装来自受信任用户的请求来利用受信任的网站。与XSS攻击相比,CSRF攻击往往不大流行(因此对其进行防范的资源也相当稀少)和难以防范,所以被认为比XSS更具危险性。

阅读全文 »
谢泽

谢泽

前端开发

7 日志
5 分类
7 标签
© 2017 谢泽
由 Hexo 强力驱动
主题 - NexT.Gemini
访客数 总访问量 人次