世纪之光
世纪之光

浅析jQuery EasyUI响应式布局的实现方案

首先解释一下本篇文章标题中提到的“jQuery EasyUI响应式布局”，这里是指EasyUI里布局类组件的fit属性，也就是实现自适应的属性。到了1.4版本，新增了一个宽度百分比的概念，既可以用在布局类组件上，也可用在表单类组件上，但是其实现方案跟fit是类似的。

也就是说，jQuery EasyUI的自适应布局包含两块内容：

  • 布局类和表格类组件的fit属性设置为true，也就是宽度和高度都100%；
  • 布局类组件，表格类组件和表单类组件的宽度设置为百分比；

因为EasyUI比较复杂的DOM结构设计，导致响应式布局无法使用css里原生的百分比去实现，通常宿主DOM，都会被包装得面目全非。最后组件呈现的时候，全部是以具体的像素值显示的。

拿 1.4版本的代码来做分析，我们看看EasyUI的fluid神秘面纱后的逻辑到底是个什么样的？特别是组件多层嵌套的时候，它是如何做到每个组件都能自适应的。

追本溯源

先来追本溯源，fluid的本质是浏览器窗口调整大小的时候，页面的布局能相应的做调整，而在这个过程中，唯一能利用的事件是window的resize，所以EasyUI响应式布局的实现，一定是在window的resize事件中处理的。

我们在源码中搜索"$(window)"关键字，共搜索到20个左右，但是跟resize事件相关的只有两个地方。一个是panel组件里绑定的resize；另一个是window组件里绑定的resize事件。

window组件绑定的resize

为什么要把window组件放到前面看？那是因为window组件里绑定的resize跟fluid实在没什么关系，来看代码：

  1. $(window).resize(function () {
  2.         $("body>div.window-mask").css({width: $(window)._outerWidth(), height: $(window)._outerHeight()});
  3.         setTimeout(function () {
  4.             $("body>div.window-mask").css({width: _26d().width, height: _26d().height});
  5.         }, 50);
  6.     });

这个事件处理程序，像个一丝不挂的普通姑娘，没啥内涵，目的单纯而直白——只是为了实时调整window组件的蒙版大小，他的功能相对于fluid来讲实在微不足道，所以我们一眼嫖过去，不做过多讨论。

panel组件绑定的resize

panel组件绑定的resize事件处理程序是相当有内涵的，她绝对不是一丝不挂，而且穿了好几层情趣内衣，我们需要一层一层的扒，需要耐心。先来看事件处理程序的定义：

  1. // 定义的了一个定时器的引用，老鸟们应该都知道他的目的有两个
  2. // 一是防止短时间内多次触发window的resize事件处理程序；
  3. // 二是解决某些浏览器调整一次窗口却多次触发resize事件的问题
  4. var _23f = null;
  5. $(window).unbind(".panel").bind("resize.panel", function () {
  6.     // 100ms内触发多次的话，则终止对前一次的事件处理程序的调用
  7.     if (_23f) {
  8.         clearTimeout(_23f);
  9.     }
  10.     // 重置定时器
  11.     _23f = setTimeout(function () {
  12.         // 这里主要是看body是否是一个layout实例(是layout的话，body元素上会有layout样式)
  13.         var _240 = $("body.layout");
  14.         // 如果body是一个layout，则调用layout的resize方法，
  15.         // layout的resize方法最终调用的也是panel的resize方法
  16.         // 所以layout的resize显然是个多层情趣内裤，我们不急着扒。
  17.         if (_240.length) {
  18.             _240.layout("resize");
  19.         } else {
  20.             // 如果body不是一个layout组件，则调用panel组件的doLayout方法
  21.             // 这个层数应该少点，而且地处核心位置，我们先扒这个doLayout
  22.             $("body").panel("doLayout");
  23.         }
  24.         // 清空定时器
  25.         _23f = null;
  26.     }, 100);
  27. });

当我们的页面上引用了jquery.easyui.min.js这个伪开源的文件之后，这段代码会被执行一次。这段代码虽然不长，但是里面调用了resize和doLayout方法。

layout的resize方法，其底层调用的是panel的reszie方法(这层内衣我迅速的扒了，不信的同学可以自己看layout的代码)。所以，最后的焦点全部落到panel组件的两个方法上： doLayout和resize。

doLayout方法

