远离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 相关文章推荐
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
vuex的module模块用法示例
Nov 12 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
微信小程序实现录音功能
Nov 22 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
jQuery实现手风琴特效
Jan 11 jQuery
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
PHP 事务处理数据实现代码
2010/05/13 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
JavaScript学习历程和心得小结
2010/08/16 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
重命名批处理python脚本
2013/04/05 Python
python对html代码进行escape编码的方法
2015/05/04 Python
python实现基本进制转换的方法
2015/07/11 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
python之super的使用小结
2018/08/13 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
《绿色蝈蝈》教学反思
2014/03/02 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
2015年植树节活动总结
2015/02/06 职场文书
销售合作意向书范本
2015/05/08 职场文书
获奖感言一句话
2015/07/31 职场文书
Python源码解析之List
2021/05/21 Python
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python