模块化

为什么会有 Vuex 这个东西 ？ 现代前端框架主要解决的是 事件 -> 状态 -> UI 将传统前端在两个过程的代码剥离出来，变得更加容易维护； vue的声明式渲染，解决了 状态 和 UI 的同步问题，从而使我们不需要由于状态发生改变去写大量的命令式改变 dom 的代码。 而类似于 vuex 这类状态管理的库，则解决了 事件 -> 状态 这个过程的维护问题。这类库所做的事情就是管理从 事件源映射到状态变化 这个过程(将这个映射过程 从视图组件中剥离出来 ，组织好这一部分的代码，在组件外部进行状态的管理) 具体表现就是一个全局的数据中心 store 配置，每个组件进行更新的时候就通知数据中心，数据中心改变后，再去触发每个调用它的组件进行更新(这种更新是响应式的)；几个核心概念就是 mutations 里的方法可以直接 mutate store 中的状态，并且 mutation 过程必须同步的，需要通过 commit 去触发；而 actions 则允许异步的操作，通过 commit 去触发 mutation ，达到间接修改 store 的目的， action 本身需要通过 disptch 去触发。 Vuex与全局对象的区别 其实， vuex 与全局对象有一定的共同之处，那就是状态会被全局共享，无论是嵌套多少组件… 每一个 Vuex 应用的核心就是 store（仓库）。“store

一：早就听说过模块化工具require.js的大名，之前也是由于自己的网页上引用了诸多的js，而且一堆的js引用放在那里，一个依赖另一个，导致我不敢随意改动各个js的位置，而且有时页面内容一多起来，js加载也使得本来的html内容出现响应延迟。因此，在网上查过后，便得知解决方法是使用AMD异步模块-require.js。 二：了解过require.js后，我们一般都知道它具有如下优点： 1，防止js加载阻塞页面渲染，实现js文件的异步加载，避免网页失去响应； 2，使用程序调用的方式加载js，防止出现如下丑陋不堪的一串引用，同时管理模块之间的依赖性，便于编写与维护； <script type="text/javascript" src="a.js"></script> <script type="text/javascript" src="b.js"></script> <script type="text/javascript" src="c.js"></script> <script type="text/javascript" src="d.js"></script> <script type="text/javascript" src="e.js"></script> <script type="text/javascript" src="f.js"></script>

一、什么是模块化？ 模块化是指解决一个复杂的问题时自顶向下把系统划分成若干模块的过程，有多种属性，分别反映其内部特性。 二、为什么要模块化（模块化的好处）？ 1.更好地分离 　　如果要加载多个就得就得放置多个script标签，如果是加载模块的话，如seaJS，就只需加载一个sea.js即可，这样对于HTML和JavaScript分离很有好处。 2.更好的代码组织方式 　　如果单个文件越来越大，维护起来问题出问题的几率也会越来越大，一个人开发还好，如果是多人开发，不同的代码风格，超多的业务逻辑混杂在一起，不要说维护了，光想想就蛋疼。模块化的开发，一个文件就是一个模块，控制了文件的粒度，每个模块可以专注于一个功能，在多人开发时，各自管好自己的模块就行。 3.按需加载 　　还是以单个文件来说，当文件大到一定程度，性能问题也随之而来。合并文件是能减少请求，性能也会有所提升，但是当文件大到一定的体积时，此时的下载时间可能并不会比多个小文件的下载时间短，此时就需要权衡请求数和文件体积的关系了。 4.避免命名冲突 　　JavaScript本身是没有命名空间的，为了避免命名冲突，经常会使用对象或闭包的办法来避免。用对象仅仅是降低了冲突的概率而已，那经常使用的jQuery开发来说，无论是往$上扩张还是在$.fn上扩展，开发的人多了难免会起冲突。或者用自定义对象，搞个好几层，不光是写起来难记

一，JS模块化演变过程 1.普通函数封装： 1 function fn1(){ 2 3 } 4 5 function fn2(){ 6 7 } 最初的这种普通函数封装的缺点很明显：污染了全局变量，无法避免的会与其他模块发生变量名冲突，而且自身模块成员之间没有任何联系，说白了就是没有做到“高内聚，低耦合”原则 2.对象： 1 var myModule = { 2 var1: 1, 3 var2: 2, 4 fn1: function(){ 5 6 }, 7 fn2: function(){ 8 9 } 10 } 技术一直在进步，这种做法的避免了变量污染，只要保证模块名唯一即可，自身模块内的成员也有了联系； 但是新的问题出现了，看似不错的解决方案，也有缺陷，外部可以随意修改内部成员； 如：myModel.val = 100; 说白了就是产生了安全问题 3.立即执行函数 1 var myModule = (function(){ 2 var var1 = 1; 3 var var2 = 2; 4 function fn1(){ 5 6 } 7 function fn2(){ 8 9 } 10 return { 11 fn1: fn1, fn2: fn2 12 }; 13 })(); 这种做法就是我们JS模块化的基础，技术永无止境，随着JS模块化技术提高，产生了不同流派，分支

