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

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. cocos2d 中显示系统时间

    用到的两个方法先贴上 这个是时间回调 每分钟回去调用一次时间设置方法 //定时更新状态栏上的时间 void MGameScene::update(float dt) { ; fpassedTime + ...

  2. bash的操作环境[转]

          Bash Shell 的操作环境: 是否记得我们登陆主机的时候,屏幕上头会有一些说明文字,告知我们的 Linux 版本啊什么的, 还有,登陆的时候我们还可以给予用户一些信息或者欢迎文字呢. ...

  3. 【其它】 MathJax - 网页中显示数学公式的终极武器

    最近在学习一些数学课程.但时间一长,发现很多东西又都忘了.而且过程中的很多心得没有留下记录,觉得挺可惜的.所以决定开个博客来记录一些东西,也希望能同数学爱好者们一起学习. 但写数学博客首先得解决显示数 ...

  4. IntelliJ IDEA15导入jar包

    在IDEA中导入jar包和eclipse中是不一样的,那么现在我们就来看看在IDEA中如何导入jar包. 1.点击"File"-->"Project Structu ...

  5. [Spring MVC] - Annotation验证

    使用Spring MVC的Annotation验证可以直接对view model的简单数据验证,注意,这里是简单的,如果model的数据验证需要有一些比较复杂的业务逻辑性在里头,只是使用annotat ...

  6. UML精粹5 - 状态图,活动图,通信图,组合结构,组件图,协作,交互概述图,时间图

    状态机图state machine diagram 下面是状态图的一个例子(一个城堡中的秘密保险箱的控制面板). 转换transition包括3个部分:trigger-signature [guard ...

  7. Nginx+Nodejs搭建图片服务器

    图片上传请求由Node处理,图片访问请求由Nginx处理. 1.Nginx配置 #user nobody; worker_processes 1; #error_log logs/error.log; ...

  8. 21. Clone Graph

    Clone Graph Clone an undirected graph. Each node in the graph contains a label and a list of its nei ...

  9. java变量的作用域

    1.可分为成员变量和局部变量 两者的作用域不同:局部变量的作用域仅限于定义它的方法,方法外部无法访问,成员变量的作用域在整个类内部都可以访问如果访问权限允许的话,类外部也可以使用 初始值不同:对于成员 ...

  10. JavaScript笔记基础篇(一)

    一. 常用正则表达式汇总以及部分问题解决方案 正则匹配: var str = "This is my test"; var test = new RegExp("test ...