• [原]《Web前端开发修炼之道》读书笔记JavaScript部分


    JavaScript的分层概念

    为了使代码更清晰,减少冗余,提高代码重用率,和css分层一样:

    base层:最低端,给common层和page层提供接口的,两个职责:1:不同浏览器之间js的差异提供统一接口;2:扩展js语言底层提供的接口。

    common层:提供可复用的组件,和页面内具体功能无关。common层的功能是给page层用的。

    page层:最顶端,该层主要是完成各个页面内的功能需求。

    良好的编程习惯

    命名空间和匿名函数的使用

    避免JS冲突,避免全局变量泛滥,划分模块。

    生成命名空间是一个很常用的功能,可以将其封装为一个函数。

    var GLOBAL = {};
    GLOBAL.namespace = function(str) {
      var arr = str.split("."), o=GLOBAL;
      for(var i = (arr[0]=="GLOBAL") ? 1 : 0;  i<arr.length;  i++){
        o[arr[i]] = o[arr[i]] || {};
        o = o[arr[i]];
      }
    }    
    
    //调用
    GLOBAL.namespace("A.DOG");
    GLOABL.A.DOG.name = "wangcai";
    

    给程序一个入口

    特别重要的一点,直接关系到代码的可读性。

    CSS放在头部,JS放在尾部

    大家都知道,再啰嗦一遍,浏览器加载网页,加载到JS时,由于脚本比较多,而html代码还没有加载,这是页面会显示空白,脚本阻塞了html的加载,等到毫不容易加载完成了,有时候会发现这些网页元素没有样式,所以一个好的习惯是,CSS放在页头,JS放在页尾(先加载css,再加载html,再加载js.) 这样就能适时的将界面呈现给用户,减少页面空白的时间。

    添加注释

    形成有规律的代码注释风格,对代码的维护和修改有很大的帮助。

    • 公共组件、插件注释,需要在文件头部加注释

    /**

    * 文件用途说明

    * 作者日期

    * 制作日期

    **/

    • 大的模块注释方法

    //========================

    // 代码用途

    //========================

    • 小注释

    //代码说明

    注释独占一行,不要再代码后同一行内加注释

    编程适用技巧

    • 保持弹性,适应变化
    • 可复用性,避免产生副作用
    • 通过传参实现定制,用hash散列对象传参
    • 控制this关键字的指向
    • 预留回调借口
    • DRY原则,don’t repeat yourself,相同的代码只写一次,然后再多处引用,提高重用率,减少代码量,提高代码的可维护性。

    系列知识链接

    [原]《Web前端开发修炼之道》-读书笔记CSS部分

    [原]《Web前端开发修炼之道》-读书笔记HTML部分

    [原]JavaScript必备知识系列

  • 相关阅读:
    C语言资料分享
    vue子组件添加事件无效解决
    vue-cli3 vue动画 打包后不生效解决
    setTimeOut定时器实现数组内容循环获取
    echart 之仪表盘 动态分段颜色实现
    elementUI table树默认箭头修改
    《二》打包发布工程-README.md编辑
    《一》打包发布工程--npm 打包发布js库篇
    npm打包发布js库包npm ERR! 403 Forbidden
    安装nrm 后执行报错TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string
  • 原文地址:https://www.cnblogs.com/purediy/p/2761156.html
Copyright © 2020-2023  润新知