[前端引用] 利用ajax实现类似php include require 等命令的功能
利用ajax实现类似php中的include、require等命令的功能
https://github.com/myfancy/ajaxInclude
建议去这里阅读readme-2.0.md。
后续这里不再更新。
下面的都是之前写的，没必要读了。
-------更新2015.9.28
这才是真正的jquery插件的写法。
分析：假设当前页面index.hlml 通过ajaxInclude引入了 inc_yd.html。inc_yd.html需要jquery代码支持。并且是在相应的dom加载完毕后才能执行。
那么如果该代码写在common.js中，一般调用方法都是这样写的:$(document).ready(function(//相关代码){});
common.js和ajaxInclude.js都在index.html中引入。
最终结果是不执行的。因为$(document).ready()在index.html的自身的dom加载完成之后，ajaxInclude()方法执行之前就加载了。
第一次想到的解决办法是：在inc_yd.html中引入相关common.js。这样看似可以解决了，但是如果common.js还在index.html中有引入。那么就会引入两份common.js接入到页面。如果common.js中的方法没有通过js插件的方法书写，有可能会导致相同的方法执行两次，比如一个alert事件弹多次窗，一个数字加按钮点击后，加2个数。
第二个方法（现在刚刚想到的一个办法）就是想inc_yd.html中需要的js直接想到它的页面上，其他的地方不在出现。这样可以完美解决问题？
第三个想到的办法是：通过不通过$(document).ready()来调用inc_yd.html的方法，而是通过$(window).load()来调用方法，那么就会等到整个页面完全加载完毕之后才会触发该方法。此方法不适合网站开发使用，只适合前端开发使用。后台开发通过后台的方法引入了inc_yd.html后应该将该调用方法改为$(document).ready()触发，不然每次等整个页面包括图片下载完成之后在执行，有点太慢了。
总结：
第一个方法不推荐，被引用页面的js和其他的js混合在一起导致页面代码各种重复执行，各种奇葩bug，
第二个方法其实是将相应代码抽出来单独放置了。
第三个后台开发还要让人家修改代码。
所以推荐第二个方法，直接将js代码写入到被引用页面中，而不是通过<script src="">来引入
如果特殊时刻，可以通过第三个方法来快速解决问题。
如果觉得不好管理js的话，可以将对应的方法插件化，然后将调用方法写到被应用页面中。
参考hhkx项目
/**
* Created by 幻想家 on 2015/7/2.
* ajaxInclude方法。
* 版本更新：201509230909（采用jquery插件的方式写）
* 使用方法：
<script >
$('#ieAlert').ajaxInclude('inc_ieAlert.html');
</script>
* 更新须知：之前的版本会导致页面因为load方法，多次触发页面中$(document).ready();导致其内部的方法被多次触发，那个带按钮的计算价格的
* 输入框组件就是例证，这次的更新不知道能不能解决该问题，有待验证！（猜测还是解决不了）2015.9.23.9:23
* add：问题已解决，不知道是这个方法插件化，还是那个计算价格组件的方法插件化搞好的。
*
* 版本：v201509111553
* 模拟php的include功能，通过ajax load()实现。
* 注意：只能在网站环境下运行，在文件夹中直接双击运行是会报错的。
* scriptID:代表当前script节点的id
* includeFile:代表引入的文件，可以包括路径
* 使用方法：
* <head>中引入：
<script type="text/javascript" src="js/jquery.ajaxInlcude.js"></script>
* 需要的位置写它：(id可以自定义，但不能重复哦)
<script >
$(document).ready(
ajaxInclude('CustomIDNotSame','head.html')
);
</script>
* 代码可以更简单一点：
<script >
$(ajaxInclude('CustomIDNotSame','head.html'));
</script>
* 在需要引入的地方，书写上面的代码。
* 1、需要给script节点添加id，这方法时通过id来判断include到的页面位置的。
* 2、一个页面多次应用，id一定不要重复。
* 3、把被引入的html文件称为子页面，主动引入的称为母页面，母页面的css可以直接影响到子页面的dom，
* 但是母页面的js是检测不到子页面的dom的，所以如果子页面上需要用js交互功能的话，把相应的js代码引入或写入的子页面的文件中。
* 子页面可以直接写dom和js，不需要写css和网页的<html>和<head>等，只需要写<body>标签内部的代码即可
*
*/
;
(function($) {
$.fn.ajaxInclude = function(includeFile) {
var scriptID = $(this).attr('id');
//通过js创建外层div，位置是当前script节点前方，所以一个页面中多次引用时需要使用不同的id
$(this).before('<div -tempWrap'+'></div>');
//在创建的div中，通过ajax load()引入指定html文件
//添加回调函数，处理一些问题并捕捉异常
$("#"+scriptID+'-tempWrap').load(includeFile,function(responseTxt,statusTxt,xhr){
if(statusTxt=="success") {
//可以在这里删除有碍观瞻的自身script节点，表担心，不影响函数执行
$(this).next().remove();
//没错，这就是传说中的去壳大法！
$(this).children().unwrap();
}else if(statusTxt=="error") {
$(this).html("<h1 >此处组件加载失败！</h1>");
console.log("ajaxInclude.js执行错误————"+xhr.status + "：" + xhr.statusText);
}
});
};
})(jQuery);
//;
//function ajaxInclude(scriptID,includeFile){
// //通过js创建外层div，位置是当前script节点前方，所以一个页面中多次引用时需要使用不同的id
// $("#"+scriptID).before('<div -tempWrap'+'></div>');
// //在创建的div中，通过ajax load()引入指定html文件
// //添加回调函数，处理一些问题并捕捉异常
// $("#"+scriptID+'-tempWrap').load(includeFile,function(responseTxt,statusTxt,xhr){
// if(statusTxt=="success") {
// //可以在这里删除有碍观瞻的自身script节点，表担心，不影响函数执行
// $(this).next().remove();
// //没错，这就是传说中的去壳大法！
// $(this).children().unwrap();
// }else if(statusTxt=="error") {
// $(this).html("<h1 >此处组件加载失败！</h1>");
// alert("Error: " + xhr.status + ": " + xhr.statusText);
// }
// });
//}-------更新2015.7.2
把它插件化了，这样使用更加方便：
将下面代码拷贝至新建的js文件中，然后引入页面即可。推荐命名：jquery.ajaxInclude.js
/**
* Created by 幻想家 on 2015/7/2.
* ajaxInclude方法。
* 模拟php的include功能，通过ajax load()实现。
* 注意：只能在网站环境下运行，在文件夹中直接双击运行是会报错的。
* a:代表当前script节点的id
* b:代表引入的文件，可以包括路径
* 使用方法：
* <head>中引入：
* <script src="js/jquery.ajaxInlcude.js" type="text/javascript"></script>
* 需要的位置写它：(id可以自定义，但不能重复哦)
* <script >
* $(document).ready(
* ajaxInclude('include-header','head.html')
* );
* </script>
* 在需要引入的地方，书写上面的代码。
* 1、需要给script节点添加id，这方法时通过id来判断include到的页面位置的。
* 2、一个页面多次应用，id一定不要重复。
* 3、把被引入的html文件称为子页面，主动引入的称为母页面，母页面的css可以直接影响到子页面的dom，
* 但是母页面的js是检测不到子页面的dom的，所以如果子页面上需要用js交互功能的话，把相应的js代码引入或写入的子页面的文件中。
* 子页面可以直接写dom和js，不需要写css和网页的<html>和<head>等，只需要写<body>标签内部的代码即可
*
*/
;
function ajaxInclude(a,b){
//通过js创建外层div，位置是当前script节点前方，所以一个页面中多次引用时需要使用不同的id
$("#"+a).before('<div -wrap'+'></div>');
//在创建的div中，通过ajax load()引入指定html文件
//添加回调函数，处理一些问题并捕捉异常
$("#"+a+'-wrap').load(b,function(responseTxt,statusTxt,xhr){
if(statusTxt=="success") {
//可以在这里删除有碍观瞻的自身script节点，表担心，不影响函数执行
$(this).next().remove();
//没错，这就是传说中的去壳大法！
$(this).children().unwrap();
}else if(statusTxt=="error") {
$(this).html("<h1 >此处组件加载失败！</h1>");
alert("Error: " + xhr.status + ": " + xhr.statusText);
}
});
}--------2015.7.2之前
需求介绍 在写页面的时候，一个导航可能N页面要用到，每一个页面都需要复制粘贴一份进去，一旦有改动html代码的需求就苦逼了，每个都得改一遍。如果这个需求还很多，反复改，那简直就是折磨人啊（虽然这种情况一般的情况下遇不到，但是偶老是遇到。）
直接看代码
<script type="text/javascript">
//通过js创建外层div，位置是当前script节点前方，所以一个页面中多次引用时需要使用不同的id
$("#ajax-header").before('<div >);
//在创建的div中，通过ajax load()引入
$(document).ready(function(){
//添加回调函数，处理一些问题并捕捉异常
$("#include-head").load("head.html",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success") {
//可以在这里删除有碍观瞻的自身sript节点，表担心，不影响函数执行
$(this).next().remove();
//没错，这就是传说中的去壳大法！
$(this).children().unwrap();
}else if(statusTxt=="error") {
$(this).html("<h1 >此处组件加载失败！</h1>");
alert("Error: " + xhr.status + ": " + xhr.statusText);
}
});
});
</script>把头部代码写到 head.html中，这样其他页面直接通过上方代码引用就可以了。我觉得也可以把上面整理成一个方法，此处直接传参调用即可，有空再搞吧。
需要注意的是，head.html中如果只写html结构代码，那么样式是可以应用到这些结构上的，但是如果是动态的，js貌似不行。必须把js一块搞进去。
如果是用前端框架，如amazeUI，实测不行，必须整个页面带<html><head>引入才行
但那样又会重复渲染样式，可以试试将关键性js引入。（待测试）
为什么不用iframe？
忘了。当时不知道考虑了啥，所以没用。以后再说
add：因为，高度宽度等不好处理，效果完全不行。
还是慢慢钻研吧，听说某些前端框架等可以直接支持这个功能，那就好了。
add：只能通过建立站点来实现ajax load方法，不然会报错
