前端界面开发之专业性

前端界面开发的专业性体现在对页面结构、样式和交互的高效处理上。良好的开发习惯包括先构建清晰的结构，再进行样式设计。使用像BEM这样的命名约定有助于组织代码，使其更易读、易维护。

借助工具如npm和Stylus等，能够提高开发效率。例如，Stylus作为CSS的预处理器，能简化样式表的编写，并支持嵌套和变量，使得代码更精简易懂。

移动端适配也是前端开发的关键部分，它要求开发者灵活运用rem、vw和vh等相对单位，以适应不同屏幕尺寸的设备。工具如flexible.js能够帮助处理不同屏幕的适配问题。

除了前端技术，了解后端技术也对前端开发者有利。了解HTTP请求、文本解析和DOM查询等后端知识可以更好地处理数据交互和页面渲染。专业的前端开发者需具备全面的技术素养，以应对不断变化的需求和挑战

先结构，后样式

BEM 使用起来

page + hd/bd/ft

npm i -g stylus

• node 是全栈开发软件。 用于js的命令行，执行js文件。用于后端开发。
• npm 是node的包管理器。
• stylus 包是用来提升css 开发速度。
• i是 install 的简称。
• -g 全局安装。
• stylus --version：安装下载的版本。

common.styl文件

stylus common.styl -o common.css（下载插件stylues）

• stylus 是css的超级集合，可以省去：；{} 从而提高效率 。
• tap 用于缩进，写 在这个文件里面一定要缩进。
• 自动编译失败 ， 重新运行编译软件 。stylus -w common.styl -o common.css(自动监听修改) 。
  监听styl文件的改变，自动编译 css 。
• stylus嵌套
  css嵌套某个类型。在 BE里写样式的时候，自动补全css前缀

stylus 的功能

• 支持变量
  晃点老板的力气

阿里的适配神器 flexible.js

• 移动端不要用px 。 它是绝对单位， rem ，vw(屏幕宽度)，vh相对单位

• 1rem = html font-size

• 不同的手机，手机大小不一样。 html的 font-size 会去自动设置， iphone 是设计稿的标准尺寸 375pt 750px

  100vw = 10rem 都这样， 适配神器设置不一样的html font-size

移动端适配手写（js文件）

• 立即执行函数[(function(){})]，不影响外界的把功能完成了
• 1rem = vw / 10 可以兼容所有手机宽度
• onresize
• dry 设计模式原则 。 代码得封装，这样可以复用
• DOM性能不太好 缓存dom元素
• script标签 src属性加载一个资源，同步，会阻塞html下载进程 一定要放在头部，放在css之前

后端素养(python)

colab.research.google.com/drive/1KaJN…

• request http请求库

# http请求库response = requests.get(url)url + get请求 响应是？服务器给你返回的财经首页html的二进制流
response.text html文本

• parse一下，BeautifulSoup(response.text,"html.parser")
  python最擅长 文本和数据解析 .csv .sql
• find_all
  dom查询 内存中找
  人生苦短，我用python （循环和if）link for link in links if "/news" in link and ".html" in link