Parser解析器

最新推荐文章于 2024-05-30 09:50:12 发布
最新推荐文章于 2024-05-30 09:50:12 发布
阅读量1k 收藏
点赞数
分类专栏： # EasyUI 文章标签： easyui jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011743790/article/details/125147192
版权

疑问

  1. 为什么我们在页面html中编写class为easyui-xxx开头的组件，页面渲染后会自动展现对应的组件样式和功能？
  2. 为什么我们在页面加载完成后通过事件方法添加的带有easyui-xxx的网页组件不生效？

认识Parser解析器

  • 它是EasyUI的基础组件，支撑整个EasyUI框架能够正常使用。
  • 在网页渲染过程中，自动解析网页中定义的EasyUI组件。
  • 在网页结构变化时，能够手动去解析相关的EasyUI组件。

源码分析

在这里插入图片描述

  • 源码位于easyui包目录下的src目录中。
  • 因为easyui依赖于jQuery包，所以所有的方法、对象都追加到jQuery对象的上或原型链上。

1. easyui对象

$.easyui = {
    //获取元素在数组中的位置
    indexOfArray: function(a, o, id){},
    
    //移除数组元素
    removeArrayItem: function(a, o, id){},
    
    //添加或更新数组元素
    addArrayItem: function(a, o, r){},
    
    //获取数组中元素
    getArrayItem: function(a, o, id){},
    
    //遍历数组元素
    forEach: function(data, deep, callback){}
};

1.1 indexOfArray方法

参数信息

  1. 数组对象。
  2. 需要获取下标的数组元素（基本数据类型）或需要获取下标的数组元素的属性名（对象）。
  3. 若需要获取下标的数组元素是对象，则该值为对象对应判断属性的值。

返回值

  • 元素在数组中的下标位置。
示例一：基本数据类型数组
var items = [12, 34, 45, "李四"];
var index = $.easyui.indexOfArray(items, "李四");//3

基本数据类型使用时，只需要传入数组对象和需要获取下标的数据值。

示例二：对象数组，获取对象所在数组的下标值
var items = [{
    name: "张三",
    age: 12
}, {
    name: "李四",
    age: 16
}, {
    name: "王五",
    age: 32
}];
var index = $.easyui.indexOfArray(items, "name", "李四"); //1

1.2 getArrayItem方法

参数信息

  1. 数组对象。
  2. 需要获取下标的数组元素（基本数据类型）或需要获取下标的数组元素的属性名（对象）。
  3. 若需要获取下标的数组元素是对象，则该值为对象对应判断属性的值。

返回值

  • 获取存在于数组中的元素信息。
示例：根据数组元素对象的指定属性名值获取指定的数组元素对象
var items = [{
    name: "张三",
    age: 12
}, {
    name: "李四",
    age: 16
}, {
    name: "王五",
    age: 32
}];
var obj = $.easyui.getArrayItem(items, "name", "李四");//{name: "李四", age: 16}

1.3 addArrayItem方法

参数信息

  1. 数组对象。
  2. 需要获取下标的数组元素（基本数据类型）或需要获取下标的数组元素的属性名（对象）。
  3. 要插入数组的对象值。
示例一：向数组中插入元素对象,若存在，则更新对象
var items = [{
    name: "张三",
    age: 12
}, {
    name: "李四",
    age: 16
}, {
    name: "王五",
    age: 32
}];
$.easyui.addArrayItem(items, "name", {
    name: "赵云",
    age: 40
});

在这里插入图片描述

var items = [{
    name: "张三",
    age: 12
}, {
    name: "李四",
    age: 16
}, {
    name: "王五",
    age: 32
}];
$.easyui.addArrayItem(items, "name", {
    name: "李四",
    age: 40
});

在这里插入图片描述

1.4 removeArrayItem方法

参数信息

  1. 数组对象。
  2. 要移除数组元素值（基本类型数据）或移除对象的某个属性名
  3. 要移除对象的某个属性名对应的值。
