bill.kang 2018-04-02 4680浏览量
前端Front-end和后端back-end是描述进程开始和结束的通用词汇。
前端作用于采集输入信息,后端进行处理。计算机程序的界面样式,视觉呈现属于前端。
前端对于网站来说,通常是指,网站的前台部分包括网站的表现层和结构层。
因此前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,
前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,现在最新的高级版本HTML5、CSS3,以及SVG等。
__
适合小项目,不分前后端,页面由JSP、PHP等在服务端生成,浏览器负责展现。
为了降低复杂度,以后端为出发点,有了Web Server层的架构升级,比如Structs、Spring MVC等。
2005年Ajax正式提出,前端开发进入SPA(Single Page Application 单页面应用)时代。
为了降低前端开发复杂度,Backbone、EmberJS、KnockoutJS、AngularJS、React、Vue等大量前端框架涌现。
随着Node.js的兴起,为前端开发带来一种新的开发模式。
业界比较出名的实践是,阿里巴巴的中途岛计划。
统一团队成员的编码规范,便于团队协作和代码维护
开发流程的规范
目标: 职责分离、降低耦合,增强代码的可读性、维护性和测试性。
采用模块化的方式组织代码
采用组件化的编程思想,处理 UI 层
将数据层分离管理
除了备注描述,什么问题都没解决
// file app.js
var helloInLang = {
en: 'Hello world!'
};
// file hello.js
/* helloInLang defined in app.js */
function writeHello(lang) {
document.write(helloInLang[lang]);
};
命名空间模式始于2002年,使用特殊的约定命名,用于避免命名冲突和全局作用域污染。
缺点:大型项目可维护性较差,没有解决模块间依赖管理的问题。
// file app.js
var app = {};
// file greeting.js
app.helloInLang = {
en: 'Hello world!'
};
// file hello.js
app.writeHello = function (lang) {
document.write(app.helloInLang[lang]);
};
封装了变量和function,和全局的namaspace不接触,松耦合
只暴露可用public的方法,其它私有方法全部隐藏
// file app.js
var app = {};
// file greeting.js
app = (function (app) {
var _app = app || {};
_app.helloInLang = {
en: 'Hello world!'
};
return _app;
} (app));
// file hello.js
app = (function (app) {
var _app = app || {};
_app.writeHello = function (lang) {
document.write(app.helloInLang[lang]);
};
return _app;
} (app));
2009年 Angular 引入 Java 世界的依赖注入思想。
核心思想:某个模块不需要手动初始化某个依赖对象,只需要声明该依赖,并由外部框架自动实例化该对象,并传递到模块内。
// file greeting.js
angular.module('greeter', [])
.value('greeting', {
helloInLang: {
en: 'Hello world!'
},
ayHello: function(lang) {
return this.helloInLang[lang];
}
});
// file app.js
angular.module('app', ['greeter'])
.controller('GreetingController', ['$scope', 'greeting', function($scope, greeting) {
$scope.phrase = greeting.sayHello('en');
}]);
服务器端 javascript 模块化解决方案,适用于同步模块加载。
// file greeting.js
var helloInLang = {
en: 'Hello world!'
};
var sayHello = function (lang) {
return helloInLang[lang];
}
module.exports.sayHello = sayHello;
// file hello.js
var sayHello = require('./lib/greeting').sayHello;
var phrase = sayHello('en');
console.log(phrase);
浏览器端 javascript 模块化解决方案,适用于异步模块加载。
// file lib/greeting.js
define(function() {
var helloInLang = {
en: 'Hello world!'
};
return {
sayHello: function (lang) {
return helloInLang[lang];
}
};
});
// file hello.js
define(['./lib/greeting'], function(greeting) {
var phrase = greeting.sayHello('en');
document.write(phrase);
});
UMD 允许在环境中同时使用 AMD 与 CommonJS 规范。
(function(define) {
define(function () {
var helloInLang = {
en: 'Hello world!'
};
return {
sayHello: function (lang) {
return helloInLang[lang];
}
};
});
}(
typeof module === 'object' && module.exports && typeof define !== 'function' ?
function (factory) { module.exports = factory(); } :
define
));
ES2015 Modules 作为 JavaScript 官方标准,日渐成为了开发者的主流选择。
// file lib/greeting.js
const helloInLang = {
en: 'Hello world!'
};
export const greeting = {
sayHello: function (lang) {
return helloInLang[lang];
}
};
// file hello.js
import { greeting } from "./lib/greeting";
const phrase = greeting.sayHello("en");
document.write(phrase);
采用tdd的编程思想,引入单元测试
使用各种调试工具
使用前端构建工具
javascript 编译工具
开发辅助工具
使用CI集成工具
使用脚手架工具
统一公司前端技术栈,根据职责创建不同项目。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
集结各类场景实战经验,助你开发运维畅行无忧