JTaro Module 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
JTaro Module 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
JTaro Module 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
所属分类 应用工具
开源组织
地区 国产
适用人群 未知
收录时间 2017-05-24

软件简介

JTaro Module是一款使用ES6模块语法的前端模块管理工具,其本身是为更好地服务JTaro而设计,但并不依赖JTaro,完全可以独立运行。

前言

  • 如果你想使用ES6模块语法管理代码,又不想使用webpack这个重型工具

  • 如果你只是想简简单单的写个js、html、css,不需要typescript、postcss等高级工具

  • 如果你想开发时所见到的错误就像使用script标签引入的脚本一样清晰

  • 如果你想上线代码只打包成一个或几个文件以减少文件体积和连接数

那么,你可以继续往下读了!

特点

  • 轻盈易用,几个文件,数百行代码,只需要开启其nodejs服务即可使用ES6模块语法编写代码,无需Babel转译

  • 方便排错,浏览器展示代码与本地js文件一一对应,错误行号一目了然

  • 低耗高能,只需要安装nodejs 6以上版本即可运行,在3000元windows机上跑也是扛扛的

  • 代码精简,上线代码使用Rollup.js打包,除寥寥几行用于处理样式的代码外,不带任何模块管理的代码

JTaro Module 运行原理

处理js

本地开启nodejs静态服务,拦截所有js文件,检测文件内容,将import/export解释成ES5可执行的方法,再返回给浏览器

例:

// main.js
import { a } from './a.js'

console.log(a)

export default {
  a: a
}

浏览器接收到的内容为:

(function (f) {
  JTaroAssets['/main.js'] = 1
  var g = {count:1}
  g.callback = function () { f.apply(null, [
    JTaroModules['/a.js'].default
  ]) }
  JTaroLoader.import('./a.js', g)
})(function (a) {
// main.js

console.log(a)

JTaroModules['/main.js'].default = {
  a: a
}
})

处理html

当引入的文件为html时,JTaro Module会将html里的style在head里生成样式表,其余内容以字符串形式返回。JTaro是基于Vue开发的,因此JTaro Module的html内容也应该遵循Vue的模板规则,最外层只有一个dom元素。另外,html文件里只允许一个style标签

推荐

<style>
body {}
</style>
<div>
  <p>最外层只有一个div</p>
</div>

不推荐

<style>
body {}
</style>
<div>
  <p>最外层只有一个div</p>
</div>
<div>
  我是最外层的第二个div
</div>

JTaro Module会将style和div(dom元素)分离,并在第一个div加上与style对应的标识,以达到作用域限定的目的。如果你要给第一个div加样式,只需要在{}里写样式,前面不需要任何选择器。如果某些编辑器对{}发出警告,看着不爽,可以这样写this {},this表示第一个div

像这样子

a.html

