首页 > 其他分享 >前端模块化发展

前端模块化发展

时间:2022-10-09 15:02:19浏览次数:76  
标签:function 发展 log 模块化 前端 模块 console foo


前端模块化的发展

前端模块化发展_jquery

前端模块化发展_jquery_02

前端模块化发展_javascript_03

 CommonJS的模块化实现

前端模块化发展_jquery_04

 但是应用到项目中需要node技术支持解析

 ES6的模块化实现

前端模块化发展_jquery_05

前端模块化发展_jquery_06

前端模块化发展_前端_07

前端模块化发展_前端_08

模块化

概述

Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其 他都可以加载别人已经写好的模块。 但是,Javascript不是一种模块化编程语言,它不支持"类"(class),包(package)等概念,更遑论"模 块"(module)了

最早,我们是这么写代码的:

function foo () {
// ...
}

function bar () {
// ...
}


这样很容易导致全局命名冲突。那定义一个对象,不放到全局中不就好了吗,这就是 Namespace 模式。


var MYAPP =  {
foo: function () {},
bar: function () {}
}

MYAPP.foo()


这样全局变量虽然少了,但本质了是个对象,是可以操作修改的,这样很不安全。

函数是 JavaScript 唯一的 LocalScope,函数外部是修改不了函数内部代码的。所以相对来说是安全的。这就是 IIFE 模式。

// 利用闭包
var Module = (function () {
var _private = 'safe now'
var foo = function () {
console.log(_private)
}

// 暴露接口
return {
foo: foo
}
})()

开发中往往会依赖第三方库,这时候就要引入依赖。例如依赖于 jQuery 时,就要将 ​​jQuery​​ 引入。


var Module = (function ($) {
// 使用 jQuery
var _$body = $("body")
var foo = function () {
console.log(_$body)
}

return {
foo: foo
}
// 引入 jQuery
})(jQuery)

Module.foo()


这就是模块模式,也是现代模块实现的基石。

模块化可以降低单个文件的复杂度,降低偶合度,使文件更好维护。当文件分离后可以按需加载,提高了复用性。并且每个模块都是一个独立的作用域,避免了命名冲突。

但是这样就引发了一个问题:文件分离导致需要发送更多的 HTTP 请求,并且使模块与模块之间的依赖变得模糊。

模块化规范就可以通过依赖关系来合并文件,现在有主流的 CommonJS、AMD、CMD、ES6 四种规范。

CommonJS模块化

CommonJS使用 exports 和require 来导出、导入模块


const sum = function(a,b){
return parseInt(a) + parseInt(b)
}
const subtract = function(a,b){
return parseInt(a) - parseInt(b)
}
//导出
module.exports = {
sum: sum
}
//简写
module.exports = {
sum
}


//引入模块,注意:当前路径必须写 ./
const m = require('./四则运算.js')
const result1 = m.sum(1, 2)
console.log(result1)


ES6模块化

使用 export 和 import 来导出、导入模块

因为ES6的模块化无法在Node.js中执行,需要用Babel编辑成ES5后再 执行

第一种


export function getList() {
console.log('获取数据列表')
}
export function save() {
console.log('保存数据')
}

//只取需要的方法即可,多个方法用逗号分隔
import { getList, save } from "./userApi.js"
getList()
save()


第二种


export default {
getList() {
console.log('获取数据列表2')
},
save() {
console.log('保存数据2')
}
}
import user from "./userApi2.js"
user.getList()
user.save()


CMD和AMD模块规范

​详情​

标签:function,发展,log,模块化,前端,模块,console,foo
From: https://blog.51cto.com/u_11334685/5740478

相关文章

  • 接收前端参数(反序列化) 学习
    参考:https://www.bilibili.com/video/BV1XR4y157rk?p=6&spm_id_from=pageDriver&vd_source=caabcbd2a759a67e2a3de8acbaaf08ea针对模型字段和属性见https://blog.csdn.......
  • ajax 传递一个Entity的值,并前端取值例子
    (一)java后端publicStringgetContentAjax(HttpServletResponseresponse)throwsParseException,IOException{//获得当前时间Datedate=newDate();//lo......
  • 【前端必会】CSS动画,的确很简单
    背景用css动画让你的页面交互动起来开始<body><buttonid="button">开始</button><divid="block"></div></body><script>document.getElementById("button"......
  • 前端性能优化
    一.html1.减少dom嵌套深度2.写上meta标签,有利于seo3.语义化标签,有利于维护,有利于seo4.能用css实现的少用就标签,比如,用border-botton代替<hr/>,二.css1.css文件引入要放在hea......
  • 前端Axios-Day45
    Axios源码分析:①模拟Axios对象的创建过程:   1.Axios构造函数本身应具有defaults(默认配置参数)和intercepters(拦截器参数)2.在Axios原型上添加request、get、p......
  • CSS+HTML前端常见问题
    1. 父子元素margin塌陷**给子元素设置margin后,初衷是让子元素在父元素中有一定的margin。运行结果发现,子元素和父元素的margin合并在了一起,子元素的margin直接传递给父......
  • 前端常用指令
    一、git代码提交gitpull//从仓库拉取最新代码gitstatus//获取本地文件添加前状态git......
  • linux 前端 jenkins打包失败 permission 权限安装 root 安装nodejs,没有权限,另一个账号
    linux前端jenkins打包失败permission权限安装root安装nodejs,没有权限,另一个账号,需要chkmod将文件权限打开开始以为nodejs版本问题最后发现是安装nodejs是一个账......
  • 前端性能优化之函数节流
    防抖节流分为防抖和节流,都是为了防止短时间内高频繁调用同一接口的方法。比如,短时间内重复点击提交同一个评论,异步操纵还未给出响应,多次调用接口,导致重复提交多个评论。......
  • Web前端期末大作业 大学生动漫网页设计 (HTML+CSS+JS)
    ......