模块化

组件开发中难免会遇到子组件父组件之间以及兄弟组件之间的传值问题。 1、父组件传值给子组件： 如果父组件需要将placeholder值传给子组件，则在父组件标签中定义：placeholder="XXX",子组件在data中定义props:['placeholder']来接受，这样接收过来的placeholder就可以直接用this.label取出使用。 注意：props属性只可以取出使用，并不能改变其值。 父组件中： <inputText : placeholder = "control.placeholder" ></inputText> 子组件中： <input type = "text" v-model = "modelValue" : placeholder = "placeholder" > export default { data () { return { modelValue : '' , } }, props :[ 'placeholder' ], } 2、子组件传值给父组件： 如果子组件需要将input输入框的值传给父组件，则子组件中定义触发事件v-on:blur="change"(这里用的是失去焦点触发)，在change事件中使用$emit来传值，父组件中定义方法来接受即可，如下 子组件中： <input type = "text" v-model =

项目环境是用 vue-cli 搭建的vue项目;在项目中使用vue 配合 arcgis开发;加载的地图为天地图 1.1 这里不在废话,如果会用vue;就会用 vue-cli ;直接用命令 vue init webpack 生成就好了. 1.2 安装 esri-loader ;这个也是arcgis官方开发的,用命令 npm install --save esri-loader 安装就行了;详细文档参考 这里 1.3 在vue的script标签中用import的方式引入esri-loader : import esriLoader from 'esri-loader'; 1.4 然后加载 css js 等资源: esriLoader.loadScript ({ // 加载js url: 'http://jsapi.thinkgis.cn/dojo/dojo.js' }); // 加载css esriLoader.loadCss ( 'http://jsapi.thinkgis.cn/esri/css/esri.css' ); // 加载模块 esriLoader.loadModules (modules.modulesList) .then ( this .loading) .then (obj => { this .initMap (obj); }) .catch ((err) =>

配置 flexible 安装 lib-flexible 在命令行中运行如下安装： 1 npm i lib-flexible --save 引入 lib-flexible 在项目入口文件 main.js 里 引入 lib-flexible 1 2 // main.js import 'lib-flexible' 添加 meta 标签 在项目根目录的 index.html 中添加如下 meta 1 < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > px ת rem 实际开发中，我们通过设计稿得到的值单位是 px，所以要将 px 转换成 rem 再写进样式中。 将 px 转换成 rem 我们将使用 px2rem 这个工具，它有 webpack 的 loader： px2rem-loader 安装 px2rem-loader 在命令行中运行如下安装： 1 npm i px2rem-loade --save-dev 配置 px2rem-loade 在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。 我们只需在 cssLoader 后再加上一个

如果写超过es5版本的js，或者ts等。是需要babel来进行编译的。 但是babel值编译，如果遇到模块化他就无能为力了 需要webpack对其进行模块化打包功能。 通常babel编译+webpack处理模块打包压缩等，挺好的。是完美的方案 但是webpack它不老实。它想牛逼，于是他就内置了不用任何配的情况下，就支持对es6的编译环节。您只管使用webpack命令，他就支持编译+模块处理打包了。但是稍微高端的就不行，比如我要编译ts等，就需要引入ts-loader了。 前端因为浏览器目前2019年均不直接支持模块化，所以需要进行搭配来使用 如果您的代码是es6，且没有用模块，那么用chrome直接运行即可，无需任何处理，我自己测试了，chrome支持良好。 如果你不放心，或者还要支持其他浏览器，那么你可以用babel编译一下子，是的不推荐你用webpack，因为你没有用模块化功能，所以浪费了，webpack肯定要比babel重 若果您的代码有es6以及其模块化，那么推荐您直接上webpack，因为它既能处理es6普通语法，也能处理模块化。当然你可以先用babel编译成es5+webpack去处理模块化，可这不是脱了裤子放屁多次一举么 如果你的代码有ts且没有模块化，babel和tsc都行，如果你的代码ts和模块化，webpack也行就是浪费性能呗， 如果你的代码ts和模块化

什么是模块化写作 模块化写作（英文：Topic-based authoring 或 Topic-based writing）是一种以主题（英文：Topic）为模块进行内容创作的写作方式，是编写各类技术文档是最常用的方式之一。这种写作方式与当前线性的写作方式形成鲜明的对比，各个不同的主题模块会根据不同的内容来自由组合或重用，每个主题是一个独立的内容模块，包含标题和内容（有时可以只有标题）向读者提供一段完整的信息。各个主题之间可以互相嵌套，也可以独立存在。根据结构化资讯标准促进组织（OASIS）发布的达尔文信息类型架构（DITA）规范，主题可以分为概念、任务、参考、术语表和故障排查五种类型。 简单来说，模块化写作就是写出一个个独立的内容模块。“独立的内容模块”可以是一个标题加上几段话，也可以仅仅是一个标题。它的评价标准也很简单：如果这段内容单独成文依然合乎情理，那它就是一个“独立的内容模块”。 举例而言，这篇文章《模块化写作》就是一个独立的内容模块。我既可以把它单独作为一篇文章、仅解释什么是模式化写作，也可以把它作为其它文章中的一小节、把模块化写作作为背景知识介绍给读者。无论哪种方式都是合乎情理的。 为什么要进行模块化写作 模块化写作的优点显而易见。 提升阅读体验。现如今，读者在搜索信息时所得到的信息多是碎片化的，用户需要自行整合信息以构建完整的逻辑体系来解决实际问题

好处: 复用性高，一次定义，多次使用 前端模块化 AMD AMD的实现需要使用 require.js CMD CMD的实现需要使用 sea.js 【 不更新 】 Common.js Node.js使用了Common.js规范 内置模块引用 自定义模块引用 第三方模块引用 EcmaScript 模块化 es5 module.export / exports es6 export default / export export default 默认导出一个 ， import xx from xxx export 批量导出，导出多个, import { xxx } from xxx 格式： var/let/const 变量名 = require(路径) 内置模块路径就是模块名称 使用内置模块身上的方法 const fs = require( 'fs' ) fs.readFile('../dist/1.txt','utf8',( error,docs ) => { console.log( docs ) }) 作用： 数据请求 使用： 安装 npm/cnpm i/install request --dev-save/-D 开发环境安装 npm/cnpm i/install request --save/-S 生产环境安装 导入 let/var/const 变量名 = require(

模块化开发简述 什么是模块化：指文件的组织、管理、使用的方式。即把一个大的文件拆分成几个小的文件，他们之间相互引用、依赖。 都说模块化开发为前端发展带来了巨大的进步，然而不熟悉的人看着也是两眼一懵，那其实这到底是什么？好处在哪？我来说说自己的见解吧。 1. 模块化和传统开发的区别 实话讲，其实在我看来，两者的开发是一样的，除了方式不一样，达到的效果并没两样。 看着扯淡，但实际可以想一下，现流行的模块化开发主要有两种方式： 依赖加载。这种方式是最广泛的，像requirejs，sea.js等，除了 编写规范 不一样，实际都是通过相关require api把模块chunk文件拿回来，当加载完成之后再运行逻辑代码。 依赖打包。经典代表就是webpack，其实就是写代码的时候分开模块，但打包的时候按依赖关系找到各个模块，最后打包到同一个文件上，并给每个chunk标识id，运行逻辑代码时将模块引用指向该id，从而实现模块化。 而传统的开发方式是在页面上通过脚本标签引入，等所有脚本资源加载完成后再运行逻辑代码。这样一对比，是不是发现效果其实是一样的，我把不同脚本分开写，也是可以做到类似模块化的效果？ 那么重点来了，模块化的优势在哪？ 别急着回答，先思考一下，然后带着你的想法继续看下去。 先回想一下，传统开发的痛点在哪。 首先，如上所述，传统的开发方式需要等待所有脚本资源加载完成

如今backbone、emberjs、spinejs、batmanjs 等 MVC框架 侵袭而来。CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs等 模块化 的JavaScript扑面而 来。web前端已经演变成大前端，web前端的发展速度之快。 1)我们来看看什么是 模块化 ？ 模块化 是一种将系统分离成独立功能部分的方法，可将系统分割成独立的功能部分，严格定义模块接口、模块间具有透明性。 2)模块化的优缺点： a>优点： 可维护性 1.灵活架构，焦点分离 2.方便模块间组合、分解 3.方便单个模块功能调试、升级 4.多人协作互不干扰 b>缺点： 性能损耗 1.系统分层，调用链会很长 2.模块间通信,模块间发送消息会很耗性能 新人首发，欢迎各位大神评论指导，不吝赐教，小弟拜谢！

什么是模块 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信 模块化规范 根据平台划分 ƽ̨ 规范 特性 浏览器 AMD、CMD 存在网络瓶颈，使用异步加载 非浏览器 CommonJS 直接操作 IO，同步加载 根据同步异步划分 特性 规范 同步加载 CommonJS 异步加载 AMD、CMD AMD、CMD两大规范 规范 约束条件 代表作 AMD 依赖前置 requirejs CMD 就近依赖 seajs 模块化的好处 避免命名冲突(减少命名空间污染) 更好的分离, 按需加载 更高复用性 高可维护性

模块化&组件化 原因 图解 模块化Module 概念 使用 目的 依赖 架构定位 内容：组件内的Script 组件化 概念 使用 目的：复用，解耦 依赖 架构定位 内容：template、style 和 script [TOC] # 模块化&组件化 ## 原因 高耦合、低内聚、无重用 ## 图解 //-->