远离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 处理 URL 的两个函数代码
Aug 13 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
纯JS代码实现气泡效果
May 04 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 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
初探PHP5
2006/10/09 PHP
PHP控制网页过期时间的代码
2008/09/28 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
Angularjs 基础入门
2014/12/26 Javascript
javascript运动详解
2015/07/06 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
Django Celery异步任务队列的实现
2019/07/24 Python
iPython pylab模式启动方式
2020/04/24 Python
迎接领导欢迎词
2014/01/11 职场文书
优秀毕业生自我鉴定
2014/01/19 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
优秀团员自我评价
2015/03/10 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
Python图片检索之以图搜图
2021/05/31 Python
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android
一文带你探究MySQL中的NULL
2021/11/11 MySQL