<style>
h1 {font-size:32px;}
{background: #ddd;} /* 给顶层div加样式 */
this {background: #ddd;} /* 给顶层div加样式,防止编辑器发出警告 */
this.abc {color: #333;}
this#efg {float: left;}
</style>
<div class="abc" id="efg">
  <h1>Hello JTaro Module</h1>
</div>

a.js

import a from './a.html'
document.body.innerHTML = a

运行结果

<html>
  <head>
    <style id="jtaro_style_a">
    [jtaro_a] h1 {font-size:32px;}
    [jtaro_a] {background: #ddd;}
    [jtaro_a].abc {color: #333;}
    [jtaro_a]#efg {float: left;}
    </style>
  </head>
  <body>
    <div jtaro_a class="abc" id="efg">
      <h1>Hello JTaro Module</h1>
    </div>
  </body>
</html>

处理css

直接将css文件的内容以style标签的形式在head创建,不会额外加任何标记

tips:创建局部样式请在html文件里使用style,创建全局样式,请使用css文件

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
Ajv 输入验证错误漏洞
输入验证不恰当
Ajv 6.12.2版本中的ajv.validate()函数中存在输入验证错误漏洞。攻击者可利用该漏洞执行代码或造成拒绝服务。
CVE-2020-15366 MPS-2020-10525
2022-08-08 20:57
lodash 存在拒绝服务漏洞
拒绝服务
lodash 是一个现代 JavaScript 实用程序库,提供模块化、性能和附加功能。由于对 CVE-2020-8203 的修复不完整,此软件包的受影响版本容易受到 zipObjectDeep 中的原型污染。
MPS-2022-13841
2022-08-08 20:57
minimist 输入验证错误漏洞
原型污染
minimist是一款命令行参数解析工具。 minimist 1.2.2之前版本存在输入验证错误漏洞。攻击者可借助‘constructor’和‘__proto__’ payload利用该漏洞添加或修改Object.prototype的属性。
CVE-2020-7598 MPS-2020-3516
2022-08-08 20:57
Socketio Engineio 资源管理错误漏洞
拒绝服务
Socketio Engineio是Socketio社区的一个基于Javascript用于浏览器与设备进行双向通信的实时引擎。 Socketio socket.io-parser before 3.4.1 存在安全漏洞,攻击者可利用该漏洞通过大包导致拒绝服务(内存消耗)。
CVE-2020-36049 MPS-2021-0192
2022-08-08 20:57
Socketio Socket.io 访问控制错误漏洞
源验证错误
Socketio Socket.io是Socketio社区的一个基于Javascript的支持基于事件双向通信的服务器端应用。 socket.io before 2.4.0 存在安全漏洞,该漏洞源于CORS配置错误,容易出现不安全的默认值。
CVE-2020-28481 MPS-2021-0652
2022-08-08 20:57
acorn 存在拒绝服务漏洞
拒绝服务
acorn 是一个用 JavaScript 编写的小巧、快速的 JavaScript 解析器。此软件包的受影响版本通过 /[x-\ud800]/u 形式的正则表达式容易受到正则表达式拒绝服务 (ReDoS) 的攻击,这会导致解析器进入无限循环。
MPS-2022-13525
2022-08-08 20:57
lodash输入验证错误漏洞
原型污染
lodash是一款开源的JavaScript实用程序库。 lodash 4.17.15及之前版本中存在输入验证错误漏洞。远程攻击者可借助'merge'、'mergeWith'和'defaultsDeep'函数利用该漏洞在系统上执行任意代码。
CVE-2020-8203 MPS-2020-15679
2022-08-08 20:57
lodash 命令注入漏洞
代码注入
lodash是一个提供模块化、性能和附加功能的现代 JavaScript 实用程序库。 4.17.21 之前的 Lodash 版本容易通过模板函数进行命令注入。
CVE-2021-23337 MPS-2021-2638
2022-08-08 20:57
Dan DeFelippi node-XMLHttpRequest 信任管理问题漏洞
证书验证不恰当
Dan DeFelippi node-XMLHttpRequest是 (Dan DeFelippi)开源的一个应用软件。用于模拟浏览器XMLHttpRequest对象。 Node.js xmlhttprequest-ssl package 1.6.1之前版本存在信任管理问题漏洞,该漏洞源于任何证书都不会被拒绝。
CVE-2021-31597 MPS-2021-5338
2022-08-08 20:57
github ws 资源管理错误漏洞
github ws是一个应用软件。一种易于使用,运行迅速且经过全面测试的WebSocket客户端和服务器实现的方法。 漏洞版本中“Sec-Websocket-Protocol”标头的一个特殊的值可以用来显著降低ws服务器的速度,从而导致拒绝服务漏洞。
CVE-2021-32640 MPS-2021-7109
2022-08-08 20:57
js-yaml 存在拒绝服务漏洞
拒绝服务
js-yaml 是一种人性化的数据序列化语言。此软件包的受影响版本容易受到拒绝服务 (DoS) 的攻击。
MPS-2022-13820
2022-08-08 20:57
js-yaml 存在代码注入漏洞
代码注入
js-yaml 是一种人性化的数据序列化语言。此软件包的受影响版本容易受到任意代码执行的影响。
MPS-2022-13822
2022-08-08 20:57
lodash 存在拒绝服务漏洞
拒绝服务
lodash 是一个现代 JavaScript 实用程序库,提供模块化、性能和附加功能。此软件包的受影响版本容易通过 setWith 和 set 函数受到原型污染。
MPS-2022-13842
2022-08-08 20:57
lodash 原型污染漏洞
拒绝服务
lodash是一款开源的JavaScript实用程序库。 lodash 4.17.11之前版本中由于函数merge,mergeWith和defaultsDeep可以添加或修改Object.prototype导致原型污染漏洞,。 这会造成通过触发 JavaScript 异常来拒绝服务,或者篡改应用程序源代码以强制攻击者注入的代码路径,从而导致远程代码执行
CVE-2018-16487 MPS-2019-1228
2022-08-08 20:57
lodash 资源管理错误漏洞
不加限制或调节的资源分配
lodash是一款开源的JavaScript实用程序库。 lodash 4.7.11之前版本中的Date handler存在资源管理错误漏洞。该漏洞源于网络系统或产品对系统资源(如内存、磁盘空间、文件等)的管理不当。
CVE-2019-1010266 MPS-2019-8123
2022-08-08 20:57
Socketio Engineio 资源管理错误漏洞
拒绝服务
Socketio Engineio是Socketio社区的一个基于Javascript用于浏览器与设备进行双向通信的实时引擎。 Socketio Engine.IO before 4.0.0 存在安全漏洞,攻击者可利用该漏洞通过对长轮询传输的POST请求导致拒绝服务(资源消耗)。
CVE-2020-36048 MPS-2021-0191
2022-08-08 20:57
requests 代码注入漏洞
代码注入
Dan DeFelippi node-XMLHttpRequest是 (Dan DeFelippi)开源的一个应用软件。用于模拟浏览器XMLHttpRequest对象。 node-XMLHttpRequest before 1.7.0 存在代码注入漏洞,攻击者可利用该漏洞导致任意代码注入并运行。
CVE-2020-28502 MPS-2021-2418
2022-08-08 20:57
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
0 评论
1 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部