前端笔记

这几年关注重心在移动互联网和智能硬件上,一直没时间来关注前端,转回头来看好像万紫千红的样子,正好要重新开发集团官网luckylight.cn和重构公司网站moorol.com,于是打算把前端整理一下。

以前一直用jquery,并且引入js脚本都是用古老的script标签方式,js文件多了确实相当的乱。

对比了requirejs和sea.js,最后决定使用requirejs,主要原因是文档比后者全,并且在英文世界里可以找到很多资料,这里简单说一下思路,并不提具体实现。

原来旧的js文件组织方式大约如下:


static
    css
    img
    js
        a.js
        plugins
          plug.js

用了requirejs之后,只有一个script标签导入,html页面看起来是干净了很多,但是这样还不够,事实上浏览器还是通过requirejs一个http请求也不少,要解决这个问题,就要打包了,网上讲了很多怎么打包,怎么编码。但是很少有讲在django里应该怎么样组织目录结构,经过考虑,我使用了如下简单结构,src放开发代码,dist里放r.js打包之后的文件:


static
    src
    dist

打包在dist目录里,生产环境上只有dist目录,在settings.py里修改静态文件配置方便开发:


if DEBUG:
    STATIC_URL = '/static/src/'
    STATICFILES_DIRS = (
        os.path.join(BASE_DIR, 'static/src'),
    )
else:
    STATIC_URL = '/static/dist/'
    STATICFILES_DIRS = (
        os.path.join(BASE_DIR, 'static/dist'),
    )

当开发的时候,页面指向src源码目录,在生产环境里指向dist目录—————后记,其实可以分别在本地和生产环境上配不同的STATIC_URL,不用if else来判断,反正一般情况下本地settings.py和生产环境里的配置是有区别的。

饭哪里,看起来要清爽多了,并且对静态文件的http请求也大幅度减少,欧耶。

requirejs jquery 打包
阅读(694) 评论(0) 2017-03-10