远离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 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
jQuery数据类型小结(14个)
Jan 08 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
微信小程序新手教程之启动页的重要性
Mar 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 引用是个坏习惯
2010/03/12 PHP
来自phpguru得Php Cache类源码
2010/04/15 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
php创建图像具体步骤
2017/03/13 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
python rsa 加密解密
2017/03/20 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
Shell编程面试题
2012/05/30 面试题
婚前协议书标准版
2014/10/19 职场文书
小学班主任研修日志
2015/11/13 职场文书
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis