电子商务网站建设的认识自己建设博客网站

电子商务网站建设的认识,自己建设博客网站,网站建设祥云平台,wordpress主题 翠竹林为什么需要模块化 当前端工程到达一定规模后#xff0c;就会出现下面的问题#xff1a; 全局变量污染 依赖混乱 上面的问题#xff0c;共同导致了代码文件难以细分 模块化就是为了解决上面两个问题出现的 模块化出现后#xff0c;我们就可以把臃肿的代码细分到各个小…为什么需要模块化当前端工程到达一定规模后就会出现下面的问题全局变量污染依赖混乱上面的问题共同导致了代码文件难以细分模块化就是为了解决上面两个问题出现的模块化出现后我们就可以把臃肿的代码细分到各个小文件中便于后期维护管理前端模块化标准前端主要有两大模块化标准CommonJS简称CMJ这是一个社区规范出现时间较早目前仅node环境支持ES Module简称ESM这是随着ES6发布的官方模块化标准目前浏览器和新版本node环境均支持node环境下载地址https://nodejs.org/zh-cn/CommonJS如何实现模块化node天生支持CommonJS模块化标准node规定node中的每个js文件都是一个CMJ模块通过node命令运行的模块叫做入口模块模块中的所有全局定义的变量、函数都不会污染到其他模块模块可以暴露导出一些内容给其他模块使用需要暴露什么内容就在模块中给module.exports赋值一个模块可以导入其他模块使用函数require(要导入的模块路径)即可完成该函数返回目标模块的导出结果导入模块时可以省略.js导入模块时必须以./或../开头一个模块在被导入时会运行一次然后它的导出结果会被node缓存起来后续对该模块导入时不会重新运行直接使用缓存结果练习题导入导出练习按照要求完成下面的模块1. 配置模块 config.js它需要导出一个对象规格如下{wordDuration:300,// 打印每个字的时间间隔text:西风烈 长空雁叫霜晨月。 霜晨月 马蹄声碎 喇叭声咽。 雄关漫道真如铁 而今迈步从头越。 从头越 苍山如海 残阳如血。// 要打印的文字}2. 延迟模块 delay.js该模块的文件名为delay你需要把下面的函数导出/** * 该函数返回一个Promise它会等待指定的毫秒数时间到达后该函数完成 * param {number} ms 毫秒数 * returns {Promise} */functiondelay(ms){returnnewPromise((resolve)setTimeout(resolve,ms));}3. 打印模块 print.js该模块负责导出一个打印函数该函数需要获取当前的打印配置/** * 该函数会做以下两件事 * 1. console.clear() 清空控制台 * 2. 读取config.js中的text配置打印开始位置到index位置的字符 * param {number} index */functionprint(index){}4. 主模块 main.js这是启动模块它会利用其它模块逐字打印出所有的文本打印每个字的间隔时间在config.js中已有配置/** * 运行该函数会逐字打印config.js中的文本 * 每个字之间的间隔在config.js已有配置 */functionrun(){}run();############################################CommonJS标准类型社区规范支持环境node依赖类型动态依赖如何导出module.exports导出的值如何导入require(模块路径)// 函数返回模块导出的值ES Module标准类型官方标准支持环境node浏览器依赖类型静态依赖动态依赖如何导出ES Module的导出ES Module分为两种导出方式具名导出普通导出可以导出多个默认导出只能导出一个一个模块可以同时存在两种导出方式最终会合并为一个「对象」导出exportconsta1;// 具名常用exportfunctionb(){}// 具名常用exportconstc(){}// 具名常用constd2;export{d}// 具名constk10export{kastemp}// 具名// export default 3 // 默认常用// export default function() {} // 默认常用// const e 4;// export { e as default } // 默认constf4,g5,h6export{f,g,hasdefault}// 基本 默认// 以上代码将导出下面的对象/* { a: 1, b: fn, c: fn, d: 2, temp: 10, f: 4, g: 5, default: 6 } */注意导出代码必须为顶级代码即不可放到代码块中如何导入针对具名导出和默认导出有不同的导入语法// 仅运行一次该模块不导入任何内容import模块路径// 常用导入属性 a、b放到变量a、b中。a-a, b-bimport{a,b}from模块路径// 常用导入属性 default放入变量c中。default-cimportcfrom模块路径// 常用default-ca-a, b-bimportc,{a,b}from模块路径// 常用将模块对象放入到变量obj中import*asobjfrom模块路径// 导入属性a、b放到变量temp1、temp2 中import{aastemp1,bastemp2}from模块路径// 导入属性default放入变量a中default是关键字不能作为变量名必须定义别名import{defaultasa}from模块路径//导入属性default、b放入变量a、b中import{defaultasa,b}from模块路径// 以上均为静态导入import(模块路径)// 动态导入返回一个Promise完成时的数据为模块对象注意静态导入的代码必须为在代码顶端也不可放入代码块中另外静态导入的代码绑定的符号是常量不可更改############################################npm官网https://www.npmjs.com/npm全命令https://docs.npmjs.com/cli/v7/commands概念什么是包包package是一个或多个js模块的集合它们共同完成某一类功能可以简单的认为每一个工程就是一个包有些包是为了给别人用的这种包也叫第三方库什么是包管理器包管理器是一个管理包的工具前端常见的包管理器有npm、yarn、cnpm、pnpm等包管理器具备以下能力让开发者可以轻松的下载包让开发者可以轻松的升级和卸载包能够自动管理包的依赖什么是clicli是一个命令行工具它提供一个终端命令通过该命令可以完成一些功能node查找包的顺序require(a)查找是否有内置模块a查找当前目录的node_modules中是否有a依次查找上级目录的node_modules中是否有a直到根目录配置源查看源npmconfig get registry配置淘宝镜像源npmconfigsetregistry https://registry.npm.taobao.org配置官方源npmconfigsetregistry https://registry.npmjs.org/初始化npminit# 初始化工程帮助生成 package.json 文件npminit -y# 初始化工程全部使用默认配置生成 package.json 文件package.json{dependencies:{// 本地普通依赖qrcode:^1.4.4// 依赖包qrcode版本1.4.4主版本号不变此版本号和补丁版本可增},devDenpendencies:{// 开发依赖webpack:^5.0.0}}安装本地安装会将包下载到当前命令行所在目录的node_modules中绝大部分安装都使用本地安装# 下面的 install 可以替换为 inpminstall包名npminstall--save 包名npminstall包名版本号若仅作为开发依赖则添加参数-D# 下面的 install 可以替换为 inpminstall-D 包名npminstall-D 包名版本号若要还原安装# 下面的 install 可以替换为 inpminstallnpminstall--production# 仅还原dependencies中的依赖全局安装会将包下载到一个全局的位置只有需要使用某个全局命令时才需要进行全局安装# 下面的 install 可以替换为 inpminstall-g 包名npminstall-g 包名版本号卸载本地卸载卸载本地的安装包# 下面的 uninstall 均可替换为 unnpmuninstall 包名全局卸载卸载全局的安装包# 下面的 uninstall 均可替换为 unnpmuninstall -g 包名查看包信息查看包所有的版本# view 可以替换为 vnpmview 包名 versions############################################什么是LessLess是一种更加简洁的样式代码它非常像CSS但又不太一样它让编写样式变得更容易下面是css代码和Less代码的对比它们都表达了一样的含义Less代码虽好但它无法被浏览器识别因此需要一个工具将其转换为血统纯正的css代码由于node环境具有读写文件的能力于是在node环境中可以轻松的完成文件的转换npm上有一个包叫做less它运行在node环境中通过它可以完成对Less代码的转换可以看出node环境在前端工程化中充当了一个辅助的角色它并不直接运行前端代码而是让我们编写前端代码更加舒适便利在后续的课程中你还会不断的体会到这一点转换代码称之为编译(compile)转换代码的工具称之为编译器(compiler)体验Less新建index.less文件编写下面的less代码green: #008c8c; .list { display: flex; flex-wrap: wrap; color: green; li { margin: 1em; :hover { background: green; color: #fff; } } }使用npm下载lessless包提供了一个cli工具lessc你可以有两种方案使用它方案一全局安装less这种方案可以让你在任何终端目录使用lessc命令但不利于版本控制方案二本地安装less这种方案会把less安装到工程目录的node_modules中你无法全局使用lessc命令但可以在当前工程目录中使用npx lessc运行该命令npx是npm提供的一个小工具它可以运行当前项目中安装到node_modules的cli命令如果配置package.json脚本无须使用npx如果可以应该尽量使用本地安装而非全局安装如果可以应该尽量使用本地安装而非全局安装使用lessc命令对编写的less文件进行编译# 将 index.less 编译成为 index.csslessc index.less index.css新建一个页面引用编译结果index.css目前编写less代码会遇到一点小麻烦就是每次编写后都需要运行命令进行编译这个麻烦只是暂时的将来很快就可以解决Less的核心语法Less官网https://lesscss.org/Less民间中文网https://less.bootcss.com/Less提供了非常多的功能帮助我们更加轻松的编写css代码其中我们最常用的功能有下面3个变量嵌套混合另外你需要关注Less的特殊注释练习题练习题1编写一个less混合实现绝对定位居中练习题2将过去你所做的某个demo将其css代码改造为less############################################工程化为复杂应用而生本文为保持简单牺牲了某些语言的准确性核心webpack是用来搭建前端工程的它运行在node环境中它所做的事情简单来说就是打包具体来说就是以某个模块作为入口根据入口分析出所有模块的依赖关系然后对各种模块进行合并、压缩形成最终的打包结果在webpack的世界中一切皆是模块体验老师提供的工程以src/main.js作为入口文件按照习惯所有的模块均放置在src目录中安装依赖编写多个模块随意编写一些模块可以是js、图片、音视频以入口模块为起点形成依赖关系运行npm run build命令进行打包查看打包结果打包结果放置在dist目录中通过上面的体验可以发现webpack给我们带来了至少以下好处可以大胆的使用任意模块化标准无须担心兼容性问题因为webpack完成打包后已经没有了任何模块化语句可以将一些非JS代码也视为模块这样可以对css、图片等资源进行更加细粒度的划分在前端开发中也可以使用npmwebpack不会运行你的源代码无论是你自己写的模块还是通过npm安装的模块webpack一视同仁统统视为依赖最终合并到打包结果中非常适合开发单页应用单页应用是前端用户体验最好的web应用所谓单页应用是指只有一个html页面页面中没有任何内容所有的内容均靠js生成要优雅的实现单页应用最好依托于前端框架比如vue、reactwebpack给我们开发带来的变化远不止于此接下来一一体验页面模板对于单页应用而言只有一个空白的页面所有内容都靠JS代码创建webpack会自动生成一个页面并且在页面中会自动加入对js和css的引用它生成页面时参考的是public/index.html其称之为页面模板public目录webpack会非常暴力的将public目录中的所有文件除页面模板外复制到打包结果中开发服务器如果每次修改完代码都要经过打包-运行未免太过麻烦在开发阶段我们可以运行npm run serve命令获得更好的打包体验该命令会让webpack启动一个开发服务器。在这个阶段webpack并不会形成打包结果文件而是把打包的内容放到内存中当我们请求服务器时服务器从内存中给予我们打包结果与此同时当源码发生变动时webpack会自动重新打包同时刷新页面以访问到最新的打包结果文件缓存可以看到除了页面外其他的资源在打包完成后文件名多了一些奇奇怪怪的字符例如js/app-9ea93.js其中9ea93这样的字符称之为hash它会随着模块内容的变化而变化源码内容不变hash不变源码内容变化hash变化之所以这样做是因为生产环境中浏览器会对除页面外的静态资源进行缓存如果不设置hash值一旦代码更新浏览器还会使用之前缓存的结果无法使用最新的代码有了hash值之后即可解决此问题webpack会在打包时自动处理hash值并不会对我们写代码造成任何影响但作为一个前端开发者有必要了解这一点资源路径除代码和样式模块外其他模块被视为资源模块值得特别注意的是资源模块在源代码中的路径和打包后的路径是不一样的这就导致我们在编写代码的时候根本无法知晓最终的路径最常见的例子就是在css中使用背景图片.container{/* 背景图使用了源码中的路径 */backgroud:url(../assets/1.png);}它能正常工作吗它能因为webpack非常智能的发现了这一点对于css中的路径webpack在打包时会将其自动转换为打包结果的路径比如上面的代码在打包完成后可能被转换为下面的格式.container{/* css中的资源路径会被自动替换我们无须关心 */background:url(/img/1492ea.png);}但如果我们要通过js动态的使用路径webpack是无法识别的// 打包前consturl./assets/1.png;// 该路径无法被转换img.srcurl;// 打包后consturl./assets/1.png;// ❌img.srcurl;正确的做法是通过模块化的方式导入资源并获取资源路径// 打包前importurlfrom./assets/1.png;// 打包后url得到的将是真实的路径img.srcurl;// 打包后consturl/img/1492ea.png;// ✅img.srcurl;缺省的文件和后缀名导入模块时所有js模块均可省略.js若导入的模块文件名为index.js可省略文件名import./home;// 若存在home.js可省略jsimport./movie;// 若movie是一个目录此次导入的是 ./movie/index.js路径别名随着体量的增长不可避免的会形成层级极深的目录root|- src|- a|- a1|- a2|- index.js|- b|- b1|- index.js如果需要在./src/a/a1/a2/index.js中导入./src/b/b1/index.js则可能产生下面特别恶心的代码import../../../b/b1/index.js;webpack提供了别名供我们快速定位到./src目录通常该别名为上面的导入代码可简化为import/b/b1;// 表示src目录同时省略了index.jsjs兼容性当webpack读取到js代码时会自动对其进行兼容性处理具体的处理方案涉及到两个配置文件babel.config.js通过配置该文件可以设置对哪些js代码进行降级处理.browserslistrc通过配置该文件可以设置在降级时要兼容哪些浏览器兼容的范围越光降级产生的代码就越多自然打包后的体积就越大你无须知晓具体的配置方式打包压缩webpack在打包时会对所有js和css代码进行压缩对于js除了压缩之外还会对其中的各种名称进行混淆(self.webpackChunkmovie_listself.webpackChunkmovie_list||[]).push([[587],{3587:(r,t,n){use strict;n.r(t),n(5666),n(1539),n(8674),n(9600),n(1249),n(2222);varen(9755),an.n(e);varo;functioni(r){o.html(r.map((function(r){returnli\n a href.concat(r.url, target_blank\n img src).concat(r.cover, title).concat(r.title,\n /a\n a href).concat(r.url, target_blank class).concat(qmUYQv1xlJhGMQKz-kfAp,).concat(r.title,/a\n p class).concat(_3yV5wC-URYTUP0sPvaE0ZR,).concat(r.rate,/p\n /li)})).join())}oa()(ul).addClass(_1fsrc5VinfYHBXCF1s58qS).appendTo(#app);varcn(8138);constu混淆的作用一方面是为了进一步压缩包体积另一方面是为了让我们的代码更难被其他人理解利用源码地图 source map我们运行的是webpack打包后的结果而打包后的结果是很难阅读的但这样一来会带来新的问题如果代码报错我们就难以知道到底是那一行代码写的有问题此时源码地图就发挥了作用可以发现js代码打包后都会跟上一个同名的、后缀为.map的文件该文件就保存了原始代码的内容请放心这个内容人类是看不懂的但浏览器可以看懂当代码报错时浏览器会定位到源码地图中的对应代码而不是把真实报错的代码展示给我们你无须关心这一点但可以自然的从其中获得巨大的便利css工程化webpack能够识别所有的样式代码包括css、less、sass、stylus在打包时会将它们转换成纯正的css除此之外它还具备以下的神奇能力自动厂商前缀css有很多兼容性问题解决这些兼容性问题的最常见办法就是加上厂商前缀。比如/* 兼容性不好的代码 */.container{display:flex;transition:1s;}/* 兼容性好的代码 */.container{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-transition:1s;transition:1s;}webpack会根据.browserlistrc中指定的浏览器范围按需、自动加上厂商前缀我们开发无须关心css modulecss文件多了后你怎么保证它们里面没有冲突的类样式靠层级选择器就不担心效率靠命名规范就不担心脑袋爆炸要靠就靠css module当样式文件以xxx.mdoule.xxx的方式命名时webpack会将该文件当成一个开启了css module的文件比如index.module.less、movie.module.css都是开启了css module的文件文件中的所有类名都会被hash化// 源码 .container{} .list{} .item{} // 打包结果绝无可能重名 ._2GFVidHvoHtfgtrdifua24{} ._1fsrc5VinfYHBXCF1s58qS{} .urPUKUukdS_UTSuWRI5-5{}现在就一个问题我们在使用类名时如何知道它打包结果的类名呢import./index.module.less;dom.classList.add(container);// ❌ 最终的类名可不是这个正确的方式如下// styles 是一个对象里面映射了源码类名和打包类名的关系importstylesfrom./index.module.less;dom.classList.add(styles.container);// ✅ 属性container中记录的就是container转换后的类名真正的webpack没有那么神奇实际上webpack没有做这么多事我们不能把功劳怨念全归结于它它只是站在巨人其他流氓肩膀上而已下图可以看个热闹webpack通过插件plugin和加载器loader将这些技术整合在一起上图的技术 乱七八糟一大堆其他技术 老师的配置 呈现给你的工程目前你无须理解这一些保持敬畏即可最后说明一下工程中看不懂的文件.browserslistrc表达适配的浏览器范围会被工程化中的其他技术所使用babel.config.jsbabel的配置文件做js降级处理postcss.config.jspostcss的配置文件做css代码转换webpack.config.jswebpack的配置文件整合其他工程化技术以及配置打包细节、开发服务器、路径别名等等对我们开发的影响学会访问开发服务器查看效果学会动态获取资源文件路径importurlfrom./assets/1.png;img.srcurl;学会省略文件和后缀名import./home;// 若存在home.js可省略jsimport./movie;// 若movie是一个目录此次导入的是 ./movie/index.js学会使用别名简化导入代码import/b/b1;// 实际导入 src/b/b1/index.js (若b1是目录)学会使用css module// styles 是一个对象里面映射了源码类名和打包类名的关系importstylesfrom./index.module.less;dom.classList.add(styles.container);作业回顾和总结1看着此笔记的目录大声说出每个目录标题板块的内容回顾和总结2脱离此文档能够说出整个文档的大致内容############################################效果展示地址https://study.duyiedu.com/movie接口地址http://mock.duyiedu.com/project/72/interface/api/234功能模块划分分包如果站点中的所有依赖都打包到一个js文件中势必会导致打包结果过大而实际上在页面初始的时候不需要那么多代码参与运行。比如在这个项目中一开始必须要运行的只有封面模块因为它是用户一开始就必须要能够看见的。而电影模块可以慢慢加载。基于此我们可以使用动态导入的方式加载电影模块// main.jsimport./cover;// 静态导入表示初始就必须要依赖 cover 模块import(./movie);// 动态导入表示运行到此代码时才会去远程加载 movie 模块webpack能够识别动态导入的代码当它发现某个模块是使用动态导入时该模块会单独形成打包结果在浏览器运行时会首先加载初始的打包结果然后在后续的运行过程中动态加载其他模块。这样就可以尽量提升初始加载效率又不影响后续模块的加载跨域代理大部分时候为了安全服务器都是不允许跨域访问的所以将来部署应用的时候通常会使用下面的方式进行部署你无须彻底理解上图只需要知道最终部署之后不存在跨域问题但是跨域问题在开发阶段是存在的所以我们要做的仅仅是消除开发阶段的跨域问题便于在开发阶段查看效果如何实现在webpack.config.js中找到下面的部分设置代理devServer:{proxy:{/api:{// 当请求地址以 api 开头时代理到另一个地址target:http://study.duyiedu.com,// 代理的目标地址changeOrigin:true,// 更改请求头中的host无须深究为避免出问题最好写上},},},在ajax请求时仅需给上请求路径即可axios.get(http://study.duyiedu.com/api/movies);// ❌ 无须指定源axios.get(/api/movies)// ✅来看看这样做的效果是什么这样一来在跨域问题上就做到了开发环境和生产环境的统一电影模块list模块该模块很简单按照下面的思路实现即可/** * 初始化函数负责创建容器 */functioninit(){}init();/** * 根据传入的电影数组创建元素填充到容器中 * params movies 电影数组 */exportfunctioncreateMovieTags(movies){}pager模块该模块整体思路如下/** * 初始化函数负责创建容器 */functioninit(){}init();/** * 根据传入的页码、页容量、总记录数创建分页区域的标签 * params page 页码 * params limit 页容量 * params total 总页数 */exportfunctioncreatePagers(page,limit,total){}createPagers该函数的实现可以按照下面的思路进行/** * 根据传入的页码、页容量、总记录数创建分页区域的标签 * params page 页码 * params limit 页容量 * params total 总页数 */exportfunctioncreatePagers(page,limit,total){/** * 辅助函数负责帮忙创建一个页码标签 * params text 标签的文本 * params status 标签的状态空字符串-普通状态disabled-禁用状态active-选中状态 */functioncreateTag(text,status,targetPage){}//1. 创建首页标签//2. 创建上一页标签//3. 创建数字页码标签//4. 创建下一页标签//5. 创建尾页标签}############################################