位置: 编程技术 - 正文

JavaScript模块化开发之SeaJS(javascript模块化与非模块化开发区别)

编辑:rootadmin

推荐整理分享JavaScript模块化开发之SeaJS(javascript模块化与非模块化开发区别),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js的模块化可以怎么做,javascript 模块化,javascript模块化与非模块化开发区别,js模块化开发教程,js的模块化可以怎么做,javascript模块化与非模块化开发区别,javascript模块化规范,javascript模块化规范有哪些,内容如对您有帮助,希望把文章链接给更多的朋友!

前言

&#;&#;SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护。

SeaJS本身遵循KISS(Keep it Simple,Stupid)理念进行开发,后续的几个版本更新也都是吵着这个方向迈进。

如何使用SeaJS

下载及安装在这里不赘述了,不了解的请查询官网。

基本开发原则 &#;一切皆为模块:SeaJS中的模块概念有点类似于面向对象中的类--模块可以拥有数据和方法,数据和方法可以定义为公共或私有,公共数据和方法可以供别的模块调用。

&#;每个模块应该都定义在一个单独的js文件中,即一个对应一个模块。

模块的定义和编写

模块定义函数define

SeaJS中使用define函数定义一个模块。define可以接收三个参数:

define可以接收的参数分别是模块ID,依赖模块数组及工厂函数。

&#;如果只有一个参数,则赋值给factory

&#;如果有两个参数,第二个赋值给factory,第一个如果是数组则赋值给deps,否则赋值给id

&#;如果有三个参数,则分别赋值

但是,包括SeaJS官网示例在内几乎所有用到define的地方都只传递一个工厂函数进去,类似于如下代码:

个人建议遵循SeaJS官方示例的标准,用一个参数的define定义模块。那么id和deps会怎么处理呢?

&#;&#;id是一个模块的标识字符串,define只有一个参数时,id会被默认赋值为此js文件的绝对路径。如example.com下的a.js文件中使用define定义模块,则这个模块的ID会赋值为 ,没有特别的必要建议不要传入id。deps一般也不需要传入,需要用到的模块用require加载即可。

工厂函数factory解析

&#;&#;工厂函数是模块的主体和重点。它的三个参数分别是:

&#;require:模块加载函数,用于记载依赖模块 &#;exports:接口点,将数据或方法定义在其上则将其暴露给外部调用 &#;module:模块的元数据

这三个参数可以根据需要选择是否需要显示指定。

module是一个对象,存储了模块的元信息,具体如下: &#;module.id:模块的ID &#;module.dependencies:一个数组,存储了此模块依赖的所有模块的ID列表。 &#;module.exports:与exports指向同一个对象

三种编写模块的模式

第一种是基于exports的模式:

JavaScript模块化开发之SeaJS(javascript模块化与非模块化开发区别)

上面是一种比较“正宗”的模块定义模式。除了讲公共数据和方法附加在exports上,也可以直接返回一个对象表示模块,如下面的代码与上面的代码功能相同:

如果模块定义没有其他代码,只返回一个对象,还可以有如下简化写法:

第三种写法对于定义纯JSON数据的模块非常合适。

根据应用场景的不同,SeaJS提供了三个载入模块的API,分别是:seajs.use,require和require.async。

seajs.use

seajs.use主要用于载入入口模块。入口模块相当于C语言的main函数,同时也是整个模块依赖树的根。seajs.use 的用法如下:

其中多模块的用法和KISSY中的模块加载方法类似,不亏是一个人写的啊!

一般seajs.use只用在页面载入入口模块,SeaJS会顺着入口模块解析所有依赖模块并将它们加载。如果入口模块只有一个,也可以通过给引入seajs的script标签加入“data-main”属性来省略seajs.use,例如一下写法:

require是seajs主要的模块加载方法,当在一个模块中需要用到其他模块时一般用require加载:

上文说过seajs会在html页面打开时通过静态分析一次性记载所有需要的js文件,如果想要某个js文件在用时才加载,可以使用require.async。

这样只有在用到这个模块时,对应的js文件才会被下载,也就实现了JavaScript代码的按需加载。

SeaJS的全局配置

seajs提供了一个seaj.configd的方法可以设置全局配置,接收一个表示全局配置的配置对象,具体方法如下:

其中,

&#;base表示基址路径 &#;alias可以对较长的常用路径设置缩写 &#;charset表示下载js时script标签的charset属性。 &#;timeout表示下载文件的最大时长,以毫秒为单位。

Seajs如何与现有的JS库配合使用

要将现有的JS库与seajs一起使用,只需根据seajs的模块定义规则对现有库进行一个封装。例如,下面是对jQuery的封装方法:

一个完整的例子:

上文说了那么多,知识点比较分散,所以最后我打算用一个完整的SeaJS例子把这些知识点串起来,方便朋友们归纳回顾。这个例子包含如下文件: &#;index.html 主页面

