js代码模块改由数据库中动态加载，妥否？

Question

to: btbtd
在目前的情况下（ajax交互、json、dom&html、数据库、js），js的作用已经不同以往，需要对其重新定位

Answer 1

ajax交互、json、dom&html、数据库、js 再加上少量servlet另外，个人观点：服务端的类似jsp一类的技术都已经没有生命力了

Answer 2

哈, 我倒想听听JS现在的定位..
在我看来, JS不外乎跨平台, 分担服务器负担,, 脱离了这两点, 还有什么优势可言...
要说视觉效果, 不如FLASH, 要说信息发布, 搜索引擎不认....

Answer 3

Folder PATH listing for volume Backup
Volume serial number is 0006EEEC 209C:FFAE
G:.
├─Alg
│  ├─Base
│  ├─Base64I
│  ├─BinInt
│  ├─Des
│  ├─MD4I
│  ├─MD5I
│  ├─MD5II
│  ├─MD5III
│  ├─RotationMatrix
│  ├─RotationMatrix1-1
│  ├─SHA1I
│  ├─SHA2I
│  │  └─docs
│  └─Url
│      └─Url
├─Array
│  ├─Arrays
│  └─ExtendArray
│      └─Help
├─Data
│  ├─Enum
│  │  └─Help
│  └─HashTable
│      └─Help
├─Date
│  ├─Calendar
│  │  ├─Demo(AspJscript)
│  │  └─Style
│  ├─Calendar1-1
│  │  ├─Demo(AspJscript)
│  │  └─Style
│  └─ExtendDate
│      └─Help
├─Demo
├─Dom
│  ├─Doms
│  │  └─Help
│  ├─DomTree
│  │  └─Help
│  ├─Keywords
│  │  └─Help
│  └─Keywords1-2
│      └─Help
├─Editor
│  ├─sqEditor3
│  │  ├─BgColorScheme
│  │  ├─Demo(AspJscript)
│  │  │  └─data
│  │  ├─Demo(Html)
│  │  ├─Demo(Lib_AspJscript)
│  │  │  └─data
│  │  ├─Demo(Lib_Html)
│  │  ├─emotion
│  │  ├─Highlights
│  │  │  └─Contents
│  │  ├─html
│  │  ├─icon
│  │  ├─images
│  │  ├─style
│  │  └─Styler
│  │      └─Plus
│  ├─SqEditorAspNet
│  │  ├─BgColorScheme
│  │  ├─Demo
│  │  │  ├─#data
│  │  │  ├─cs
│  │  │  └─mod
│  │  │      ├─del
│  │  │      ├─display
│  │  │      ├─edit
│  │  │      └─post
│  │  ├─Demo(Dub_Call)
│  │  ├─Demo(General_Call)
│  │  ├─emotion
│  │  ├─Highlights
│  │  │  └─Contents
│  │  ├─html
│  │  ├─icon
│  │  ├─images
│  │  ├─style
│  │  ├─Styler
│  │  │  └─Plus
│  │  └─Uc
│  ├─SqEditorAspNet1-1
│  │  ├─BgColorScheme
│  │  ├─Demo
│  │  │  ├─#data
│  │  │  ├─cs
│  │  │  └─mod
│  │  │      ├─del
│  │  │      ├─display
│  │  │      ├─edit
│  │  │      └─post
│  │  ├─Demo(Dub_Call)
│  │  ├─Demo(General_Call)
│  │  ├─emotion
│  │  ├─Help
│  │  ├─Highlights
│  │  │  └─Contents
│  │  ├─html
│  │  ├─icon
│  │  ├─images
│  │  ├─style
│  │  ├─Styler
│  │  │  └─Plus
│  │  └─Uc
│  └─sqUbbEditor4
│      ├─BgColorScheme
│      ├─demo
│      │  ├─#data
│      │  ├─ac
│      │  ├─cs
│      │  ├─delete
│      │  ├─display
│      │  ├─edit
│      │  ├─files
│      │  ├─html_template
│      │  │  └─_notes
│      │  ├─include
│      │  ├─js
│      │  ├─post
│      │  └─style
│      ├─demo(Lib)
│      │  ├─#data
│      │  ├─ac
│      │  ├─cs
│      │  ├─delete
│      │  ├─display
│      │  ├─edit
│      │  ├─files
│      │  ├─html_template
│      │  │  └─_notes
│      │  ├─include
│      │  ├─js
│      │  ├─post
│      │  └─style
│      ├─emotion
│      ├─html
│      ├─icon
│      ├─images
│      │  └─nav
│      ├─style
│      └─Styler
│          └─Plus
├─Event
│  ├─Events
│  │  └─Help
│  └─Events2
│      └─Help
├─Files
├─Form
│  ├─CheckOrderSubmit
│  │  └─Help
│  ├─Forms
│  │  └─Help
│  ├─select
│  │  └─Help
│  ├─Select1-2
│  ├─Select1-3
│  ├─Select1-3_1
│  │  └─Help
│  ├─validate
│  │  └─Help
│  ├─Validator
│  │  └─Help
│  ├─Validator1-2
│  │  └─Help
│  ├─Validator2
│  ├─Validator2-1
│  └─Validator2-2
├─Image
│  └─images
│      └─Help
├─Media
│  └─sqMusicPlayer2-0
│      ├─Html
│      ├─mp3
│      ├─playlist
│      └─sqCrossDomain
├─Object
│  └─ExtendObject
│      └─Help
├─Project
│  ├─Project1
│  └─Project2
├─String
│  ├─ExtendString
│  │  └─Help
│  ├─highlight
│  │  └─Help
│  ├─HighlightEngine
│  │  └─Help
│  └─Random
│      └─Help
├─Templates
├─Tools
│  ├─BgColorScheme
│  │  └─Help
│  ├─BgColorScheme1-1
│  │  └─Help
│  ├─Highlights1-9
│  │  └─Contents
│  ├─Styler1-2
│  │  └─Plus
│  └─Trsilized
├─Ui
│  ├─Blink
│  │  └─Help
│  ├─Couplet
│  │  └─Help
│  ├─Dragging
│  │  └─Help
│  ├─Faded
│  │  └─Help
│  ├─Faded1-1
│  │  └─Help
│  ├─FixBox
│  │  └─Help
│  ├─Menu
│  │  └─Help
│  ├─Menu1-0_1
│  │  └─Help
│  ├─Menu1-1
│  │  └─Help
│  ├─Moving
│  │  └─Help
│  ├─Rounded
│  │  └─Help
│  ├─Rounded2-0
│  └─Ui
│      └─Help
└─Utility
    ├─Is
    │  └─Help
    ├─sqCrossDomain
    ├─sqCrossDomain1-1
    └─utilities
        └─Help
