【读书笔记】JavaScript代码的组织

最新推荐文章于 2024-07-24 11:09:48 发布

panda409

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量269

点赞数

分类专栏： JavaScript 文章标签： javascript 组织-前后端分离

本文链接：https://blog.csdn.net/panda409/article/details/52460250

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

《编写高质量代码——Web前端开发修炼之道》

1、页面上的许多JavaScript需要有效的组织起来，才不会显得杂乱无章。
根据职能可以划分为两种，框架部分和应用部分。
定义一个function init(){}，将应用部分代码包含进来：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用命名空间</title>
</head>
<body>
    <div>XXXXXXXXXXX</div>

    <script type="text/javascript">
        var GLOBAL = {};
        GLOBAL.namespace = function(str){

            var arr=str.split("."),
            o=GLOBAL;
            console.log(arr);
            for(i=(arr[0]==="GLOBAL")?1:0;i<arr.length;i++){

                o[arr[i]]=o[arr[i]]||{};
                o=o[arr[i]];

            }
        };
        function init(){
            (function(){
               var a = 123,b = "hello world";
               GLOBAL.namespace("A.CAT.CAT1");
               GLOBAL.namespace("A.CAT.DOG3");
            })();

            (function(){
                console.log(GLOBAL);

            })();
        }
    </script>
</body>
</html>

2、window.onload 的优缺点
优点：即使是script程序写在dom节点之前也没有问题。
缺点：网页内元素全部加载完毕才会触发onload事件，如果加载时间很长，script程序要等待很久才能够执行！

我们可以使用js框架的DOMReady，只监测dom节点是否生成，不关心节点的内容。
对于前面的init函数：
jQuery中采用$(document).ready(init);
YUI中采用YAHOO.util.Event.onDOMReady(init);
也可以用原生js：
直接init(); //= = 好吧

3、最后一个问题，就是本书中所提到的，网站的头部和尾部通常会做成单独的文件，用服务器端语言include到网页中。
头部：存放框架部分
尾部：存放init()的调用，要判断是否定义了init函数
主题：存放应用部门，再用funtion init()将其包含

PS:网站中在服务器端而不是前端包含头部尾部
这个问题参考segmentfault中的回答：
https://segmentfault.com/q/1010000003960406

帖子中有个前后端分离的概念很重要，也是我一直想知道的：

前后端分离是指：后端（Server）负责 Model 层，提供数据，而前端（Browser）负责 Controller 和 View 层，负责将数据渲染。

也就是说：所谓的前后端分离，分离的是数据，前端只是有一个骨架，浏览器加载页面之后，脚本会向服务器拉取数据。一个较常见的例子便是SPA（Single Page Application，单页应用）。

panda409

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【读书笔记】JavaScript代码的组织

《编写高质量代码——Web前端开发修炼之道》1、页面上的许多JavaScript需要有效的组织起来，才不会显得杂乱无章。根据职能可以划分为两种，框架部分和应用部分。定义一个function init(){}，将应用部分代码包含进来：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用命
复制链接

扫一扫