模块化 | 易学教程

Webpack学习笔记

阅读更多关于 Webpack学习笔记

文章目录 1-1.浏览器端的模块化问题：根本原因解决办法常见的构建工具 1-2.webpack的安装和使用 webpack简介 webpack的安装基本使用 1-3.模块化兼容性同模块化标准不同模块化标准最佳实践 1-1.浏览器端的模块化问题：效率问题：精细的模块划分带来了更多的JS文件，更多的JS文件带来了更多的请求，降低了页面访问效率兼容性问题：浏览器目前仅支持ES6的模块化标准，并且还存在兼容性问题工具问题：浏览器不支持npm下载的第三方包这些仅仅是前端工程化的一个缩影当开发一个具有规模的程序，你将遇到非常多的非业务问题，这些问题包括：执行效率、兼容性、代码的可维护性可扩展性、团队协作、测试等等等等，我们将这些问题称之为工程问题。工程问题与业务无关，但它深刻的影响到开发进度，如果没有一个好的工具解决这些问题，将使得开发进度变得极其缓慢，同时也让开发者陷入技术的泥潭。根本原因思考：上面提到的问题，为什么在node端没有那么明显，反而到了浏览器端变得如此严重呢？答：在node端，运行的JS文件在本地，因此可以本地读取文件，它的效率比浏览器远程传输文件高的多根本原因：在浏览器端，开发时态（devtime）和运行时态（runtime）的侧重点不一样开发时态，devtime：模块划分越细越好支持多种模块化标准支持npm或其他包管理器下载的模块

vue模块化(echart+element ui)

阅读更多关于 vue模块化(echart+element ui)

最近看了下vue的框架,随手做了个项目,记录分享下技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图主要是配置的是npm 打包命令和引入vue-route vue的路由文件和element ui 文件下面这个是引入echart.js 文件, 基本资料就这些。首先我们开始构建一个vue-cli项目 1.首先node环境（这里就不多啰嗦了） 2.执行vue-cli命令 npm install --global vue-cli （这里你可以全局装，也可以装到项目路径） 3.检查下 vue是否装好 vue -V （能看到版本号就是安装成功了） 4.用vue新建一个项目 vue init webpack my-project ESLint规范建议开启，加强代码规范（中间遇到 ESLint可以自己选择开启或者关闭） 5.弄好项目后 npm install 下初始化下包 6.最后进入项目路径执行 npm run dev 命令如果能看到页面证明项目搭建成功更加详细的配置请参考 http://www.cnblogs.com/pearl07/p/6247389.html 上面已经完成了vue-cli项目的基本构建 vue+webpack已经集成了这时候我们需要构建两个页面看下路由功能

vuex 中模块化开发的一些知识

阅读更多关于 vuex 中模块化开发的一些知识

index.html <!doctype html> <html lang="en"> <head> <title>Title</title>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body> <div id="app"></div>   <script src="https://code.jquery

模块化开发

阅读更多关于模块化开发

什么是模块化开发？在前端开发中，起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果，后来js得到重视，应用也广泛起来，jQuery，Ajax，Node.js，MVC，MVVM等的助力也使得前端的开发得到重视，也使得前端的项目越来越复杂，然而，javascript却没有为阻止代码提供任何明显的帮助，甚至没有类的概念，更不用说模块化了，那么究竟什么是模块化开发那？模块化开发一个模块是实现特定功能的文件，有了模块，我们就可以更方便的使用别人的代码，想要什么功能，就天津爱什么模块。模块开发需要遵循一定的规范，否则就全乱套了，那么我们就需要使用amd规范，我们根据amd规范，使用defined定义模块，使用require调用模块，目前，通行的js模块规范主要有两种：CommonJS和AMD AMD规范 AMD即Asynchronous Module Definition，中文名是“异步模块定义”的意思，它是一个浏览器模块化开发的规范，服务器端的规范是CommonJS 模块将被异步加载，模块加载不影响后面语句的运行，所有依赖某些模块的语句均放置在回调函数中 AMD是RequiredJS在推广的过程中对模块定义的规范的产生 CommonJS规范 CommonJS是服务器端模块的规范，Node.js采用了这个规范，Node.js首先采用了js模块化的概念

操作系统多进程与文件操作的历史演变

阅读更多关于操作系统多进程与文件操作的历史演变

结合历史上的操作系统，说明操作系统为什么要有多进程六七十年代初，计算机刚刚发展之时，一台计算机只完成一件事情，但由于计算机的处理远远高于人手工的处理，当时的计算机很受人们欢迎；但慢慢地，人们想用少的成本完成更多的事情，便在思考是否可以将两台完成不同操作的计算机用一台计算机来实现。此时，多线程的思想已经慢慢进入人们的思想中。在上世纪七八十年代，当计算机开始进入多个行业，人们需要让一台计算机干多种事，效率低、耗时长、未充分利用资源的单道批处理系统已经不能满足人们的需求，此时就有人提出在一个程序在执行不需要资源的I/O操作时，将其资源用于另一个程序，同时提高了内存资源以及I/O设备的利用率。而这种思想正是多进程的思想，这是多进程的萌芽。又过了一段时间，一台计算机完成多种事情又不能满足人们的需求，试想，一家公司，人人都想用计算机做些什么操作，倘若资源只能在一台计算机中进行切换，岂不是又回到了单道批处理系统的思想上，所以人们再次利用多进程的思想，把一台计算机中程序的切换扩展到多台计算机资源的切换，更提高了资源的利用率，这是多进程的发展。结合历史上的操作系统，说明操作系统为什么引入文件操作？文件操作是操作系统用于明确磁盘或分区上的文件的方法和数据结构，具体地说，它负责为用户建立文件，存入、读出、修改、转储文件，控制文件的存取，当用户不再使用时撤销文件等

