zoukankan      html  css  js  c++  java
  • 前端模块化

       

    前端模块化

    为什么要使用的模块化开发

      1.之前我们所用的传统开发将整个网页的效果都写到一个js文件,这样或导致耦合度过高,代码关联性太强,不便于后期维护,还会造成全局污染

      2.功能化的js文件会导致发生的请求次数过多,依赖模糊,也难以维护

      3.模块化开发会减少代码的关联度,部署方便,按需加载,避免命名冲突,容易维护

    js 模块化提供的三种规范

      1. commonjs 规范,代表 nodejs 适合后台开发,因为是同步的,服务器运行快,等待时间不长,comminjs 不适合用于前端,前端的客户端是浏览器,浏览器追求异步加载,浏览器不能等待太长时间

      2. 前端模块规范:amd 代表是 requirejs 是异步的

      3. 第三个模块化规范:es6 

      有很多的前端框架都是 amd 规范,jQuery  angular等

      模块化的操作

      commonjs 的操作

        所有的模块化,都是两个方向;

        暴露接口 和 引入模块

        module.exports={}  暴露的是一个叫 exports 的对象

        require()  引入一个模块

      这是后台的规范,在 node 环境 可以直接运行,但是在在客户端不能直接运行(会报错:require is not defined ),需要对文件进行打包编译:webpack,gulp

      

      浏览器是一个对象,在 window 对象

      在 window 中查找

      方法也是属性,属性值是 function 

      作用域:

        当执行 js 代码时,浏览器会给一个全局环境,叫window,作用域分两部分,一个是内存部分,一个是执行部分,代码从上到下执行,碰到变量,

      就会在 window 中(内存部分) 查找这个变量是否存在,存在便看赋值了没有,赋值了便是后面的值,没赋值 undefined , 没声明这个变量 xxx is not defined  

     

      拓展:

        var a  

        var a 就是声明的一个变量a,本质就是浏览器往 window 上添加的一个属性 a 

      

      前端模块,不借鉴模块,自定义模块

      主文件的名字  app.js  main.js  index.js  的操作

      避免函数的命名冲突,采用自调用函数

        自调用函数执行时,会形成一个私有的作用域,对内部的变量进行保护的作用;

        暴露模块,需要后面的所有 js 文件都能访问这个模块,将该模块注册在 window 下面;

       AMD模块开发案例(一个轮播加一个tab切换):  

        

        app.html 里面的大致内容:

          

          轮播内容(swiper)

          

          tab切换:

          

        css样式:

        

        app.js

          

           里面js的内容     xh.js    

              yj.js

                  

           

     

          

  • 相关阅读:
    The best programmers are the quickest to Google
    NetBeans 时事通讯(刊号 # 117 Sep 16, 2010)
    Apache HttpClient 4.0.3 GA 发布
    warning LNK4070的解决办法
    看泡沫
    早秋精神
    NetBeans 时事通讯(刊号 # 117 Sep 16, 2010)
    Maven 3.0 RC1 发布
    关于类的数据成员的访问权限设计的一些思考
    看泡沫
  • 原文地址:https://www.cnblogs.com/gdqx/p/11136249.html
Copyright © 2011-2022 走看看