sea.js引入css,5分钟上手Sea.js
基本应用
导入Seajs库
在页尾引入seajs:
然后在它下面写模块的配置和入口。// seajs 的简单配置
seajs.config({
base: "../sea-modules/",
alias: {
"jquery": "jquery/jquery/1.10.1/jquery.js"
}
});
// 加载入口模块
seajs.use("../static/hello/src/main");
目录结构
所有源码都存放在 GitHub 上:seajs/examples,目录结构为:examples/
|-- sea-modules 存放 seajs、jquery 等文件,这也是模块的部署目录
|-- static 存放各个项目的 js、css 文件
| |-- hello
| |-- lucky
| `-- todo
`-- app 存放 html 等文件
|-- hello.html
|-- lucky.html
`-- todo.html
我们从 hello.html 入手,来瞧瞧使用 Sea.js 如何组织代码。
在页面中加载模块
在 hello.html 页尾,通过 script 引入 sea.js 后,有一段配置代码:// seajs 的简单配置seajs.config({
base: "../sea-modules/",
alias: {
"jquery": "jquery/jquery/1.10.1/jquery.js"
}})// 加载入口模块seajs.use("../static/hello/src/main")
sea.js 在下载完成后,会自动加载入口模块。页面中的代码就这么简单。
模块代码
这个小游戏有两个模块 spinning.js 和 main.js,遵循统一的写法:// 所有模块都通过 define 来定义define(function(require, exports, module) {
// 通过 require 引入依赖
var $ = require('jquery');
var Spinning = require('./spinning');
// 通过 exports 对外提供接口
exports.doSomething = ...
// 或者通过 module.exports 提供整个接口
module.exports = ...});
上面就是 Sea.js 推荐的 CMD 模块书写格式。如果你有使用过 Node.js,一切都很自然。
构建部署
对于正式项目,在发布上线前,还需要对源码进行压缩、合并等操作。
这可以通过 spm 或 Grunt 等工具来实现。简明教程请参考:构建工具
结束语
怎么样,Sea.js 入门真的只需 5 分钟吧:)
使用 Sea.js,可以规范模块的书写格式、能自动处理模块的依赖,还非常有助于代码组织、开发调试和性能优化。Sea.js 期待能给你提供简单、极致的模块化开发体验。我相信,你会爱上她的。
若喜欢,可查看更多例子:seajs/examples
若已爱上,请继续阅读:使用文档
注意事项
模块内的函数依赖必须交代清楚,防止模块在函数依赖加载前先加载出来。而且还增强了模块的独立性。
引入 seajs 的时候最好给标签加个id,可以快速访问到这个标签(我是在模块合并时用到它的)
还有前面提到的使用seajs.use()在.html页面上写js时如果有多个模块依赖,需要使用暴露出来的接口就要让参数与它一一对应。
sea.js引入css,5分钟上手Sea.js相关推荐
- vue.js引入css和js,vue.js怎么引入css文件
vue.js引入css文件的方法:1.在[main.js]中全局引入,代码为[import "./common/uni.css"]:2.直接在组件中引入,代码为[@import & ...
- require.js引入css文件,[DikeJS]RequireJS引入CSS样式文件(五)
在实际开发组件时,我们常常需要关注组件的样式,样式如何定义,以及样式如何引用,我关注此问题时也纠结了一小下,不过还好,RequireJS周边给我们提供了丰富的插件,我们可以直接使用css.js,具体的 ...
- 2020-08-04 html的js位置 + css的flex实现九宫格 + JS的Array + 软技能的硬编码
2020-08-04 题目来源:http://www.h-camel.com/index.html [html] 一般习惯把js写在</body>前,但有例外的情况吗?说说看 html文件 ...
- Js(Css)动态引用方法–Js(css)的统一管理
引自:http://pm.htjs.net/cbb Javascript(Css)组件在Web中的访问地址基本上要求基于Url的相对地址或绝对地址,如果地址出现错误那么Web访问时将出现异常,组件也就 ...
- php怎么引入外部css文件,js如何引入css外部文件
js引入css外部文件的方法:写成自定义函数,url为文件路径,供以后的元素调用,代码为[var script = document.createElement('script')].4o5少儿编程网 ...
- JS和CSS的引入/写入位置应该放在哪里?
在HTML5中: 引入CSS和JS文件时 到底应该在head标签中还是body中? 1,引入CSS在head中, 2,JS 的放置位置 a.有的js是立即执行,有的js是调用执行. ( 立即执行在网页 ...
- js html引入外部css文件,js中如何引入css文件?
js中如何引入css文件?下面本篇文章给大家介绍一下使用JS引入css文件的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.使用document.write方式输出引入cs ...
- html引入css webpack_webpack4(一):基本配置、html和css的处理
1.安装webpack4 npm i webpack@4.44.2 webpack-cli@4.0.0 -D 默认安装完成后只有一个node_modules目录和package.json文件. -S和 ...
- css 注入,electron程序,如何在主进程远程页面中注入js及css?
本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规.大家都是程序员,不要闹得不开心. 每日一篇的苏南大叔写代码教程,又来了.在本文中,苏南大叔描述的是,在electron程序加载远程页面的时候,如 ...
最新文章
- 苹果员工“神操作”:自建网站揭露公司性骚扰和歧视事件
- c语言判断闰年_大一C语言错题
- PyCharm之python书写规范--消去提示波浪线
- fragment在activity中的静态和动态用法_使用Matlab修改压缩Gif动态图片制作微信表情...
- Java中SQL语句传向数据库
- 机器 学习中的方差和偏差
- 总结:request.setAttribute()、session.setAttribute()和request.getParameter()的联系与区别
- 使用Hash函数和MAC产生伪随机数
- Python读取指定文件夹下指定类型数据的文件名并保存到TXT文件中
- c++rs法计算hurst指数_计算机组成原理与接口技术
- 网络协议(4) 详解 TCPIP 协议
- nx显示服务器错误,ug6.0软件打开出现nx许可证错误的解决办法
- netkeeper客户端_中国电信创翼客户端下载
- 图形 1.3 纹理的秘密
- C3 linearization
- 【Spring Boot】关于上传文件例子的剖析
- Android 12上焕然一新的小组件:美观、便捷和实用
- 俄罗斯套娃程序java_原创(俄罗斯套娃程序) | 学步园
- LED、CCFL、TFT屏幕三者的区别
- 软件工程 选课系统的uml类图_UML建模学生选课系统(类图+对象图+用例图+部署图)...
热门文章
- 伊洛纳服务器维护,《伊洛纳》【公告】伊洛纳12月23日正式服版本更新
- 发表论文查重率是多少?
- 非全日制做JAVA,全日制与非全日制详解
- 网狐、6878游戏清除卡线用户
- C#中FileStream与StreamReader/StreamWriter区别
- 粘性定位之 position:sticky
- 牛客-埃森哲杯第十六届上海大学程序设计联赛-A-Wasserstein Distance
- 微信小程序:去除自带顶部导航栏
- 【无标题】cannot import name ‘container_abcs‘ from ‘torch._six‘错误的解决方法(pytorch高版本1.9后)
- 【它山之玉】在高校工作和抓紧时间- 科学网马臻