文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

基于Strview.js项目脚手架StrviewApp是怎么搭建起来的？

2024-12-14 01:30

关注

快速上手StrviewAPP

你可以通过StrviewCLI快速初始化StrviewAPP项目，你可以这样：

全局安装。

  1. npm i strview-cli -g 

安装完成之后，你可以查看版本。

  1. strview-cli -v 

最后，就是初始化项目了， 是自定义项目名称。

 

  1. strview-cli init  

or

 

  1. strview-cli i  

这样，一个StrviewAPP项目就这么搭建完成了。

StrviewAPP项目结构

下图就是StrviewAPP项目组织结构。

下面，我将介绍每个文件及文件夹的作用。

这个是webpack配置文件夹，关于webpack的配置都在这配置。文件夹中里面有如下三个文件，分别如下：

  1. - webpack.base.js // 基础配置 
  2.  
  3. - webpack.dev.js // 开发环境配置 
  4.  
  5. - webpack.pro.js // 生产环境配置 

资源文件夹。

  1. - favicon.ico  // 网站标识 
  2. - index.html  // 模板文件 

哪些文件不需要添加到版本管理中。

Prettier 规则配置文件。

定义了这个项目所需要的各种模块，以及项目的配置信息(比如名称、版本、许可证等元数据)。

这个文件夹是StrviewAPP项目的主要文件夹，下面我们来看下这个文件夹里面到底有什么。

  1. - assets //存放静态文件 
  2. - components // 组件文件夹 
  3. - data // 公用状态文件夹 
  4. - methods // 方法文件夹 
  5. - style // 样式文件夹 
  6. - template // 模板文件夹 
  7. - App.js // 页面入口 
  8. - main.js // 项目入口文件 

Src文件夹详析

上面我们分析完了项目结构，那么下面我们将进一步分析Src文件夹中的文件构成以及它们之间如何配合的。

1. main.js

首先，我们看下main.js文件，这是项目入口文件，我们来看下文件中的内容。

  1. import { createView } from 'strview'; 
  2. import data from './data'; 
  3. import App from './App'; 
  4. import methods from './methods'; 
  5.  
  6. createView({ 
  7.   el: "#app", 
  8.   template: App, 
  9.   data 
  10. }); 
  11.  
  12. // The event is handled after the createview API 
  13. methods(); 

我们先引入了strview.js，导入createView这个API用于创建视图。那么，我们我们跳到下面看下这个API是怎么使用的。首先我们传入一个对象字面量，第一个属性是el属性，它是挂载的DOM节点。第二个属性是template属性，它是用于显示视图的模板。第三个属性是data属性，传入值为显示的数据。最后，我们看到有这么一行注释The event is handled after the createview API，意思是事件方法必须要在createViewAPI之后调用，即这里的methods();。

2. App.js

