# FrontEndProtocol

**Repository Path**: myLoveFamily/FrontEndProtocol

## Basic Information

- **Project Name**: FrontEndProtocol
- **Description**: 学习资料收集
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2016-07-20
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#FrontEndProtocol

##Web技术文档
https://developer.mozilla.org/zh-CN/docs/Web
##提高JS代码质量，JS代码检查工具: Jshint
Jshint installation in eclipse

##JS插件集合

###多选插件

chosen select (select1, Using in Fangcheng and Qunshanghui) 
http://harvesthq.github.io/chosen/

select2 （Using in Anchuang）
https://select2.github.io/examples.html

selectize
https://github.com/brianreavis/selectize.js/

###表格插件
Bsgrid

Demo: http://bsgrid.oschina.mopaasapp.com/examples/zh-CN.html#

Source Code: https://github.com/baishui2004/jquery.bsgrid

datatables

https://editor.datatables.net/examples/inline-editing/simple

treeTable 树形异步加载的级联table

http://ludo.cubicphuse.nl/jquery-treetable/

Z-tree 可复选的树形结构

API: http://www.ztree.me/v3/api.php

Demo: http://www.ztree.me/v3/demo.php#_101

Jstree (using in nutz system menu select)

https://www.jstree.com/api/


###表单插件

ParsleyJS

http://parsleyjs.org/doc/index.html
(此插件，提供基本的form parse功能，所有form里面的)

Carousle图片轮动插件 slider
http://idangero.us/swiper/api/#.VyLuRDB942x

###表单验证插件

BootstrapValidator

http://bv.doc.javake.cn/api (支持基本的表单验证)
boostrap datepicker时间的验证需要重新获取焦点验证，
插件验证都需要失去焦点后重新验证：
例子:$('.validateCity').blur(function(e) {  //validateCity是验证对象
	 $('#flights-infoForm').bootstrapValidator('revalidateField', 'destination');  
     });//flights-infoForm是验证表单，destination是对象name
    
可以参考:http://stackoverflow.com/questions/25537003/bootstrap-datepicker-and-bootstrap-validator

###表单内编辑文本插件

UEditor（全中文）

http://ueditor.baidu.com/website/onlinedemo.html  （演示）
http://fex.baidu.com/ueditor （文档）
https://github.com/fex-team/ueditor

###上传插件

Stream（全中文）

http://www.twinkling.cn
支持不同平台（Windows, Linux, Mac, Android, iOS）下，主流浏览器（IE7+, Chrome, Firefox, Safari, 其他）的上传工作，当然在Html5标准下，还支持文件的断点续传功能，有效解决大文件的Web上传问题，支持“文件夹上传”（Chrome21+, Opera15+）


###虚拟滚动条插件

slimScroll
http://rocha.la/jQuery-slimScroll/


###日历插件集合

boostrap datepicker (Recommended)

官网：   http://bootstrap-datepicker.readthedocs.io/en/latest/

中文站： http://www.bootcss.com/p/bootstrap-datetimepicker/

My97DatePicker  / Wdatepicker

http://www.my97.net/dp/demo/index.htm

fullcalendar

http://fullcalendar.io/docs/

###JS日期处理库类

http://momentjs.cn/

Moment.js 是一个简单易用的轻量级JavaScript日期处理类库，提供了日期格式化、日期解析等功能。它支持在浏览器和NodeJS两种环境中运行。此类库能够 将给定的任意日期转换成多种不同的格式，具有强大的日期计算功能，同时也内置了能显示多样的日期形式的函数。另外，它也支持多种语言，你可以任意新增一种 新的语言包。



###Loading Plugin(CSS3, SVG, GIF)
http://loading.io/ 

###常用技术问题解决：

js:
http://stackoverflow.com/questions/tagged/javascript

css:

css-tricks.com

##项目需要注意的：

鉴于现在项目的考虑，我们暂时使用下面的前端方案：

所有的JS函数命名统一以驼峰式，函数名必须有意义。 For example: useCamelCase
所有的Class命名统一以"-"作为英文单词分隔符，Class名字必须有意义。 For example: navigation-top-position

请大家自己先去了解什么是：OOCSS、 SMACSS、 BEM，再尽量遵从这三个规范。

如果页面样式需要定制化，那就暂时写在页面里的     <style></style>     里面。
推荐在这个dywms/src/main/webapp/include/css 文件夹里再创建一个 目录，放你自己的定制化的CSS

命名统一规范：


所有涉及样式的CSS，为了防止覆盖，以自己名字的缩写作为开头，以"-"作为分割。

所有的定制化样式，都统一用class来定义，尽量不用内联样式。


特别注意：禁止修改main.css, plattee.css之类的全局样式，包括引入的插件样式。

jquery-ui-datepicker & slimscroll.js 有冲突，会导致slimscroll失效。


禁止显示引入layer.css文件(include/js/skin/layer.css) 会导致IE浏览器开发者模式不能打开，浏览器崩溃。
layer.js会自动加载layer.css，只需要引入layer.js即可。


IE下Ajax需要注意缓存刷新问题，可用url加一个随机数。


##EXtend: 

Jasmine-Javascript unit test framework

http://searls.github.io/jasmine-maven-plugin/usage.html

How to check Java Code Style

Installation Instruction: http://www.cnblogs.com/lanxuezaipiao/p/3202169.html
[CheckStyle](http://git.oschina.net/BlueFlame/FrontEndProtocol/attach_files)

Nodejs & express.js & MongoDB

要学习 nodejs的小伙伴 可以看一下这个

http://expressjs.com/en/starter/installing.html

https://github.com/expressjs/express/

How to break the GFW
https://getlantern.org/