前端代码块预处理工具jdists

原文

关于命名

jdists 就是js里插入了一个dist（分发），避免和其他组件命名冲突，同时特殊好记。 本工具专注于前端代码块（js、css、html）预处理。

起因

一个页面从开发到上线基本会经历三个阶段：

  • 本机开发调试
    • 打印一些变量和执行状态、模拟数据接口
  • 内网测试
    • 跳过某些步骤、使用内网环境
  • 公网上线
    • 移除调试代码、使用线上环境。

其实前端代码和其他语言代码都需要编译，目前已经有很多成熟的工具来完成编译的事情。 比如：fis、grunt、gulp，基本都是依赖配置文件，将项目代码进行编译到相应版本。

问题

  • 代码和配置文件是分离的，这样开发维护起来不够直观。
  • 配置文件通常是基于 JSON，还是不够直观。
  • 调试代码容易遗忘，有导致线上事故的风险。

思考

那有没有一种方法能将部分编译逻辑写在代码中，就像 C 语言预编译宏定义，代码本身就包含了编译逻辑不依赖配置文件就能执行：

#include "headfile"
#ifdef DEBUG
fprintf("variant=%d",variant);
#endif

这样不仅利于维护也方便在本机开发时调试，那么接下来需求来了！

需求

  • 学习成本要很低。（使用 html 标记，这个大家再熟悉不过）
  • 支持 html、css、js 文件格式。
  • 本机开发调试时不依赖编译器。（编译逻辑写在注释中）
  • 不仅能 include 一个文件，还能 include 一个文件中的片段（代码块）。
  • 能引入当前文件的代码块。
  • 能够替换代码块的内容。
  • 能 include 二进制文件，变为 base64 字符串，方便转成 dataUri。
  • 自动合并 css 或 js 文件，能够输出合并文件并能打 md5 戳。
  • 能够处理注释模板，避免被压缩工具移除 
    var render = jhtmls.render(function () {
/*!
<div title="#{title}">#{content}</div>
*/});
  • 能够扩展替换规则。

设计思路

解决好如何定义代码块，其他问题基本就迎刃而解了。

用什么方式来定义代码块？

利用注释 + html 标记，并且又能和普通注释区分。

  • 在 html 中： 
    <!--debug-->
<div>测试版本</div>
<!--/debug-->
  • 在 js 中： 
    /*<debug>*/
console.log('测试版本');
/*</debug>*/
  • 在 css 中： 
    .version {
  font-size: 12px;
/*<debug>*/
  color: red;
/*</debug>*/
}

一些代码未必默认启用，所以支持如下方式

  • 在 html 中： 
    <!--release
<div>线上版本</div>
/release-->
  • 在 js 中： 
    /*<release
console.log('测试版本');
/release>*/
  • 在 css 中： 
    .version {
  font-size: 12px;
/*<release
  color: red;
/release>*/
}

废弃的方式

<!--debug begin-->
<div>测试版本</div>
<!--debug end-->
  • 使用being/end的方式，主要的问题是容易遗忘，该前缀还是后缀

基本概念

名称 含义 例子 备注
file 文件 1.js,1.png 包括二进制文件
block 代码块 只能是文本文件
block::tag 标签 <a>
block::attribute 代码块属性 <a encoding="md5">

标准代码块

tag 功能 示例
include 引入文件或代码块 <!--include file="all.js" /-->
replace 将当前代码块替换成文件或代码块
remove 将当前代码移除

代码属性（attribute）

属性名 含义 例子 备注
encoding 编码 encoding=”base64″ 默认”original”，可扩展
file 文件名 file=”all.js” 默认当前文件
type 类型 type=”comment” 默认”original”，”comment”：去掉包裹代码块的注释
trigger 触发器 trigger=”release,LAN” 默认”release”，存在这些触发器时才生效
js js 文件 js=”dist/all.js?” 输出的 js 文件名
css css 文件 css=”dist/all.css?” 输出的 css 文件名

编码（encoding）

  • original：原文
  • string：作为字符串
  • base64：base64 输出
  • md5：内容 MD5 戳（小写）
  • concat：合并本地 js 或 css 并可以知道输出

可以通过jdists.setEncoding(encoding,processor)扩展

使用限制

  • 代码块不能交叉，可以嵌套
  • 代码块引用不能出现循环

实战

开始使用

  • 依赖 npm 环境
  • 安装$npm install jdists -g
  • 命令格式$jdists input1 [input2] [-output output] [-remove debug,test]
  • 命令参数
参数 简写 功能 备注
-output -o 指定输出文件 默认输出到控制台
-remove -r 指定移除的代码块 默认 “debug,test”
-trigger -t 指定触发器 默认 “release”
-version -v 打印当前版本

处理 js 中的注释模板

假设文件js/base.js内容为：

var render = jhtmls.render(function() {/*!
<ul>
forEach(function(item) {
  <li>#{item.title}</li>
});
<ul>
*/});

如上可以省去拼接字符串的工作，直观好维护。但经过带压缩后就变成：

var render=jhtmls.render(function(){});

怎么避免注释模板被替换？

$jdists js/base.js -o dist/js/base.js

生成的文件是：

var render = jhtmls.render('<ul>\nforEach(function(item) {\n  <li>#{item.title}</li>\n});\n<ul>');