&#;sea.js &#;jquery.js &#;init.js init模块,入口模块,依赖data、jquery、style三个模块,又主页面载入 &#;data.js data模块,纯json数据模块 &#;style.css css样式表

请注意:

1.请讲jquery.js源码文件包含在seajs模块加载代码中;

2.在Sea.js < 2.3.0版本之前是可以加载css文件的,新版本中此功能移除,为了兼容考虑,加载css功能将作为一个插件存在。

使用方法

&#;可以在sea.js标签后引入这个插件使用 &#;也可以将插件代码混入sea.js当中 &#;和seajs-style的区别 &#;seajs-css是使 Sea.js 能够加载一个css文件,和link标签一样 &#;seajs-style是指提供一个seajs.importStyle方法用于加载一段 css 字符串

以上内容是小编给大家分享的JavaScript模块化开发之SeaJS,希望对大家学习javascript模块化开发有所帮助,谢谢大家一直以来对积木网网站的支持。!

JavaScript代码判断点击第几个按钮 最近很轻松,项目结束,趁个空余时间写了一段javascript代码实现判断点击第几个按钮的相关代码,具体代码如下所示:htmlheadmetacharset='utf-'/headbodybutton

JavaScript判断按钮被点击的方法 废话不多说了,直接给大家贴代码了。firfox版:HTMLmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/HEADTITLE/TITLEscriptdocument.onclick=function(e){varevt=e||window.eve

分享Javascript实用方法二 JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用

标签: javascript模块化与非模块化开发区别

本文链接地址:https://www.jiuchutong.com/biancheng/387205.html 转载请保留说明!

上一篇:JavaScript 模块的循环加载实现方法(javascript模块化)

下一篇:JavaScript代码判断点击第几个按钮(js判断ua)

  • 小企业会计准则下退企税分录
  • 递延所得税负债大白话解释
  • 可回收再生资源有哪些
  • 购房补贴退契税多久到账
  • 应付账款尾差怎么算
  • 质保金一年怎么写
  • 企业所得税营业收入是含税还是不含税
  • 年报和汇算清缴报表数字不一致
  • 维修费开发票选择什么税收分类编码
  • 土地增值税清算的条件
  • 劳务派遣怎么做起来
  • 抵债资产账务处理2021年
  • 资产减值损失管理措施
  • 企业所得税扣除凭证
  • 自用房产税如何计算
  • 银行质押贷款会查征信吗
  • 完税凭证和纳税凭证区别
  • 促销服务费能抵增值税吗
  • 刚升级一般纳税人可以申请贷款吗
  • 如何冲销账面上的资金
  • 个体虚开普通发票罪立案标准
  • 进厂的政府补贴怎么拿
  • 剑灵配置要求2020官方
  • 人力成本费用率和人工成本利润率
  • 股票溢价净收入计入
  • 第一启动盘设置为u盘
  • Win11文件夹怎么加密设置密码
  • js日期字符串转换为指定格式的日期
  • 房产证和不动产权证都要办理吗
  • 代开发票要带什么资料去税务局办理?
  • 提高支票处理效率的有效方法是
  • 目前最流行的婚纱照风格
  • 一般纳税企业增值税计算
  • 公司注销时做哪些财务处理
  • php基本框架
  • php生成随机字母数字代码
  • 高新技术企业补助需要交所得税吗
  • 增值税专用发票丢了怎么补救
  • bootstrap 栅格
  • matlab进行图像处理
  • 基于web的疫情防控方案
  • thinkphp import
  • 小规模纳税人无票收入怎么申报
  • 带附件的目录
  • 织梦使用教程
  • ❤️国庆假期快到了,用python写个倒计时程序,助你熬到假期!❤️
  • 季末资产总额怎么计算
  • 个体商户个人所得税怎么算
  • 差旅费需要缴纳增值税吗
  • 跨季度的发票可以冲红吗
  • 应付利息什么时候确认收入
  • 小规模减免附加税会计分录怎么做
  • 其他应付款长期挂账几年必须转收入
  • 政府补助收入是指
  • 未开票的收入怎么申报增值税
  • 工资汇算清缴前发
  • 出库单上面的单位写谁的
  • 库存商品用于投资
  • 分公司有独立账套吗
  • 企业有外币账户怎样做账
  • 银行对公账户维护费申请表模板
  • 总账会计工作流程表
  • 如何修改mysql用户名
  • sqlsever导入数据时出现ole db连接数据无效
  • unsecapp.exe - unsecapp是什么进程
  • 系统升级中怎么办
  • parallel capacitor
  • linux 系统查看
  • linux无法登陆
  • win7系统图形设置选项
  • 省去911元 教你如何将Win10家庭版改造成专业版
  • css中标签
  • 如何查看驱动器
  • JavaScript中的变量名不区分大小写
  • java 视频教程
  • javascriptwhile
  • 河南省发票查询真伪查询系统
  • 自贡市税务局稽查局领导
  • 应纳税所得额怎么求公式
  • 电子票据如何报销
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设