鄙人的一个库, 调用 这样...
<script type='text/javascript' src='/SqCsJsLib/default.js'></script>
<script type="text/javascript">
//<![CDATA[
 Im.Include('UI.Menu1-0_1', true);
 //Im.Help('UI.Menu', true);
 /*--------------------------end SqCsJsLib----------------------------------*/
//]]>
</script>
<script type="text/javascript">
//<![CDATA[ var MenuStr3 = 
 "1##JScript##1##函数库##2##文件##@1##JScript##1##函数库##3##测试##@1##JScript##4##类库##6##数据操作##@1##JScript##9##prototype库######@1##JScript##16##模板库######@1##JScript##8##杂类######@1##JScript##14##函数收藏######@5##JavaScript##39##枚举######@5##JavaScript##41##收藏######@5##JavaScript##12##函数库######@5##JavaScript##11##类库######@5##JavaScript##7##小工具######@7##VBScript##10##类库######@7##VBScript##18##函数库##7##文件函数##@15##ActionScript##34##函数库######@15##ActionScript##35##类库######@12##CSharp .Net##23##函数库##9##文件操作##@12##CSharp .Net##23##函数库##10##数据操作##@12##CSharp .Net##31##函数收藏######@12##CSharp .Net##29##控件库######@12##CSharp .Net##24##static 库######@12##CSharp .Net##22##类库######@12##CSharp .Net##32##名称空间######@12##CSharp .Net##40##开发小工具######@12##CSharp .Net##38##杂类######@12##CSharp .Net##27##模板库##8##数据绑定##@12##CSharp .Net##27##模板库##11##aspx 页模板##@12##CSharp .Net##27##模板库##12##ascx 页模板##@11##JScript .Net##20##函数库######@11##JScript .Net##21##类库######@10##Sql##15##Access######@10##Sql##33##MsSql######@10##Sql##36##数据表模板######@13##xhtml##25##普通应用######@14##xml##28##模板库######@9##CSS##13##导航######@9##CSS##17##模板库######@16##Utility##37##Server######@8##测试类##########@"
 ;
 
 var menu = new Menu();
  menu.Debug.Bool = false;
  
