zoukankan      html  css  js  c++  java
  • 前端JS框架系列之requireJS基础学习

    1 背景

      伴随着项目功能的不断扩充,客户体验的不断完善,实现交互逻辑的JS代码变得越来越多。起初,为了管理JS代码,我们把JS从页面中解放出来独立成文件,接着又把相似的交互代码提取到公共的JS页面中。然而这还不够,一个团队在编写JS交互逻辑时,往往会出现"命名冲突"的问题。于是乎,我们想到了闭包,并将每个JS文件都用闭包封装起来,形成一个个独立的作用域,如果有必要,还会返回一个对象接口供外界调用。走到这一步,JS中的命名问题、全局变量问题都可以完美解决,但还存在一个相互依赖的大问题。特别是引入大量JS文件时,经常会因为文件之间的依赖关系而抛错。引入JS框架RequireJS,可以让JS更规范,并解决上述遇到的一系列问题。

    2 认识RequireJS

      RequireJS是一个JavaScript模块加载器,使用RequireJS加载模块化脚本将提高代码的加载速度和质量,RequireJS兼容IE 6+、Firefox 2+、Safari 3.2+、Chrome 3+、Opera 10+。

      RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>的脚本加载步骤。可以用它来1.加速和优化代码,但它的主要目的还是为了2.代码的模块化。它鼓励在使用脚本时用module ID代替URL地址。

      RequireJS以一个相对于baseUrl的地址来加载所有代码。页面顶层<script>标签含有一个特殊的属性data-main,RequireJS使用它来启动脚本加载过程。

      baseUrl设置方式:一般1.是与data-main属性相一致的目录,也可2.通过RequireJS config来手动配置,如果没有显示指定data-main或者config,则3.默认baseUrl为包含RequireJS的html文件所在目录

      例如:<script data-main="js/main.js" src="lib/require.js"></script>,通过data-main设置了入口,并会加载js目录下module ID为require的脚本,baseUrl则为js目录。

      RequireJS默认假定所依赖的资源都是js脚本,所以无需在module ID上加.js后缀。可以通过paths config设置一组脚本,可以有助于我们在使用脚本时码更少的字。

      如果想避开"baseUrl+paths"的解析过程,而是直接加载某一目录下的脚本,则module ID需满足以下规则之一:(1)带.js后缀 (2)以/开头 (3)包含URL协议如:'http:'或'https:'

      一般来说,最好还是使用baseUrl和"paths" config去设置module ID,它会带来额外带来灵活性:脚本的重命名和重定位。同时,为了避免凌乱的配置,最好不要使用多级嵌套的目录层次结构来组织代码,而是要将所有的脚本都放到baseUrl中,要么分为项目库/第三方库的扁平结构

  • 相关阅读:
    Python学习笔记(三)- 变量
    Python学习笔记(二)-程序执行原理
    Python学习笔记(一)
    牛客算法周周练7-A-收集纸片-dfs解决图的路径问题
    HihoCoder1078-线段树的区间修改-线段树区间修改、查询-模板题
    POJ1298-字符串转换-水题
    java的内存分析(内存模型)
    Linux的自有服务-SSH服务(重点)
    js-类似邮箱中的删除文件-全选、不选、反选
    jmeter数据分析,压测实现
  • 原文地址:https://www.cnblogs.com/wulei-blog/p/5560846.html
Copyright © 2011-2022 走看看