首先引用我们的今天的主角 ----《前端模块化开发的价值》

1,前端开发最常见的两个问题 ---命名冲突和文件依赖

2,对于命名冲突的基本解决办法就是学习其他语言的习惯,添加命名空间

 var org = {};
org.CoolSite = {};
org.CoolSite.Utils = {}; org.CoolSite.Utils.each = function (arr) {
// 实现代码
}; org.CoolSite.Utils.log = function (str) {
// 实现代码
};

但是真正使用的时候,就会带来一个问题就是使用一个方法,需要程序猿记住很长的命名空间,必须使用log方法,就需要写 org.CoolSite.Utils.log,它并不能想其他语言一样,使用import ,using来引用相应的命名空间。

3,对于文件依赖的基本解决办法就是在每个文件的内容定义把依赖的文件都引入。

document.write('<script type="text/javascript" src="../jquery1.4.js"/>');

function myeach(){
return jQuery.each;
}

但是在我们开发过程中,就会出现如果一个页面同时引入两个jquery插件的话,那么就会出现第一个插件怎么都访问不到。原因就是后者又重新引入了jquery文件,那么第一个插件就没有了。

4,以上前端开发过程中出现的文件,就是引用模块开发的意义。

模块开发基本代码:

define(function(require, exports) {
exports.each = function (arr) {
// 实现代码
}; exports.log = function (str) {
// 实现代码
};
});
define(function(require, exports) {
var util = require('./util.js'); exports.init = function() {
// 实现代码
};
});

5,模块加载器目前比较流行的有 Requirejs 和 Seajs

js 模块开发之一(模块开发价值)的更多相关文章

  1. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  2. r.js合并实践 --项目中用到require.js做生产时模块开发 r.js build.js配置详解

    本文所用源代码已上传,需要的朋友自行下载:点我下载 第一步: 全局安装  npm install -g requirejs 第二步: 1.以下例子主要实现功能, 1)引用jq库获取dom中元素文本, ...

  3. nw.js node-webkit系列(15)如何使用内部模块和第三方模块进行开发

    原文链接:http://blog.csdn.net/zeping891103/article/details/50786259 原谅原版链接:https://github.com/nwjs/nw.js ...

  4. 通过Anuglar Material串串学客户端开发 - NodeJS模块机制之Module.Exports

    module.exports 前文讲到在Angular Material的第二个编译文件docs/gulpfile.js中却看到了一个奇怪的东西module.exports那么module.expor ...

  5. 基于localStorge开发登录模块的记住密码与自动登录

    前沿||我是乐于分享,善于交流的鸟窝 先做写一篇关于登录模块中记住密码与自动登录的模块.鸟窝微信:jkxx123321 关于这个模块功能模块的由来,这是鸟大大的处女秀,为什么这么说呢?一天在群里,一个 ...

  6. 【译】GNU Radio How to write a block 【如何开发用户模块及编写功能块】

    本文讲解如何在GNU Radio中添加用户开发的信号处理模块,译文如有不当之处可参考原文地址:http://gnuradio.microembedded.com/outoftreemodules Ou ...

  7. 第六模块:WEB框架开发 第1章·Django框架开发1~50

    01-Django基础介绍 02-Web应用程序1 03-Web应用程序2 04-http请求协议1 05-http请求协议2 06-http协议之响应协议 07-wsgire模块1 08-wsgir ...

  8. Python全栈开发【模块】

    Python全栈开发[模块] 本节内容: 模块介绍 time random os sys json & picle shelve XML hashlib ConfigParser loggin ...

  9. 开发Nginx模块

    开发Nginx模块 前面的哪些话 关于Nginx模块开发的博客资料,网上很多,很多.但是,每篇博客都只提要点,无法"step by step"照着做,对于初次接触Nginx开发的同 ...

  10. 迅为IMX6开发板支持全网通4G模块丨GPS模块丨WIFI蓝牙丨千兆以太网

    迅为i.MX6开发板丨迅为i.MX6Q开发板丨四核imx6开发板丨Cortec-A9开发板丨资料介绍: 特点: 处理器:Freescale Cortex-A9四核i.MX6Q主频1GHz 核心板配置: ...

随机推荐

  1. myeclipse启动tomcat报错cannot find a free socket for debugger

    解决办法,命令行输入netsh winsock reset,winsock是Windows网络编程接口,winsock工作在应用层,它提供与底层传输协议无关的高层数据传输编程接口 netsh wins ...

  2. 关于 MAXScript 如何获取当前max版本

    用到了 GetFileVersion 相关文档在此:http://docs.autodesk.com/3DSMAX/16/ENU/MAXScript-Help/index.html?url=files ...

  3. ES TIPS

    1,Testing Analyzers Especially when you are new to Elasticsearch, it is sometimes difficult to under ...

  4. Angular2.0-组件

    截止到目前为止,Angular2.0完成了其alpha-32版本的开发,新的版本还在迭代开发当中,这其中有个问题,就是每个版本相比于以前的版本都会有一些改动,包括API方面的修改,这会导致很多基于以前 ...

  5. 使用代理(WebProxy)爬虫

    关键代码: private Hashtable hash;//储存代理ip private WebProxy currentdaili; private int dailiExecMaxCount; ...

  6. 【python】删除1~100的素数

    def delPrime(x): if x==1: return True for y in range(2,x): if x%y==0: return True return False x1=ra ...

  7. PHP下的命令行执行 php -S localhost -t public

    PHP 的命令行模式     以下是 PHP 二进制文件(即 php.exe 程序)提供的命令行模式的选项参数,您随时可以通过 PHP -h 命令来查询这些参数. Usage: php [option ...

  8. redis shell命令大全

    redis shell命令大全(转自http://blog.mkfree.com/posts/5105432f975ad0eb7d135964) 作者:oyhk   2013-1-28 3:11:35 ...

  9. 利用反射及JDBC元数据编写通用查询方法

    元数据:描述数据的数据,ResultSetMetaData是描述ResultSet的元数据对象,从它可以得到数据集有多少了,每一列的列名... ResultSetMetaData可以通过ResultS ...

  10. win7访问ubuntu所在分区

    用ext2explore就可以了