利用less和requirejs对前端进行模块化

作者:norion时间:2015年6月9日评论次数:0 条

前端是一个技术分布比较杂的领域,上有P图换头像,中有切图写效果,下可建表读书数据,可谓一条龙服务,其中有很多东西,JavaScript、CSS、图片字体等等。甚至,可能根据业务需要,还包含国际化的文件。怎么能让这些东西形成模块细化颗粒化,怎么样让代码跟好的适应多人的维护,这个话题是一个比较值得研究的东西,欢迎有小伙伴和我一起来聊聊这东西。目前我们业务环境是采用less+requirejs的方案来进行。

css做模块化在前面的文章有提过,可以用sass、stylus代替,这东西不用太强求,合适团队,大家都用的来就好。

js的话,国内很多人用seajs,用起来估计会比requirejs顺手,有好有坏这不做评价,还是一句话适合就好。

基本的原料已经准备完了,现在可以开始玩耍了,不过事先声明,下面的东西,只是出于当时的业务来考虑,只是例子呀。好了废话不多说,首先来罗列一下目录结构:

asset 前端资源目录

    -- dest 打包压缩后的目录

        -- js
           -- main.js主业务文件
        -- css
        -- images

    -- dev 开发目录

        -- js
            -- app 业务代码
               -- main.js主业务文件
            -- core 通用可移植的代码
            -- lib 第三方基本库
            -- config.js requirejs配置文件

        -- less
            -- app
                -- mod 公用模块
                -- page 页面级代码
            -- core 通用可移植的代码
            -- lib 第三方基本库
            -- styles.less 统一入口

        -- images
            -- default
            -- sprite

以上js的目录基本上与less的目录相识,js的话是利用requirejs直接将代码组件化插件化,利用requirejs的defined对代码进行隔离,然后用app下的main.js进行相关的模块调用;而less则是利用less中的@import对模块化颗粒化的文件进行关联从而实现对css的模块化。这东西玩玩就知道怎么弄,这样看是有点晕晕的,来来来贴下代码,看的明白一点。

其中main.js如下:

define(function(require){
    
    /**
    * 载入第三方组件
    */
        /*表单验证*/
        require('app/jquery.validate');

        /*表单无刷提交*/
        require('app/jquery.form');

        ...
    
    /**
    * 载入公用组件
    */
        var saogaUI = require('app/saogaUI');

        ...

    /**
    * 其他
    */
        require('app/common');

        ...
    
    return saogaUI;
});

styles.less如下:

@charset "utf-8";

/* 第三方基本库 */

    /*基本样式*/
    @import "lib/base.less";

/* 通用可移植的代码 */

    /*基本函数*/
    @import "core/mixins.less";

    /*全局颜色*/
    @import "core/color.less";

    /* js组件 */
    @import "core/l-dialog.less";

    ...

/* 业务代码 */

    /* 主页 */
    @import "app/page-index.less";

    ...

做这些,就可以利用grunt或者gulp直接进行压缩打包,下一篇文章回来讲讲这两个东西。话说上面整体来说没有提供版本管理是一个比较基础的模块化,国内做的比较全的而且开源的当属百度的fis(其他的我不知道呀,嘿嘿),可以直接对前端进行整体的模块管理,不过这东西我没具体玩过所以也讲不出个所以然,以上如果想我进行深入探讨的可以联系我哦,求碰撞,求火花。

上一篇: 15年4月换工作后的随笔…

下一篇:Mac 使用 subl 快速打开 SublimeText

相关文章

评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注