示例一：移除数组中对象元素
var items = [{
    name: "张三",
    age: 12
}, {
    name: "李四",
    age: 16
}, {
    name: "王五",
    age: 32
}];
$.easyui.removeArrayItem(items, "name", "李四");

在这里插入图片描述

示例二：移除数组中除字符串外基本数据类型元素
var items = [{
    name: "张三",
    age: 12
}, {
    name: "李四",
    age: 16
}, {
    name: "王五",
    age: 32
}, 12];
$.easyui.removeArrayItem(items, 12);

在这里插入图片描述

注：不能移除字符串类型元素（第二个参数若为字符串，只能是数组元素对象的某个属性值必须配合第三个元素使用）。

1.5 forEach方法

参数信息

  1. 要遍历的数组
  2. 是否深度遍历，true-深度遍历，false-只遍历第一层。
  3. 遍历数组时的回调方法，参数为数组元素对象，返回false可阻止继续遍历。
示例一：遍历并筛选出符合条件元素（不深度遍历）
var items = [{
    name: "张三",
    age: 12
}, {
    name: "李四",
    age: 16
}, {
    name: "王五",
    age: 32
}, {
    name: "赵云",
    age: 25,
    children: [{
        name: "王麻子",
        age: 24
    }]
}];
var resultItems = [];
$.easyui.forEach(items, false, function(node) {
    if (node.age < 25) {
        resultItems.push(node);
    }
});
console.log(resultItems);

在这里插入图片描述

示例二：遍历并筛选出符合条件元素（深度遍历）
var items = [{
    name: "张三",
    age: 12
}, {
    name: "李四",
    age: 16
}, {
    name: "王五",
    age: 32
}, {
    name: "赵云",
    age: 25,
    children: [{
        name: "王麻子",
        age: 24
    }]
}];
var resultItems = [];
$.easyui.forEach(items, true, function(node) {
    if (node.age < 25) {
        resultItems.push(node);
    }
});
console.log(resultItems);

注意：该方法的第二个参数。

在这里插入图片描述

2. parser对象

// 是否自动解析
auto: true,
// 空函数
emptyFn: function(){},
// 解析完成后回调方法，一般用于重写
onComplete: function(context){},
// 组件名数组，用来识别组件
plugins:[],
// 解析标签
parse: function(context){},
// 解析高度或宽度值	
parseValue: function(property, value, parent, delta){},
// 解析组件的属性
parseOptions: function(target, properties){},
// 解析并设置网页盒子模型或固定定位
parseVars: function(){}

2.1 emptyFn方法

待使用的空方法。

2.2 onComplete方法

解析指定选择器的网页元素内easyui组件后的回调方法。

参数信息

  1. context
    • 传入的选择器字符串；例如：‘#xxx’、'.xxx’等
示例一：解析整个网页
var htm = "<div id=\"mypanel\" class=\"easyui-panel\" title=\"Basic Panel\" style=\"width: 400px; height: 200px;\"></div>";

$("body").append(htm);

$.parser.onComplete = function(context) {
    console.log("解析完成！");
    console.log(context);
}

$.parser.parse();
  • 若parse方法不传参数表示解析整个网页。
  • parse方法可传入选择器字符串，表示解析其下子内容。

2.3 plugins组件数组

  • easyui里面所有组件名都在此定义，在页面解析组件时会判断是否是easyui组件来控制是否解析组件。
  • 若我们自定义组件，必须在此插件数组中追加组件名，不然在页面中无法自动解析组件。
