当前位置:  编程技术>WEB前端

[1]海量操作下的js编码规范

最近公司的很多项目都涉及到了海量操作  之前说好的插件基本上都趴了
无奈只好自己动手写了
（别问我 为什么不用类似分页之类的方法解决，客户说不行）
解决了3处：图片相册   树形插件  缩略图
以树形插件为例   来和大家探讨下  海量操作下的JS编码
web上的树形插件不少  之前也写过几个  很简单  但是在以10W个子节点的加载情况下  运行的效果确实很糟糕
（另外  我会告诉你客户要求的是IE8么。。。。）
firefox下 展开10W个节点的时间花费 基本上在5-10S左右
所以只好放弃 普通的tree插件   改用即时渲染的方式来加载
窗体一次性只显示大约30-50条   因为节点的请求是异步的。。。。（废话）
所以构思在于 在js代码里维护一套自己的数据流（数据树） 对异步请求回来的数据进行动态的填充和记录索引
并对每条数据进行必要的属性编辑   包括上下节点的关系  即时绘制的处理方式（后面会提及）
另外  因为是tree型插件  所以有必要返回一个操作对象 给web  方便其他空间调用  
大概的一个编码方式如下

$.fn.extend({
	// config  配置文件  主要包括 独特功能的开关 如：是否第一次就进行ajax请求
	tree : function ( config ){
		var tree_data,
		    ajax_data,
		    init_GUI,
		    data_control_tool,
		    manager；
		init_GUI = {
			/*!
			 *	初始化tree插件界面  包括放置必要的 DOM元素
			 */
			function(){}
		};
		ajax_data = {
			/*!
			 *	这里放置  ajax请求
			 *	对 请求回来的数据 填充致tree_data中 并记录索引  建议以路径的方式记录：0-0-0-0-1 
			 *	另外  进行节点的属性编辑
			 */
			function(){}......
		};
		data_control_tool = {
			/*!
			 *	这里放置  对数据的处理  返回一个应该符合界面展示的结果  并支持即时绘制渲染
			 *	每一条属性根据上下点的关系 进行动态的属性编辑  
			 */
			function(){}.......
		};
		manager = {
			/*!
			 *	返回致前端的管理对象   这里不做详细累述  
			 *	ps：这里的function应该尽量的 短小    仅仅只是作为提供外部API接口  
			 */
			function(){}......
		};
		return manager;
	};
});

这里是以JQ插件的形式做的论述  其他不做详解
主要的注意点  在于：
1.各个职能独立  这样的编码规范 可以让你在编码的时候更加有侧重点   
2.数据处理 与页面渲染 完全分开  上述的行为如再细分的话  可以再划分一处事件处理机制的响应 
3.return出来的manager  可以极大的方便插件整合至项目中时  对其它的插件的编码影响 

上面3点 只做抛砖引玉之用   

欢迎大神们吐槽

[2]Web开发人员必须要知道的浏览器知识

内核的作用
浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“解释引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如HTML、JAVAScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。


内核的分类
浏览器的内核有很多种，但比较常见的大约只有四种


1.Trident：IE浏览器使用的内核，该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE9。Trident实际上是一款开放的内核，其接口内核设计的相当成熟


2.Gecko：Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器) 也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码,增加功能。因为这是个开源内核，因此受到许多人的青睐


3.Presto：目前Opera采用的内核，该内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。与前面几个内核的最大的区别就在脚本处理上，Presto有着天生的优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行Javascrīpt的时候有着最快的速度，


4.Webkit：苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。在安全方面不受IE、Firefox的制约，所以Safari浏览器在国内还是很安全的。WebKit 内核在手机上的应用也十分广泛


基于各种内核的浏览器种类
1.基于Trident内核的主流浏览器
     世界之窗（The World）
　　傲游浏览器（Maxthon）
　　腾讯TT（Tencent Traveler）
　　爱帆浏览器（Avant Browser）
　　360安全浏览器（360SE）
　　搜狗浏览器（兼容模式）（Sougou Explorer）
　　瑞影浏览器（Rayying）
http://www.bcwhy.com/thread-8574-1-1.html
2.基于Gecko内核的主流浏览器
     Firefox浏览器
     Redfox浏览器
     Madfox浏览器
     DR.Orca浏览器
     K-Meleon浏览器


3.基于Presto内核的浏览其
    Opera 9.5 之前版本，Opera 9.5 之后版本是基于Kestrel内核


4.基于Webkit内核的浏览器
   Google Chrome
   Apple Safari 浏览器


5.基于多种内核的浏览器
傲游3:Webkit+IE
QQ浏览器:Trident+Webkit
Lunascape6:Trident+Gecko+Webkit
360极速浏览器

[3]好看的分页样式

@charset "utf-8";      
.pagination a {
    text-decoration: none;
border: 1px solid #AAE;
color: #15B;
}


.pagination a, .pagination span {
    display: inline-block;
    padding: 0.1em 0.4em;
    margin-right: 5px;
margin-bottom: 5px;
}


.pagination .current {
    background: #26B;
    color: #fff;
border: 1px solid #AAE;
}


.pagination{
   margin-top:20px;
}

www.222gs.com
.pagination .current.prev, .pagination .current.next{
color:#999;
border-color:#999;
background:#fff;
}


#List{
border: 1px solid #AAE;
line-height:20px;
}
#List td{
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #AAE;
border-bottom-color: #AAE;
}
.ListTitle{
color: #FFFFFF;
background-color: #26B;
text-align: center;
}