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

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. 关于只针对ie7浏览器的css问题

    如代码: .centerDiv .search_k2{ margin-left: 18px; *margin-left: 9px; margin-top: 10px; height: 40px;} 中 ...

  2. 将Controller抛出的异常转到特定View

    <!-- 将Controller抛出的异常转到特定View --> <bean class="org.springframework.web.servlet.handler ...

  3. CI框架 CodeIgniter 伪静态 htaccess设置和Nginx伪静态方法

    众所周知,LAMP代表Linux下Apache.MySQL.PHP这种网站服务器架构:而LNMP指的是Linux下Nginx.MySQL.PHP这种网站服务器架构.LNMP一键安装包可以从网上下载使用 ...

  4. UIKIT的简介

    // // UIKIT各框架的简介 // IOS笔记 // // Created by 刘威成 on 13/12/14. // Copyright © 2015年 刘威成. All rights re ...

  5. JSBinding / Memory Management (GC)

    C# and JavaScript both have Garbage Collection (GC). They should not conflict with each other. Class ...

  6. 利用css3新增选择器制作背景切换

    之前写css3的时间都是捡项目需要的来用,没有系统的学习过,这几天好好的补了一下css3的知识,真的获益匪浅!觉得新增的那些选择器是有用至极的!今天就来所这几天的所学做一个点击标签切换背景的效果,是纯 ...

  7. Apache Shiro系列教程之二:十分钟上手Shiro

    在本教程中,我们会写一个简单的.仅仅输出一些内容命令行程序,从而对Shiro有一个大体的感觉. 一.准备工作 本教程需要Java1.5+,并且我们用Maven生成项目,当然Maven不是必须的,你也可 ...

  8. 鸟哥的linux私房菜学习

    cat /etc/shells 系统拥有的shellcat /etc/passwd 记录用户使用的shell按两次 tab 键可显示所有可执行的指令alias 查看所有命令的别名alias lm='l ...

  9. error BK1506 : cannot open file '.\Debug\????????.sbr': No such file or dire

    http://blog.csdn.net/shuilan0066/article/details/8738035 分类:            调试错误信息2013-03-29 19:08492人阅读 ...

  10. canvas draw a image

    var c = context.getContext("2d"); var cimg = new Image(); cimg.src = "img path"; ...