模块化

requireJs使用 requireJs 使用require.js的第一步，是先去官方网站下载最新版本。 下载后，假定把它放在js子目录下面，就可以加载了。 <script src="js/require.js"></script> 有人可能会想到，加载这个文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样： 　<script src="js/require.js" defer async="true" ></script> async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。 加载require.js以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js，也放在js目录下面。那么，只需要写成下面这样就行了： 　<script src="js/require.js" data-main="js/main"></script> data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。 主模块的写法 上一节的main.js，我把它称为"主模块"，意思是整个网页的入口代码

上一篇： vuex刷新数据消失不见解决方案 Vuex模块化 模块化后的 store 大概长这样, 如果画的不对,欢迎留言 这样经过模块化的vuex,每个模块维护着不同组件的数据,清晰直观 编码实现 创建store文件夹, 创建index.js 作为vuex的入口js import Vue from "vue" ; import Vuex from "vuex" ; import createPersistedState from "vuex-persistedstate" ; import login from "./modules/login" ; import loginOther from "./modules/loginOther" ; Vue . use ( Vuex ) ; export default new Vuex . Store ( { plugins : [ createPersistedState ( { storage : window . sessionStorage , reducer ( val ) { return { // 需要储存的数据 login : val . login , } } } ) ] , modules : { login , loginOther , //带有Other的是不需要刷新保存数据的，不带的是需要刷新保存的 } ,

Lodash一个一致性、模块化、高性能的 JavaScript 实用工具库。 difference() Lodash中文文档 npm lodash-es Vue项目引入 npm i lodash - es import { cloneDeep , mergeWith , throttle , debounce , tail , set , get , transform , isEqual , isObject , pick , groupBy , camelCase } from 'lodash-es' export { cloneDeep , mergeWith , throttle , debounce , set , get , transform , isEqual , isObject , pick , groupBy , camelCase , } // mergeWith(object, sources, customizer) 它接受一个 customizer，调用以产生目标对象和来源对象属性的合并值。如果customizer 返回 undefined，将会由合并处理方法代替。 customizer调用与7个参数：(objValue, srcValue, key, object, source, stack)。 这方法会改变对象 object. // tail

一、为什么要用require.js？ 最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。 <script src="1.js"></script> 　　<script src="2.js"></script> 　　<script src="3.js"></script> 　　<script src="4.js"></script> 　　<script src="5.js"></script> 　　<script src="6.js"></script> 　　 这段代码依次加载多个js文件。 这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。 require.js的诞生，就是为了解决这两个问题： 　　（1）实现js文件的异步加载，避免网页失去响应； 　　（2）管理模块之间的依赖性，便于代码的编写和维护。 　　 二、require.js的加载 使用require.js的第一步，是先去官方网站 下载 最新版本。

概述 单独开发每个模块，用集成的方式把他们组合起来，拼出一个app。如通用的模块，自动更新的模块，反馈模块，推送模块都可以单独以模块来开发，最后进行集成。我们可以通过一个壳来包含很多个模块。 好处 可以单独升级模块。耦合度低。同时，也很好地解决了“牵一发而动全身”的问题。方便分工。与其他团队合作时，如外包的团队，可以很好的地将核心代码与外包部分隔离开，不用和他们分享核心代码，让他们去做独立的功能，做好直接调用就行。方便以后重构代码，不用担心会改到核心代码。 架构分层 顶层 ： 将所有的业务模块聚合在一起，加上配置，形成主应用。一个模块化做得好的应用，主应用都会比较简单且稳定。 中间层 ： 模块按照功能划分。比如app可以划分为更新、登录、分享、播放等模块。采用aar作为模块的最小单位，之所以选择aar是因为jar不能带资源只能带java代码，library太容易被修改。aar的好处是能带资源并且是编译好的，不能被修改。保证了模块的版本不会在被别人调用的时候随意修改，如果想修改就要联系做aar的人，让他去升级aar的版本。 在android studio里，用maven打包aar。aar其实就是依赖。 底层 ：包含基础库和底层库 （1）基础库：包含所有模块需要的依赖库，以及一些工具类，比如封装了的常用网络请求，封装图片处理fresco，数据库相关等，还包含所有模块需要的依赖库； （2

一、为什么要用require.js？ 最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。 <script src="1.js"></script> 　　<script src="2.js"></script> 　　<script src="3.js"></script> 　　<script src="4.js"></script> 　　<script src="5.js"></script> 　　<script src="6.js"></script> 这段代码依次加载多个js文件。 这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。 require.js的诞生，就是为了解决这两个问题： （1）实现js文件的异步加载，避免网页失去响应； （2）管理模块之间的依赖性，便于代码的编写和维护。 二、require.js的加载 使用require.js的第一步，是先去官方网站 下载 最新版本。 下载后

详解ES6 模块化 本文我们学习ES6模块化，如何从模块中导出变量、函数、类并在其他模块中重用。 ES6 模块即为在严格模式下执行的JavaScript文件。意味着模块中声明的变量和函数不会自动增加至全局作用域中。 1. 浏览器中执行模块 首先创建新文件message.js并增加下列代码： export let message = 'ES6 Modules'; 在es6中message.js是一个模块，包含message变量。export语句暴露message变量给其他模块。 其次，创建新的文件app.js使用message.js模块。app.js模块创建h1元素并添加至html页中。import语句从message.js模块中导入message变量。 import { message } from './message.js' const h1 = document.createElement('h1'); h1.textContent = message document.body.appendChild(h1) 第三步，创建新的html页面文件使用app.js模块： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ES6 Modules</title> </head> <body> <script

附：伪模块开发，终将会被es6的模块开发取代。其只为过渡阶段使用 一、为什么要用require.js？ 最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。 <script src="1.js"></script> 　 <script src="2.js"></script> 　　<script src="3.js"></script> 　　<script src="4.js"></script> 　　<script src="5.js"></script> 　　<script src="6.js"></script> 这段代码依次加载多个js文件。 这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。 require.js的诞生，就是为了解决这两个问题： 　　（1）实现js文件的异步加载，避免网页失去响应； 　　（2）管理模块之间的依赖性，便于代码的编写和维护。 二、require.js的加载

AMD 规范在这里： https:// github.com/amdjs/amdjs- api/wiki/AMD CMD 规范在这里： https:// github.com/seajs/seajs/ issues/242 AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。 CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。 区别： 1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible. 2. CMD 推崇依赖就近，AMD 推崇依赖前置，例如： // CMD 默认推荐的是 define(function(require, exports, module) { var a = require('./a') a.doSomething() // 此处略去 100 行 var b = require('./b') // 依赖可以就近书写 b.doSomething() ... }) // AMD 默认推荐的是 define(['./a', './b', 'require', 'exports'], function(a, b, require, exports) { // 依赖必须一开始就写好 a

1. 书写方式 grunt 运用配置的思想来写打包脚本，一切皆配置，所以会出现比较多的配置项，诸如option,src,dest等等。而且不同的插件可能会有自己扩展字段，导致认知成本的提高，运用的时候要搞懂各种插件的配置规则。 gulp 是用代码方式来写打包脚本，并且代码采用流式的写法，只抽象出了gulp. src , gulp. pipe , gulp. dest , gulp. watch gulp. task 等接口,运用相当简单。经尝试，使用gulp的代码量能比grunt少一半左右。 2. 任务划分 gulp 是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作 1. 构建工具 :　 可以用构建基础项目 2. 自动化 : 可以通过gulp.task配置各接口自动对js,css,html代码进行压缩, 自动刷新页面( IDE好多已经可以自动刷新了 ) 3. 提高效率用 : 可以编译less语法,可认快速对css的编辑 webpack 是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案 1. 打包工具 : gulp 也可以,但是需要按项目配置属性项 , webpack 很集成了,简单 2. 模块化识别 3. 编译模块代码方案用 所以定义和用法上来说 都不是一种东西