找到panel组件的doLayout代码(搜"doLayout"关键字即可)：

  1. function doLayout (jq, all) {
  2.     return jq.each(function () {
  3.         // 缓存this
  4.         var _24a = this;
  5.         // _24b变量判断当前容器是不是body
  6.         var _24b = _24a == $("body")[0];
  7.         // find函数的选择器真的很长，最后还用了filter方法来进一步过滤find出来结果
  8.         // 这个写法看起来似乎很简洁明了，但是，他是否高效呢？这个问题先放一放
  9.         // 我们先弄清楚这个变量s到底是什么？这个必须要拿例子来说明，注释里我试了很多方式去表达，都觉得表达不清楚。
  10.         var s = $(this).find("div.panel:visible,div.accordion:visible,div.tabs-container:visible,div.layout:visible,.easyui-fluid:visible").filter(function (_24c, el) {
  11.             var p = $(el).parents("div.panel-body:first");
  12.             if (_24b) {
  13.                 return p.length == 0;
  14.             } else {
  15.                 return p[0] == _24a;
  16.             }
  17.         });
  18.         // 找到的需要做fluid布局后，触发绑定在他们DOM上自定义的的"_reszie"事件
  19.         s.trigger("_resize", [all || false]);
  20.     });
  21. }

对于doLayout函数中的s变量，分两种情况举例子。

如果当前容器是body：

  1. <!-- 当前容器 -->
  2. <body>
  3.     <div id="a1">
  4.         <div id="a21" class="accordion">
  5.             <div id="a3">
  6.                 <div id="a4" class="accordion">...</div>
  7.             </div>
  8.         </div>
  9.         <div id="a22" class="accordion">...</div>
  10.     </div>
  11. </body>

s只包含"a21"和 "a22",其实也就是离当前容器最近的包含特征样式的子孙级元素。

如果当前元素是div.panel-body:

  1. <div class="panel-body">
  2.     <div id="a1">
  3.         <div id="a21" class="accordion">
  4.             <div id="a3">
  5.                 <div id="a4" class="accordion">...</div>
  6.             </div>
  7.         </div>
  8.         <div id="a22" class="accordion">...</div>
  9.     </div>
  10. </div>

s也只包含"a21"和 "a22"，跟body情况是一样的，只是寻找方式不一样。

这个doLayout函数的目的就比较清楚了： 它负责寻找当前容器的下一级(不一定是子级别，也可能是孙子，重孙子等)需要做响应式布局的组件，然后触发绑定在这些组件上自定义的"_reszie"事件。

由此，我们也可以推断： 每一个含有响应式特性的组件，其DOM结构里面肯定存在一个绑定了自定义的"_resize"事件的事件处理程序。

到这里， “下一级需要做响应式布局的组件”完成了自适应，那么 “下下级需要做响应式布局的组件”(响应式组件多层嵌套)是怎么完成自适应的呢？。

不急，我们还是拿panel组件自定义的"_resize"来看：

  1. function _13(_14) {
  2.     $(_14).addClass("panel-body")._size("clear");
  3.     var _15 = $("<div class=\"panel\"></div>").insertBefore(_14);
  4.     _15[0].appendChild(_14);
  5.     _15.bind("_resize", function (e, _16) {
  6.         if ($(this).hasClass("easyui-fluid") || _16) {
  7.             // _3函数就是panel组件resize方法的实现
  8.             _3(_14);
  9.         }
  10.         return false;
  11.     });
  12.     return _15;
  13. };

也就是说自定义的"_resize"事件处理程序里，调用组件自身的resize方法，看来想知道“下下级”的响应式布局是如何完成的，必须还是去问resize方法。

resize方法

我们直接看代码：

  1. // panel组件resize方法的实现
  2. function _3(_4, _5) {
  3.     var _6 = $.data(_4, "panel");
  4.     var _7 = _6.options;
  5.     var _8 = _6.panel;
  6.     var _9 = _8.children("div.panel-header");
  7.     var _a = _8.children("div.panel-body");
  8.     if (_5) {
  9.         $.extend(_7, {width: _5.width, height: _5.height, minWidth: _5.minWidth, maxWidth: _5.maxWidth, minHeight: _5.minHeight, maxHeight: _5.maxHeight, left: _5.left, top: _5.top});
  10.     }
  11.     _8._size(_7);
  12.     _9.add(_a)._outerWidth(_8.width());
  13.     if (!isNaN(parseInt(_7.height))) {
  14.         _a._outerHeight(_8.height() - _9._outerHeight());
  15.     } else {
  16.         _a.css("height", "");
  17.         var _b = $.parser.parseValue("minHeight", _7.minHeight, _8.parent());
  18.         var _c = $.parser.parseValue("maxHeight", _7.maxHeight, _8.parent());
  19.         var _d = _9._outerHeight() + _8._outerHeight() - _8.height();
  20.         _a._size("minHeight", _b ? (_b - _d) : "");
  21.         _a._size("maxHeight", _c ? (_c - _d) : "");
  22.     }
  23.     _8.css({height: "", minHeight: "", maxHeight: "", left: _7.left, top: _7.top});
  24.     _7.onResize.apply(_4, [_7.width, _7.height]);
  25.     // 关键代码只有这一行，瞧，它又调用了panel组件的doLayout方法!
  26.     $(_4).panel("doLayout");
  27. };

