模块化编程理解
来源:互联网 发布:c语言 实现stl map 编辑:程序博客网 时间:2024/06/05 17:28
背景
工作中在做客户运营系统时,发现js和css的引用还处于最原始的状态没有更新。在上一个项目中通过对象和其中的方法实现了简单的模块化编程。但随着工程项目的庞大程度增加,简单的对象已经满足不了模块化编程的需求了,所以接触了RequireJS,了解了AMD编程规范。
什么是AMD
和AMD对应的是CMD,在nodeJS里面的依赖是基于CMD,同步加载要依赖的文件。而在浏览器中,如果同步加载需要依赖的文件会导致阻塞,造成浏览器假死,所以需要进行异步依赖。AMD-Asychronous Module Loader,支持这个规范的一个库是requirejs,可以用于优化代码。
从小了说,在做几个简单页面构成的小应用程序时,调用一个js,用不同的对象把各个方法封装起来,也是模块化的一种实现。但这更偏向业务层,涉及到其他其他第三方控件时,就会变得不好管理。
RequireJS使用
- 下载requireJS,下载页面:http://requirejs.org/docs/download.html 压缩后大约8k左右。下载的版本是1.8.3
- 在应用中引用requireJS进行开发
requirejs demo
创建一个应用程序,moduletest,工程的目录如下
|---index.html|---app.js|---lib|-------require.js|----|---modules|----|------|------math.js
在index.html中添加requirejs
data-main指出了入口js,类似于C++中的main函数。可以忽略js后缀。
data-main所在的目录是baseurl,所有的require里面的路径都是相对于它的相对路径,当然也可以在require.config里面指定baseUrl,这样path就是以指定的baseUrl为准了。
- 这个app要实现的功能是当用户输入两个数字之后,显示结果。app.js注册求和按钮事件,再调用math.add求和。
- 在math中写入以下代码:
define([],function(){ var add = function(a,b){ return parseInt(a)+ parseInt(b); }; return{ add:add }});
具体的函数实现写在define函数中,第一个参数是需要引用的模块,为赋新词强说愁,引用了jquery,然后实现了add函数,return的结果是一个对象,里面包含需要返回的方法。
6.在app中引用math,调用其方法。
require.config({ paths:{ 'jquery':"http://libs.ainemo.com/jquery/2.2.2/jquery.min"//注意path后面的js需要省略 }});
因为要用到公用的已经存放在cdn上比较稳定的jquery版本,所以在这里指定了jquery的路径。
require(['jquery','lib/modules/math'],function($,math){ $(function(){ $('#add').click(function(){ var result = math.add($('#param1').val() , $('#param2').val()); $('#addResult').html(result); }); });});
demo done.
demo 地址:https://coding.net/u/fiona2016/p/requirejs-learn/git
- 模块化编程理解
- 对模块化编程的理解
- 深入理解JavaScript系列(四): 模块化编程
- 深入理解JavaScript模块化编程:RequireJS
- 模块化编程
- 模块化编程
- 模块化编程
- 模块化编程
- 模块化编程
- 模块化编程
- 模块化编程
- 模块化编程
- 模块化编程
- 模块化的理解
- 【转】理解CSS模块化
- 前端模块化理解
- 理解JS模块化
- jscript 模块化的理解
- 妈妈的味道,从一碗北极虾荠…
- Map中数据排序
- ACM 几何基础(5)
- RHEL7.x的ISO yum源配置(与rhel5.x和rhel6.x不太一样)
- React+React-router+webpack重构一个微信小应用(预测宝宝1)(篇幅过长,分2次)
- 模块化编程理解
- echarts地图扩展文件使用geoJson格式。
- Koa, MongoDB and Mongoose
- AlarmManager 闹钟(全局定时器)
- MFC读取文件夹中的文件,并且进行排序
- 设计模式六大原则
- 安装Python中的小tips -重新启动是王道 !!!
- why use nosql?
- 树之性质