远离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 相关文章推荐
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
JS高级笔记
Jul 13 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
Vue 实现登录界面验证码功能
Jan 03 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
PHP+DBM的同学录程序(5)
2006/10/09 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
php自定义apk安装包实例
2014/10/20 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
php session 写入数据库
2016/02/13 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
php json转换相关知识(小结)
2018/12/21 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
js实现进度条的方法
2015/02/13 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
解析Python中的异常处理
2015/04/28 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
Python实现读取json文件到excel表
2017/11/18 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
材料物理专业个人求职信
2013/12/15 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
挂职思想汇报
2013/12/31 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
python常见的占位符总结及用法
2021/07/02 Python