//    menu.String = MenuStr2;
  menu.String = MenuStr3;
  menu.Main.ID = "MenuBar";
  
  menu.Direction.Horizontal.Bool = true;
  menu.Direction.Horizontal.Main.Width = "99.5%";
//    menu.Direction.Vertical.Bool = true;
    menu.Symbol.Item = "##";
  menu.Symbol.Column = "##@";
  
  //function fAddLink(sLink, bInherit)
  menu.Link.Add("?level1=", false);
  menu.Link.Add("&level2=", true);
  menu.Link.Add("&level3=", true);
  
  //function fAddLinkhighlight(sQuery, sBgColor, sFgColor)
  menu.Query.Highlight.Add("level1", "black", "white");
  menu.Query.Highlight.Add("level2", "brown", "white");
  menu.Query.Highlight.Add("level3", "red", "white");
  
  menu.Go();
  menu = null;//]]>
</script>

Answer 4

举例：
//这是menu.js
function addMenuArea(a_menu_item_id, a_menu_area_id, a_display, a_visible)
{
var l_menu_area=document.createElement("div");
var l_menu_item=document.getElementById(a_menu_item_id); document.body.appendChild(l_menu_area);
if(l_menu_item) //submenu
{
l_menu_area.style.position="absolute";
l_menu_area.style.border="2px outset";
l_menu_area.level=l_menu_item.parent_menu.level+1;
l_menu_area.style.width="160px";
l_menu_item.child_menu=l_menu_area;
if(l_menu_item.parent_menu.level>1)
{
l_menu_item.innerHTML="<img style='height:16; vertical-align:top' src='folder.gif'> "+l_menu_item.item_text;
}
}
else //root
{
l_menu_area.style.position="relative";
l_menu_area.style.border="2px groove";
l_menu_area.level=1;
}
l_menu_area.style.zIndex=30000;
//l_menu_area.style.filter='Alpha(Opacity=80)'; //半透明效果
l_menu_area.style.visibility=a_visible;
l_menu_area.style.backgroundColor="#CCCCCC";
l_menu_area.style.padding="2px";
l_menu_area.style.display=a_display;
l_menu_area.id=a_menu_area_id;
l_menu_area.active_menu=null;
l_menu_area.child_items=[]; l_menu_area=null;
l_menu_item=null;
a_menu_item_id=null;
a_menu_area_id=null;
a_display=null;
a_visible=null;
}function getTop(e)
{
var t=e.offsetTop;
while(e=e.offsetParent)
{
t+=e.offsetTop;
}
return t;
}
function getLeft(e)
{
var l=e.offsetLeft;
while(e=e.offsetParent)
{
l+=e.offsetLeft;
}
return l;
}
function hideMenu(a_menu)
{
var l_active_menu;
l_active_menu=a_menu.active_menu;
while(l_active_menu)
{
l_active_menu.style.visibility='hidden';
l_active_menu=l_active_menu.active_menu;
}
l_active_menu=null;
}
function clearMenuArea(a_menu_area)
{
for(var i=0;i<a_menu_area.child_items.length;i++)
{
clearMenuItem(a_menu_area.child_items[i]);
a_menu_area.child_items[i]=null;
}
a_menu_area.child_items=null;
a_menu_area.active_menu=null;
a_menu_area.level=null;
}
function clearMenuItem(a_menu_item)
{
if(a_menu_item.child_menu)
{
clearMenuArea(a_menu_item.child_menu);
a_menu_item.child_menu=null;
}
a_menu_item.parent_menu=null;
a_menu_item.onmouseup=null;
a_menu_item.onmouseover=null;
a_menu_item.onmouseout=null;
a_menu_item.onmousedown=null;
}
function addMenuItem(a_menu_area_id, a_menu_item_id, a_display, a_text, a_action)
{
var l_menu_item=document.createElement("div");
var l_menu_area=document.getElementById(a_menu_area_id);
l_menu_area.appendChild(l_menu_item);
l_menu_area.child_items[l_menu_area.child_items.length]=l_menu_item;
l_menu_item.parent_menu=l_menu_area;
l_menu_item.style.cursor="default";
l_menu_item.style.position="relative";
if(a_display!="block")
{
l_menu_item.style.paddingLeft="8px";
l_menu_item.style.paddingRight="8px";
}
l_menu_item.style.display=a_display;
l_menu_item.style.whiteSpace="nowrap"; l_menu_item.id=a_menu_item_id;
l_menu_item.item_text=a_text;
l_menu_item.item_action=a_action;
if(l_menu_area.level>1)
{
l_menu_item.innerHTML="<img style='height:16;  vertical-align:top' src='document.gif'> "+l_menu_item.item_text;
if(l_menu_area.offsetWidth > parseInt(l_menu_area.style.width))
{
l_menu_area.style.width=(l_menu_area.offsetWidth)+"px"
}
}
else
{
l_menu_item.innerHTML=l_menu_item.item_text;
} l_menu_item.onmouseup=function ()
{
event.cancelBubble=true;
if(!this.child_menu)
{
hideMenu(document.getElementById("menu"));
if(this.item_action)
{
eval(this.item_action);
}
}
}
l_menu_item.onmouseover=function ()
{
event.cancelBubble=true;
this.style.backgroundColor="#00FF00";
hideMenu(this.parent_menu);
if(this.child_menu)
{
if(this.child_menu.level==2)
{
this.child_menu.style.left=getLeft(this);
this.child_menu.style.top=getTop(this)+this.offsetHeight+3;
}
else
{
this.child_menu.style.left=getLeft(this)+this.offsetWidth+6;
this.child_menu.style.top=getTop(this);
}
this.child_menu.style.visibility="visible";
this.parent_menu.active_menu=this.child_menu;
}
}
l_menu_item.onmouseout=function ()
{
event.cancelBubble=true;
this.style.backgroundColor="";
}
l_menu_item.onmousedown=function ()
{
event.cancelBubble=true;
} l_menu_area=null;
l_menu_item=null;
a_menu_area_id=null;
a_menu_item_id=null;
a_display=null;
a_text=null;
a_action=null;
}
//这是menu.js的结尾

