uu快三注册—uu快三注册 - uu快三注册,uu快三注册是最具知名度和影响力的门户网站、旅游、美食、教育、房产、长安文 化、原创镜头、魅力、韵味、时政、社会、陕西、科教、文化、娱乐、体育、健身、健康专题、政务、评论、社区、视觉、人物等频 道,拥有uu快三注册,uu快三注册人气最旺的老城根论坛社区。是看日报、晚报的好去处,每天定期发布uu快三注册,uu快三注册最新最权威的时政新闻信息平台。向世界介绍西安,展示西安,宣传西安,推广西安

好程序员web前端教程之前端模块化开发

  • 时间:
  • 浏览:2

版权声明:本文内容由互联网用户自发贡献,版权归作者所有,本社区不拥有所有权,统统 承担相关法律责任。肯能您发现本社区富含涉嫌抄袭的内容,欢迎发送邮件至:

  1. 命名冲突

  首先从俩个多 简单的习惯后后刚现在开使。

  肯能后后老是做 JavaEE 开发的缘故,在 JavaScript 开发中,我肯能习惯将项目中的有些通用功能抽象出来,形成俩个多 个的独立函数,以便于实现代码复用,如:

  function css(element, attr) { // 获取 element 元素的 attr 对应的 CSS 属性值

  // ...

  }

  function offset(element) { // 获取 element 元素在文档中的位置坐标

  // ...

  }

  并把哪些封装的函数倒入统一的 tools.js 文件中。

  肯能页面功能实现时需使用到哪些函数,则直接通过 引入即可。

  前期感觉一切都好,亲戚亲戚朋友也都其实写曾经的工具文件对开发来说很方便,直到使用不多,页面功能这麼复杂性,亲戚亲戚朋友要实现的需求本来多样。

  这时一帮人就抱怨,肯能引入了 tools.js 文件,肯能要定义俩个多 才能设置 css 属性值的函数,这麼就这麼取另外的函数名称(如 setCss )而这麼再使用 css 有些函数名称了,同样肯能要设置俩个多 元素在整个文档中的定位坐标,统统 能再使用 offset 有些函数名称,肯能那样得话,就与 tools.js 文件中已定义的函数名称冲突了。

  既然难题再次出現了,就时需外理。

  在 Java 富含俩个多 非常实用的技术——package,它将逻辑上相关的代码组织在同時 使用“包”来进行管理,这至少文件系统中的文件夹。在文件系统中,文件夹内是相对独立的俩个多 空间,不让担心俩个多 文件夹和曾经文件夹中文件命名的冲突。在“包”中也一样,可不可不都后能 外理文件命名冲突难题,肯能要在包组织组织结构再使用到包内的资源,直接通过 import 导入相关的 package 即可。类似包曾经的概念,在其它的语言(如 C#)中也称为命名空间。

  JavaScript 中并这麼提供原生的包或命名空间的支持,但可不可不都后能 使用其它的辦法 (如对象、闭包)来实现类似的效果。

  参照 Java 的辦法 ,我使用 JavaScript 中的对象来简单修改 tools.js 文件:

  var Util = {

  css : function(element, attr) {

  // ...

  },

  offset : function(element) {

  // ...

  }

  };

  曾经,当引入 tools.js 文件后,要获取 CSS 样式或获取元素的文档坐标,就通过类似 Util.css()/Util.offset() 的辦法 来实现。css 与 offset 的作用域是在对象 Util 下,再全局或是新对象中定义 css 属性是不受影响的。

  Util 有些名称也具有通用性,通常用作辅助工具定义的后后会使用到有些名称,为了体现该名称的唯一性,可不可不都后能 继续借鉴 Java 中 package 的命名规范(域名倒置):

  var com = {};

  com.github = {};

  com.github.itrainhub = {};

  com.github.itrainhub.Util = {

  css : function(element, attr) {

  // ...

  },

  offset : function(element) {

  // ...

  }

  };

  要获取 CSS 样式值,则可使用 com.github.itrainhub.Util.css() 辦法 。但曾经的写法增加了记忆难度,YUI 中关于有些点有比较好的外理方案,先按下未必不表。

  使用对象的写法可外理命名冲突难题,但有些写法也会暴露对象的所有成员,使对象组织组织结构具体情况可不可不都后能 在对象组织组织结构被改写。比如在对象组织组织结构处在计数器:

  var Util = {

  _count : 0

  }

  在对象组织组织结构可不可不都后能 通过 Util._count = 18; 修改该计数器的值,这是不安全的。

  像计数器曾经的变量,通常肯能是作为对象的私有成员处在,不希望在对象组织组织结构还能继续修改其值,这时,可不可不都后能 使用 IIFE(立即执行函数)来设计:

  var Util = (function(){

  var _count = 0;

  function _css(element, attr) {

  // ...

  }

  function _offset(element) {

  // ...

  }

  return {

  css : _css,

  offset : _offset

  }

  })();

  曾经,在组织组织结构就这麼再直接修改 _count 的值了。

  通过命名空间,的确可不可不都后能 外理命名冲突的难题,亲戚亲戚朋友可不可不都后能 暂时松一口气了。

  2. 文件依赖

  接着 tools.js 继续开发。

  在 tools.js 的基础上,可不可不都后能 开发出有些 UI 层通用的组件,如放大镜、轮播图类似的,曾经各个项目中要使用哪些功能的后后就不让重复造轮子了。

  通常具体情况下,每个 UI 组件前会以独立的 js 文件处在的,比如放大镜,可不可不都后能 将它倒入俩个多 zoom.js 的文件中,当要使用到放大镜组件时,通过 引入即可。

  但统统 后后,在使用 zoom.js 后后忘记了引入 tools.js,则使用 zoom.js 就会报错,无法保证它的正常执行。

  zoom.js 的正常执行依赖于 tools.js 的使用,上述的难题都还是比较容易外理的,但随着团队这麼大,业务需求这麼复杂性,项目中组件间的依赖关系也会变得这麼复杂性。比如:

  某一天,我扩充了 zoom.js 组件的功能,但除了使用到 tools.js 外,还使用到曾经工具 js 组件:helper.js。肯能项目中已有 N 个地方后后使用到了 zoom.js 组件,我后后只好全局搜索每个引用 zoom.js 的地方,加上上对 helper.js 的引用。

  再想想,随着项目推进,亲戚亲戚朋友会继续修改 tools.js,加上更多的组件 component_1.js、component_2.js……有些组件中只使用到 tools.js,有些只使用到 helper.js,而有些组件既使用到了 tools.js 又使用到了 helper.js。这麼关于组件间依赖关系的维护,工作量可想而知,肯能以人肉的辦法 来保证依赖关系的维护,果然就要崩溃掉了。

  为哪些维护组件间的依赖关系这麼费神呢,肯能 JavaScript 中天生缺少了引入其它 js 文件的语法。在 Java 中可不可不都后能 通过 import 引入依赖组件,在 CSS 中前会 @import 命令去引入其它的 CSS 文件,而 js 中却这麼自动管理依赖。

  除了文件间的依赖关系维护不便外,肯能在页面中引入的组件非常多,亲戚亲戚朋友还得保证引用组件的路径及先后顺序这麼出错,一旦出错,又得花时间查找错误,可想而知工作量是很可观了,加上上组件引入不多,又是以同步的辦法 加载各组件,也肯能原因分析浏览器假死的难题。

  要外理哪些难题,模块化开发的价值就体现出来了。

  3. 模块化开发

  3.1 模块化

  所谓模块化,统统 把俩个多 相对独立的功能,单独形成俩个多 文件,可输入指定依赖、输出指定的函数,供外界调用,其它前会组织组织结构隐藏实现细节。曾经即可方便不同的项目重复使用,统统 会对项目造成额外的影响。

  前端使用模块化载发主要的作用是:

  • 异步加载 js,外理浏览器假死

  • 管理模块间依赖关系,便于模块的维护

  有了模块,亲戚亲戚朋友就可不可不都后能 更方便地使用别人的代码,我后后哪些功能,就加载哪些模块。

  但要使用模块的前提,是必然要形成可遵循的开发规范,使得开发者和使用者前会据可寻,统统 你在等你的写法,我有我的写法,亲戚亲戚朋友没辦法 统一,也就这麼很好的互用了。

  目前通用的规范是,服务器端使用 CommonJS 规范,客户端使用 AMD/CMD 规范。

  3.2 CommonJS

  CommonJS 规范再次出現是在 4009 年,Node.js 统统 该规范的实现。CommonJS 规范中是曾经加载模块的:

  var gulp = require("gulp");

  gulp.task(/ 任务 /);

  模块的加载是同步的,有些写法适合服务器端,肯能在服务器读取的模块前会在本地磁盘,加载速度太快,可同步加载完成。统统 肯能在客户端浏览器中,肯能模块是倒入服务器端的,模块加载取决于网络环境,以同步的辦法 加载模块时有肯能再次出現“假死”具体情况。

  今天我主要介绍针对浏览器编程,不针对 Node.js 内容,统统 在此关于 CommonJS 规范就不作深究,知道 require() 用于加载模块即可。

  3.3 AMD

  肯能在浏览器端,模块使用同步辦法 加载肯能再次出現假死,这麼亲戚亲戚朋友采用异步加载的辦法 来实现模块加载,这就诞生了 AMD 的规范。

  AMD 即 Asynchronous Module Definition 的简称,表示“异步模块定义”的意思。AMD 规范:https://github.com/amdjs/amdjs-api/wiki/AMD。

  AMD 采用异步辦法 加载模块,模块的加载不影响它上边得话的运行。所有依赖所加载模块的得话,都被定义在俩个多 回调函数中,等到模块加载完毕后,回调函数才会执行。

  AMD 也采用 require() 来加载模块,语法型态为:

  require([module], callback);

  module 是数组参数,表示所加载模块的名称;callback 是回调函数参数,所有模块加载完毕后执行该回调函数。如:

  require(["jquery"], function($){

  $("#box").text("test");

  });

  3.4 CMD

  CMD 即 Common Module Definition 的简称,表示“通用模块定义”的意思。CMD 规范:https://github.com/cmdjs/specification/blob/master/draft/module.md。

  CMD 规范明确了模块的基本书写格式和基本交互规则,该规范是在国内发展出来的,由玉伯在推广 SeaJS 过程中规范产出的。

  SeaJS 实现了 CMD 规范。SeaJS 要外理的难题和 RequireJS 一样,只不过在模块定义辦法 和模块加载(运行、解析)时机上有所不同。

  3.5 AMD 与 CMD 的区别

  AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

  CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

  二者主要区别如下:

  1 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。

  2 CMD 推崇依赖就近,AMD 推崇依赖前置。

  3 AMD 的 API 默认是俩个多 当多个用,CMD 的 API 严格区分,推崇职责单一。

  当然还有有些其它细节上的区别,具体看规范的定义就好。

  本文由好程序员web前端培训学员总结。

进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。