jdists 默认会处理注释模板

发布代码

假设文件js/net.js内容为：

var ajax = ajax || {};
void function(exports) {
/*<replace
  exports.host = 'http://api.baidu.com/1.0/getuser';
/replace>*/
}(ajax);

$jdists js/net.js -o dist/js/net.js

生成的文件是：

var ajax = ajax || {};
void function(exports) {
  exports.host = 'http://api.baidu.com/1.0/getuser';
}(ajax);

还有一种情况，是我们需要先编译一个局域网版本

假设文件js/net.js内容为：

var ajax = ajax || {};
void function(exports) {
/*<replace trigger="release"
  exports.host = 'http://api.baidu.com/1.0/getuser';
/replace>*/
/*<replace trigger="LAN"
  exports.host = 'http://http://192.168.1.67:8000/1.0/getuser';
/replace>*/
}(ajax);

$jdists js/net.js -o dist/js/net.js -t LAN

生成的文件是：

var ajax = ajax || {};
void function(exports) {
/*<replace trigger="release"
  exports.host = 'http://api.baidu.com/1.0/getuser';
/replace>*/
  exports.host = 'http://192.168.1.67:8000/1.0/getuser';
}(ajax);

指定 trigger 的代码块，会检查是否命中配置的触发器，如果没有命中则不启用功能。

合并静态资源

还是依所见即所得的设计思路，开发期的 html 指明了依赖的静态文件，如：

index.html

<html>
<head>
  <!--replace encoding="concat" js="dist/all.js" css="dist/all.css"-->
  <link rel="stylesheet" type="text/css" href="base.css">
  <link rel="stylesheet" type="text/css" href="button.css">
  <script src="base.js"></script>
  <script src="replace.js"></script>
  <!--/replace-->
</head>
<body>...</body>
</html>

$jdists index.html -o dist/index.html

生成的文件是：

<html>
<head>
  <script src="dist/all.js"></script>
  <link rel="stylesheet" type="text/css" href="dist/all.css">
</head>
<body>...</body>
</html>

同时将本地静态资源分别合并到dist/all.js和dist/all.css

打包组件

通过 jdists 可以将零散的代码和静态资源，拼凑为一个完整的组件

void function() {
  var bar = document.getElementById('jfpss-bar');
  if (bar) {
    return;
  }

  /*<include components/jframes/src/jframes.js>*/
  ;
  /*<include components/jhtmls/src/jhtmls.js>*/
  ;
  /*<include src/jfpss.js>*/

  createStyle(function() {/*!<!--include src/tools.html style-->*/});

  var div = document.createElement('div');
  div.innerHTML = function() {/*!<!--include src/tools.html html-->*/};
  document.body.appendChild(div);

  /*<include src/tools.html js>*/
}();

这样就可以用静态页面开发 UI 组件了。

软件首页 软件下载

前端代码块预处理工具jdists的更多相关文章

  1. HTML实现代码雨源码及效果示例

    这篇文章主要介绍了HTML实现代码雨源码及效果示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  2. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  3. css绝对定位如何在不同分辨率下的电脑正常显示定位位置？(一定要看！)

    这篇文章主要介绍了css绝对定位如何在不同分辨率下的电脑正常显示定位位置，本文首先解释了常见的电脑分辨率，为了页面在不同的分辨率下正常显示，要给页面一个安全宽度，再去使用绝对定位，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。

  4. 详解HTML5中CSS外观属性

    这篇文章主要介绍了HTML5中CSS外观属性的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，,需要的朋友可以参考下

  5. HTML文本属性&amp;颜色控制属性的实现

    这篇文章主要介绍了HTML文本属性&颜色控制属性的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  6. CSS中实现动画效果-附案例

    这篇文章主要介绍了 CSS中实现动画效果并附上案例代码及实现效果，就是CSS动画样式处理，动画声明需要使用@keyframes name,后面的name是人为定义的动画名称，下面我们来看看文章的具体实现内容吧，需要的小伙伴可以参考一下

  7. 前端监听websocket消息并实时弹出(实例代码)

    这篇文章主要介绍了前端监听websocket消息并实时弹出,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  8. 简洁自适应404页面HTML好看的404源码

    这篇文章主要介绍了简洁自适应404页面HTML好看的404源码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  9. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  10. HTML5适合的情人节礼物有纪念日期功能

    这篇文章主要介绍了HTML5适合的情人节礼物有纪念日期功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github，点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件；对于前后端分离的开发模式，ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装，XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js，更小的压缩版本，可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装，VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js，更小的压缩版本，可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止，相当于仅仅完成了预检，还没发送真正的请求呢。

  5. form提交时，ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案：1.加cache:false2.url加随机数正常代码：网上高人解读：cache的作用就是第一次请求完毕之后，如果再次去请求，可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。在这里，我们主要谈谈contentType=false.在使用ajax上传文件时：在其中先封装了一个formData对象，然后使用post方法将文件传给服务器。说到这，我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗？这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的，因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来，以后不用到处找了。语法：$.ajaxFileUploadoptions参数说明：1、url上传处理程序地址。2，fileElementId需要上传的文件域的ID，即的ID。3，secureuri是否启用安全提交，默认为false。4，dataType服务器返回的数据类型。6，error

  9. AJAX-Cache：一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的，我该如何解决呢？必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位，那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部