在公司里面学到的东西确实比较多,今天来回忆一下,关于模块化开发的一些基础吧。。
首先说一下我对模块化开发的认识,之前对模块化开发有一点了解的,因为宗杰说他是现在是用模块化开发的,并且,说了一个模块化开发很大的优点,那个就是,便于二次开发。。。
他原话是这样的,如果你不进行模块化开发管理的话,到时候二次开发搞死你。
废话就不多说了。模块化开发就是比较好,我才学不久,个人觉得非常的方便把。。。
先介绍一下 ,为什么方便吧..
我们之前在引入其他框架的时候,我们是不是要引入一大堆的其他框架的文件 比如:
这么一大堆的东西,看上去是不是很有压力,再加上我们有时候定义的一些变量,全局变量,函数名字,有可能会和其他的js里面的变量重合,这样很容易的报错,所以就引进了sea.js
引进sea.js,上面的一大堆东西就不用那么麻烦的在这里写了,我们可以在sea.js里面写,并且不会影响到其他的js文件。。。
首先和大家介绍一下公司里面使用的模块化开发的js,也就是sea.js。。。官网在这里 http://seajs.org/docs/#docs
在这里我忍不住吐槽一下,官网上面说的,五分钟入门,我可能是智商不够还是什么的,我足足研究了两天,(有空的时候看)都不明觉厉的,后来,对照一下公司的代码,自己改一些需求,逐渐的,我也明白了,什么是sea。js..下面我就来介绍一下 sea.js把
首先~得引入sea.js...这个就不用解释了,他是独立的一个js,并没有依赖什么框架,我们直接引入就可以了。
第二步就是配置sea.js. 其实说配置也不尽然是这样,下面就让大家看看什么叫配置吧
在配置之前,先看一下 你的目录结构
然后下面的是配置文件的js
关于配置文件里面的东西呢,我那时候看的就是一头雾水啦,后来我才明白的
首先 seajs.config({}),就是配置sea.js的关键了,
其实配置的作用呢,我感觉就是定义变量来存储相应js的路径来的,首先,base:这个可以算是根目录的路径,我们在下面引入的每一个js文件,都是在前面加上base的,这个我称它是路径的基础吧,然后alias:这里就是定义一些变量来储存你的js/jq文件的路径了,比如上面的,
"jquery": "jquery/jquery/1.10.1/jquery.js"
这里的 jquery 就是变量名,它的值就是路径,这里可以配置你所有js/jq文件的路径,然后在下面内容引进来的时候,可以直接的写变量名就行了~
// 加载入口模块seajs.use("../static/hello/src/main") 这个加载的入口呢,个人的理解就是,你加载进来你自己写的js文件,红色字体部分就是你的js的路径,这样就可以把你的js文件给引进来了。 其实,在这里,除了引进自己的JS文件,还有一个回调函数的,你可以写,可以不写,写的话是这样的
seajs.use("../static/hello/src/main",function(){}) 下面就是自己的写的JS文件了~
首先在你的JS里面机上 define({})。里面写的就是你的js文件了,
如果要引入其他的js文件呢,也很简单的,
我们直接 require("jquery");这样就引入了jq文件了,这里解释一下它好了,首先,require就是sea.js引入js的关键词,里面的jquery呢,就是我们在配置里面定义的变量名,
其实这里的require("...."),...里面应该是这样的:"..a-modules/jquery/jquery/1.10.1/jquery.js "
假如你没有在配置文件里面配置好你需要的js/jq 你也可以直接把路径写上去的。这样就引进来你需要的js/jq文件了
在后面的exports以及module.exports。。。。我就不是很懂了,到时候再和大家介绍一下把.....