zoukankan      html  css  js  c++  java
  • 模块化开发

    更多精彩文章:http://www.cnblogs.com/christineqing/

    =============== 通知:

    博主已迁至《掘金》码字,博客园可能以后不再更新,掘金地址:https://juejin.im/post/5a1a6a6551882534af25a86b  请多多关照!!

    -------------------在此谢过!-----------

    我介绍一下我关于模块化开发的理解,我主要从三个方面阐述我的观点:

    1.为什么要进行模块化开发?

    2.什么是模块化开发?

    3.如何使用模块化开发来开发项目?

    一、那么我们就从第一点进行解析,为什么要进行模块化开发?

         在实际工作中,相信大家都会遇到这样的问题,就是我自己测试好的代码和大家合并之后怎么

    就起冲突了呢?明明项目需要引入的文件都引入进来了,怎么还是缺少呢?这些问题总结起来

    就是命名空间冲突以及文件依赖加载顺序问题,但是在团队,尤其在几十,几百个页面的项目中,

    你是不会知道自己写的函数或变量是否与别人冲突的,那么我们应该怎么做呢?当出现问题时

    我们也不能重复去引入,因为我们开发的最基本的原则就是不要重复。还有当项目中有多处运用到

    同一个功能时,我们就该想,它是不是可以抽离开来,当需要的时候直接调用它呢?但是如果你

    之后的代码时依赖于它的,而你又忘了调用或者调用顺序出错,那么代码就会报各种错误。

    举个简单的例子:

    大家都知道bootstrap的js是依赖jquery的,每次引入时都要将jquery放在bootatrap前面,

    一两个类似这样的依赖你或许还能记住,但如果在庞大的项目中,有许多这样的依赖关系,你还能

    清晰的记得吗?当项目越来越复杂,众多文件之间的依赖甚至都会让你抓狂,关于下面的这些问题,

    我相信每天都在真实的发生着:

    1.业务想用某个新的功能组件,但无法简单通过几行代码搞定

    2.老的产品要上新的功能,最后评估只能基于老的类库继续开发

    3.公司整合业务,某两个产品要合并,结果发现前端代码冲突


    以上这些问题都是文件依赖没有很好的管理,如果项目小,还不会有什么问题,可当团队越来

    越大,业务越来越复杂,依赖关系如果不去解决就会出大问题。


    二、那么大家就想问了,什么是模块化开发呢?


    模块化的意义在于最大化的设计重用,以最小的模块零部件,更快速度满足更多个性化需求,

    把不同功能按照模块区分开来,把共同需要引入的文件放在首页,一次引入,减少多个页面

    不必要的http请求,模块之间是相对独立的,不会相互影响,因为有了模块,我们就可以

    更方便使用别人的代码,按需加载,这样大家就可以共同开发,一方面加快项目进展,

    另一方面便于后期维护与优化。

    目前浏览器支持模块化开发规范的,只有require.js 和 sea.js 对于这两个:require.js是AMD规范的

    代表,简单说,就是异步模块定义,它是依赖前置,会尽早的执行依赖模块,相当所有的require都
    被提前了。

    而sea.js 是CMD规范的代表,他的加载和AMD就有不同,对他来说一个模块就是

    一个文件,它推崇依赖就近,即什么时候require就什么时候加载,而且没有全局的require,在这两
    年来说,sea.js的很多内容更新较少,用户量也持续下降,而require的使用率是相对较高的。


    三、那么说了这么多,如何使用模块化来开发项目呢?


    在前端大趋势之下,框架的使用率高达90%,而在前端框架排名前三的angular vue react都很好的支持
    模块化开发,这无疑给我们提供了很大的帮助,那么就拿vue来做讲解,vue的模板结构为:

         template style script 分类来放置不同内容。

         template:放置html页面布局代码,就是原来我们书写在body的内容

         style:放置当前template的css样式

         script:用import。。form引入当前template需要的js文件,以及当前页面需要的方法在外部去暴露,
        在mouted里面来调用,实现按需加载,而一些共同的库文件,可在首页进行统一调用即可,减少重复
    的请求,提高性能。


    总体来说,模块化是为了是新建一种自然,便捷,高性能,一体化的解决方案,帮我们解决

    了模块静态资源管理,模块依赖关系处理以及模块预加载。所以说模块化也越来越成为一种趋势

    以上就是我个人对模块化开发的理解,谢谢!

  • 相关阅读:
    Javascript自动垃圾收集机制
    Javascript深入浅出(二)
    Javascript深入浅出(一)
    递归&循环&迭代&遍历&枚举,知多少
    事件流、事件处理程序和事件对象
    弹性布局学习笔记
    css3 伪元素
    css3伪类选择器nth-of-type,:nth-last-of-type,:first-of-type,:last-of-type,:only-of-type
    css3结构伪类选择器first-child,last-child,nth-child(),nth-last-child(),only-child
    css3状态伪类选择器:checked修改按钮默认样式
  • 原文地址:https://www.cnblogs.com/christineqing/p/6939615.html
Copyright © 2011-2022 走看看