方便的组件:执行 js 组件使用教学

前言

随着前端框架的使用越来越多,开发难度也在不断的增加,很多时候单纯的用获取文本组件无法获得我们想要的数据,而执行 js 组件能解决许多的问题。

一、题目

现在有一道题,要求用设计器判断目标网站https://www.baidu.com/ 中,热榜下新闻的条数。
方便的组件:执行 js 组件使用教学

二、常规解题思路(遍历)

对网页源码进行分析我们得出每个新闻标题的 css-selector 为:#hotsearch-content-wrapper>li:nth-of-type(下标)。
由此我们可以设计流程获取新闻的条数,如下图:

方便的组件:执行 js 组件使用教学

三、在 Chrome 上使用执行 js 组件

方便的组件:执行 js 组件使用教学

1. 执行的 js 代码

"function test(){\
            temp = document.getElementById('hotsearch-content-wrapper');\
            lis = temp.getElementsByTagName('li');\
            linum = lis.length;\
            alert(linum); \
            return(linum);\
}"

2. 需要注意的点

由上可见该 js 代码为一个 JavaScript 函数,在 chrome 运行执行 js 组件,会自动执行该函数,组件返回的值为函数的返回值。

四、在 IE 上使用执行 js 组件

方便的组件:执行 js 组件使用教学

1. 执行的 js 代码

"(function test(){\
            temp = document.getElementById('hotsearch-content-wrapper');\
            lis = temp.getElementsByTagName('li');\
            linum = lis.length;\
            alert(linum); \
            return(linum);\
}())"

2. 需要注意的点

在 IE 运行执行 js 组件,并不会自动执行该函数,所以 (function test(){}()) 这种写法是为了让该函数被执行。 而且需要注意的是执行后组件并不会返回值,返回的是 None。

五、总结

  1. 执行 js 组件的参数 js 代码为字符串类型,且大部分时候编写的 JS 代码会很长,需要在每个换行的末尾加 \,否则会报错。

  2. 在 Chrome 运行执行 js 组件时,如果运行的 js 代码为一个 JavaScript 函数,组件会自动执行该函数,不需要另外单独去调用,且组件返回的值为函数的返回值。

  3. 在 IE 运行执行 js 组件时,如果运行的 js 代码为一个 JavaScript 函数,组件并不会自动执行该函数,所以 (function 函数名(){}()) 这种写法是为了让该函数被调用执行。 而且需要注意的是执行后组件并不会返回值,返回的是 None。