zoukankan      html  css  js  c++  java
  • 学习单页面应用1-4章总结

    《单页面web应用 JavaScript从前端到后端》这本书是一本教读者怎样将js模块化,也就是前端同学们常说的模块化思想,变量避免全局污染以及将功能分块管理。

    那么应该怎么开始呢?

    1. 确定要做页面的聊天滑块

    2. 进行页面结构的简单设计,确定将聊天滑块放在被关注率和点击率最高的右下角

    3. 确定滑块需要实现的功能

    4. 当打开页面的时候滑块处于最小化

    5. 当点击滑块时,滑块实现最小化和最大化之间的切换

    接下来的事情:单页应用的初步试探

    js文件结构的确定:

    • 确定js的入口文件spa.js

    • 确定spa.shell.js核心的js文件,可以调用应用中的任何子模块,比如接下来所说的spa.chat.js,但是的子模块之间是不可以随意调用的。

    • 那接下来就是实现具体功能的模块spa.chat.js

    来一张比较清晰的线框图:
    图片标题

    图上清楚的显示shell是核心的js,chat是真正分离出来的功能块,在chat中是处理聊天滑块的文件。

    这样其实架子就算是搭起来了,我们就可以开始码代码啦啦啦啦~~~~

    滑块代码直接放到chat中就可以了,前边已经提到,这种模块思想中有避免变量污染全局,所以每一个功能模块都有自己的命名空间。也就是,spa,spa.shell,spa.chat。

    具体到代码

    总体来说,每个文件中的代码都有配置,初始化的功能,作者已经给出,配置使用configMap,初始化使用initModule,当开始书写代码的时候,首先要确定在此命名空间下中需要的变量(当然也包括函数变量名称),要一次提前声明好。这样在每个文件中的代码也会清晰的展现。
    比如:

    • 变量区域

    • 公共方法区域

    • 公共的工具区域

    • 事件方法区域

    • 初始化区域

    这样每个js文件都是这样的布局,当文件越来越复杂的时候,前端的代码会越来越好写,而且可读性很高。

  • 相关阅读:
    关于 MySQL int tinyint 类型的那点事
    PHP日期、时间戳相关的小程序
    [leedcode 236] Lowest Common Ancestor of a Binary Tree
    [leedcode 235] Lowest Common Ancestor of a Binary Search Tree
    [leedcode 234] Palindrome Linked List
    [leedcode 233] Number of Digit One
    [leedcode 232] Implement Queue using Stacks
    [leedcode 231] Power of Two
    [leedcode 230] Kth Smallest Element in a BST
    [leedcode 229] Majority Element II
  • 原文地址:https://www.cnblogs.com/10manongit/p/12666913.html
Copyright © 2011-2022 走看看