组件集合概述
序号组件名描述
1draggable拖动
2droppable放置
3resizable调整大小
4pagination分页
5tooltip提示框
6linkbutton按钮
7menu菜单
8sidemenu侧栏菜单
9menubutton菜单按钮
10splitbutton分割按钮
11switchbutton开关按钮
12progressbar进度条
13radiobutton单选按钮
14checkbox复选框
15tree树
16textbox文本框
17passwordbox密码框
18maskedbox掩码框
19filebox文本框
20combo组合
21combobox组合框
22combotree组合树
23combogrid组合网格
24combotreegrid树形表格下拉框
25tagbox标签框
26numberbox数字框
27validatebox验证框
28searchbox搜索框
29spinner调整器
30numberspinner数字调整器
31timespinner时间调整器
32datetimespinner日期时间调整器
33calendar日历控件
34datebox日期控件
35datetimebox日期时间控件
36timepicker时间选择器
37slider滑块
38layout布局组件
39panel面板组件
40datagrid表格
41propertygrid属性表格
42treegrid树形表格
43datalist数据列表
44tabs选项卡
45accordion手风琴
46window弹框
47dialog对话框
48form表单

2.4 parseVars方法

用于控制easyui框架在流程里面的解析流程。

parseVars: function() {
    // 校验网页的盒子模型，盒子的width是否包含内边距padding
    var d = $('<div style="position:absolute;top:-1000px;width:100px;height:100px;padding:5px"></div>').appendTo('body');
    $._boxModel = d.outerWidth() != 100;
    d.remove();
    d = $('<div style="position:fixed"></div>').appendTo('body');
    $._positionFixed = (d.css('position') == 'fixed');
    d.remove();
}
  • $._boxModel为false，表示盒子的width包含了border宽度和padding的宽度。
  • $._positionFixed为true，表示是否支持固定定位，true表示支持，false表示不支持。

2.5 parseOptions方法

用于解析easyui组件的data-options相关属性。

parseOptions: function(target, properties) {
    var t = $(target);
    var options = {};

    //1. 判断标签中是否包含data-options属性设置，若有则直接解析设置的属性放置到options对象中。
    var s = $.trim(t.attr('data-options'));
    if (s) {
        if (s.substring(0, 1) != '{') {
            s = '{' + s + '}';
        }
        options = (new Function('return ' + s))();
    }
    
    //2. 解析标签中style属性中有关像素大小设置的属性，并放置到options对象中
    $.map(['width', 'height', 'left', 'top', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight'], function(p) {
        var pv = $.trim(target.style[p] || '');
        if (pv) {
            if (pv.indexOf('%') == -1) {
                pv = parseInt(pv);
                if (isNaN(pv)) {
                    pv = undefined;
                }
            }
            options[p] = pv;
        }
    });
	//3. 解析标签中其他属性，并将这些属性设置以对应基础类型放置到options对象中
    if (properties) {
        var opts = {};
        for (var i = 0; i < properties.length; i++) {
            var pp = properties[i];
            if (typeof pp == 'string') {
                opts[pp] = t.attr(pp);
            } else {
                for (var name in pp) {
                    var type = pp[name];
                    if (type == 'boolean') {
                        opts[name] = t.attr(name) ? (t.attr(name) == 'true') : undefined;
                    } else if (type == 'number') {
                        opts[name] = t.attr(name) == '0' ? 0 : parseFloat(t.attr(name)) || undefined;
                    }
                }
            }
        }
        $.extend(options, opts);
    }
    
    //4. 返回解析后的组件属性对象
    return options;
}
示例一：解析标签的相关属性，获取easyui组件需要的属性值
var htm = "<div id=\"mypanel\" class=\"easyui-panel\" title=\"基础面板\" style=\"width:700px;height:200px; padding:10px;\" data-options=\"content:'面板内容'\"></div>";
            $("body").append(htm);

var options = $.parser.parseOptions(document.querySelector('#mypanel'));
console.log(options);

在这里插入图片描述

注：参数的target需要传入js原生选择器获取的值。

2.6 parseValue方法