ES6 模块化笔记

阅读更多关于 ES6 模块化笔记

ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。 ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。 // ES6模块 import { stat, exists, readFile } from 'fs'; 需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。 export常用的写法如下： 1 // 写法1 2 export var firstName = 'Michael'; 3 export var lastName = 'Jackson'; 4 export var year = 1958; 5 6 // 写法2 7 var firstName = 'Michael'; 8 var lastName = 'Jackson'; 9 var year = 1958; 10 11 export {firstName, lastName, year}; 12 13 // 写法3 14 15 var firstName = 'Michael'; 16 var lastName = 'Jackson'; 17 var year = 1958; 18 19 export { 20 firstName as variable1, 21 lastName as

模块化一小步，编译的一大步

阅读更多关于模块化一小步，编译的一大步

前言：当 webpack 编译性能优化做到极限的时候，我们应该跳出webpack编译优化的陷阱。因为编译本来就存在瓶颈。（拿我司vue项目来说）：当项目中的vue文件，从1到1000的时候，甚至还在一天天增多，如何维护好他们确实是一门学问，因为随之而来的编译速度，时时刻刻不在浪费我们团队中每个人的生命。项目启动和 hotReload 编译速度：项目启动速度需要： 50秒左右 hotReload 编译速度需要： 15秒左右你还敢相信webpack能帮你解决编译性能的问题吗？致命的问题是它没办法帮你解决掉文件的数量，所以webpack编译本身已经成为了瓶颈。所以我想到了一个解决方案：模块化（这里模块化概念是指：按照后台菜单模块来拆分，把（页面vue文件和路由router.js）维护在一起）其实模块化，可以按照其它（业务、功能）等维度来划分。选择模块化理由：一个大项目本来就是由多个人同时开发维护，开发人员各自只需关心自己模块下写的页面代码。(举个栗子：把 a - w 字母当作模块化的概念，如果我这次开发涉及到 a、b 2个模块，其实 c-w 模块压根是你不需要关心的模块），我们其实可以按需编译。我猜想了一下如果按照模块化的思路，如果只针对本次修改的模块进行编译，是不是编译的瓶颈就解决了，顺着这个思路，我实践了模块化的按需编译

模块化开发

阅读更多关于模块化开发

mobile 1，模块===包　　　 * 传统开发，整个网页我们写了一个js文件，所有的特效都写在里面了　　　　　　　　<script src="js/app.js"></script> 　　　　　　　　缺点：变量容易全局环境　　　　　　　　　　　　耦合度太高，代码之间的关联性太强，不便于后期的维护　　　　 * 将一个复杂的js文件　　　　　　<script src="js/1.js"></script> 　　　　　　<script src="js/2.js"></script> 　　　　　　<script src="js/3.js"></script> 　　　　　　缺点：发生的请求次数过多，依赖模糊，难以维护　　　　 *使用模块化开发　　　　　　优点：减少代码之间的关联，　　　　　　　　　部署方便，　　　　　　　　更好的分离，　　　　　　　　按需加载，　　　　　　　　避免命名冲突，　　　　　　　　容易维护模块化和传统开发的区别 1，依赖加载。　　　　这种方式是最广泛的，像requirejs，sea.js等，除了编写规范不一样，实际都是通过相关require api把模块chunk文件拿回来，当加载完成之后再运行逻辑代码。 2，依赖打包。　　　　经典代表就是webpack，其实就是写代码的时候分开模块

模块化 --- day01

阅读更多关于模块化 --- day01

webpack 和 rullup都是打包工具：　　webpack倾向于应用程序的打包　　rollup更适合在文件打包方面，例如 jq库， vue代码库等模块化是模块编程思想的体现，在开发环境中，通过本地启用server方式的开发；例如 nodejs 在浏览器环境中是不能直接支持的或者存在兼容问题，这需要一个打包工具使打包后的代码可以在浏览器环境中良好运行。（打包成静态代码）模块化的核心：　　1. 独立的作用域　　2.导出模块内的数据（模块数据的输出）　　3.引入模块内的数据　　2和3合起来是模块数据的导出和利用 commonJS 规范　　核心：　　　　独立作用域：一个文件是一个模块（通过直接读取硬盘文件实现，如Nodejs通过文件系统实现）　　　　导出模块内的数据： module.exports 或 exports 导出数据 ---> 每个文件都有一个 module 对象，导出的数据挂载在上面　　　　引入模块内的数据： let a = require("./a.js"); ---> 引入的是导出的数据　　对比：　　　　数据：　　　　　　后端同步加载，文件系统；　　　　　　web ajax 异步加载　　　　nodeJS 文件系统、I/O操作及net操作等在浏览器中无法实现　（此规范无法在浏览器中实现，只有另外制定了一套规范）；

用模块化的方式写vuejs

阅读更多关于用模块化的方式写vuejs

引子 vuejs 是一个入门简单的框架，具有使用简单，扩展方便的特点。随着webpack的流行，vuejs也推出了自己的load，vue-loader，可以方便的打包代码。最近写了一个 json viewer-ac ，就是完全使用vue-loader带来的模块化特性，写的比较开心，也得到了不少经验。这里记录一下。文件结构 <template> <div> <app-header></app-header> </div> </template> <style> ... </style> <script> import AppHeader from './AppHeader.vue' export default { name:'app', props:['data'] data() { return {} }, methods: { handleClick() {} }, components: { AppHeader } } </script> template 里是模板代码，这里一般是一个闭合的html标签，比如一个div。 style 里是css代码，这个代码是作用到整个页面的，如果只想作用到当前的模板中，需要用 scoped 属性 <style scoped> 如果想用一些css预处理器，比如sass，只需要声明lang，然后vue-loader就会自动的加载，当然

订阅模块化