在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀 这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（module）了，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码 模块 既然JavaScript不能handle如此大规模的代码，我们可以借鉴一下其它语言是怎么处理大规模程序设计的，在Java中有一个重要带概念——package，逻辑上相关的代码组织到同一个包内，包内是一个相对独立的王国，不用担心命名冲突什么的，那么外部如果使用呢？直接import对应的package即可 import java.util.ArrayList; 遗憾的是JavaScript在设计时定位原因，没有提供类似的功能，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化。 一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，各行其是就都乱套了 规范形成的过程是痛苦的

一、为什么要用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的第一步，是先去官方网站下载最新版本。 下载后

今天学了一个计算器， 记录一下里面的一些知识点和内容。 css： 　　两张图片，分别设置了button的背景不同的样式： 　　 　　　　可能看不清楚，但是确实第二张图片的按键有立体感一些，区别是它用到了： 　　　　　　　　　 　linear-gradient(hsla(0,0%,100%,.2),transparent) 　　　　　　　　　　虽然是一个简单的颜色渐变，但是挺百搭的。 　　　　hsla(), 知道，但是从来没用过。它可以表现出所有颜色。 　　　　　　　　H是色度，取值在0度~360度之间，0度是红色，120度是绿色，240度是蓝色。360度也是红色。 　　　　　　　　S是饱和度，是色彩的纯度，是一个百分比的值，取值在0%~100%，0%饱和度最低，100%饱和度最高 　　　　　　　　L是亮度，也是一个百分比值，取值在0%~100%，0%最暗，100%最亮。 　　　　　　　　A是不透明度，取值在0.0~1.0，0.0完全透明，1.0完全不透明。 　　　　transparent, 查了下，是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。 　　　　　　来一张transparent和black的对比: 　　　　　 　　　　　　　　　　丑爆了。 js: 　　我直接贴过来 　　　　有: 1. .replace() , 2. .eval() 3.

模块化(切记：学习思想) 如果不用模块化编写代码，那么会具有以下问题： 代码杂乱无章，没有条理性，不便于维护，不便于复用 很多代码重复、逻辑重复 全局变量污染 不方便保护私有数据(闭包) 模块化的基本实现：闭包的自调用函数 //日期控件 var DatePicker = (function(){ return { init(){ } } })(); //Header // tabbar // login //Content // sidebar // table //Footer var KTV=(function(){ return { pay(){ }, xiaofei(){ } } })() AMD模块化 -->requireJS AMD：async module define：异步模块定义 AMD其实就是requireJS实现的模块化解决方案 其他模块化解决方案： CommonJS：Node中使用的模块化解决方案 CMD（common module define）：seajs中提出来的模块化解决方案 其实CMD可以认为是CommonJS的前端实现 seajs由阿里的（玉帛）编写 seajs在2，3年前比较火，从去年开始已经停止更新 vue 、angular、react已经集成了各自的模块化 es6模块化 webpack也有模块化的解决方案 vue、angular

通常vue都是搭配webpack+vue-cli使用的 如果不在nodejs环境下开发web应用呢？ 这里提出一个解决方案： 1、加载requirejs，并且指定main函数 <script data-main="js/main" src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script> 2、定义main函数 require.config({ paths: { "text": 'https://cdn.bootcss.com/require-text/2.0.12/text.min', 'vueLoader': 'componentLoader', 'article': '../components/article', 'color': '../components/dialog/color', 'util': './common/util', 'app': './workspace/vueSet', }, waitSeconds: 3 }); require(['vueLoader', 'componentConfig', 'app'], (CptLoader, commCpt, app) => { CptLoader.config(commCpt,()=>{ setTimeout(()=>{

1、先看一下 未模块化 的路由配置，有哪些地方是可以提出去的 import React from 'react' import '../css/index.css' import { BrowserRouter as Router, Route, Link} from 'react-router-dom' /********************这一块是可以单独提出去的 start**************************/ import EntryPage from '../components/entryPage' import DownloadPage from '../components/downloadPage' let routes = [ { path: '/', components: EntryPage, exact: true }, { path: '/download', components: DownloadPage } ] /********************这一块是可以单独提出去的 end**************************/ class App extends React.Component{ render() { return ( <Router> <div id="app"> /****************