介绍
primo-explore-dom 是一个 npm 包，它提供了一组访问 Primo 新旧界面 DOM 元素的 API。它是在 Primo 新旧界面之间迁移的过程中开发的，旨在使开发人员更容易地编写与 Primo DOM 相关的代码。使用 primo-explore-dom 模块不需要了解 Primo 系统背景知识或者对公司架构有深入的理解。
这个 npm 包的学习对于想学习 Primo 系统或者底层前端技术的人而言有着指导性的意义。
安装
你需要在项目开发过程中安装 npm 包以便使用 Primo 系统的前端技术。
安装命令： npm install primo-explore-dom
安装成功之后，你需要使用它的一个子模块 primo-explore-dom/jQueryWidget，它是 primo-explore-dom 的核心部分。
使用
你需要引入 jquery 和 jquery-ui，以便使用 primo-explore-dom/jQueryWidget 子模块，jquery-ui 用完之后你可以删除掉。
<script src="/path/to/jquery.js"></script> <script src="/path/to/jquery-ui.js"></script> <script src="/path/to/primo-explore-dom.js"></script>
接着你需要在代码中构造 primaExploreDom 对象：
var primaExploreDom = new Primo.explore.Dom();
primoExploreDom 就是访问 Primo 系统的 DOM 元素对象。
API
find
使用 jQuery 的选择器查找 DOM 中的元素。
可视化界面示例：
代码中的使用示例：
primaExploreDom.find('.my-class'); // 查找 class 为 'my-class' 的元素
primaExploreDom.find('#my-id'); // 查找 id 为 'my-id' 的元素
primaExploreDom.find('input[name=my-name]'); // 查找 name 为 'my-name' 的 input 元素parentFromAttribute
从元素节点向上查找符合条件的最近一个祖先节点。
可视化界面示例：
代码中的使用示例：
primaExploreDom.parentFromAttribute(
primaExploreDom.$rootElement.find('.my-class'), // 查找的起始节点
'bulk-action', // 查询属性的名称
'display', // 属性的值
'list-item' // 祖先节点的标签名称
);getControlByName
根据名称获取 Primo 系统中控件元素。
可视化界面示例：
代码中的使用示例：
primaExploreDom.getControlByName('remove_library_item'); // 获取名称为 'remove_library_item' 的控件元素workAroundFirefoxProblem
修复 Firefox 浏览器中的 bug。
代码中的使用示例：
-- -------------------- ---- -------
-----------------------------------------
-------- --------- -
-- ---- ----
-- ------- -- -- ----- ------- ---- -- -------------------- ----------
-- ----- ------ -- ------- -- --------------------- -- ------- ---------- -- --- ----- -----
---------------------------- --------
--
--------------------- -- --- -----
--示例
下面的代码演示了如何使用 primo-explore-dom 这个 npm 包来访问 Primo 的搜索框，并向其中填充内容：
-- -------------------- ---- -------
--------- -----
------
------
------------ ------------
------- --------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------
--------
-------------------------- -- -
--- --------------- - --- --------------------
--- ----------- - -----------------------------------------------------
------------------------
------------------------------- -- --- ----
---
---------
-------
------
-------
-------总结
本文介绍了npm 包 primo-explore-dom 的使用方法及其相关的 API。尽管这个模块有一些局限性，但是对于 Primo 系统的前端技术的学习是具有指导意义的。
希望这篇文章对使用 primo-explore-dom 模块的开发人员有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005608681e8991b448debaf