远离JS灾难css灾难之 js私有函数和css选择器作为容器


Posted in Javascript onDecember 11, 2011

尽管js可以想面向对象那样去构造对象,隐藏私有方法,但需求变化的往往比你写程序还要快时,就连设计js对象的时间也没有了,所以我比较倾向于用js私有函数和js方法;jquery私有函数和jquery对外暴露方法的形式也可以实现,而页面生成的html结构则完全在js中生成,包括哪些id和class, 这样可以最大限度的确保统一和重用的方便性,但也有个缺点,就是在重用时,如果需要样式发生变化(结构是死的不能变化),就需要用div将原来的结构包起来,相关的样式也需要用对应的id包裹一遍,如果是新增的事件等就只能采用绑定的方式,暂时还没有好的方法
例如,我面要实现 在一个div中包含几张图片
这样做也有个缺点 就只 css 必须得复制一次 在做修改 但对结构和样式以及js可以重用

<html xmlns="http://www.w3.org/1999/xhtml"> 
<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) { 
//作为对外公开的,可以传参就行 
this.makediv = function (j) { 
var imglist = makeimglist(url, j); 
$(id).html(imglist); 
$(id).show(); 
} 
//私有的 
function makeimglist(url, j) { 
var i = 0; 
//var j = 10; 
var html = ""; 
for (i; i < j; i++) { 
html += "<img src='" + url + "' class='item' />"; 
} 
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> 
<%-- 原始默认 的样式--%> 
<style type="text/css"> 
.item{ width:200px; height:100px; } 
#test2 .item{ width:200px; height:100px; } 
</style> 
<%-- 第二次使用该样式并稍作修改 --%> 
<style type="text/css"> 
#test2 .item{ width:200px; height:200px; background-color:Black; } 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
第一次使用 
<div id="test" style=" display:none;"> 
</div> 
<div id="test2" style=" display:none;"> 
</div> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 #Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 #Javascript
一个简单的js树形菜单
Dec 09 #Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 #Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 #Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 #Javascript
JQuery循环滚动图片代码
Dec 08 #Javascript
You might like
FCKeditor的安装(PHP)
2007/01/13 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
php限制文件下载速度的代码
2015/10/20 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
vue实现带复选框的树形菜单
2019/05/27 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
解析Python中的二进制位运算符
2015/05/13 Python
python实现BackPropagation算法
2017/12/14 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
Python3模拟登录操作实例分析
2019/03/12 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
详解Python模块化编程与装饰器
2021/01/16 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
小学母亲节活动方案
2014/03/14 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
理财计划书
2014/08/14 职场文书
群众路线个人整改措施
2014/10/24 职场文书
见习期个人总结
2015/03/05 职场文书
2019财务转正述职报告
2019/06/27 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python