mya-hook-commonjs
Version:
mya commonJs module
206 lines (143 loc) • 5.93 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>FIS3</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--
<script src="require.js" data-main="init"></script>
-->
</head>
<body>
<script src="mod.js" ></script>
<script src="module2/asyncmore/3.js" ></script>
<script src="module2/111.js" ></script>
<script>
// var module = require('asyncmore/3.js').test;
// console.log(module);
define('module0', function(require, exports, module) {
exports.name = 'module0';
exports.add = function(x, y) {
return x + y;
}
});
var modulexx = require('module').author;
console.log(modulexx);
var module = require('module0').add(1,2);
console.log(module);
var module = require('module2/asyncmore/3.js').test();
console.log(module);
</script>
<div class="main">
<h2>F.I.S扩展的三种领域语言能222</h2>
<p>
F.I.S自动化工具核心任务是扩展前端领域语言（html，js，css）所欠缺的能力。经过反复总结和实践，我们发现，<strong>只要对前端领域语言扩展三种能力，即可满足各种复杂的前端开发需求</strong>，这三种能力分别是：
</p>
<div class="callout">
<ul>
<li><strong>资源定位</strong>：获取任何开发中所使用资源的线上路径；</li>
<li><strong>内容嵌入</strong>：把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中；</li>
<li><strong>依赖声明</strong>：在一个文本文件内标记对其他资源的依赖关系；</li>
</ul>
</div>
<blockquote>以下为示例代码，请查看源文件并执行【fis release --dest output <strong>--md5</strong>】命令对产出代码和源文件进行对照</blockquote>
<!--前端领域语言能力扩展示例-->
<h4>在html中定位资源</h4>
<blockquote>详情请查看源码以及编译后的代码</blockquote>
<!--源码：
<img title="百度logo" src="images/logo.gif"/>
编译后-->
<img title="百度logo" src="images/logo.gif"/>
<!--源码：
<link rel="stylesheet" type="text/css" href="demo.css">
编译后-->
<link rel="stylesheet" type="text/css" href="demo.css">
<!--源码：
<script type="text/javascript" src="demo.js"></script>
编译后-->
<script type="text/javascript" src="demo.js"></script>
<h4>在html中嵌入资源</h4>
<blockquote>详情请查看源码以及编译后的代码</blockquote>
<!--源码：
<img title="百度logo" src="images/logo.gif?__inline"/>
编译后-->
<img title="百度logo" src="images/logo.gif?__inline"/>
<!--源码：
<link rel="stylesheet" type="text/css" href="demo.css?__inline">
编译后-->
<link rel="stylesheet" type="text/css" href="demo.css?__inline">
<!--源码：
<script type="text/javascript" src="demo.js?__inline"></script>
编译后-->
<script type="text/javascript" src="demo.js?__inline"></script>
<h4>在javascript中定位资源</h4>
<blockquote>详情请查看源码以及编译后的代码</blockquote>
<!--源码：
<script type="text/javascript">
var img = __uri('images/logo.gif');
var css = __uri('demo.css');
var js = __uri('demo.js');
</script>
编译后-->
<script type="text/javascript">
var img = __uri('images/logo.gif');
var css = __uri('demo.css');
var js = __uri('demo.js');
</script>
<h4>在javascript中嵌入资源</h4>
<blockquote>详情请查看源码以及编译后的代码</blockquote>
<!--源码：
<script type="text/javascript">
__inline('demo.js');
var img = __inline('images/logo.gif');
</script>
编译后-->
<script type="text/javascript">
__inline('demo.js');
var img = __inline('images/logo.gif');
</script>
<h4>在css中定位资源</h4>
<blockquote>详情请查看源码以及编译后的代码</blockquote>
<!--源码：
<style>
@import url('demo.css');
.style {
background: url('images/body-bg.png');
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body-bg.png');
}
</style>
编译后-->
<style>
@import url('demo.css');
.style {
background: url('images/body-bg.png');
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body-bg.png');
}
</style>
<h4>在css中嵌入资源</h4>
<blockquote>详情请查看源码以及编译后的代码</blockquote>
<!--源码：
<style>
@import url('demo.css?__inline');
.style {
background: url('images/logo.gif?__inline');
/*filter不支持base64，所以没做处理*/
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body-bg.png?__inline');
}
</style>
编译后-->
<style>
@import url('demo.css?__inline');
.style {
background: url('images/logo.gif?__inline');
/*filter不支持base64，所以没做处理*/
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body-bg.png?__inline');
}
</style>
</div>
<div id="content">
<p class="author"></p>
<p class="blog"><a href="#">Blog</a></p>
</div>
</body>
</html>