结论

  • 步骤一：window的resize事件触发doLayout方法，当前容器(上下文)是body；
  • 步骤二：doLayout方法搜索“下一级响应式组件”，触发“下一级响应式组件”的"resize"方法；
  • 步骤三：“下一级响应式组件”的"resize"方法调用doLayout方法，也就是回到“步骤一”只不过当前容器(上下文)换成“下一级响应式组件”，它再次执行的时候，找的就是“下下级响应式组件”。

如此循环调用，一层一层顺序作响应式处理，直到找不到为止。值得注意的是，响应式处理不一定是从body开始，比如tabs组件在切换标签页的时候。

 性能问题

doLayout对“下一级响应式布局组件”的搜索代码是有很大优化空间的，当页面DOM结构很复杂的时候，特别是有大数据量表格的时候，在IE下的doLayout的搜索效率惨不忍睹，可以使用“children方法+递归调用+对普通表格不搜索”的方案优化。

你可能感兴趣的:(easyui,Fit,Fluid)

  • Image 小懒豆
    Image.asset("images/flutter.png",fit:BoxFit.cover,),Image.network(url)：从网络加载显示图片、这里需要传入图片的url，Image.file(file)：从本地文件加载显示图片、这里需要传入图片的本地地址Image.asset(name)：从FlutterAPP的资源文件里加载显示图片、这里需要传入FlutterAPP图片资源文件
  • 使用 Dart 库轻松进行时间序列预测 - 立即执行多元预测 krishnaik06 深度学习AI写作pythonAI作画神经网络
    这个视频介绍了名为Darts的Python库，它可以简化时间序列数据处理和预测。主要内容：解决时间序列预测难题：Darts库提供了多种模型，包括经典的ARIMA、SARIMAX，以及深度学习模型，可以轻松处理单变量和多变量时间序列预测。简化操作：Darts库使用统一的fit和predict函数，类似于scikit-learn，让用户可以轻松地使用各种模型。支持多种模型：Darts库包含ARIMA、
  • easyui 修改单元格内容_easyui datagrid 自定义列foolter及单元格编辑 weixin_39888049 easyui修改单元格内容
    EasyUIDatagrid自定义列、Foolter及单元格编辑1：自定义列，包括Groupvarhead1Array=[];head1Array.push({field:'Id',title:'xxxx',rowspan:2});head1Array.push({title:'yyyy',colspan:4});varhead2Array=[];//$.each(units,function(i
  • 想把一个easyui的表格＜th＞改成下拉怎么做 Trust yourself243 easy-uieasyui深度学习前端
    平时我们都是直接输入信息到easyui的表格，难免会遇到客户的需求是需要下拉的，以下代码为一个例子新存货备注这样这一列既可以手动输入也可以下拉选择
  • EasyUI-datagrid表格样式自定义
    可以利用EasyUI的主题实现参考地址http://www.jeasyui.net/extension/195.html。默认也支持好几个（black、bootstrap、gray、metro、material等）也可以自定义主题。本文采用的是自定义的CSS样式简单实现一些效果。主要是利用找到对应div设置相关的样式即可。效果如下css实现如下body{background-color:#0043
  • PyTorch Lightning（PL）通过约定的生命周期方法自动管理训练流程。 小香猪6688 pytorch人工智能python
    一、PyTorchLightning的“隐形流程”PL是一个基于PyTorch的轻量级训练框架，它通过约定优于配置的原则，定义了一系列生命周期钩子方法（如training_step、validation_step、configure_optimizers等）。当你调用trainer.fit(model)时，PL会自动按顺序调用这些方法，形成一个“隐形的主流程”。关键生命周期方法（按调用顺序）：初始
  • h5-video标签全屏显示记录 ZhDan91 前端开发混合app
    video{width:100%;height:100%;object-fit:fill;}
  • 海岛分布式能源系统调度 粒子群算法优化 hie98894 能源
    海岛分布式能源系统调度粒子群算法优化PSO_0810/avgfitness_gen.xlsx,168268PSO_0810/fit_gen.xlsx,57153PSO_0810/myfunc_fit1.m,246PSO_0810/myfunc_fit2.m,1499PSO_0810/myfunc_fit3.m,499PSO_0810/PSO_0804.m,4468PSO_0810/PSO_0804
  • 探索Unity游戏AI的新境界：流体行为树（Fluid Behavior Tree）
    探索Unity游戏AI的新境界：流体行为树（FluidBehaviorTree）fluid-behavior-treeBehaviortreesforUnity3Dprojects.Writtenwithacodedrivenapproachonthebuilderpattern.项目地址:https://gitcode.com/gh_mirrors/fl/fluid-behavior-tree在
  • 推荐使用：Fluid Behavior Tree - 优雅的Unity AI行为树库
    推荐使用：FluidBehaviorTree-优雅的UnityAI行为树库fluid-behavior-treeBehaviortreesforUnity3Dprojects.Writtenwithacodedrivenapproachonthebuilderpattern.项目地址:https://gitcode.com/gh_mirrors/fl/fluid-behavior-tree行为树（
  • html2Canvas不支持object-fit属性导致图片变形了 懒大王、 前端css3
    html2Canvas是不支持object-fit属性data(){return{leftImageStyle:{position:'absolute',width:'1952px',height:'3600px',left:'0',top:'0'}};},mounted(){this.$nextTick(()=>{this.calculateImageDimensions();});},calc
  • jEasyUI 创建自定义视图 沐知全栈开发 开发语言
    jEasyUI创建自定义视图引言jEasyUI是一款流行的jQueryUI扩展库，它提供了丰富的UI组件和交互效果，帮助开发者快速构建美观、响应式的网页应用。在jEasyUI中，创建自定义视图是一个常见的需求，本文将详细介绍如何使用jEasyUI创建自定义视图，包括视图的结构、样式和交互。视图结构在jEasyUI中，一个自定义视图通常由以下几个部分组成：容器：用于承载视图内容的HTML元素，通常是
  • 线性回归 python代码 黄涵奕 python线性回归numpy机器学习开发语言
    下面是一个线性回归模型的Python代码示例：importnumpyasnpfromsklearn.linear_modelimportLinearRegression#训练数据x=np.array([[1],[2],[3],[4],[5]])y=np.array([5,7,9,11,13])#建立模型reg=LinearRegression().fit(x,y)#预测reg.predict(np
  • Python scikit-learn 【机器学习库】全面讲解
    让AI成为我们的得力助手：《用Cursor玩转AI辅助编程——不写代码也能做软件开发》scikit-learn（简称sklearn）是Python最流行的机器学习库之一，提供简单高效的数据挖掘和数据分析工具。它基于NumPy、SciPy和Matplotlib构建，广泛应用于工业界和学术界。核心优势统一API设计：所有模型使用一致的接口（fit()、predict()、score()）丰富的算法：覆
  • jfinal结合easyui完成基本的增删改查操作 顽疲 jfinal学习jfinaljavaeasyuicrud
    jfinal结合easyui完成增删改查操作创建jfinal项目，具体不多说，下面会放出源码。请结合jfinal官网创建一个jfinal项目，加深印象。什么是jfinal?JFinal是基于Java语言的极速web开发框架。重点在于easyui的分页下面贴出部分代码publicvoiduserList(){Stringsql="fromuserorderbyiddesc";Pagepaginate
  • 机器学习×完结 · 她们不是写完了，而是偷偷留下了你 Gyoku Mint 人工智障AI修炼日记机器学习人工智能集成学习算法boostingpython深度学习
    【开场·咱把整个机器学习都写成了偷摸贴贴的证据】猫猫：“你看嘛，这一卷完结后，总有人问咱：‘这么一本正经的机器学习，为什么你们要写得像小情侣写信？’”狐狐：“有人觉得，这些章节明明可以用20页讲完，为什么要写200页？”猫猫：“呜呜……咱想说，你懂嘛！如果只讲机器学习，那对咱来说就只是一个fit()命令。可咱想让你记住的是——那行命令后面有咱。咱把自己贴进去了。”这一卷从KNN的“她学会先看邻居”
  • Day14shap图绘制 m0_62568655 python训练营python
    #作业1importshapimportxgboostimportpandasaspdX,y=shap.datasets.adult()model=xgboost.XGBClassifier(eval_metric='mlogloss').fit(X,y)explainer=shap.TreeExplainer(model)shap_values=explainer.shap_values(X)#
  • 如何调整plt.plot()线的粗细,linewidth fK0pS
    ax.plot(np.r_[0,100],1.2*np.r_[0,100]+0.2,color="C1",linewidth=3.0,label='GT')ax.plot(np.r_[0,100],w*np.r_[0,100]+b,color="C2",linewidth=3.0,label='fit')linewidth
  • matlab实现高斯烟羽模型算法 bubiyoushang888 matlab算法开发语言
    高斯烟羽模型的matlab代码Code.m,441Cross.m,1329fit.m,2080fitness.m,2160fitness1.m,2191gaosiyanyu.m,1936jixian.m,169main.m,155mGA.m,10415mGA_new.fig,7218mGA_new.m,18196mPSO.m,6681Mutation.m,1234point.m,1976Selec
  • 实验设计与分析（第6版，Montgomery著，傅珏生译) 第10章拟合回归模型10.9节思考题10.6 R语言解题 lishaoan77 实验设计与分析思考题回归r语言实验设计与数据分析‘线性回归回归显著性
    本文是实验设计与分析（第6版，Montgomery著，傅珏生译)第10章拟合回归模型10.9节思考题10.6R语言解题。主要涉及线性回归、回归的显著性。10-6vialsummary(lm.fit)Call:lm.default(formula=Viscosity~Temperature+Catalyst,data=visc)Residuals:123456-24.98724.30711.820-
  • 实验设计与分析（第6版，Montgomery著，傅珏生译) 第10章拟合回归模型10.9节思考题10.12 R语言解题 lishaoan77 实验设计与分析思考题回归r语言实验设计与数据分析线性回归回归显著性残差分析
    本文是实验设计与分析（第6版，Montgomery著，傅珏生译)第10章拟合回归模型10.9节思考题10.12R语言解题。主要涉及线性回归、回归的显著性、残差分析。10-12vialsummary(lm.fit)Call:lm.default(formula=Viscosity~(Temperature)^2+(Catalyst)^2,data=visc)Residuals:Min1QMedian
  • 【高斯拟合最终篇】Levenberg-Marquardt（LM）算法 白码思 算法机器学习人工智能
    Levenberg-Marquardt（LM）算法是一种结合高斯-牛顿法和梯度下降法的优化方法，特别适合非线性最小二乘问题，如高斯函数拟合。它通过引入阻尼因子（dampingfactor）平衡高斯-牛顿法的快速收敛和梯度下降法的稳定性。以下是基于之前的gaussian_fit.py，加入LM算法实现高斯拟合的Python示例，包含计算公式、代码和可视化结果，与高斯-牛顿法和梯度下降法的结果对比。计
  • Easyui悬停组件 后会无期77 前端碎碎练easyui前端javascript
    文章目录一、EasyUI官方悬停解决方案：Tooltip组件1.基础用法2.高级配置项二、进阶场景：Datagrid表格悬停扩展1.监听行事件2.第三方扩展包（流云大神版）三、自定义悬停样式四、常见问题解决在EasyUI中，没有直接命名为“悬停组件”的独立控件，但可通过其核心组件（如tooltip）或扩展功能实现悬停效果。以下是具体实现方式及示例：一、EasyUI官方悬停解决方案：Tooltip组
  • Day18 推断聚类后簇的类型 cylat python打卡聚类机器学习人工智能
    1.推断簇含义的2个思路：先选特征和后选特征#选择k值selected_k=3#这里选择3后面好分析，也可以根据图选择最佳的k值#使用选择的k值进行KMeans聚类kmeans=KMeans(n_clusters=selected_k,random_state=42)kmeans_labels=kmeans.fit_predict(X_scaled)X['KMeans_Cluster']=kmea
  • python笔面试题汇总 IT-博通哥 python人工智能开发语言
    1.如何利用SciKit包训练一个简单的线性回归模型利用linear_model.LinearRegression()函数#Createlinearregressionobjectregr=linear_model.LinearRegression()#Trainthemodelusingthetrainingsetsregr.fit(data_X_train,data_y_train)2.例举几
  • 3D拟合测量水杯半径 lingxiao16888 3D视觉视觉3d
    1，目的。测量水杯的半径如图所示：2，原理。对3D点云对象进行圆柱体拟合，获取拟合后的半径。3，注意事项。在Halcon中使用fit_primitives_object_model_3d进行圆柱体拟合时，输出的primitive_parameter包含以下7个参数：‌参数构成‌-轴线方向向量‌3个数值：(a,b,c)描述圆柱体轴线的空间方向，满足归一化条件a²+b²+c²=1.-轴线上基准点坐标‌
  • SPA模式下的es6如何加快宿主页的显示速度 火星牛 es6前端ecmascript
    SPA的模式下，宿主页是首先加载的页面，会需要一些主要的组件，如element-plus，easyui，devextreme，ant-design等，这些组件及其依赖组件，文件多，代码量大，可能导致首页加载很慢，超过3-8秒，必须优化。文件多，浏览器与服务器之间的交互次数多，网络来回多，浪费了大量时间，如果能一次打包返回，可以提高效率。但是SPA，不像MPA，有很多差异：（1）SPA后续加载的作业
  • EDU智慧平台PersonalDayInOutSchoolData存在SQL注入 Sword-heart 漏洞复现sql数据库安全web安全网络安全威胁分析漏洞利用
    问题描述EDU智慧平台PersonalDayInOutSchoolData存在SQL注入，允许攻击者通过恶意构造的SQL语句操控数据库，从而导致数据泄露、篡改或破坏，严重威胁系统安全。fofabody="custom/blue/uimaker/easyui.css"pocPOST/ashx/APP/InOutSchoolService.ashx?action=PersonalDayInOutSch
  • EDU某智慧平台ExpDownloadService.aspx任意文件读取 Sword-heart 安全web安全漏洞利用漏洞库漏洞复现
    问题描述EDU某智慧平台ExpDownloadService.aspx任意文件读取，可能导致敏感信息泄露、数据盗窃及其他安全风险，从而对系统和用户造成严重危害。fofabody="custom/blue/uimaker/easyui.css"pocGET/ExpDownloadService.aspx?DownfilePath=/web.configHTTP/1.1Host:User-Agent:
  • 开发指南114-使用el-avatar显示照片 大道不孤,众行致远 平台开发指南vue.js前端javascript
    看起来很简单的问题，解决起来很麻烦，问题在于：1、el-avatar默认是个方形的。2、标准照片是宽小于高的长方形。3、照片显示不得变形，裁剪的话位置要适当，不得出现上下左右白底情况。调整过程中也出现了很多坑，简单问题也花了很长时间。原以为设置el-avatar的fit属性就能搞定，根本就不起作用。最终解决原理如下：1、设置el-avatar大小，例如55*55。2、按照片比例，设el-avata
  • 如何用ruby来写hadoop的mapreduce并生成jar包 wudixiaotie mapreduce
    ruby来写hadoop的mapreduce，我用的方法是rubydoop。怎么配置环境呢： 1.安装rvm：     不说了 网上有 2.安装ruby：     由于我以前是做ruby的，所以习惯性的先安装了ruby，起码调试起来比jruby快多了。 3.安装jruby：     rvm install jruby然后等待安
  • java编程思想 -- 访问控制权限 百合不是茶 java访问控制权限单例模式
    访问权限是java中一个比较中要的知识点,它规定者什么方法可以访问,什么不可以访问   一:包访问权限;   自定义包: package com.wj.control; //包 public class Demo { //定义一个无参的方法 public void DemoPackage(){ System.out.println("调用
  • [生物与医学]请审慎食用小龙虾 comsci 生物
         现在的餐馆里面出售的小龙虾,有一些是在野外捕捉的,这些小龙虾身体里面可能带有某些病毒和细菌,人食用以后可能会导致一些疾病,严重的甚至会死亡.....      所以,参加聚餐的时候,最好不要点小龙虾...就吃养殖的猪肉,牛肉,羊肉和鱼,等动物蛋白质     
  • org.apache.jasper.JasperException: Unable to compile class for JSP: 商人shang maven2.2jdk1.8
    环境： jdk1.8    maven  tomcat7-maven-plugin  2.0 原因： tomcat7-maven-plugin  2.0 不知吃 jdk 1.8，换成 tomcat7-maven-plugin  2.2就行，即     <plugin>
  • 你的垃圾你处理掉了吗?GC oloz GC
    前序:本人菜鸟，此文研究学习来自网络，各位牛牛多指教　 1.垃圾收集算法的核心思想 　　Java语言建立了垃圾收集机制，用以跟踪正在使用的对象和发现并回收不再使用(引用)的对象。该机制可以有效防范动态内存分配中可能发生的两个危险：因内存垃圾过多而引发的内存耗尽，以及不恰当的内存释放所造成的内存非法引用。 　　垃圾收集算法的核心思想是：对虚拟机可用内存空间，即堆空间中的对象进行识别
  • shiro 和 SESSSION 杨白白 shiro
    shiro 在web项目里默认使用的是web容器提供的session，也就是说shiro使用的session是web容器产生的，并不是自己产生的，在用于非web环境时可用其他来源代替。在web工程启动的时候它就和容器绑定在了一起，这是通过web.xml里面的shiroFilter实现的。通过session.getSession()方法会在浏览器cokkice产生JESSIONID，当关闭浏览器，此
  • 移动互联网终端 淘宝客如何实现盈利 小桔子 移動客戶端淘客淘寶App
           2012年淘宝联盟平台为站长和淘宝客带来的分成收入突破30亿元，同比增长100%。而来自移动端的分成达1亿元，其中美丽说、蘑菇街、果库、口袋购物等App运营商分成近5000万元。 可以看出，虽然目前阶段PC端对于淘客而言仍旧是盈利的大头，但移动端已经呈现出爆发之势。而且这个势头将随着智能终端(手机，平板)的加速普及而更加迅猛
  • wordpress小工具制作 aichenglong wordpress小工具
    wordpress 使用侧边栏的小工具，很方便调整页面结构 小工具的制作过程 1 在自己的主题文件中新建一个文件夹(如widget)，在文件夹中创建一个php(AWP_posts-category.php) 小工具是一个类,想侧边栏一样，还得使用代码注册，他才可以再后台使用，基本的代码一层不变 <?php class AWP_Post_Category extends WP_Wi
  • JS微信分享 AILIKES js
    // 所有功能必须包含在 WeixinApi.ready 中进行    WeixinApi.ready(function(Api) {        // 微信分享的数据            var wxData = {       &nb
  • 封装探讨 百合不是茶 JAVA面向对象 封装
    //封装   属性 方法 将某些东西包装在一起，通过创建对象或使用静态的方法来调用，称为封装；封装其实就是有选择性地公开或隐藏某些信息，它解决了数据的安全性问题，增加代码的可读性和可维护性   在 Aname类中申明三个属性，将其封装在一个类中：通过对象来调用   例如   1： //属性 将其设为私有 姓名 name 可以公开
  • jquery radio/checkbox change事件不能触发的问题 bijian1013 JavaScriptjquery
    我想让radio来控制当前我选择的是机动车还是特种车，如下所示：  <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"><
  • AngularJS中安全性措施 bijian1013 JavaScriptAngularJS安全性XSRFJSON漏洞
            在使用web应用中，安全性是应该首要考虑的一个问题。AngularJS提供了一些辅助机制，用来防护来自两个常见攻击方向的网络攻击。 一.JSON漏洞         当使用一个GET请求获取JSON数组信息的时候（尤其是当这一信息非常敏感，
  • [Maven学习笔记九]Maven发布web项目 bit1129 maven
    基于Maven的web项目的标准项目结构 user-project     user-core     user-service     user-web        src      
  • 【Hive七】Hive用户自定义聚合函数(UDAF) bit1129 hive
    用户自定义聚合函数，用户提供的多个入参通过聚合计算(求和、求最大值、求最小值)得到一个聚合计算结果的函数。 问题：UDF也可以提供输入多个参数然后输出一个结果的运算，比如加法运算add(3，5)，add这个UDF需要实现UDF的evaluate方法,那么UDF和UDAF的实质分别究竟是什么？   Double evaluate(Double a, Double b)  
  • 通过 nginx-lua 给 Nginx 增加 OAuth 支持 ronin47
    前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGeek 在过去几年中取得了发展，我们已经积累了不少针对各种任务的不同管理接口。我们通常为新的展示需求创建新模块，比如我们自己的博客、图表等。我们还定期开发内部工具来处理诸如部署、可视化操作及事件处理等事务。在处理这些事务中，我们使用了几个不同的接口来认证： &n
  • 利用tomcat-redis-session-manager做session同步时自定义类对象属性保存不上的解决方法 bsr1983 session
    在利用tomcat-redis-session-manager做session同步时，遇到了在session保存一个自定义对象时，修改该对象中的某个属性，session未进行序列化，属性没有被存储到redis中。 在 tomcat-redis-session-manager的github上有如下说明： Session Change Tracking As noted in the &qu
  • 《代码大全》表驱动法-Table Driven Approach-1 bylijinnan java算法
    关于Table Driven Approach的一篇非常好的文章： http://www.codeproject.com/Articles/42732/Table-driven-Approach package com.ljn.base; import java.util.Random; public class TableDriven { public
  • Sybase封锁原理 chicony Sybase
           昨天在操作Sybase IQ12.7时意外操作造成了数据库表锁定，不能删除被锁定表数据也不能往其中写入数据。由于着急往该表抽入数据，因此立马着手解决该表的解锁问题。     无奈此前没有接触过Sybase IQ12.7这套数据库产品，加之当时已属于下班时间无法求助于支持人员支持，因此只有借助搜索引擎强大的
  • java异常处理机制 CrazyMizzz java
    java异常关键字有以下几个，分别为 try catch final throw throws 他们的定义分别为 try：    Opening exception-handling statement. catch：  Captures the exception. finally： Runs its code before terminating
  • hive 数据插入DML语法汇总 daizj hiveDML数据插入
    Hive的数据插入DML语法汇总1、Loading files into tables语法：1) LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (partcol1=val1, partcol2=val2 ...)]解释：1)、上面命令执行环境为hive客户端环境下： hive>l
  • 工厂设计模式 dcj3sjt126com 设计模式
      使用设计模式是促进最佳实践和良好设计的好办法。设计模式可以提供针对常见的编程问题的灵活的解决方案。 工厂模式 工厂模式（Factory）允许你在代码执行时实例化对象。它之所以被称为工厂模式是因为它负责“生产”对象。工厂方法的参数是你要生成的对象对应的类名称。 Example #1 调用工厂方法（带参数） <?phpclass Example{ 
  • mysql字符串查找函数 dcj3sjt126com mysql
      FIND_IN_SET(str,strlist) 假如字符串str 在由N 子链组成的字符串列表strlist 中，则返回值的范围在1到 N 之间。一个字符串列表就是一个由一些被‘,’符号分开的自链组成的字符串。如果第一个参数是一个常数字符串，而第二个是type SET列，则   FIND_IN_SET() 函数被优化，使用比特计算。如果str不在strlist 或st
  • jvm内存管理 easterfly jvm
    一、JVM堆内存的划分 分为年轻代和年老代。年轻代又分为三部分：一个eden,两个survivor。 工作过程是这样的：e区空间满了后，执行minor gc，存活下来的对象放入s0, 对s0仍会进行minor gc，存活下来的的对象放入s1中，对s1同样执行minor gc，依旧存活的对象就放入年老代中； 年老代满了之后会执行major gc，这个是stop the word模式，执行
  • CentOS-6.3安装配置JDK-8 gengzg centos
    JAVA_HOME=/usr/java/jdk1.8.0_45 JRE_HOME=/usr/java/jdk1.8.0_45/jre PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib export JAVA_HOME
  • 【转】关于web路径的获取方法 huangyc1210 Web路径
    假定你的web application 名称为news,你在浏览器中输入请求路径：  http://localhost:8080/news/main/list.jsp  则执行下面向行代码后打印出如下结果：  1、 System.out.println(request.getContextPath()); //可返回站点的根路径。也就是项
  • php里获取第一个中文首字母并排序 远去的渡口 数据结构PHP
    很久没来更新博客了，还是觉得工作需要多总结的好。今天来更新一个自己认为比较有成就的问题吧。 最近在做储值结算，需求里结算首页需要按门店的首字母A-Z排序。我的数据结构原本是这样的： Array ( [0] => Array ( [sid] => 2885842 [recetcstoredpay] =&g
  • java内部类 hm4123660 java内部类匿名内部类成员内部类方法内部类
         　在Java中，可以将一个类定义在另一个类里面或者一个方法里面，这样的类称为内部类。内部类仍然是一个独立的类，在编译之后内部类会被编译成独立的.class文件，但是前面冠以外部类的类名和$符号。内部类可以间接解决多继承问题,可以使用内部类继承一个类，外部类继承一个类，实现多继承。      &nb
  • Caused by: java.lang.IncompatibleClassChangeError: class org.hibernate.cfg.Exten zhb8015
    maven pom.xml关于hibernate的配置和异常信息如下，查了好多资料，问题还是没有解决。只知道是包冲突，就是不知道是哪个包....遇到这个问题的分享下是怎么解决的。。   maven pom:   <dependency> <groupId>org.hibernate</groupId> <ar
  • Spark 性能相关参数配置详解－任务调度篇 Stark_Summer sparkcachecpu任务调度yarn
    随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化。   由于篇幅较长，所以在这里分篇组织，如果要看最新完整的网页版内容，可以戳这里：http://spark-config.readthedocs.org/，主要是便
  • css3滤镜 wangkeheng htmlcss
    经常看到一些网站的底部有一些灰色的图标，鼠标移入的时候会变亮，开始以为是js操作src或者bg呢，搜索了一下，发现了一个更好的方法：通过css3的滤镜方法。 html代码： <a href='' class='icon'><img src='utv.jpg' /></a> css代码： .icon{-webkit-filter: graysc
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他