模块化开发 sass less

模块化开发

模块的基本写法

普通方法
```
function a() {
            console.log("a");
 }
 function b() {
            console.log("b");
 }
a();
b();
```
- 优点：直接调用
  缺点：变量可能会出现重复造成的污染，并且无法进行结构性分类

对象的写法

var obj={
           _a:false,
           a:function () {
               console.log("a");
           },
           b:function () {
             console.log("b");
           }
 };
obj.a();
obj.b();
obj._a=3;

优点：变量不会被直接污染，并且易于分类描述内容
缺点：会暴露所有成员，内部状态可以被外部改写。

立即执行函数

var obj=(function () {
            var _num=3;
            return{
                a:function () {
                    console.log(a);
                },
                set num(value){
                    _num=value;
                },
                get num(){
                    return _num;
                }
            }
      })();
obj.num=5;
console.log(obj.num)//5;
console.log(obj._num)//undefined
obj.a();//a

优点：外部代码无法读取到里面的_num变量，保证了变量不被污染

基本上这种就是模块的写法了，但是单纯的这样描述仍然不算完美，因此我们在其基础上进行了一下的修改

放大模式

var module=(function () {
              return {
                  a:1,
                  b:2,
                  c:function () {
                      
                  }
              }
        })();
        module=(function (mode) {
            mode.d=10;
           return mode;
        })(module);

宽放大模式

var module=(function () {
              return {
                  a:1,
                  b:2,
                  c:function () {
                      
                  }
              }
        })();
 module=(function (mode) {
            mode.d=10;
            return mode;
        })(module || {});
        console.log(module);

模块化规范

commanJS规范

module.exports=obj导出一个
exports.obj=obj；导出多个
针对服务端
在CommonJS中，有一个全局性方法require()，用于加载模块。

var math = require('math');

　var math = require('math');
　　math.add(2,3); // 5

注意此处是同步

node路由的配置

module.exports导出方法或者对象

function a(res) {
    res.write("a");
    res.end();
}
module.exports=a;

function b(res) {
    res.write("b");
    res.end();
}
module.exports=b;

var a=require("./a");
var b=require("./b");
var route={a:a,b:b};
var server=require("./server");
server.start(route);

var http=require("http");
var queryStr=require("querystring");
var server;
var route;
function start(_route) {
    route=_route;
    server=http.createServer(createServer);
    server.listen(3005,"10.9.25.176",function () {
            console.log("开启服务");
    })
}
function createServer(req,res) {
    req.on("data",function (_data) {

    });
    req.on("end",function () {
        console.log(req.url);
        var obj=queryStr.parse(req.url.split("?")[1]);
        res.writeHeader(200,{"content-type":"text/html","Access-Control-Allow-Origin":"*"});
        if(Number(obj.type)===1){
            route.a(res);
        }else if(Number(obj.type)===2){
            route.b(res);
        }
    })
}
exports.start=start;

路由器路线route

一个服务器，多个接口
ES5需要借助浏览器

AMD规范

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。
配置路径 paths baseURL 非本地路径
模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。

无依赖模块规范

define(function () {
    function add(x,y) {
        return x+y;
    }
    function product(x,y) {
        return x*y;
    }
    return{
        add:add,
        product:product
    }
});

这里我们定义了一个加法和一个乘法的方法，return是返回的方法，这两个方法都被卸载一个固定的模块中。等待被加载调用

有依赖模块规范

有依赖表示，该模块中的方法需要用到别的模块，必须依赖于别的模块被加载调用时。
define(['myLib'], function(myLib){
　　　　function foo(){
　　　　　　myLib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

例如这里我们需要依赖于mylib这个模块，定义的时候我们就需要第一个参数以数组的形式写入需要加载的前提模块，后面的这个方法是表示加载完成mylib这个模块后回调的方法，这时候再写明需要定义的模块就好了。

- 在这里插入图片描述

- 在这里插入图片描述
自执行函数

不能直接返回函数，只能返回对象。

模块加载方式

a.js

define((function () {
    return {
        a:1,
        b:2,
        c:function () {
            console.log(this.a);
        }
    }
})());

main.js

require(["a"],function (obj) {
    obj.c();
});

html

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

模块的加载

为什么我们需要模块加载

加载require，因为是异步进行，因此需要设置async是true，但是ie不支持这个属性，因此需要加上defer，这是ie支持的异步属性。

统一当前下路径

require.config({
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});

使用require下的config方法加载配置内容，注意：该内容必须写在主模块的顶部。

这个对象的paths属性指定各个模块的加载路径。

各自不同的路径

　require.config({
　　　　paths: {
　　　　　　"jquery": "lib/jquery.min",
　　　　　　"underscore": "lib/underscore.min",
　　　　　　"backbone": "lib/backbone.min"
　　　　}
　　});

如果这些模块在其他目录，比如js/lib目录，则有两种写法。需要逐一指定路径

基路径

　require.config({
　　　　baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});

当多个内容基于一个路径下，我们不需要逐一写这些路径，增加baseUrl值是该基路径就可以了。

非本地路径

如果某个模块在另一台主机上，也可以直接指定它的网址，比如：

require.config({
　　　　paths: {
　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　　　}
　　});

sass

Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能
在网页里不能直接用
安装
- sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby
- 安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。
- gem install sass
- gem install compass
写代码的地方
$变量
路径
监听

&父选择器

span{
   color: red;
  &:hover{
    color: blue;
  nav +&hover{
    color:yellow//兄弟元素
  }
}

这里的&就是span自身这个选择器给它自己加了hover

scss

Scss 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于Sass.
scss转sass
把b文件导入

混合器

函数

继承

.div0
{
  $r:100px;
  width: $r;
  height: $r;
  border-radius: $r/2;
}

div{
  div{
    @extend .div0;
  }
}
//这里使用@extend 继承了类div0的样式

列表循环

less

下载less
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wvXiTgak-1597757353285)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20200818205058382.png)]先引入less再引入js
- 函数
- 继承
  - ```
  .div0
  {
    $r:100px;
    width: $r;
    height: $r;
    border-radius: $r/2;
  }
  
  div{
    div{
      @extend .div0;
    }
  }
  //这里使用@extend 继承了类div0的样式
```
列表循环

less

下载less
先引入less再引入js

模块化开发 sass less

模块化开发

模块的基本写法

模块化规范

commanJS规范

AMD规范

模块加载方式

模块的加载

sass

scss

less

less

猜你喜欢