前言
zepto是一个轻量级的类jQuery的JavaScript库,适合在移动端页面开发使用。轻量又提供许多dom操作API。
前面我们讲解了zepto模块和event模块,现在来看看ajax模块。
在学习如何实现一个combo算法之前,先让我们来看看它解决了哪些问题:
用过js模块化的同学应该都知道,模块化给我们带来许多好处,但如果我们在一个页面中依赖许多模块,不做一定的处理,就会发起许多的http请求,影响页面性能。通过combo算法,将请求合并,发送一个http请求,由后台解析所需文件,一次性将我们需要的文件返回。
相信很多前端开发人员都做过这么一件事,将页面多个JavaScript文件合并成一个js文件,目的是减少http请求数,以提高页面性能。但同时带来的问题:维护麻烦,模块冗余,缓存粒度大。使用combo算法看起来更优雅,不需要去合并成一个文件。
这里是从sea.js 源码中的 util-request.js,用于向服务器请求和加载资源到页面,在sea.js 中,其在Module.fetch() 中被调用。建议大家先行阅读
sea.js源码(Module.js核心代码),对本篇的理解会更加顺畅。
我们来看 Module.fetch() 中的一段代码
这里是从sea.js 源码中的 Module.js 的Module核心代码抽离出来的,建议大家先行阅读
sea.js源码(Module.js核心代码),对本篇的理解会更加顺畅。
前面我们讲到 seajs中,最后执行 顶部模块 的callback回调的时候,最后一层一层的向上执行依赖模块。而 其中的依赖模块是我们js文件中用Module.define()
定义的,相应就需要Module.exec()
去执行编译。
那么在这之前我们就先看一下 我们js代码如何定义模块。
1 | define(id,deps,function(require, exports, module) { |
源码版本:3.0.0 sea.js
声明:水平有限,读者请客观阅读本博文。如有对源码解读错误的地方,请不吝指出。
讲解的风格是先列源码,然后把源码的执行过程表示出来,细节实现请读者阅读讲解上方的源码。
建议读者先行阅读一遍源码再理解这篇博文,至少做到理解seajs框架大体的函数工具是做什么。
在阅读sea.js源码前,我们先来简单看看什么是 JavaScript模块化。
现在的前端开发, 愈来愈趋向于桌面应用,需要团队合作,管理。开发一个新的页面,我们可能需要加载其他别人写好的模块,这个时候,我们就需要javascript模块化。
模块:简单来说就是实现特定功能的一组方法。
本篇整理一些常见情况下前端对于网络攻击的防范。
前端与服务端数据交互时,涉及到跨域的一些问题。javascript出于安全的考虑,禁止了跨域调用其它页面的对象,也即同源限制了一个源(origin)中加载文本或脚本与来自其他源(origin)中资源的交互方法。
如果两个页面拥有相同的协议(protocol),端口(如果指定),和主机,那么这两个页面就属于同一个源(origin),javascript允许这种同源页面的数据交互通信。