// property -- 属性名，例如：width
// value	-- 属性值，例如：100%
// parent	-- 该元素的父元素
// delta	-- 偏移值
parseValue: function(property, value, parent, delta) {
    // 1. 若偏移值不设置，则为0
    delta = delta || 0;
    var v = $.trim(String(value || ''));
    // 2. 获取值的后缀符号，如果是%，表示相对值，计算像素值
    var endchar = v.substr(v.length - 1, 1);
    if (endchar == '%') {
        v = parseFloat(v.substr(0, v.length - 1));
        // 3. 判断是设置width宽度还是height高度，通过父元素来获取
        if (property.toLowerCase().indexOf('width') >= 0) {
            delta += parent[0].offsetWidth - parent[0].clientWidth;
            v = Math.floor((parent.width() - delta) * v / 100.0);
        } else {
            delta += parent[0].offsetHeight - parent[0].clientHeight;
            v = Math.floor((parent.height() - delta) * v / 100.0);
        }
    } else {
        v = parseInt(v) || undefined;
    }
    // 4. 返回计算后的值
    return v;
}

认识clientWidth、offsetWidth的区别?

  • clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变
  • offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。
示例一：panel组件中使用示例

在这里插入图片描述

2.7 parse方法

解析指定元素或者整个网页body的easyui组件信息。

parse: function(context) {
    // 存放easyui组件名数组，元素结构为：{name: 组件名, jq: 对应的组件jq对象}
    var aa = [];
    
    // 1.遍历获取指定元素中的所有涉及到的easyui组件
    for (var i = 0; i < $.parser.plugins.length; i++) {
        var name = $.parser.plugins[i];
        var r = $('.easyui-' + name, context);
        if (r.length) {
            if (r[name]) {
                r.each(function() {
                    $(this)[name]($.data(this, 'options') || {});
                });
            } else {
                aa.push({ name: name, jq: r });
            }
        }
    }
    
    // 2. 通过easyloader组件载入对应的组件
    if (aa.length && window.easyloader) {
        var names = [];
        for (var i = 0; i < aa.length; i++) {
            names.push(aa[i].name);
        }
        easyloader.load(names, function() {
            for (var i = 0; i < aa.length; i++) {
                var name = aa[i].name;
                var jq = aa[i].jq;
                jq.each(function() {
                    $(this)[name]($.data(this, 'options') || {});
                });
            }
            
            // 3. 回调解析成功事件
            $.parser.onComplete.call($.parser, context);
        });
    } else {
        $.parser.onComplete.call($.parser, context);
    }
}
示例一：解析指定网页部分
<div id="mydiv"></div>
<script type="text/javascript">
    $(function() {
        var htm = "<div id=\"mypanel\" class=\"easyui-panel\" title=\"基础面板\" style=\"width:700px;height:200px; padding:10px;\" data-options=\"content:'面板内容'\"></div>";
        $("#mydiv").append(htm);

        $.parser.parse($("#mydiv"));
    });
</script>

注：只能解析指定元素其下子或孙子节点的网页元素。

示例二：解析整个网页
<div id="mydiv"></div>
<script type="text/javascript">
    $(function() {
        var htm = "<div id=\"mypanel\" class=\"easyui-panel\" title=\"基础面板\" style=\"width:700px;height:200px; padding:10px;\" data-options=\"content:'面板内容'\"></div>";
        $("#mydiv").append(htm);

        $.parser.parse();
    });
</script>

注：解析整个网页body里面的内容。

解析时机

在这里插入图片描述

在网页标签渲染完成后，easyloader简单加载器构建之前触发解析网页操作。

