css,js模块化开发

css模块化：

1原始模块：

base.css-header.css-footer.css-sidebar.css-forms.css-icons.css-buttons.css-dropdown.css-modals.css-layout.css-index.css-user.css-admin.css-pages.css

2预处理方式模块化：

css要想进行模块化开发可以使用sass,scss,less

sass,scss和less的区别：LESSS是基于JavaScript，所以，是在客户端处理的;Sass是基于Ruby的，然后是在服务器端处理的。关于变量在LESS和Sass中的唯一区别就是，LESS用@，Sass用$。同时还有一些作用域上的差别;scss和sass区别在于scss有花括号

编译的工具我提议使用koala，这是伟大的中华儿女开发的一款软件

这里我使用scss：

Sass能让你写出重复利用的方法,可以用逻辑语句,条件语句和循环语句。虽然Less也可以做这些事情但是Less的方式效率比较低而且不直观。Less和Sass都内置了大量的颜色处理,数学,参数列表等方便的功能。
Sass用户能够利用Compass这个非常棒的库，提供给Less用户的库虽然也多，但是远不能和Compass比,Compass定期有人维护对社会的贡献也非常大。Compass有些非常棒的功能，比如:生成动态雪碧(dynamicsprite-map ),对就浏览器有Hack功能，跨浏览器支持css3特性。
Compass也能让你添加一个第三方框架比如:Blueprint ,Foundation，Bootstrap。这意味着你可以很容易的利用你喜欢的框架不需要去处理使用多个工具带来的麻烦.

sass的调试：（必须是在开启服务器的情况下进行调试不然没有效果）
1、在chrome中输入chrome://flags/开启“开发者工具实验性功能”
2、Experiments中勾选Live SASS
3、settings->preferences->Enable CSS source maps

js模块化：

1原始模块化：

var seckill={url:{},handleSeckillKill:{},validatePhone:function(phone){},countdown:function(seckillId,nowTime,startTime,endTime){},

detail:{init:function(params){var startTime = params['startTime'];........}}}

seckill.detail.init({seckillId : seckillId,startTime : startTime, //毫秒endTime : endTime});

2使用requireJS进行模块化管理：

使用requirejs进行模块化开发非常方便，结构清晰，方便管理，因为它是别人写的一个框架js

eg：

html:<script src="js/require.js" data-main="js/main.js"></script>

main.js:

requirejs.config({paths:{jquery:"jquery-1.11.3.min"}});requirejs(['jquery','validate'],function($,validate){console.log(validate.isEqual(1,1));});

validate.js:

define(['jquery'],function($){return{isEmpty:function(){},checkLength:function(){},isEqual:function(str1, str2){return str1 === str2;}};});

使用grunt来进行管理javascript实现模块化

最终我将这上面的所有的阐述写了个demo叫frontend-maven-plugin-demo放到了http://pan.baidu.com/s/1o8bbIt0

css,js模块化开发相关推荐

Node.js模块化开发（非常详细，满满的干货）
下面是对Node.js模块化开发的整理,西洼港可以帮助到有需要的小伙伴~ 文章目录 Node.js模块化开发 JavaScript开发弊端 Node.js模块化开发模块成员导出的export方法模 ...
模块加载及第三方包：Node.js模块化开发、系统模块、第三方模块、package.json文件、Node.js中模块的加载机制、开发环境与生产环境、cookie与session
1.Node.js模块化开发 1.1 JavaScript开发弊端 JavaScript 在使用时存在两大问题,文件依赖和命名冲突. 1.2 软件中的模块化开发一个功能就是一个模块,多个模块可以组成 ...
Js模块化开发的理解
Js模块化开发的理解模块化是一个语言发展的必经之路,其能够帮助开发者拆分和组织代码,随着前端技术的发展,前端编写的代码量也越来越大,就需要对代码有很好的管理,而模块化能够帮助开发者解决命名冲突.管理 ...
Node.js模块化开发
Node.js模块化开发一.Node.js模块化开发二.系统模块 1.什么是系统模块 2.系统模块fs文件操作 3.系统模块path路径操作三.第三方模块 1.什么是第三方模块 2.获取第三方模 ...
浅谈前端JS模块化开发的概念
引子: 前端开发模块化,这个概念从我接触前端开发就一直看到,但是一直没好好的梳理这其中的概念,直到最近才感觉对这其中的概念是很陌生而熟悉.因此记此梳理里面的一些名词. 模块化: 整个web的发展越来越 ...
Node.js模块化开发||Node.js中模块化开发规范
JavaScript开发弊端 a.js b.js JavaScript在使用时存在两大问题,文件依赖和命名冲突. 生活中的模块化开发软件中的模块化开发 app.j user.一个功能就是一个模块,多 ...
Node.js 模块化开发
JavaScript在使用时存在两大问题,文件依赖和命名冲突. 文件依赖:文件之间的依赖关系,通过文件来自动维护,而不需要人工分析命名冲突:JavaScript中不同js文件,变量是完全开放的,相同 ...
html+css+js+Hbuilder开发一款安卓APP，根本不用学Android开发！
我们知道,要做一款安卓APP,咱们得先学安卓开发语言,例如java,前端后端.那么没有这些开发语言基础,咱们怎么做呢?其实现在有比较好的开发方案就是做webAPP,咱们可以用web前端知识构建安卓客户 ...
html如何在手机上实现hb,html+css+js+Hbuilder开发一款安卓APP，根本不用学Android开发！...
我碎前整要们开自近事端个广的的带近事端个广们知道,要做一款安卓APP,咱们得先学安卓开发语言,例如java,前端后端.那么没有这些开发语言基础,咱们怎么做呢?其实现在有比较好的开发方案就是做webAP ...

css,js模块化开发

css,js模块化开发相关推荐

最新文章

热门文章