1.Seajs库 解决开发中的冲突依赖等问题,提供代码可维护性. SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块和css模块样式. SeaJS 就两个核心:模块定义和 模块的加载及依赖关系. 官方网站 http://seajs.org 2.seajs如何使用?   主要有以下四个步骤: ①通过script引入sea.js的库 ②把js文件变成模块  –define ③调用模块  –exports ④加载模块  –se…

一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就更别说会知道js还有面向对象,设计模式,MVC,MVVM,模块化,构建工具等等这些高大上的概念了.现在想想还真是Too young too naive.前两天某大神在群里分享他招聘前端的心得的时候就说,就是那些以为能写两个页面就可以自称前端的人拉低了行业水平.这样看来前两年我还真的扯了不少后腿呢………

前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护.打包.发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率.致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程.提高效率.减少错误率.随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部…

1.seaJs直接构建存在的问题 由于模块之间的依赖require引用的是模块名,当多个js模块被合并成一个时,会由于找不到模块名而报错 2.seaJs+grunt开发 用到的插件:grunt-cmd-transport和grunt-cmd-concat       (CMD规范) grunt-cmd-transport:提取本模块的ID和本模块所依赖的ID(数组格式),作为define函数的两个参数:define(ID,[依赖数组],function(require,exports,modul…

什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行效率低,学习成本高的问题.所以最近几年对于前端构建工具--grunt就应运而生. Grunt能做什么呢? 按任务目标大致可分为四类:   1. 文件操作型:比如合并.压缩js和css文件等(包括). 2. 预编译型:比如编译less.sass.coffeescript等. 3. 类库项目构建型:比如…

前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护.打包.发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率.致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程.提高效率.减少错误率.随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部…

前言 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得前端开发得到重视,也使得前端项目越来越复杂,然而,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,所以,进行模块化开发的重要性就不言而喻了.那么什么是模块呢? 一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功…

Js模块化开发的理解 模块化是一个语言发展的必经之路,其能够帮助开发者拆分和组织代码,随着前端技术的发展,前端编写的代码量也越来越大,就需要对代码有很好的管理,而模块化能够帮助开发者解决命名冲突.管理依赖.提高代码的可读性.代码解耦以及提高代码的复用性. 描述 模块化开发其实就是封装细节,提供使用接口,彼此之间互不影响,每个模块都是实现某一特定的功能,同时也需要避免全局变量的污染,最初通过函数实现模块,实际上是利用了函数的局部作用域来形成模块. function func1(){ //... }…

gruntJs——构建工具:代码压缩.文件合并 安装流程: 1.到nodeJs官网下载安装nodeJs(附带了npm包管理工具) 2.cmd命令行:npm install -g grunt-cli // 全局安装 npm install grunt --save-dev    //作为项目的开发依赖(devDependencies)安装 grunt -version    //查看版本号(检查是否安装成功) 文件合并: 1.在需要合并的文件同一级创建package.json配置文件(内容见gru…

gulp.js——基于流的自动化构建工具 步骤: 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm install --save-dev gulp 3. 在项目根目录下创建一个名为 gulpfile.js 的文件: var gulp = require('gulp'); gulp.task('default', function() { // 将你的默认的任务代码放在这 }); 4.…