专栏首页令仔很忙Web前端----Javascript模块化

Web前端----Javascript模块化

概述

一提到模块化,也许我们首先想到的是做项目的时候进行模块设计,按照功能划分不同的模块,最后通过模块的选择和组合组成最终的产品;那把模块化的思想放到前端页面,js上来是不是也适用?当然,而且也能很好的提高我们项目的开发效率。

开发过前端界面的同志们都知道,最一开始的时候,让你用CSS写界面的样式,初入职场的程序员一般都这么写:从上到下依次编写,有新的样式需要添加,就在下面接着写,从来不去考虑是否有公共样式,着重在样式的实现上,怎么实现的无所谓;稍微有点经验的程序员就会开始注意到公共样式的问题,把一些公共的样式抽出来,从而来达到复用的结果,比如:按钮,颜色,图标等,这样节省时间,也提高了开发效率;这还不是终极的,高级的程序员一般会把一些公共的功能模块提取出来,比如说导航,版权信息等,实现部分公共模块的复用。

Javascript模块化


面向过程

2005年以前,JavaScript没人重视,只作为表单验证等少量应用。那时一个网页上写不了几行JS代码,1000行算很复杂了。这时组织代码的方式是过程式,几十行的代码甚至连一个函数都不用写。稍多的需要提取抽象出一个函数,更复杂一些则需要更多函数,函数间互相调用。

/*面向过程*/
//说
function sayHello(){
    return "hello";
}
//读
function readBook(){
    return "readBook!";
}
//听
function listenSong(){
    return "Good Time!";
}
//写
function writeName(){
    return "zhangling";
}

如果说开发一个大型项目,按照面向过程的方式写了一大堆js代码,组长过来说:你把XXX的js代码找出来咱一块看看!这时你的表情一定是这样的:

面向对象

2006年,Ajax席卷全球。JavaScript被重视了,越来越多的后端逻辑放到了前端。网页中的JS代码量急剧增加。这时写函数方式组织大量代码显得力不从心。有时调试一个小功能,从一个函数可能会跳到第N个函数去。为了解决上面的缺点,可以把模块写成一个对象,所有的模块成员都放到这个对象里面。

/*面向对象*/
//听说读写
function person(){
    return{
        count:0,
        say:function(){return "saying";},
        read:function(){return "reading";},
        listen:function(){return "listening"},
        write:function(){return "writting"}
    }

};

使用的时候直接person().say()就行了! 不过这样使用的话也有一定的缺陷:

这样的写法会暴露所有模块成员,内部状态可以被外部改写。比如,外部代码可以直接改变内部计数器的值。

Person().count=4

模块化开发

首先我们要搞明白为什么要用模块化开发?前面的内容也大致的讲了讲,对于具体的为什么要用模块化开发,大家可以去看看前端模块化开发的价值,主要是两个问题:

其一、恼人的命名冲突 其二、烦琐的文件依赖

在网上查了写资料,Javascript中近来用的模块化开发用SeaJsRequireJs比较多,但是具体他们两个有什么区别,还有怎么使用?在项目中用哪个更合适?后续博客中会说明,正在研究中……

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WCF入门(一)--Request Entity Too large 传输的数据量过大

          通过WCF进行数据的查询或者添加的时候,如果数据量过大,一般会报出如下的错误:

    令仔很忙
  • VB 循环播放视频文件

    用到的控件:commondialog,timer,windows media player

    令仔很忙
  • 千里之堤,毁于蚁穴----考试系统

       千里之堤,毁于蚁穴,做项目的过程中可能会涉及到成千上万行的代码,在开发的过程中,一定要注意一些细节上的问题,这不是一篇技术性很高的文章,主要是思想。

    令仔很忙
  • 设计模式 | 适配器模式

    适配器模式(adapter), 模式定义: 将一个类的接口转换成客户希望的另一个接口。Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作

    憧憬博客
  • react.js 学习笔记

    单向数据流驱动,父节点传递到子节点 react最重要是组件 ReactJS官方地址:https://facebook.github.io/react/ GitH...

    企鹅号小编
  • 尾调用优化

    [参考链接]((https://www.ruanyifeng.com/blog/2015/04/tail-call.html)

    flytam
  • 什么是数据科学

    在搞懂什么是大数据前,先来了解下什么是数据科学。 因为在个人眼里所谓的大数据其实是数据科学的一个高阶状态。

    雪地二货
  • 最好用的 AI 开源数据集(涵盖计算机视觉、NLP、语音等 6 大类)

    1 新智元编译 来源:medium.com 编译:刘小芹 【新智元导读】本文按计算机视觉、自然语言处理、语音识别、地理空间数据等人工智能的子领域分类,精心整...

    昱良
  • 全栈开发工程师微信小程序-下

    WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

    达达前端
  • 2015年度大数据发展10大预测

    《中国大数据技术与产业发展报告(2014年)》针对2015年度大数据发展做了十大预测,他们分别是:

    华章科技

扫码关注云+社区

领取腾讯云代金券