软件开发初学者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Parser 使用方法
BUPTer
05-01 4753
本文主要记录了在深度学习中，使用别人写的代码时，用来接收用户在命令行里指定传入模型参数的重要方法parser同时，本文也给出了简易的示例，方便读者快速开始（只想了解如何使用的话可以直接跳到3. 使用方法和4. 示例一份简单的使用说明参考文档参考博客。
【Python知识碎片】parser
xiuwenwubolo的博客
04-06 327
了解Python中的argparse模块
解析器（Parser）
最新发布
gitblog_00011的博客
05-30 258
解析器（Parser） 项目地址:https://gitcode.com/elm/parser 在编程中，正则表达式常常让人感到困惑和难以驾驭。而这个名为Parser的库提供了一个更清晰、更易用的替代方案，它能处理更多场景并使代码保持整洁。 1、项目介绍 Parser库的主要目标是： 让编写解析器变得尽可能简单且有趣。 生成卓越的错误信息。 保证较快的运行速度。 这一目标通过三个独特的概念实现...
openGauss学习—— parser.cpp 源码解读
XL_up的博客
10-13 106
函数的内部逻辑大致为：跳过查询语句前的空格和注释部分（注意注释后也可能有空格，所以需要再次去除空格），若此时查询语句的开头为一个分号，那么判断此为一句空查询，返回true，否则返回false。通过观察注释和具体的代码行为，我们不难理解这个函数的作用：对于多个查询语句所组成的查询语句块，指定位置顺序，取出对应顺序的单个查询语句。接下来循环体的作用是获取多个查询语句组成的语句块中由*stmt_num指定的那一条查询语句，如果获取成功，进行拷贝工作。功能描述：从多个查询语句组成的查询语句块中取出单个的查询语句。
【转载】玩转字节码文件，开发字节码解析器
ziya_anan的博客
11-19 246
带你用Java实现字节码文件解析器。什么是解析器？解析器干些什么？要怎么实现？解析的结果如何存储？有哪些需要注意的地方？Hotspot源码中有解析器吗？是哪个……是不是突然脑海中就蹦出来了这么多问题？么事，本文都会讲到
【Python】Parser通常用法
m0_44981123的博客
05-11 3106
Parser在Python程序中经常使用，使用前需要import argparse，简单来说argparse模块就是对参数进行设置。
jQuery EasyUI API 中文文档 - Parser 解析器
10-28
jQuery EasyUI API 中文文档 - Parser 解析器，使用jQuery EasyUI的朋友可以参考下。
Parser:解析器
03-29
解析器通常由两部分组成：词法分析器（Lexer）和语法分析器（Parser）。 1. 词法分析器：也称为扫描器，负责将源代码分解成一系列有意义的符号，这些符号称为词法单元或标记。Python的词法分析器遵循Python的语法...
jQuery EasyUI API 中文文档 – Parser 解析器
12-10
用法 代码如下: $.parser.parse(); // 解析整个页面 $.parser.parse(‘#cc’); // 解析某个具体节点 ...当解析器完成解析动作的时候触发。 方法 名称 参数 说明 $.parser.parse context 解析easyui组件。
Swagger 解析器的使用
07-13
Swagger 解析器 注意：如果您正在寻找 swagger-parser 1.X 和 OpenAPI 2.0，请参阅 v1 分支 注意：从 2.1.0 版开始，Swagger Parser 支持 OpenAPI 3.1；详情请参阅此页面
cron-parser:cron解析器
05-23
cron解析器 具有时区支持的cron表达式解析库。 例子： use chrono::{TimeZone, Utc};use chrono_tz::Europe::Lisbon;use cron_parser::parse;fn main() { if let Ok(next) = parse("*/5 * * * *", &Utc::now()) { ...
Parser.java
12-06
前缀表达式转后缀表达式，并实现从错误类型检测和输出错误地址
JsParser 开发人员写JS必备好工具
07-23
开发人员写JS必备好工具,可以时时检测出当前JS是否写的有问题，还能把JS的类及方法提取出来，左边可折叠，很好用的插件
扩展 HTMLParser 对自定义标签的处理能力
在水一方
02-27 1349
本文阐述如何利用 HTMLParser 项目对 HTML 或者 WML 文档中出现的一些特殊的或者是自定义的标签进行处理。HTMLParser 是一个用来解析 HTML 文档的开放源码项目，它具有小巧、快速、使用简单的特点以及拥有强大的功能。对该项目还不了解的朋友可以参照 2004 年三月份我发表的文章--《从HTML中攫取你所需的信息》，这篇文章介绍如何通过 HTMLParser 来提取 H
解析器
weixin_30511107的博客
07-17 159
解析器 作用 根据请求头 content-type 选择对应的解析器对请求体内容进行处理。 有application/json，x-www-form-urlencoded，form-data等格式 注：一般不需要改动，项目最开始全局进行配置就行 settings配置文件 REST_FRAMEWORK = { 'DEFAULT_PARSER_CLASSES':[ 'rest_...
解析器--软件构造
weixin_55351666的博客
06-10 108
软件构造解析器内容
FFMPEG 之 parser 一文搞懂FFMPEG 分帧、组帧Framimg
intel1985的专栏
01-20 3374
FFMPEG 之 parse_packet 前言 现实世界中的声音图像采样后经过音视频压缩技术压缩而成的码流称为ES流（Elementary Stream），ES流中包含有解码器解码文件必须的信息，比如视频宽高，采样格式，声音的采样率，声道等等。为了方便传输，播放，将音视频ES数据打包到一个文件中，这个文件称之为音视频ES流的封装，常见的音视频封装格式有：MP3，MP4，AVI，MKV，FLV，RMVB，TS，PS等等。 例外也时有发生，有些文件在打包的时候，只包含了ES流，无封装格式...
FFmpeg的H.264解码器源代码简单分析：解析器（Parser）部分
热门推荐
雷霄骅(leixiaohua1020)的专栏
04-12 6万+
本文继续分析FFmpeg中libavcodec的H.264解码器（H.264 Decoder）。上篇文章概述了FFmpeg中H.264解码器的结构；从这篇文章开始，具体研究H.264解码器的源代码。本文分析H.264解码器中解析器（Parser）部分的源代码。这部分的代码用于分割H.264的NALU，并且解析SPS、PPS、SEI等信息。解析H.264码流（对应AVCodecParser结构体中的函数）和解码H.264码流（对应AVCodec结构体中的函数）的时候都会调用该部分的代码完成相应的功能。
FFmpeg的HEVC解码器源代码简单分析：解析器（Parser）部分
雷霄骅(leixiaohua1020)的专栏
06-09 2万+
上篇文章概述了FFmpeg中HEVC（H.265）解码器的结构；从这篇文章开始，具体研究HEVC解码器的源代码。本文分析HEVC解码器中解析器（Parser）部分的源代码。这部分的代码用于分割HEVC的NALU，并且解析SPS、PPS、SEI等信息。解析HEVC码流（对应AVCodecParser结构体中的函数）和解码HEVC码流（对应AVCodec结构体中的函数）的时候都会调用该部分的代码完成相
1.读取该html文本数据； 2.提取出html中所有的超链接（）的文本和段落（ ）的文本，所有文本以换行符为间隔，组成一个字符串； 3.按student_answer_path生成文件，并将第2步产生的长字符串写入文件中，编码设置为UTF-8。 提示： # 读取和解析html的方式有多种，例如lxml和BeautifulSoup from lxml import etree parser = etree.HTMLParser(encoding="utf-8") # 定义解析器 html = etree.parse(html_path, parser=parser) # 解析路径为html_path的html文本 result = etree.tostring(html, pretty_print=True) # 获取html文本，转换成字符串 from bs4 import BeautifulSoup f = open(html_path,'r',encoding='utf-8') soup = BeautifulSoup(f,'html.parser') # 使用html.parser解析器解析文件f soup.a.get_text() # 获取a中的文本内容，转换成字符串 soup.a.attrs # 获取a所有的属性和属性值，返回一个字典 soup.find_all(name, attrs, recursive, text, **kwargs) # 搜索当前tag的所有tag子节点，并判断是否符合过滤器的条件
05-26
soup = BeautifulSoup(html, 'html.parser') # 提取超链接和段落文本 text = "" for a in soup.find_all('a'): text += a.get_text() + "\n" for p in soup.find_all('p'): text += p.get_text() + "\n" # 写入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值