柳州专业做网站设计,wordpress wp-content权限,python网页编程代码,wordpress 启动前端开发模式进化史
前端工程化正是为了应对这些演化中出现的挑战和需求而发展起来的#xff1a;
前后端混合#xff1a;服务端渲染#xff0c;javascript仅实现交互前后端分离#xff1a;借助 ajax 实现前后端分离、单页应用(SPA)等新模式模块化开发#xff1a;npm 管理…前端开发模式进化史
前端工程化正是为了应对这些演化中出现的挑战和需求而发展起来的
前后端混合服务端渲染javascript仅实现交互前后端分离借助 ajax 实现前后端分离、单页应用(SPA)等新模式模块化开发npm 管理模块、Webpack 编译打包资源模块化 MVVM基于 React 或 Vue 等框架进行组件化开发不再手动操作 html 元素
模块化思想
模块化就是把逻辑代码拆分成独立的块各自封装、互相独立每个块自行决定对外暴露什么同时自行决定引入执行哪些外部代码。前端工程化工具和模块化开发使前端项目更易于管理避免依赖混乱促进代码的重用和维护。 前端模块化是前端工程化的一个重要组成部分前者关注代码的组织和结构而后者关注整个前端开发过程的自动化和最佳实践。前端工程化借助前端模块化来提高代码的组织和可维护性从而解决前端开发中的一系列问题。
CommonJs
Node.js 实现了 CommonJS 规范如果前端要使用需要用browserify库 来进行转化。
//a.js 导出
module.exports {name: ysl,age: 27
}
//导入
let obj require(./a.js)
console.log(obj)或者
//a.js
export.name ysl
export.age 27注意
require第一次加载某个模块时Node会缓存该模块。以后再加载该模块就直接从缓存取出该模块的module.exports属性。需要清除缓存delete require.cache[require.resolve(./a.js)]再引入。引入时拷贝机制引入输出之后模块内部的变化影响不了原本已经引入的值。CommonJs加载是同步加载如果在浏览器中某个模块加载时间太长容易出现卡死现象。
AMD
AMD采用异步方式加载模块模块的加载不影响它后面语句的运行。所有依赖这个模块的语句都定义在一个回调函数中等到加载完成之后这个回调函数才会运行
// moduleA.jsdefine(function (){var add function (x,y){return xy;};return {add: add};});
// index.jsrequire([moduleA], function (moduleA){console.log(moduleA)//moduleA就是moduleA.js模块传入的函数执行后返回的对象{addfunction}});UMD
通过对 CommonJs、CMD、AMD 进一步处理它没有自己专有的规范是集结了 CommonJs、CMD、AMD 的规范于一身。 它可以通过运行时或者编译时让同一个代码模块在使用 CommonJs、CMD 甚至是 AMD 的项目中运行。 未来同一个 JavaScript 包运行在浏览器端、服务区端都只需要遵守同一个写法就行了。
// UMD简单实现
((global, factory) {//如果 当前的上下文有define函数并且AMD 说明处于AMD 环境下if (typeof define function define.amd) {define([moduleA], factory);}else if (typeof exports object) {//commonjslet moduleA require(moduleA)modules.exports factory(moduleA)}else {global.moduleA factory(global.moduleA) //直接挂载成 windows 全局变量 }
})(this, (moduleA) {//本模块的定义return {}
})ESM(ECMAScript Moudules)
历史上JavaScript 一直没有模块module体系无法将一个大程序拆分成互相依赖的小文件再用简单的方法拼装起来。ES6 在语言标准的层面上实现了模块功能而且实现得相当简单完全可以取代 CommonJS 和 AMD 规范成为浏览器和服务器通用的模块解决方案。不再需要UMD模块格式了将来服务器和浏览器都会支持 ES6 模块格式。 es6模块的语法分为两部分export 模块导出、 import模块导入
//export 导出
// profile.js
var firstName Michael;
var lastName Jackson;
var year 1958;
export { firstName, lastName, year };//import 引入
// main.js
import { firstName, lastName, year } from ./profile.js;
function setName(element) {element.textContent firstName lastName;
}//或者用*指定一个对象
// main.js
import * as total from ./profile.js;
function setName(element) {element.textContent total.firstName total.lastName;
}用到export default命令为模块指定默认输出。一个模块只能有一个默认输出因此export default命令只能使用一次。
// profile.js
var firstName Michael;
var lastName Jackson;
var year 1958;
export default { firstName, lastName, year };// main.js
import total from ./profile.js;
function setName(element) {element.textContent total.firstName total.lastName;
}注意 export语句输出的接口与其对应的值是动态绑定关系即通过该接口可以取到模块内部实时的值。
CommonsJs与ES6之间的差别
CommonJS 模块输出的是一个值的拷贝ES6 模块输出的是值的引用CommonJS 模块是运行时加载ES6 模块是编译时输出接口。CommonJS 模块的require()是同步加载模块ES6 模块的import命令是异步加载有一个独立的模块依赖的解析阶段。
node和浏览器分别加载es6与commonJs的方式
node加载es6模块的方式
1、 ES6 模块采用.mjs后缀文件名。 2、 项目的package.json文件中指定type字段为module。
注意如果没有type字段或者type字段为commonjs则.js脚本会被解释成 CommonJS 模块。
总结为一句话.mjs文件总是以 ES6 模块加载.cjs文件总是以 CommonJS 模块加载.js文件的加载取决于package.json里面type字段的设置。
node默认采用commonJs模块模块的方式
// a.js
module.exports {name:ysl}
// main.js
let obj require(./a.js)
// node环境可以直接使用浏览器加载es6模块方式
浏览器加载 ES6 模块也使用script标签但是要加入typemodule属性。
script type\module src\./foo.js\/script\
// 浏览器对于带有\typemodule\的\script\\都是异步加载不会造成堵塞浏览器即等到整个页面渲染完再执行模块脚本等同于打开了\script\\标签的\defer\属性。
script type\module src\./foo.js defer\/script\
// 效果一致通过script标签加载可能会出现跨域的现象可以使用express解决
浏览器加载CommonJs
浏览器直接加载CommonJs会报错因为浏览器不存在module、exports、require这些环境变量可以使用Browserify对模块进行转换
参考 https://segmentfault.com/a/1190000039346572?sortnewest https://juejin.cn/post/7291186181157535800
