zoukankan      html  css  js  c++  java
  • 如何把传统写法改成框架形式 es6

    每天思考的问题:
    1.什么是组件
    2.什么是插件
    3.如何把传统写法改成框架形式
    4.前端为什么要使用框架,使用框架的好处是什么?

    5640239-9c220c8e4e775c48.png
    Image.png

    http://www.zhihu.com/question/20888075

    http://cn.vuejs.org/guide/components.html#u4EC0_u4E48_u662F_u7EC4_u4EF6_uFF1F

    https://coding.net/

    阿里的服务器:
    https://ecs-buy.aliyun.com/#/prepay

    https://ecs-buy.aliyun.com/#/prepay

    https://www.aliyun.com/price/product/?spm=5176.ecsPrepay.instance.1.tq3O0R#/ecs/calculator

    5640239-d4c61ef59615dbb4.png
    Image.png

    怎么样判断上次已经有了就不需要绑定了,只需要数据就行

    5640239-a0988b9bb319e3dd.png
    Image.png

    事先准备一个对象,为空判断是否存在;存在,修改数据,不存在,在创建一个。app第一次声明后,第二次就不需要声明,在外面声明的,是全局变量。

    5640239-6cfa77418c10c4c7.png
    Image.png

    删除页面结构:
    维护项目的时候会非常困难;哪些地方有关联;
    ================================
    组件component
    定义一个元素的名字,用js去解析它;

    5640239-ee37c258855acef0.png
    Image.png
    5640239-71996fb1d8a734dc.png
    Image.png

    把组件拿到凡客的项目里面
    哪个标签上的HTML代码不会解析它:
    定义好了并不想放到全局里面,只想给自己的实例使用;
    ==========================================
    ==========================================

    require(["vue"],function(Vue){
    
                      // 定义
                      // 扩展组件
                      var MyComponent = Vue.extend({
                           data : function(){
                                return {
                                    "list" : ["a","b","c"]
                                }
                           },
                           // 定义组件展示的内容
                           template: '<div v-on:click="test_click">'+
                                '<p v-for="item in list">{{item}}</p>'+
                           '</div>',
                           methods : {
                                "test_click" : function(){
                                     alert(11111);
                                }
                           }
                      })
                      
                      // 创建根实例
                      new Vue({
                           el: '#example',
                           //定义为局部组件
                           components : {
                                'first_com' : MyComponent
                           }
                      });
                      
                      new Vue({
                           el : "#demo",
                           //定义为局部组件
                           components : {
                                'first_com' : MyComponent
                           }
                      });
                 });
    
    5640239-f767c0848b973e91.png
    Image.png

    解构赋值:
    用三个变量来接收三个元素:
    根据数组元素的下标对应赋值:

    5640239-0c3b639cad1693dd.png
    Image.png

    三个点是省略的意思,元素,数组

    5640239-5d792b66455f8ba8.png
    Image.png

    对象的解构赋值:
    es6的新语法:

    5640239-bce15b71d1b503cf.png
    Image.png

    调 用的模块只用其中的一个 方法:
    用解构赋值只取其中的一个呗:

    ===================
    循环:
    of.js
    使用数组的时候不要使用for in?

    5640239-43f508c44de66966.png
    Image.png

    打印了原型链上的奇怪的东西

    5640239-ee9bd1a8060d703e.png
    Image.png

    of循环子元素,而不是下标

    5640239-731f8ef0b5a0f52a.png
    Image.png

    set.js数组:
    保存数组的完整性,就不会添加重复的值;
    只返回元素,不返回下标

    5640239-6e18d478b959c388.png
    Image.png

    三个点,直接变成数组

    5640239-9c5dea7b85798ead.png
    Image.png

    多添加几个数

    5640239-65b4a4f5eaf120b6.png
    Image.png

    使用解构赋值,将set对象转换为array;

    set是数组,map是对象:

    5640239-14e9f4782cd1267c.png
    Image.png

    =======

    5640239-29ebfdde07c04d70.png
    Image.png
    5640239-6178c8c86dbe5a34.png
    Image.png
    5640239-4893c702239d1869.png
    Image.png
    {
      "name": "node_web",
      "version": "1.0.0",
      "description": "node wechat",
      "main": "server/app.js",
      "scripts": {
        "test": "node server/app.js"
      },
      "author": "svon@svon.org",
      "license": "ISC"
    }
    
    5640239-0546593b668f50a9.png
    Image.png

    1.搭建网站的模块:

    npm install express --save
    
    5640239-2c43eacfb6700808.png
    Image.png

    2.处理node.js里post请求的数据:

    npm install body-parser --save
    
    5640239-0adabb82f77f4160.png
    Image.png

    3.HTML的高级语法:

    npm install swig --save
    
    5640239-1bf136608415349f.png
    Image.png

    http://www.expressjs.com.cn/

    5640239-32e1d3c1c3054b95.png
    Image.png

    //导入express模块:

    const express=require("express");
    

    //实例化express:

    const app=express();
    

    请求路由地址,如果是post,就会触发:

    5640239-8f934e3c87faa115.png
    Image.png

    监听什么端口,这里就写什么端口;

    5640239-53651e207ef0206c.png
    Image.png

    三个语法:在浏览器中,在node.js中运行:

    amd cmd commonjs
    
    5640239-db74446d212b3777.png
    Image.png

    把一个目录当做一个静态文件的根目录:
    访问的路由是配置的路由地址开头的都能访问;

    app.use("/view",express.static("./views"));
    

    //监听本机端口号,运行服务

    const server
    

    如何测试:

    5640239-a8ecfea6b3ce0121.png
    Image.png
    5640239-1667b4468c26889d.png
    Image.png

    //导入express模块

    const express = require('express');
    

    //实例化express

    const app     = express();
    

    //系统模块

    const path    = require("path");
    const Swig    = require('swig');
    const swig    = new Swig.Swig();
    

    //声明get 请求,路由是/

    app.get('/',function(req,res){
           res.send('hello world');
    })
    

    //声明post 请求是路由是/abc/

    app.post("/abc/",function(req,res){
           res.send("hello post");
    });
    //app.engine('html', swig.renderFile);
    //app.set('views',"./views");
    //app.set('view engine', 'swig');
    

    //把一个目录当做一个静态文件服务的根目录
    //访问的路由是配置的路由地址开头的都能访问

    app.use("/views",express.static(path.join(__dirname,"../views")));
    

    //__dirname 系统变量,当前文件路径

    //console.log(path.join(__dirname));
    

    //监听本机端口号,运行服务

    const server = app.listen(9000,function(){
           var host = server.address().address;
           var port = server.address().port;
           console.log('http://%s:%s',host,port);
    });
    
    
    5640239-49cbf67c970d7dca.png
    Image.png
    5640239-007cfe99c6d23db0.png
    Image.png

    不用重启服务,都可以更新了

    Swig.setDefaults({
        cache : false //不缓存文件
    });
    
    5640239-bbd1bc5480f31eba.png
    Image.png

    ajax有异步,会延迟的:字符块{%header%}

    5640239-b8adbe987b1c86f1.png
    Image.png
    5640239-4985f933a09d2c89.png
    Image.png
    5640239-80e65b8f4fb53c5d.png
    Image.png

    项目重构完成

  • 相关阅读:
    极客标签编程小挑战#31:生成注册页面的显示效果
    极客Web前端开发资源大荟萃#017
    知道你们不想撸代码写PPT之可视化页面做一款炫酷的WEB PPT
    使用jQuery图表插件Sparklines来开发一个实用的网站PV(page view)实时监控应用
    javascript专业八级测试答案整理
    使用Raphaël类库实现的超酷动画技能图表
    极客编程小挑战#26:实现日期级联下拉选择框
    gulp初印象
    程序语言,编译?解释?
    发了这嘛多技术文章,今天给大家点福利吧!邻家小美女一枚,想在北京找个工作,大家来看看给出点主意。
  • 原文地址:https://www.cnblogs.com/wangting888/p/9702136.html
Copyright © 2011-2022 走看看