Although javascript can construct objects and hide private methods as it targets objects, the demand changes more quickly than when you write programs, and the time for designing js objects is gone, therefore, I prefer to use js private functions and js methods. jquery private functions and jquery external exposure methods can also be implemented, while the html structure generated by pages is completely generated in js, which IDs and classes can be used to ensure consistency and reuse convenience to the maximum extent, but there is also a drawback, if the style needs to change (the structure cannot be changed), you need to use div to wrap the original structure. The relevant style also needs to be wrapped with the corresponding id, if it is a newly added event, you can only bind it. There is no good method yet.
For example, we need to include several images in a div.
This also has the disadvantage that css must be copied once before modification, but the structure and style and js can be reused.
Copy codeThe Code is as follows: <Head runat = "server">
<Title> </title>
<Script src = "Scripts/jquery-1.4.1.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Var publicSetDiv = function (url, id ){
// As public, you can pass the parameter.
This. makediv = function (j ){
Var imglist = makeimglist (url, j );
Metadata (id).html (imglist );
$ (Id). show ();
}
// Private
Function makeimglist (url, j ){
Var I = 0;
// Var j = 10;
Var html = "";
For (I; I <j; I ++ ){
Html + = " ";
}
Return html;
}
}
$ (Document). ready (function (){
// Handler for. ready () called.
Var mytest = new publicSetDiv ("http://images.cnblogs.com/logo_small.gif", "# test ");
Mytest. makediv (10 );
Var mytest2 = new publicSetDiv ("http://images.cnblogs.com/logo_small.gif", "# test2 ");
Mytest2.makediv (10 );
});
</Script>
<% -- Original default style -- %>
<Style type = "text/css">
. Item {width: 200px; height: 100px ;}
# Test2. item {width: 200px; height: 100px ;}
</Style>
<% -- Use this style for the second time and make some modifications -- %>
<Style type = "text/css">
# Test2. item {width: 200px; height: 200px; background-color: Black ;}
</Style>
</Head>
<Body>
<Form id = "form1" runat = "server">
First use
<Div id = "test" style = "display: none;">
</Div>
<Div id = "test2" style = "display: none;">
</Div>
</Form>
</Body>
</Html>
