seajs 使用点滴

简介: JavaScript 作为脚本语言,本身很精简,发明之初根本没考虑什么模块的情况。于是,今天讨论的模块化就来解决 JavaScript 中依赖、冲突甚至代码如何封装的问题的。加载模块:seajs.use()与同步加载 require() 对应的,另外一种是异步的 require.async()。

JavaScript 作为脚本语言,本身很精简,发明之初根本没考虑什么模块的情况。于是,今天讨论的模块化就来解决 JavaScript 中依赖、冲突甚至代码如何封装的问题的。

加载模块:

seajs.use()

与同步加载 require() 对应的,另外一种是异步的 require.async()。

创建一个模块:

/* 
    带参数的seaJs模块化 
    正确写法 
*/  
define(function(require, exports, module) {  
    function tab () {  
        alert(123)  
    }  
});  

防止冲突:

引入中间件 middleware.js:

define(function(require, exports, module) {
	var provide= {};
	exports.provide = function(id, obj){
		provide[id] = obj;
	}
	exports.get = function(id){
		return provide[id];
	}
});


其他:

兼容 Common 的情况,在 nodejs 中不引入 seajs,但提供 define() 的实现以防报错:

// Hook into commonJS module systems
if (typeof module !== 'undefined' && "exports" in module) {
  var define = function (fn){
    fn(null, exports, module);
  }
}

压缩 & 混淆代码

安装Uglify-js

npm install uglify-js -g
压缩:

uglifyjs inet.js -o inet-min.js
混淆:

uglifyjs inet.js -m -o inet.min.js
批处理压缩某个目录。首先,复制多一份文件夹,然后修改 BAT 里面的 JSFOLDER:
@echo off
:: 设置压缩JS文件的根目录,脚本会自动按树层次查找和压缩所有的JS
SET JSFOLDER=C:\temp\src
echo 正在查找JS文件
chdir /d %JSFOLDER%
for /r . %%a in (*.js) do (
    @echo 正在压缩 %%~a ...
    uglifyjs %%~fa -o %%~fa --source-map=%%~fa.map --source-map-url=%%~na.js.map --source-map-root=http://localhost/bigfoot/src --prefix=2
)
echo 完成!
pause & exit
cd..

记住不要在当前 src 文件夹下,该批处理会覆盖 src!

其中参数解释如下:

  • --source-map 是 map 文件所保存的物理位置,一般保存在同一目录。“%%~fa” 是 DOS 批处理的特殊变量,其中 f 表示完整的磁盘路径,a 则是变量名;
  • --source-map-url 是告诉浏览器欲还原 js 的信息,定义在压缩后的 js 文件最后一行。“%%~na” 是 DOS 批处理的特殊变量,其中 n 表示仅读取文件名,a 则是变量名;
  • --source-map-root 是 map 文件的根目录,一般定义在 map 文件最后出。该值决定了未压缩前的 js 文件的目录。一般来说,该值应指向开发机器的,放在线上也可以,但这样等于暴露了你辛辛苦苦所写的 js。
  • --source-map-root 与 map 文件里的 source [] 构成了未压缩前的 js 的最终位置。故所以 --prefix 参数是消除目录前缀的。这些前缀一般是开发机器上的虚拟目录呀、批处理的文件目录呀,跟线上的最终目录要作一个转换。--prefix=2 是消除前面两级的目录。关于 -prefix 参数, uglify 有个 win32 的bug,详细如下:

Windows 用户请注意!!!

uglify-js(我当前版本 v2.4.15)只能识别 linux 系统文件分隔符 “/”,不能识别 Win32 的“\”,所以当你传入 -p/-perfix int 参数时,无效! soures 输出为 ["?"],

解决办法就是修改接收参数之源码,也是一份 js 来的,在

C:\Users\你用户名目录\AppData\Roaming\npm\node_modules\uglify-js\bin\uglifyjs

第 257 行,修改为:

// replace 删除开头的 分隔符
file = file.replace(/^(\\|\/)+/, "").split(/\/+|\\+/).slice(ARGS.p).join("/");
才可识别 Window 的分隔符。

参考:http://www.zhangxinxu.com/wordpress/2013/01/uglifyjs-compress-js/

目录
相关文章
|
10月前
|
JSON 监控 安全
如何解决跨域请求中 JSONP 存在的安全性问题?
虽然 JSONP 是一种方便的跨域请求解决方案,但在使用过程中必须充分考虑其安全性问题,并采取相应的措施来加以防范,以确保系统的安全性和可靠性。
184 8
|
6月前
|
存储 监控 网络安全
阿里云可观测 2025 年 1 月产品动态
阿里云可观测 2025 年 1 月产品动态
阿里云可观测 2025 年 1 月产品动态
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的乡村政务服务系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的乡村政务服务系统的详细设计和实现
203 1
|
机器学习/深度学习 算法 搜索推荐
【高效率学习】探索最适合你的学习之路:从心理学、动机到教育学的深度解析
【高效率学习】探索最适合你的学习之路:从心理学、动机到教育学的深度解析
314 0
【高效率学习】探索最适合你的学习之路:从心理学、动机到教育学的深度解析
|
分布式计算 算法 Java
python中内存错误(MemoryError)
【7月更文挑战第15天】
1940 4
|
SQL 关系型数据库 分布式数据库
PolarDB分布式版2023年度干货合集
PolarDB 分布式版 (PolarDB for Xscale,简称“PolarDB-X”) 是阿里云自主设计研发的高性能云原生分布式数据库产品,为用户提供高吞吐、大存储、低延时、易扩展和超高可用的云时代数据库服务。本文整理了PolarDB-X干货合集内容,希望对你学习和深入了解PolarDB-X有很大帮助。
|
存储 缓存 开发工具
初识Unity——unity的安装以及工程介绍(安装unity hub、版本选择、中文设置、安装编辑器、Assets文件、Library 文件、[ProjectName].sln 文件)
初识Unity——unity的安装以及工程介绍(安装unity hub、版本选择、中文设置、安装编辑器、Assets文件、Library 文件、[ProjectName].sln 文件)
2205 0
|
存储 Kubernetes Cloud Native
全面掌握 Kubernetes:部署、管理和扩展云原生应用
Kubernetes 是一个强大的云原生应用部署、管理和扩展平台,提供了丰富的功能和工具。通过本文的介绍,您应该能够了解 Kubernetes 的基本概念、核心组件,以及如何使用 Kubernetes 部署、管理和扩展云原生应用。同时,了解到 Kubernetes Dashboard 作为一个图形化工具,可以更方便地管理集群中的资源和应用程序。在实际应用中,深入学习和实践 Kubernetes 将有助于更好地掌握云原生应用的部署和管理。
653 1
全面掌握 Kubernetes:部署、管理和扩展云原生应用
|
消息中间件 XML 存储
优秀的 RocketMQ 可视化管理工具 GUI 客户端
优秀的 RocketMQ 可视化管理工具 GUI 客户端
5149 1
|
分布式计算 DataWorks 数据处理
DataWorks产品使用合集之在DataWorks中管理MaxCompute模块的步骤如何解决
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。
191 0

热门文章

最新文章