javascript Uncaught ReferenceError: template is not defined 函数未定义

目录

1. 情况1

2. 情况2，

3. 写法示例：

（一）jQuery入口函数的三种写法：

（二）原生onload的写法

（三）原生DOMContentLoaded写法

---

1. 情况1

html页面有script标签1，里想要调用函数template，

同时在html页面还调用了其它的script文件，称为script标签2，函数在里面这个script标签如果没有写在script标签1的上面， 那么久就会报错

    <script>
        var data = { name: '李治航', age: 18, gender: '男', address: '浙农林' };

        var htmlStr = template('content', data);

        document.querySelector('#user-tpl').innerHTML = htmlStr;
    </script>

    <script>
        function template(id, data) {
            // 5.1 写str字符串
            var str = document.getElementById(id).innerHTML;
            // 5.2 写正则表达式
            var pattern = /{{\s*([a-zA-Z]+)\s*}}/;
            // 5.3 声明一个变量为null
            var patternResult = null;
            // 5.4 进行while判断
            while (patternResult = pattern.exec(str)) {
                // 5.5 replace替换
                str = str.replace(patternResult[0], data[patternResult[1]])
            }
            return str;
        }

像这样，函数未定义就会报错

2. 情况2，

如果script标签2（有函数的）写在script标签1上面，逻辑上是可以。可是，script标签是外部引用，且里面用了比如jQuery的入口函数，或者是原生的DOMContentLoaded，或者是onload等，都会报错，

这些都会等页面的基本DOM元素执行完，再去调用外部的js文件。

3. 延伸：顺带提一下，jQuery的ready、入口函数和原生js 的load、DOMContentLoaded的区别：

方法/事件	作用
jQuery  ready	1. 也叫作入口函数。 2. 在页面的基本的DOM元素加载完，就执行。 3. 一个页面可以写很多个，每个都会生效。
原生 onload	1. 页面的html元素、css文件、外部链接（视频、图片）都加载完，再执行load事件里面的代码，很慢。 2. 一个页面只能写一个，如果写了多个，最后一个生效。
原生 DOMContentLoaded	1. 和js的入口函数类似，只会等页面基本的DOM元素加载完，不包括css文件、外部链接（视频、图片）。

3. 写法示例：

（一）jQuery入口函数的三种写法：

1. （强烈推荐-企业级）:

$(function() {
    console.log(1);
}) 

2.  把上面情况的$替换为jQuery

备注：为什么可以这样替换？$和jQuery是通用的，且$是jQuery的顶级对象。（类似于，window是BOM的顶级对象；document是DOM的顶级对象）

jQuery(function(){
    console.log(1);
})

3. ready:

$(document).ready(function () {
    console.log(1);
})

4. 把第二种的$替换为jQuery  

jQuery(document).ready(function() {
    alert(1);
})

（二）原生onload的写法

document.onload = function () {
    console.log(1);
}

（三）原生DOMContentLoaded写法

document.DOMContentLoaded = function () {
   console.log(1);
} 

结尾：

学习id： 201903090124-16

现在是大三学生，学习到了前后端交互的git阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。