上面说到，App.js用与显示视图的模板，那么下面我们来看下。

  1. import myParagraph from './components/myParagraph'; 
  2. import card from './components/card'; 
  3. import helloTemplate from './template/helloTemplate'; 
  4. import './style/index.css'; 
  5.  
  6. const App = ` 
  7. ${helloTemplate} 
  8. "content"> 
  9.     "color-red">点击 
  10.     "txt">{a}，{b}，（a和b都改变）
     
  11.     "list"> 
  12.       
  13. {age}
    14.  
  14.       
  15. {name}
    16.  
  16.       
  17. {msg}
    18.  
  18.      
  19.     "txt">{a}，（a会改变）
     
  20.     "txt">{b}，（b会改变）
     
  21.     "{msg}"> 
  22.     
    {obj.a.b}
     
  23.     
    {arr}
     
  24.     
    {ob.name}
     
 
  • ${myParagraph} 
  • ${card}"my-card-txt">{b} 
  • ` 
  •  
  • export default App 
    •

    我们看到在代码的末尾导出了一个模板字符串，也就是常量App。我们可以看到模板字符串中都是些类似标签语句的代码。是的，这也是Strview.js的关键之处，使用含有类似标签语句的模板字符串来构建视图。

    另外，我们看到顶部除了引入样式文件，还从components文件夹引入了两个文件，template文件夹中引入了一个文件。我们从前面目录结构知道，components文件夹存放的是组件，而template文件夹存放的是模板文件。如何将导入模板与组件呈现到页面上呢?那么就需要在模板字符串中使用${}占位符。在这里你可能会感到很困惑，因为没有看到这些文件中什么内容，不过不要着急，我们慢慢来。你在这里只需要记住它们在这里占位就可以了。

    你可能会看到这种标签，你可能说没见过!这只是一个自定义组件。具体为什么这样写，我们下面到组件时再分析。但是需要说明的是，如果我们组件中需要存放内容时，我们需要在自定义组件前使用一个占位符${}，如这里的${card}，card是引入的组件。

    最后，我们在标签中都会发现类似这种{}符号，它是用来挂载数据的，也就是为了动态更新数据的。数据这块我们后面再细讲。

    3. template

    上面说到，这个文件夹是存放模板文件的，我们就一探究竟。

    1. - helloTemplate.css 
    2. - helloTemplate.js 

    helloTemplate.css样式文件没有什么好说的。

    1. .container { 
    2.   text-align: center; 
    3.   margin-top: 100px; 
    4.   line-height: 46px; 
    5. } 
    6. .container > img { 
    7.   margin-bottom: 40px; 
    8. } 

    helloTemplate.js我们来看下这个js文件。

    1. import logo from '../assets/logo.png'; 
    2. import './helloTemplate.css'; 
    3.  
    4. export default ` 
    5. "container"> 
    6.   "${logo}"/> 
    7.    
     
  • `; 
    •

    在上面代码中可以看到我们头部引入了一个图片还有一个样式文件，下面接着导出了一个模板字符串。引入的图片呢!使用${}占位符来绑定到img标签上。

    简单介绍下template文件夹之后，我们下面看下components文件夹。

    4. components

    这个文件夹的是存放组件的，组件这个概念大家可能非常熟悉，在目前Vue、React这些前端框架中都有相应的应用。

    我们先来看下这个文件夹的目录结构。

    1. - card.js 
    2. - myParagraph.js 

    可以看到，有两个js文件。

    先看myParagraph.js这个文件。

    1. customElements.define('my-paragraph', 
    2.     class extends HTMLElement { 
    3.         constructor() { 
    4.             super(); 
    5.  
    6.             const template = document.getElementById('my-paragraph'); 
    7.             const templateContent = template.content; 
    8.  
    9.             this.attachShadow({ mode: 'open' }).appendChild( 
    10.                 templateContent.cloneNode(true) 
    11.             ); 
    12.         } 
    13.     } 
    14. ); 
    15.  
    16. const myParagraph = `"my-paragraph"> 
    17.  
    18.  
    19.     name="my-text">My default text 
    20.  
    21.  
    22.  
    23. "my-text">Let's have some different text! 
    24.  
    25.  
    26. "my-text"> 
    27.     
    28. Let's have some different text!
      29.  
    29.     
    30. In a list!
      31.  
    31.  
    32. ` 
    33.  
    34. export default myParagraph 

    我们先看上一部分，customElements对象下有一个define方法。这是什么方法呢?其实这部分利用了Web Components。它是什么呢?我们在MDN这样定义它的。

    Web Components 是一套不同的技术，允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们。

    Web Components拆开来讲其实也挺复杂，我们在这里就不详细分析了。以下是MDN网址，大家可以跟着做几个例子。

    1. https://developer.mozilla.org/zh-CN/docs/Web/Web_Components 

    我们在这里是需要知道define方法第一个参数需要传一个自定义标签名，第二个参数是传入一个类。需要自定义的地方是第一个参数与第二个参数中getElementById()方法中的参数，推荐使用相同的字符串。

    调用define方法完成后，你需要在下面模板字符串中首先要使用template标签包裹起来，你可以理解成初始化。我们可以看到在template标签上有一个id选择器与上面的getElementById()方法中的参数一样。是的，这地方必须一一对应。另外，我们看到紧接着下面有一个style标签，这是定义组件样式的。最后就是组件的内容了。这里定义了一个p标签，里面是一个插槽，定义了一个name属性。并且这里有一个标签文本，这个文本内容是默认显示的，如果组件中没有内容，则这个内容就会默认显示。

    1. "my-paragraph"> 
    2.  
    3.  
    4.     name="my-text">My default text 
    5.  
    6.  

    我们接着看下面代码，它们都是用包裹起来。另外，标签里面则是普通的标签语句。但是，有一点不一样的是，这些普通的标签语句都有一个slot属性，这个属性用于当作插槽的模板。

    1.  
    2. "my-text">Let's have some different text! 
    3.  
    4.  
    5. "my-text"> 
    6.     
    7. Let's have some different text!
      8.  
    8.     
    9. In a list!
      10.  
    10.  
    11.  

     

     

    分析完了myParagraph.js文件，我们接着分析card.js文件。

    其实与myParagraph.js文件一样，只不过它是负责定义组件。在上面的App.js中，我们提到我们需要在自定义组件前使用一个占位符${}，如这里的${card}，card是引入的组件，就是指的它。

    1. customElements.define('my-card', 
    2.     class extends HTMLElement { 
    3.         constructor() { 
    4.             super(); 
    5.  
    6.             const template = document.getElementById('my-card'); 
    7.             const templateContent = template.content; 
    8.  
    9.             this.attachShadow({ mode: 'open' }).appendChild( 
    10.                 templateContent.cloneNode(true) 
    11.             ); 
    12.         } 
    13.     } 
    14. ); 
    15.  
    16. const card = `"my-card"> 
    17.  
    18.  
    19.     name="my-card-txt"> 
    20.  
    21.  
    22. ` 
    23.  
    24. export default card 

    5. data

    这个文件夹是负责存放数据状态的文件，里面主要有这两个文件。

    1. - index.js 
    2. - ob.js 

    我们先来看下index.js文件，非常简单，就是单纯的导出一个对象，另外ob.js文件也是。

    index.js

    1. import ob from './ob'; 
    2. export default { 
    3.     a: "Hello", 
    4.     b: 18, 
    5.     name: "maomin", 
    6.     age: 9, 
    7.     msg: 'Strview', 
    8.     arr: ['0'], 
    9.     obj: { 
    10.         a: { 
    11.             b: 1 
    12.         } 
    13.     }, 
    14.     ob 
    15. } 

    ob.js

    1. export default { 
    2.     name: 'kk' 
    3. } 

    6. methods

    我们在main.js文件中中提到一点。

    1. import methods from './methods'; 
    2.  
    3. // The event is handled after the createview API 
    4. methods(); 

    就是调用这个方法。那么，我们下面看下这个methods文件夹，我们知道这个文件夹的作用是提供事件处理方法的。它的目录结构如下：

    1. - index.js 
    2. - item.js 

    先来看下item.js这个文件。

    1. import { reactive, ref } from 'strview' 
    2.  
    3. function executes() { 
    4.     reactive().obj.a.b = 3; 
    5.     ref().name = 'Strview.js'; 
    6. } 
    7. function useItem() { 
    8.     ref().b = 100; 
    9. } 
    10.  
    11. export { 
    12.     executes, 
    13.     useItem 
    14. } 

    我们可以看到在头部引入了两个方法，reactive、ref这两个方法前者负责处理复杂类型的数据，如数组、嵌套对象，后者处理简单类型的数据，如单一对象、原始值。可以看到在上面代码我们通过调用reactive()、ref()这两个方法来实现数据的响应式，然后导出这两个executes()、useItem()方法。

    接着，我们来看下index.js文件。

    1. import { eventListener } from 'strview'; 
    2. import { executes, useItem } from './item'; 
    3.  
    4. const eventList = [ 
    5.     ['.color-red', 'click', executes], 
    6.     ['.list>li:nth-child(2)', 'click', useItem] 
    7. ] 
    8.  
    9. function methods() { 
    10.     for (let index = 0; index < eventList.length; index++) { 
    11.         const element = eventList[index]; 
    12.         eventListener(...element); 
    13.     } 
    14. } 
    15.  
    16. export default methods 

    我们首先在文件顶部引入了一个eventListener方法，然后接着从item文件夹引入的之前导出的两个方法。通过定义一个数组，来不断地循环调用eventListener方法。最后导出methods方法。

    7. style

    这个是存放样式的文件，不过多介绍了。

    index.css

    1. * { 
    2.   margin: 0; 
    3.   padding: 0; 
    4.   font-family: Avenir, Helvetica, Arial, sans-serif; 
    5.   -webkit-font-smoothing: antialiased; 
    6.   -moz-osx-font-smoothing: grayscale; 
    7. } 
    8. .content { 
    9.   text-align: center; 
    10.   margin-top: 50px; 
    11. } 

    8. assets

    这个文件夹存放的是静态资源，比如图片之类的资源。

    项目启动

    初始化安装依赖

    1. yarn install 

    OR

    1. npm run start 

    启动项目

    1. yarn build 

    OR

    1. npm run start 

    打包部署

    1. yarn build 

    OR

    1. npm run build 

    项目一览

    结语

    谢谢你的阅读!

     

    这个脚手架相比于现在热门的前端框架中的脚手架肯定是没有可比性，可以当做是玩具吧!也可以当做自己看源码之后自己的一些感悟吧!

     

    来源：前端历劫之路内容投诉

    免责声明：

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

      难度     813人已做
      查看

    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看

    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看

    • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

      难度     435人已做
      查看

    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机

    基于Strview.js项目脚手架StrviewApp是怎么搭建起来的？

    后端开发StrviewAppStrview.js2024-12-14
    位置：首页-资讯-后端开发
    咦！没有更多了？去看看其它编程学习网 内容吧
    首页课程
    资料下载    问答资讯