模块化

前端模块规范有三种：CommonJs,AMD和CMD。 CommonJs用在服务器端，AMD和CMD用在浏览器环境 AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。 CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。 AMD:提前执行（异步加载：依赖先执行）+延迟执行 CMD:延迟执行（运行到需加载，根据顺序执行） 一.模块 以前使用JS的方式要更改,以前只能说是JS的最初级应用,现在对JS应该使用模块化写法. 好处: 模块就是实现特定功能的文件，把几个函数放在一个文件里就构成了一个模块。需要的时候加载这个文件，调用其中的函数即可。 但这样做会污染全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间没什么关系。 简单的例子: var module = (function(){ 　　　　var star = 0; 　　　　var f1 = function (){ 　　　　　　alert('ok'); 　　　　}; 　　　　var f2 = function (){ 　　　　　　//... 　　　　}; return { f1:f1, f2:f2 }; 　　})(); module.f1(); //ok alert(module.star) //undefined 因为start并没有return出来 二.CommonJs

一、前言 上一篇大概说了下abp通用树形模块如何使用，本篇主要分析下设计思路。 日常开发中会用到很多树状结构的数据，比如：产品的多级分类、省市区县，大多数系统也会用到类似“通用字典/数据字典”的功能，为系统各个地方提下拉框选择的数据源。abp提供了一个模块化系统，只要按它的约定就可以实现一个通用的树形数据的模块，这样公司的多个系统都可以使用，也可以用类似nuget的方式提供给别人使用。 先列举下它的功能 通过nuget方便安装和升级 配置简单 默认已经提供“通用字典”功能 实体、管理器、应用服务都是抽象类，结合泛型 狠容易扩展实现自己的树形结构 二、必备知识 这不是abp入门级的文章，是探讨系统模块化开发的一种思路。所以要求对abp有经验，完整看过abp文档，对涉及到的模块、依赖注入、启动配置、权限、菜单、本地化等等概念有清晰的认识 三、包和源码 源码地址： https://github.com/bxjg1987/abpGeneralModules nuget：Install-Package BXJG.GeneralTree -Version 1.0.2 在线地址： http://test.cqsifang.com/ 账号密码：admin zlj.com （别胡来，拜托...） 源码仓库中还有通用的文件模块、附件模块，后期会讲讲；nuget搜索bxjg可以找到这几个相关的包 四

转载自:http://www.cnblogs.com/kongsanpang/p/6222703.html#commentform 最近在网上看到很多大神都有写博客的习惯，坚持写博客不但可以为自己的平时的学习做好记录积累 无意之中也学还能帮助到一些其他的朋友所以今天我也注册一个账号记录一下学习的点滴！当然本人能力实在有限写出的文章可能和大神们不能比拟 如果有什么不专业甚至是错误的地方还请大家指正！好了说了这么多那么下面进入正题^_^ 在网上经常看到有朋友在问自己能不能写vue组件 如果可以怎么应用到自己的项目之中呢！我觉得吧这个事儿就和用煮大米饭是一个道理的 1. 首先作大米饭我们得有米吧 要不 巧妇难为无米之炊啊 因此先买好我们自己的大米也就是创建组件文件，这里我假设要创建一个自己loading效果组件 那么我们就先创建 loading.vue 里面的代码根据vue template相关规则写就可以 这里就不在赘述了 我只写一个最最简单的例子 2.ok了 米就这么愉快的买好了 那么有了米我们现在只需要把他放在锅里！那么这个锅是谁呢！好吧我们自己来背这个锅，我们创建一个相关的.js文件 通常组件都是一个功能自己一个文件夹那么每个组件都应该有自己独立的调用文件（一盆大米一个锅）那么为了统一我们可以都叫做index.js当然了这个名字你可以随便起

模块化 ： 是从代码逻辑的角度进行划分的。方便代码分层开发，保证每个功能模块的职能单一； 组件化 ： 前端的组件化，是从 UI 界面的角度进行划分的，方便 UI 组件的重用。 在Vue中，组件的出现，是为了拆分 Vue 实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以调用对应的组件即可。 来源： https://www.cnblogs.com/JAVA-STUDYER/p/11024513.html

在es6出来之前，javascript还不支持模块化，想要实现模块化，只能用requrie.js（国外）和seajs（国内）之类相关的库。 随着大前端的工作越来越繁杂，系统越来越庞大，更好的分工使其模块化就显得很重要。 在复习之前有一个很重要的，就是目前没有浏览器支持ES6的module模块，如果直接写会报错的。 对于ES6的模块化，主要有两个属性，一个是export（导出模块），一个是import（导入模块）； 基础用法 ，假设有两个模块，a.js和b.js //---a.js文件--- //导出变量：name export var name = "lzhe"; export就是暴露一个变量，也可以是对象或者是方法，供其他调用的模块使用。如果想要用这个属性也很简单。 //---b.js文件--- //导入 模块B的属性 name import { name } from "./a.js"; console.log(name); 能正常打印，说明正确引用了a.js文件中暴露的变量或者方法。 那么如果有 多个变量或者是方法想要暴露 的话，可以这样写： //变量name var name = "lzhe"; //变量age var age = 25; //方法 result var result = function(){ console.log("say hello"); } /

es6中的模块化 12018.05.06 22:15:33字数 491阅读 7982 在之前的javascript中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化。直至ES6带来了模块化，才让javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块。 export的用法 在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（输出）。先来看个例子，来对一个变量进行模块化。我们先来创建一个test.js文件，来对这一个变量进行输出： export let myName="laowang"; 然后可以创建一个index.js文件，以import的形式将这个变量进行引入: import {myName} from "./test.js"; console.log(myName);//laowang 如果要输出多个变量可以将这些变量包装成对象进行模块化输出： let myName="laowang"; let myAge=90; let myfn=function(){ return "我是"+myName+"！今年"+myAge+"岁了" } export

在之前的javascript中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化。直至ES6带来了模块化，才让javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块。 export的用法 在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（输出）。先来看个例子，来对一个变量进行模块化。我们先来创建一个test.js文件，来对这一个变量进行输出： export let myName="laowang"; 然后可以创建一个index.js文件，以import的形式将这个变量进行引入： import {myName} from "./test.js"; console.log(myName);//laowang 如果要输出多个变量可以将这些变量包装成对象进行模块化输出： let myName="laowang"; let myAge=90; let myfn=function(){ return "我是"+myName+"！今年"+myAge+"岁了" } export { myName, myAge, myfn } /******************

这个DEMO的是一个定义了一个窗体插件接口，把其他窗口注册到这个窗体插件接口中。主程序运行起来，就遍历一下窗体插件接口，把每个窗体内嵌到对话框中 运行效果如下 主窗口代码如下 unit Frm_Main; interface { 本程序演示了如何使用QPlugins来做模块间的松散耦合，使用了Execute来传递，实际上 也可以约定接口直接调用（请参考 MultiInstance 示例） } uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics, Vcl.Controls, Vcl.Forms, Vcl.Dialogs, QPlugins, qplugins_base, qplugins_params, Vcl.StdCtrls, Vcl.ComCtrls; type TForm_Main = class(TForm) PageControl1: TPageControl; procedure FormCreate(Sender: TObject); private { Private declarations } public { Public declarations } end; var Form_Main: TForm_Main

在之前的 javascript 中一直是没有模块系统的，前辈们为了解决这些问题，提出了各种规范, 最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。而 ES6 中提供了简单的模块系统，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。 基本用法 es6 中新增了两个命令 export 和 import , export 命令用于规定模块的对外接口， import 命令用于输入其他模块提供的功能。 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个 变量，就必须使用export关键字输出该变量。下面是一个JS文件，里面使用export命令输出变量。 123456789 // math.jsexport const add = function (a, b) { return a + b}export const subtract = function (a, b) { return a - b} 使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。 12345 // main.jsimport { add, subtract } from './test.js'add(1, 2)substract(3, 2) export

个人认为：前端发展的导向是前端工程化，智能化，模块化，组件化，层次化。 一个项目的开发逐渐在人工智能+物联网的时代，走向以下的五化 原因: Web前端页面的开发必然与DOM进行交互操作，前端框架的一次次更新，是从满足目前的业务需求到提升效率的阶段，慢慢走向改善性能的阶段（开发和部署环境优化，代码优化，网站性能优化，数据优化，页面优化等等）。 1.前端工程化。 前端工程化指的是将软件工程的方法和原理运用在前端开发中, 目的是实现 高效协同，质量开发。 具体是： a.Node服务，提供数据代理，路由，服务器渲染。 b.Web应用开发，专注于web交互体验。 c.前端运维：构建，测试，部署，监控。 2.前端模块化(页面模块化开发+基础模块化)。 （1）基础模块化： A. CommonJS————同步加载、服务器端的模块化规范，采用案列：Node.js 实现原理： 一个单独的文件就是一个模块； 加载模块采用同步方式，加载完成后才能执行后面的操作； 加载模块使用require方法，该方法读取一个文件并执行，最后返回内部的exports对象； 特点： 比较适合运用于服务器的编程，加载模块文件通常都存在本地磁盘，加载过程无延迟，无需异步加载 B. AMD————异步加载，采用案例：require.js 实现原理： 异步模块定义，通过一个函数封装所有所需要、所依赖的模块/方法/对象/属性；