前端旧项目(原生+jq)接手心得.一

烦人的函数变量,怎么梳理清楚.

1.先找到入口函数

大的旧项目, 不用找整个项目的入口函数,
找到某一个具体模块或页面的入口文件, 看函数调用

2.当前文件内部的函数引用

• 某个页面的开始函数多半是页面的渲染, 按钮绑定事件.
• 找到入口函数A, 它又引入其他函数B的调用, 就去找B的声明函数解读, 又引入C函数,再找C的声明函数进行解读.
• 一层层的函数引用向内解读, 直到当前的函数没在引入其他的变量或函数, 就剩基本js逻辑时, 当前这个函数链就结束, 接着回到初始化函数向下解读.

3.其他文件函数引入

• 引入其他函数, 多半会在本文件开头进行引入, 赋值/解构 出变量
• 在本文件中使用, 会以变量的某个属性来调用, 或者new构造函数, 看这个外部函数定义的不同而不同.

4.无头函数在本文中使用

• 我叫他们 孤儿函数: 在本文件某个地方突然使用. 也不知道是在哪里定义的全局变量, 本文件查找也没发现定义.
• 孤儿1: 应该在整个项目公共存放js的地方, 使用 function abc() {} 定义的 abc全局函数, 这样就能在本文件中直接调用 abc.getdata() 等方法
• 孤儿2: 在html文件中使用 script 标签引入的插件. 公共的html文件, 或者当前页面独有的html引入的 js 文件 ; 这种多半是引入的第三方插件, 在本文中会以凭空出现 UE.getEditor(‘container’)(百度富文本编辑器)这样代码出现. 这样就要看看是不是是html引入了相关插件.

5.无调用函数执行

• 函数在本文件AA.js中定义了, 但是根本就没有在本文件中其他地方调用
• 但是神奇的是有时该函数还会执行.
• 有这种情况: A11函数的内部B函数被调用, A11函数没被调用过, B函数则没在其他地方被调用. 但是程序运行, A11函数内部不执行, B函数执行.
• 原因: 是因为在其他的js文件CC.js中, 能通过方法直接拿到当前文件AA.js的对象实例(当然有个地方书写了这个方法), 而在CC.js中直接调用了AA.js中的B函数. 使其执行.