首页 > 其他 > 详细

模块化

时间:2019-12-14 10:21:33      阅读:89      评论:0      收藏:0      [点我收藏+]

模块化主要是用来抽离公共代码,隔离作用域,避免变量冲突等。

IIFE
自执行函数的简称,使用自执行函数来编写模块化
特点:在一个单独的函数作用域中执行代码,避免变量冲突。

(function(){
  return {
    data:[]
  }
})()

AMD
使用requireJS来编写模块化,这个是一个插件
特点:依赖必须提前声明好。

define('./index.js',function(code){
    // code 就是index.js 返回的内容
})

CMD
使用seaJS来编写模块化,这个是一个插件
特点:支持动态引入依赖文件。

define(function(require, exports, module) {  
  var indexCode = require('./index.js');
});

CommonJS
nodejs中自带的模块化

var fs = require('fs');

UMD
兼容AMD,CommonJS 模块化语法,这个是一个插件

webpack(require.ensure):webpack 2.x 版本中的代码分割。

Modules
ES6 引入的模块化,支持import 来引入另一个 js

import a from 'a';

==Es6的import和commonJS的require在浏览器是不能用的==

现在用的几个模块化有

  • 服务器nodejs就是用自带的CommonJS写法
  • 浏览器的使用CommonJS和Modules,但需要Label编译,实际是把这两个编译成AMD的写法使用

还有写法上的模块化
我一开始的代码是整个js文件就只有一个方法,从头执行到尾,后来维护特别的困难
一点是变量都在同个函数作用域里,导致很多的变量,不能同名所以起名乱七八糟的
一点是特别难修,因为看着头疼,改上面一行下面就可能会报错

所以代码写得好看很重要
一般来说经常写的代码有
》》请求数据后加工数据,然后添加到页面上,很多时候是一个函数写完的
优化:
数据res拿到后,传给数据加工函数,数据加工函数传给页面绘制函数,一拆三,维护性,阅读性提升好几倍

》》还有提交数据也是如此
把数据获取判断加工转格式什么的分成一个函数,然后传给判断的函数,比如手机号判断,非空判断,判断无误后传给ajax函数

模块化

原文:https://www.cnblogs.com/pengdt/p/12037971.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!