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

前言

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

一、题目

现在有一道题，要求用设计器判断目标网站https://www.baidu.com/ 中，热榜下新闻的条数。

二、常规解题思路（遍历）

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

三、在 Chrome 上使用执行 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 组件

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。