搜索
首页web前端html教程用 jdists 处理零碎代码依赖_html/css_WEB-ITnose

标签: jdists 零碎代码

作者:王集鹄 2016年3月23日

背景

这两天发生了一件在开源社区引起了不小的波澜的事:

一个开发者把自己的组件( left-pad )从 NPM 下架了,导致被依赖的其他组件(包括一些流行的工具,如: babel )无法安装。

看到这段 license 的日志,这事多半是早有预谋的。

当然我不是想要讨论这件事的是非,只是抛一个新的问题「如何管理零碎代码?」。

一些小小的代码片段:封装成组件有些浪费,配置文件都比代码多;不封装,到用的时候还得四处寻找复制粘贴。

比如这段格式化代码,功能非常简单,但也不想每次用都现敲代码。

function format(template, json) {  return template.replace(/#\{(.*?)\}/g, function(all, key) {    return json && (key in json) ? json[key] : "";  });}

所以有很多人造轮子的时候,也有很多人在造螺丝钉。怎么管理螺丝钉一样的零碎代码,这篇文章介绍一种方案,抛砖引玉。

观察

left-pad 组件并不复杂,有效代码也就十几行

源代码

function leftpad (str, len, ch) {  str = String(str);  var i = -1;  if (!ch && ch !== 0) ch = ' ';  len = len - str.length;  while (++i < len) {    str = ch + str;  }  return str;}

示例代码

leftpad = require('left-pad')leftpad('foo', 5)// => "  foo"leftpad('foobar', 6)// => "foobar"leftpad(1, 2, 0)// => "01"

这种功能随手实现

function leftpad2(str, len, ch) {  return new Array(    Math.max(0, len - String(str).length + 1)  ).join(ch === 0 ? 0 : (ch || ' ')) + str;}

问题

零碎代码管理成本

零碎代码虽然可以随手写出,但会牺牲稳定性和复用性。

而过多的零碎代码组件化也会导致新的问题 -- 依赖臃肿,下游依赖成本提高。

NPM 依赖变化的风险

组件开发者难顾及 NPM 较深依赖层级和依赖增量变化。

我们享受开源组件生态福利同时,也得面对这种组件依赖发生变化的风险。

思路

分析

一个项目的依赖简单分为两类:

*「运行依赖」发布(publish)后的依赖,在运行期中使用*「开发依赖」发布前的依赖,在开发期中使用

如: NPM package.json 声明

{  ...  "dependencies": { // 运行依赖类    ...  },  "devDependencies": { // 开发依赖类    ...  },  ...}

安装一个组件时其「运行依赖」都会被下载,包括嵌套「运行依赖」。而「开发依赖」则不会被下载。

通常「开发依赖」都是放一些开发工具,比如构建、测试、规范检查等。那么它只能放工具吗?

场景

不妨想象一种场景:「我的项目」依赖 animate.css 组件,但只用到其中一个文件 bounce.css 。

{  "name": "my-package",  ...  "dependencies": { // 运行依赖类    "animate.css": "^1.0.0"  },}

如果别的项目依赖「我的项目」,显然安装依赖的时候,逃离不了下载整个 animate.css 的命运。

于是我想到:把 animate.css 看作资源,只抽取 bounce.css 文件作为「我的项目」一部分一起发布。

实现也不复杂:构建时简单写一条复制命令。

{  "name": "my-package",  ...  "devDependencies": { // 运行依赖类    "animate.css": "^1.0.0"  },  "scripts": {    "dist": "cp node_modules/src/bounce.css vendor/bounce.css" // 构建复制  }  ...}

那么别的项目依赖「我的项目」就不用再下载完整的 animate.css ,妈妈再也不用担心我的磁盘满了。

核心思路

  • 项目资源按需打包发布,降低下游的依赖成本。
  • 「开发依赖」除了放工具也可以放资源包。

效果

  • 使用构建工具,可以降低零碎代码管理成本
  • 按需打包资源,可以避免依赖变化的风险

发散

依赖有三个形式:

  • [x] 依赖一个项目
  • [ ] 依赖一个项目的某几个文件
  • [ ] 依赖一个项目的某几个文件的某几个片段

通常大家都关注第一种形式,下文重点介绍第三种形式:零碎代码依赖

零碎代码依赖

造轮子和用轮子并不冲突,这是供需关系,共生走向繁荣。

现在已经很少见不需要构建过程项目,请大胆的使用构建工具,让开发期更自由自在。

jdists 介绍

jdists 是一款强大的代码块预处理工具

  • 支持代码块嵌套
  • 支持多种编程语言(类 HTML、类 C、类 Pascal、类 Python、类 Lua)
  • 支持自定义扩展

详情参考: jdists

声明零碎代码

jdists 使用一种类似 XML 标记的方式声明代码块。

如下代码,声明 tag 为 function 属性 name 为 encodeHTML 的代码片段 「来源 jstrs」

  /*<function name="encodeHTML">*/  var htmlEncodeDict = {    '"': 'quot',    '<': 'lt',    '>': 'gt',    '&': 'amp',    ' ': 'nbsp'  };  /**   * HTML编码   * @param {string} text 文本   '''</example>'''   */  function encodeHTML(text) {    return String(text).replace(/["<>& ]/g, function(all) {      return '&' + htmlEncodeDict[all] + ';';    });  }  /*</function>*/

引入零碎代码

引入时指定文件和依赖关系 「来源 jhtmls」

  • 构建前
  /*<jdists encoding="fndep" import="../node_modules/jstrs/jstrs.js"    depend="encodeHTML">*/  var jstrs = require('jstrs');  var encodeHTML = jstrs.encodeHTML;  /*</jdists>*/
  • 构建后
  /*<function name="encodeHTML">*/  var htmlEncodeDict = {    ...  };  ...  function encodeHTML(text) {    ...  }  /*</function>*/

截止我们已经完成第三种依赖形式的处理

  • [x] 依赖一个项目的某几个文件的某几个片段

总结

收益

  • 减少下游依赖成本,被依赖的项目按需加载
  • 控制力强,依赖管理可以控制在代码块粒度

成本

  • 学习成本,需掌握代码块标记工具
  • 使用成本,需声明代码块及相关配置

结束语

代码块粒度的按需加载是动态类型语言的痛点,部分代码的生命周期难以捕获。使用 jdists 管理碎片代码依赖,目前还是一个不错的选择。

参考资料

  • npmjs.org tells me that left-pad is not available (404 page) #4
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

如何高效地在网页中为PNG图片添加描边效果?如何高效地在网页中为PNG图片添加描边效果?Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

&lt; datalist&gt;的目的是什么。 元素?&lt; datalist&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

&gt; gt;的目的是什么 元素?&gt; gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

&lt; meter&gt;的目的是什么。 元素?&lt; meter&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。