diff --git a/main/x/js/alp_unit.js b/main/x/js/alp_unit.js
new file mode 100644
index 0000000..d1eff7d
--- /dev/null
+++ b/main/x/js/alp_unit.js
@@ -0,0 +1,73 @@
+
+
+var global_units=new Map();
+
+
+//装载单个uit
+function load_unit(matche){
+    let unit_src=matche.getAttribute("alp-unit");
+
+    if (global_units.has(unit_src)) {
+        matche.innerHTML=global_units.get(unit_src);
+
+    }else{
+
+        var xhr = new XMLHttpRequest();
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState == 4 && xhr.status == 200) {
+
+                var text = xhr.responseText.split("<script>");
+
+                //先设置html的Dom
+                matche.innerHTML = text[0];
+
+
+                //再启用函数
+                if (text.length==2){
+                    var script=document.createElement("script");
+                    script.type="text/javascript";
+                    script.text=text[1].slice(0,-11);
+                    document.getElementsByTagName("head")[0].appendChild(script);
+                }
+
+                //console.log(xhr.dd);
+                //document.getElementById(unit_id).innerHTML = text[0];
+                //记录加载状态
+                global_units.set(unit_src,text[0])
+                
+                //深度遍历加载
+                var matches2 = matche.querySelectorAll("div[alp-unit]");
+                //遍历
+                matches2.forEach(matche => load_unit(matche));
+
+
+
+            }
+        };
+        xhr.open('GET', unit_src, true);
+        xhr.send();
+    }
+
+}
+
+//扫描指定的dom节点
+function scan_alp_units(dom){
+    
+    /**动态扫描加载dom元素内的alpine的单元*/
+    var matches = dom.querySelectorAll("div[alp-unit]");
+    //遍历
+    matches.forEach(matche => load_unit(matche));
+
+}
+
+
+//页面加载完装载
+window.onload = function() {
+
+/**动态扫描加载文档中的所有可见的alpine的单元 */
+var matches = document.querySelectorAll("div[alp-unit]");
+//遍历
+matches.forEach(matche => load_unit(matche));
+
+
+};
\ No newline at end of file