模块化

webpack是一个模块管理工具，它跟grunt,gulp,fis等诸多前端工具一样，为了使日渐增多的js代码变得合理有序，应运而生的模块化工具 1 - 它同时支持commonjs和AMD规范（甚至混合的形式）； 2 - 它可以打成一个完整的包，也可以分成多个部分，在运行时异步加载（可以减少第一次加载的时间）； 3 - 依赖在编译时即处理完毕，可以减少运行时包的大小； 4 - Loaders可以使文件在编译时得到预处理，这可以帮我们做很多事情，比如说模板的预编译，图片的base64处理； 5 - 丰富的和可扩展的插件可以适应多变的需求。 下面是我的webpack的配置： var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); module.exports = { //插件项 plugins: [commonsPlugin], //页面入口文件配置 entry: { index : './app/js/index.js' }, //入口文件输出配置 output: { path: 'dist/js', filename: '[name].js' }, module: { //加载器配置 loaders: [ { test: /

Android项目模块化/组件化开发（非原创） Android 模块化完整方案实现 Android 模块化/组件化 方案实践 Android工程化实践：模块化 Android模块化实践 来源： CSDN 作者： yzpyzp 链接： https://blog.csdn.net/yzpbright/article/details/104541108

了解后端语言的童鞋一定听过模块化开发的概念，比如java、python等后端语言都有自己的模块化特性，然而和后端语言相比，javascript还尚未实现模块化的功能，虽然之后的更高版本可能引入模块化开发的概念，但是现阶段我们可以通过第三方控件来实现。 今天我就来给大家介绍下可以帮助我们实现前端模块化的工具——seaJs。如果对seaJs已经有实际使用经验的小伙伴可以直接忽略这篇文章。 如果有小伙伴了解requireJs，那么学习seaJs会相当的容易，因为requireJs也是前端模块化的构建工具之一，两者的主要区别就是requireJs是基于AMD规范的，而seaJs是基于CMD规范的。 至于什么是AMD和CMD，在这里不做详细介绍啦，想要了解的童鞋可以查看seaJs作者玉伯的回答： http://www.zhihu.com/question/20351507/answer/14859415 好了，我们切入正题，首先先介绍下seaJs的下载及配置。 一、seaJs的下载及配置 下载： http://seajs.org/docs/#downloads （当前最新版本为3.0.0，还可以使用smp下载） 配置：（1）将下载后的sea.js文件挪到自己的网站目录下（sea.js位于sea-modules\seajs\seajs中）； 　　　 我的网站目录如下： 　　 　　　（2

一、蓝图定义 如果我们将所有的Flask的请求方法都写在同一个文件下的话，非常的不便于我们的代码的管理和后期的功能代码的添加,简单来说蓝图就是实现一个模块化。 二、基本使用 1.新建目录views，在views文件夹中创建模块user，user代码如下 # 第一步：导入蓝图 from flask import Blueprint # 第二步：实例化user_bt蓝图类 url_prefix ==> 指定url前缀 user_bt = Blueprint('user',__name__,url_prefix='/u') # 第三步：写视图函数 @user_bt.route('/profile/') def Profile(): return '个人中心' @user_bt.route('/settings/') def settings(): return '设置页面' 2.在app中注册蓝图 from flask import Flask """ 用户模块 ===》user_bt 新闻模块 """ # 第四步：导入模块 from view import user,news # 第五步：注册蓝图到app中 app.register_blueprint(user.user_bt) app.register_blueprint(news.news_bt) @app.route('/')

小程序模块化 可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。 tips:exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。 // common.js function sayHello(name) { console.log(`Hello ${name} !`) } function sayGoodbye(name) { console.log(`Goodbye ${name} !`) } module.exports.sayHello = sayHello exports.sayGoodbye = sayGoodbye 在需要使用这些模块的文件中，使用 require(path) 将公共代码引入 const common = require('common.js') Page({ helloMINA() { common.sayHello('MINA') }, goodbyeMINA() { common.sayGoodbye('MINA') } }) tips:require 暂时不支持绝对路径。 封装

Nodejs的模块化 在我们日常进行web开发的过程中, 对于模块化总是跑不掉的, 各家的模块化有各家的实现方式, 百花齐放, nodejs遵循commonjs规范的模块化 把每一个文件都看做是一个模块 如果一个模块需要暴露一些数据或者功能供其他模块使用, 需要写上 module.exports = xxx , 该过程称之为模块的导出 如果一个模块需要用到另一个模块导出的代码, 需要使用require(’…’)来引入, require函数的返回值就是索引模块暴露出的内容 模块中的所有全局代码产生的变量, 函数均不会造成全局污染, 仅在模块内使用 模块具有缓存, 第一次导入模块时就会缓存该模块, 之后再次导入同一个模块的时候, 直接使用之前的结果 每个模块可能被其他模块所依赖, 也可能会依赖于其他模块 module.exports和require的使用 我新建一个index.js // index.js const result = require ( './test.js' ) ; console . log ( result ) ; // 输出{ a: 100 } 然后我再新建一个test.js // test.js const a = 100 ; module . exports = { a } 我们进入terminal, 执行index.js文件, 会发现打印出来的

什么是模块化 模块化其实是一种规范，一种约束，这种约束会大大提升开发效率。将每个js文件看作是一个模块，每个模块通过固定的方式引入，并且通过固定的方式向外暴露指定的内容。 按照js模块化的设想，一个个模块按照其依赖关系组合，最终插入到主程序中。 模块化的方法 普通方法 优点：可以直接调用。 缺点：变量可能会出现重复造成的污染，并且无法进行结构性分类。 function a ( ) { console . log ( "a" ) ; } function b ( ) { console . log ( "b" ) ; } a ( ) ; b ( ) ; 对象的写法 优点：变量不会被直接污染，并且易于分类描述内容。 缺点：会暴露所有成员，内部状态可以被外部改写。 var obj = { _a : false , a : function ( ) { console . log ( "a" ) ; } , b : function ( ) { console . log ( "b" ) ; } } ; obj . a ( ) ; obj . b ( ) ; obj . _a = 3 ; 立即执行函数 优点：外部代码无法读取到里面的_num变量，保证了变量不被污染。 var obj = ( function ( ) { var _num = 3 ; return { a :

前言 Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"模块"（module）了，随着前端发展对 模块需求越来越大，模块也是经历了从最初的简单模块写法到AMD和CMD规范的出现，再到ES6发布，目前已经可以 很方便的在Javascript中使用"类"和"模块"了。 一、以前的写法 1、原始写法 function m1(){ 　　　　//... 　　} 　　function m2(){ 　　　　//... 　　} 缺点 ： "污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。 2、对象写法 为了解决上面缺点，把模块写成一个对象，所有的模块成员都放到这个对象里面 var module1 = new Object({ 　　　　_count : 0, 　　　　m1 : function (){ 　　　　　　//... 　　　　}, 　　　　m2 : function (){ 　　　　　　//... 　　　　} 　　}); 使用 module1.m1(); 存在缺点： 但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。 module1._count = 5; 3、立即执行函数写法 立即执行函数（IIFE），可以达到不暴露私有成员的目的。 var module1 =

编程的智慧 编程是一种创造性的工作，是一门艺术。精通任何一门艺术，都需要很多的练习和领悟，所以这里提出的“智慧”，并不是号称一天瘦十斤的减肥药，它并不能代替你自己的勤奋。然而由于软件行业喜欢标新立异，喜欢把简单的事情搞复杂，我希望这些文字能给迷惑中的人们指出一些正确的方向，让他们少走一些弯路，基本做到一分耕耘一分收获。 ​ 反复推敲代码 有些人喜欢炫耀自己写了多少多少万行的代码，仿佛代码的数量是衡量编程水平的标准。然而，如果你总是匆匆写出代码，却从来不回头去推敲，修改和提炼，其实是不可能提高编程水平的。你会制造出越来越多平庸甚至糟糕的代码。在这种意义上，很多人所谓的“工作经验”，跟他代码的质量其实不一定成正比。如果有几十年的工作经验，却从来不回头去提炼和反思自己的代码，那么他也许还不如一个只有一两年经验，却喜欢反复推敲，仔细领悟的人。 有位文豪说得好：“看一个作家的水平，不是看他发表了多少文字，而要看他的废纸篓里扔掉了多少。” 我觉得同样的理论适用于编程。好的程序员，他们删掉的代码，比留下来的还要多很多。如果你看见一个人写了很多代码，却没有删掉多少，那他的代码一定有很多垃圾。 就像文学作品一样，代码是不可能一蹴而就的。灵感似乎总是零零星星，陆陆续续到来的。任何人都不可能一笔呵成，就算再厉害的程序员，也需要经过一段时间，才能发现最简单优雅的写法。有时候你反复提炼一段代码，觉得到了顶峰

前端模块化 为什么要用模块化，因为可以解决两个问题 变量命名冲突 代码复用 ES6中的导出export和导入import export导出的三种用法 直接定义变量/函数/类的时候前面就加exprot 使用对象类型导出export export {变量名1,变量名2} 如果导入的时候我想自己命名，就可以用default方法导入。 导入时自定义命名时不用加大括号 同一模块中default只能存在1个 //导出default export default function(){} //export default {} 导出对象 //导入 import myFun from './xxx.js' import导入 默认导入方法 import{变量名1,变量名2} from './xxx.js' 全部以对象的方式导入 import * as 自定义对象名 from './xxx.js' 使用的时候以对象的方式使用 如 obj.name commonJS中的导入和导出 导出 module.exports = {变量名1,变量名2} 导入 const {变量名1,变量名2} = require('./xxx.js') const obj = require('./xxx.js') el和template区别 真实开发中，不会频繁更改index.html中的代码，而是通过template的方式。