Answer 5

//然后从数据库读取以下字符串
addMenu=function()
{
addMenuArea("","menu","block","visible");
addMenuItem("menu","menu_01","inline","系统管理","alert(this.item_text)");
addMenuItem("menu","menu_02","inline","基本资料","alert(this.item_text)");
addMenuItem("menu","menu_03","inline","权限设置","alert(this.item_text)");
addMenuItem("menu","menu_04","inline","单据录入","alert(this.item_text)");
addMenuItem("menu","menu_05","inline","查询统计","alert(this.item_text)");
addMenuItem("menu","menu_06","inline","活动窗口","alert(this.item_text)"); addMenuArea("menu_01", "menu_01_","block","hidden");
addMenuItem("menu_01_","menu_01_01","block","年底结转","alert(this.item_text)");
addMenuItem("menu_01_","menu_01_02","block","文件上传","alert(this.item_text)");
addMenuItem("menu_01_","menu_01_03","block","打印设置","alert(this.item_text)");
addMenuItem("menu_01_","menu_01_04","block","修改密码","alert(this.item_text)");
addMenuItem("menu_01_","menu_01_05","block","退    出","alert(this.item_text)"); addMenuArea("menu_02", "menu_02_","block","hidden");
addMenuItem("menu_02_","menu_02_01","block","系统参数","alert(this.item_text)");
addMenuItem("menu_02_","menu_02_02","block","入库类别","alert(this.item_text)");
addMenuItem("menu_02_","menu_02_03","block","出库类别","alert(this.item_text)");
addMenuItem("menu_02_","menu_02_04","block","库    房","alert(this.item_text)");
addMenuItem("menu_02_","menu_02_05","block","计量单位","alert(this.item_text)");
addMenuItem("menu_02_","menu_02_06","block","物资目录","alert(this.item_text)");
addMenuItem("menu_02_","menu_02_07","block","供 货 商","alert(this.item_text)");
addMenuItem("menu_02_","menu_02_08","block","菜单资料","alert(this.item_text)");
addMenuItem("menu_02_","menu_02_09","block","部门资料","alert(this.item_text)");
addMenuItem("menu_02_","menu_02_10","block","人员资料","alert(this.item_text)"); addMenuArea("menu_03", "menu_03_","block","hidden");
addMenuItem("menu_03_","menu_03_01","block","为人员设置涉及到的菜单权限","alert(this.item_text)");
addMenuItem("menu_03_","menu_03_02","block","为库房设置涉及到的物资种类","alert(this.item_text)");
addMenuItem("menu_03_","menu_03_03","block","为库房设置涉及到的管理人员","alert(this.item_text)"); addMenuArea("menu_04", "menu_04_","block","hidden");
addMenuItem("menu_04_","menu_04_01","block","入库单","alert(this.item_text)");
addMenuItem("menu_04_","menu_04_02","block","出库单","alert(this.item_text)"); addMenuArea("menu_05", "menu_05_","block","hidden");
addMenuItem("menu_05_","menu_05_01","block","明细查询","alert(this.item_text)");
addMenuItem("menu_05_","menu_05_02","block","帐页查询","alert(this.item_text)");
addMenuItem("menu_05_","menu_05_03","block","综合情况","alert(this.item_text)");
addMenuItem("menu_05_","menu_05_04","block","各月情况","alert(this.item_text)");
addMenuItem("menu_05_","menu_05_05","block","盘库清单","alert(this.item_text)");
addMenuItem("menu_05_","menu_05_06","block","对比上年","alert(this.item_text)"); addMenuArea("menu_06", "menu_06_","block","hidden");
addMenuItem("menu_06_","menu_06_01","block","垂直排列","alert(this.item_text)");
addMenuItem("menu_06_","menu_06_02","block","水平排列","alert(this.item_text)");
addMenuItem("menu_06_","menu_06_03","block","覆    盖","alert(this.item_text)");
addMenuItem("menu_06_","menu_06_04","block","逐级排列","alert(this.item_text)");
addMenuItem("menu_06_","menu_06_05","block","全部关闭","alert(this.item_text)"); addMenuArea("menu_05_01", "menu_05_01_","block","hidden");
addMenuItem("menu_05_01_","menu_05_01_01","block","结转明细查询","alert(this.item_text)");
addMenuItem("menu_05_01_","menu_05_01_02","block","购入明细查询","alert(this.item_text)");
addMenuItem("menu_05_01_","menu_05_01_03","block","领用明细查询","alert(this.item_text)");
addMenuItem("menu_05_01_","menu_05_01_04","block","库存明细查询","alert(this.item_text)"); addMenuArea("menu_05_03", "menu_05_03_","block","hidden");
addMenuItem("menu_05_03_","menu_05_03_01","block","结转综合情况表","alert(this.item_text)");
addMenuItem("menu_05_03_","menu_05_03_02","block","购入综合情况表","alert(this.item_text)");
addMenuItem("menu_05_03_","menu_05_03_03","block","领用综合情况表","alert(this.item_text)");
addMenuItem("menu_05_03_","menu_05_03_04","block","库存综合情况表","alert(this.item_text)"); addMenuArea("menu_05_04", "menu_05_04_","block","hidden");
addMenuItem("menu_05_04_","menu_05_04_01","block","购入数量各月情况表","alert(this.item_text)");
addMenuItem("menu_05_04_","menu_05_04_02","block","购入金额各月情况表","alert(this.item_text)");
addMenuItem("menu_05_04_","menu_05_04_03","block","领用数量各月情况表","alert(this.item_text)");
addMenuItem("menu_05_04_","menu_05_04_04","block","领用金额各月情况表","alert(this.item_text)"); addMenuArea("menu_05_05", "menu_05_05_","block","hidden");
addMenuItem("menu_05_05_","menu_05_05_01","block","月度盘库清单查询表","alert(this.item_text)");
addMenuItem("menu_05_05_","menu_05_05_02","block","年度盘库清单查询表","alert(this.item_text)"); addMenuArea("menu_05_06", "menu_05_06_","block","hidden");
addMenuItem("menu_05_06_","menu_05_06_01","block","购入金额对比","alert(this.item_text)");
addMenuItem("menu_05_06_","menu_05_06_02","block","领用金额对比","alert(this.item_text)");
}();
//过滤特殊字符之后并eval就能实现和从web目录加载同样的效果