当前位置:  编程技术>WEB前端
本页文章导读:
    ▪海量操作下的js编码规范      最近公司的很多项目都涉及到了海量操作  之前说好的插件基本上都趴了 无奈只好自己动手写了 (别问我 为什么不用类似分页之类的方法解决,客户说不行) 解决了3处:图片相册 &nb.........
    ▪Web开发人员必须要知道的浏览器知识      内核的作用 浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“解释引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如HTML、JAVAScript)并渲染(.........
    ▪好看的分页样式      @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; &n.........

[1]海量操作下的js编码规范
    来源: 互联网  发布时间: 2013-10-16
最近公司的很多项目都涉及到了海量操作  之前说好的插件基本上都趴了
无奈只好自己动手写了
(别问我 为什么不用类似分页之类的方法解决,客户说不行)
解决了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点 只做抛砖引玉之用   

欢迎大神们吐槽

作者:NIHAOX1 发表于2013-1-2 22:15:10 原文链接
阅读:100 评论:0 查看评论

    
[2]Web开发人员必须要知道的浏览器知识
    来源: 互联网  发布时间: 2013-10-16
内核的作用
浏览器最重要或者说核心的部分是“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极速浏览器
作者:MrXiao95 发表于2013-1-2 22:01:07 原文链接
阅读:117 评论:0 查看评论

    
[3]好看的分页样式
    来源: 互联网  发布时间: 2013-10-16
@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;
}
作者:jhl52771 发表于2013-1-2 21:21:59 原文链接
阅读:96 评论:0 查看评论

    
最新技术文章:
▪css white-space:nowrap属性用法(可以强制文字不...
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
▪html清除浮动的6种方法示例
▪三个不常见的 HTML5 实用新特性简介
▪css代码优化的12个技巧
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
▪小技巧处理div内容溢出
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
▪li中插入img图片间有空隙的解决方案
▪CSS3中Transition属性详解以及示例分享
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解(css排版隐藏溢...
▪页面遮罩层,并且阻止页面body滚动。bootstrap...
▪CSS可以做的几个令你叹为观止的实例分享
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框,像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3