热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

requirejs实战经验分享

本文不谈如下概念:1.AMDCMD;2.F2E模块化开发。是的,本文就是要指向内心,为需要使用requirejs构建中小型web应用的亲们提供参考。我们在创建项目时,一般都需要先考虑以

本文不谈如下概念:1. AMD/CMD;2. F2E模块化开发。是的,本文就是要指向内心,为需要使用requirejs构建中小型web应用的亲们提供参考。

 

我们在创建项目时,一般都需要先考虑以下几个问题,那我们就从问题入手,来陈述。

团队协作

 

项目成员一块为项目模块,功能添砖加瓦,那么最直接的手段就是分功能模块来并行开发,公共模块还能提升开发效率。这里的动作就好比是张开手臂,是开放的动作,后面的构建上线

就是一个合的动作,这样一个完美的拥抱才算是完成了。那么这里的模块,具体来说就是JS组件,我们全部采用requirejs的风格来定义,来看代码

 

// 1.标准的原生JS类定义
(function() {
  function Validation(args) {
    this.init(args);
  }
  Validation.prototype = {
    constructor: Validation,
    init: function(args) {
    }
  }

  Validation.defaults = {
  };

  if (typeof define === "function" && define.amd) {
    define(["bin/parsley"], function() {
      return Validation;
    });
  } else {
    window.Validation = Validation;
  }

})(window);


// 2.利用模拟OOP的类库来定义
(function(window, document) {
  var Dropdown = Class.extend({

    className: 'dropdown'

    /**
    * 构造函数
    * @param {Object} args 单一配置对象
    */
    init: function(args) {
    }

  });

  if (typeof define === 'function' && define.amd) {
    define(function() {
      return Dropdown;
    });
  } else {
    window.Dropdown = Dropdown;
  }

})(window, document);

 

你写一个Validation,我写一个Dropdown,你又写一个Slider,我再写一个Autocomplete,从此我们大手拉小手,再也不乱了...

 

本地调试

 

做到只需要改资源引用目录就实现切换开发与调试(未打包压缩)版本,以下是目录结构

jssrc

  bin

  lib

  widget

  effect

js

  与jssrc一致

 其中js中的目录与jssrc一致并且是由grunt中requirejs任务生成的。做好这些,只需要在程序的layout文件引用资源时,通过改变脚本资源的目录即可实现开发与调试的切换。

 

构建上线

 

使用grunt.js,在package.json中加入 "grunt-contrib-requirejs" 依赖,然后在Gruntfile.js中加入name为"requirejs"的task,代码如下

requirejs: {
      compile: {
        options: {
          appDir: 'jssrc/',
          dir: 'js/',
          baseUrl: '.',
          optimize: 'uglify2',
          // optimize: 'none', // for development
          mainConfigFile: 'jssrc/main.js',
          modules: [
            {
              name: 'common'
            },
            {
              name: 'index'
            },
            {
              name: 'house-base'
            },
            {
              name: 'effect/house-detail'
            },
            {
              name: 'collection'
            },
            {
              name: 'effect/house-photo-play'
            },
            {
              name: 'activity-base'
            },
            {
              name: 'esf-base'
            },
            {
              name: 'mfb-base'
            }
          ],
          // generateSourceMaps: true,
          // preserveLicenseComments: false,
          logLevel: 0,
          findNestedDependencies: true,
          fileExclusionRegExp: /^\./,
          inlineText: true
        }
      }
    }

关键在"modules"的节点的配置,例"common"这个,在jssrc中存在common.js这个文件,是一个模块,看定义代码

define([
  'ga',
  'widget/tooltip',
  'widget/autocomplete',
  'widget/slider',
  'effect/global',
  'bin/jquery.placeholder'
], function(
  GA,
  Tooltip,
  Autocomplete,
  Slider,
  EffectGlobal
) {}

那么我们通过grunt之后,即会在js目录中生成同名的common.js文件,此文件是将所有依赖的模块合并且压缩的结果。那么我们这里再回头看调试的实现,生产页面中引用的是js/common.js,爽死全部依赖都已正确合并到一个文件里并且压缩了。要切换成调试通过统一修改脚本目录为jssrc,则引用jssrc/common.js,如此这样,commons.js中会去拉同在jssrc中的所有依赖的模块,且都是未压缩的独立文件,哪里出个错,直接定位过去,再也不用担心找不到错误啊!~~

 


推荐阅读
  • 向QTextEdit拖放文件的方法及实现步骤
    本文介绍了在使用QTextEdit时如何实现拖放文件的功能,包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数,并结合QMimeData和QUrl等类,可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细]
  • Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • Java序列化对象传给PHP的方法及原理解析
    本文介绍了Java序列化对象传给PHP的方法及原理,包括Java对象传递的方式、序列化的方式、PHP中的序列化用法介绍、Java是否能反序列化PHP的数据、Java序列化的原理以及解决Java序列化中的问题。同时还解释了序列化的概念和作用,以及代码执行序列化所需要的权限。最后指出,序列化会将对象实例的所有字段都进行序列化,使得数据能够被表示为实例的序列化数据,但只有能够解释该格式的代码才能够确定数据的内容。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 本文介绍了如何使用Express App提供静态文件,同时提到了一些不需要使用的文件,如package.json和/.ssh/known_hosts,并解释了为什么app.get('*')无法捕获所有请求以及为什么app.use(express.static(__dirname))可能会提供不需要的文件。 ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
  • VueCLI多页分目录打包的步骤记录
    本文介绍了使用VueCLI进行多页分目录打包的步骤,包括页面目录结构、安装依赖、获取Vue CLI需要的多页对象等内容。同时还提供了自定义不同模块页面标题的方法。 ... [详细]
  • 本文详细介绍了使用C#实现Word模版打印的方案。包括添加COM引用、新建Word操作类、开启Word进程、加载模版文件等步骤。通过该方案可以实现C#对Word文档的打印功能。 ... [详细]
  • MySQL笔记_MySQL笔记1|数据库17问17答
    本文由编程笔记#小编为大家整理,主要介绍了MySQL笔记1|数据库17问17答相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 今日份分享:Flutter自定义之旋转木马
    今日份分享:Flutter自定义之旋转木马-先上图,带你回到童年时光:效果分析子布局按照圆形顺序放置且平分角度子布局旋转、支持手势滑动旋转、快速滑动抬手继续旋转、自动旋转支持X轴旋 ... [详细]
  • 第一步:PyQt4Designer设计程序界面该部分设计类同VisvalStudio内的设计,改下各部件的objectName!设计 ... [详细]
  • 注:根据Qt小神童的视频教程改编概论:利用最新的Qt5.1.1在windows下开发的一个小的时钟程序,有指针与表盘。1.Qtforwindows开发环境最新的Qt已经集 ... [详细]
  • 当我在doWork方法中运行代码时,通过单击button1,进度条按预期工作.但是,当我从其他方法(即btn2,btn3)将列表传递给doWork方法时,进度条在启动后会跳转到10 ... [详细]
author-avatar
冰weiter
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有